feat: change links to login / register pages

src/i18n/lang/en.json

@@ -54,7 +54,9 @@
       "usernameRequired": "Please provide a username.",
       "passwordRequired": "Please provide a password.",
       "showPassword": "Show the password",
-      "hidePassword": "Hide the password"
+      "hidePassword": "Hide the password",
+      "noAccountYet": "Don't have an account yet?",
+      "alreadyHaveAnAccount": "Already have an account?"
     },
     "settings": {
       "title": "Settings",

src/views/user/Login.vue

@@ -83,26 +83,24 @@
 				</div>
 			</div>
 
-			<div class="field is-grouped login-buttons">
-				<div class="control is-expanded">
-					<x-button
-						@click="submit"
-						:loading="loading"
-						tabindex="4"
-						:disabled="!allFieldsValid"
-					>
-						{{ $t('user.auth.login') }}
-					</x-button>
-					<x-button
-						:to="{ name: 'user.register' }"
-						v-if="registrationEnabled"
-						type="secondary"
-						tabindex="5"
-					>
-						{{ $t('user.auth.createAccount') }}
-					</x-button>
-				</div>
-			</div>
+			<x-button
+				@click="submit"
+				:loading="loading"
+				tabindex="4"
+				:disabled="!allFieldsValid"
+			>
+				{{ $t('user.auth.login') }}
+			</x-button>
+			<p class="mt-2" v-if="registrationEnabled">
+				{{ $t('user.auth.noAccountYet') }}
+				<router-link
+					:to="{ name: 'user.register' }"
+					type="secondary"
+					tabindex="5"
+				>
+					{{ $t('user.auth.createAccount') }}
+				</router-link>
+			</p>
 		</form>
 
 		<div
@@ -263,16 +261,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.login-buttons {
-	@media screen and (max-width: 450px) {
-		flex-direction: column;
-
-		.control:first-child {
-			margin-bottom: 1rem;
-		}
-	}
-}
-
 .button {
 	margin: 0 0.4rem 0 0;
 }

src/views/user/Register.vue

@@ -60,7 +60,7 @@
 						@focusout="validatePassword"
 					/>
 					<a
-						@click="togglePasswordFieldType" 
+						@click="togglePasswordFieldType"
 						class="password-field-type-toggle"
 						aria-label="passwordFieldType === 'password' ? $t('user.auth.showPassword') : $t('user.auth.hidePassword')"
 						v-tooltip="passwordFieldType === 'password' ? $t('user.auth.showPassword') : $t('user.auth.hidePassword')">
@@ -72,22 +72,21 @@
 				</p>
 			</div>
 
-			<div class="field is-grouped">
-				<div class="control">
-					<x-button
-						:loading="loading"
-						id="register-submit"
-						@click="submit"
-						class="mr-2"
-						:disabled="!everythingValid"
-					>
-						{{ $t('user.auth.createAccount') }}
-					</x-button>
-					<x-button :to="{ name: 'user.login' }" type="secondary">
-						{{ $t('user.auth.login') }}
-					</x-button>
-				</div>
-			</div>
+			<x-button
+				:loading="loading"
+				id="register-submit"
+				@click="submit"
+				class="mr-2"
+				:disabled="!everythingValid"
+			>
+				{{ $t('user.auth.createAccount') }}
+			</x-button>
+			<p class="mt-2">
+				{{ $t('user.auth.alreadyHaveAnAccount') }}
+				<router-link :to="{ name: 'user.login' }">
+					{{ $t('user.auth.login') }}
+				</router-link>
+			</p>
 		</form>
 	</div>
 </template>