updated login form in settings

src/components/pages/Settings.vue

@@ -2,6 +2,9 @@
 	<div class="fixed-footer">
 		<h1 class="mb-8 text-5xl">{{ $t('settings.title') }}</h1>
 
+		<div class="settings-group">
+			<h3 class="settings-group__header"><i class="material-icons">person</i>{{ $t('settings.login.title') }}</h3>
+
 			<div v-if="isLoggedIn" id="logged_in_info" ref="loggedInInfo">
 				<img
 					id="settings_picture"
@@ -10,7 +13,7 @@
 					alt="Profile Picture"
 					class="w-32 h-32 rounded-full"
 				/>
-
+				<div class="user_info">
 					<i18n path="settings.login.loggedIn" tag="p">
 						<template #username>
 							<strong id="settings_username" ref="username">{{ user.name || 'not logged' }}</strong>
@@ -18,10 +21,10 @@
 					</i18n>
 					<p>{{userLicense}} | {{user.country}}</p>
 
-			<button class="btn btn-primary" @click="logout">
+					<button class="btn btn-primary mt-3" @click="logout">
 						{{ $t('settings.login.logout') }}
 					</button>
-
+				</div>
 				<select v-if="accounts.length > 1" id="family_account" v-model="accountNum" @change="changeAccount">
 					<option v-for="(account, i) in accounts" :key="account" :value="i.toString()">
 						{{ account.name }}
@@ -29,9 +32,24 @@
 				</select>
 			</div>
 
-		<div class="settings-group">
-			<h3 class="settings-group__header"><i class="material-icons">person</i>{{ $t('settings.login.title') }}</h3>
+			<div v-else>
+				<form ref="loginWithCredentialsForm" @submit.prevent="loginWithCredentials">
+					<label>
+						<span>{{ $t('settings.loginWithCredentials.email') }}</span>
+						<input type="text" name="email" placeholder="email@example.com" class="mb-6"/>
+					</label>
+					<label>
+						<span>{{ $t('settings.loginWithCredentials.password') }}</span>
+						<input type="password" name="password" placeholder="●●●●●●●●" class="mb-6"/>
+					</label>
+					<button class="btn btn-primary login-button" type="submit">{{ $t('settings.loginWithCredentials.login') }}</button>
+				</form>
+			</div>
 
+			<BaseAccordion class="my-5 space-y-5">
+				<template #title>
+					<span>{{ $t('settings.login.arl.title') }}</span>
+				</template>
 				<div class="my-5 space-y-5">
 					<div class="flex items-center">
 						<input
@@ -51,36 +69,11 @@
 						{{ $t('settings.login.arl.question') }}
 					</RouterLink>
 
-				<!--
-				Uncomment when implemented
-				<a v-if="clientMode" class="block" href="#" @click="appLogin">
-					{{ $t('settings.login.login') }}
-				</a>
-				-->
-
 					<button class="btn btn-primary" style="width: 100%" @click="loginButton">
 						{{ $t('settings.login.arl.update') }}
 					</button>
 				</div>
-		</div>
-
-		<div v-if="!isLoggedIn" class="settings-group">
-			<h3 class="settings-group__header">
-				<i class="material-icons">person</i>{{ $t('settings.loginWithCredentials.title') }}
-			</h3>
-
-			<form ref="loginWithCredentialsForm" class="my-5 space-y-5" @submit.prevent="loginWithCredentials">
-				<label>
-					<span>{{ $t('settings.loginWithCredentials.email') }}</span>
-					<input type="text" name="email" />
-				</label>
-				<label>
-					<span>{{ $t('settings.loginWithCredentials.password') }}</span>
-					<input type="password" name="password" />
-				</label>
-
-				<button class="btn btn-primary" type="submit">{{ $t('settings.loginWithCredentials.login') }}</button>
-			</form>
+			</BaseAccordion>
 		</div>
 
 		<div class="settings-group">
@@ -1007,6 +1000,8 @@ export default {
 			const { email } = fromLoginForm('email')
 			const { password } = fromLoginForm('password')
 
+			if (!email || !password) return
+
 			toast(this.$t('toasts.loggingIn'), 'loading', false, 'login-toast')
 
 			const { accessToken, arl } = await postToServer('loginWithCredentials', {
@@ -1017,6 +1012,7 @@ export default {
 
 			if (accessToken !== this.accessToken) this.dispatchAccessTocken({ accessToken })
 			if (arl) this.login(arl)
+			else toast(this.$t('toasts.loginFailed'), 'close', true, 'login-toast')
 		},
 		appLogin() {
 			window.api.send('applogin')
@@ -1075,11 +1071,21 @@ export default {
 
 <style lang="scss" scoped>
 #logged_in_info {
-	display: flex;
+	display: grid;
   align-items: center;
   flex-direction: column;
-	justify-content: space-evenly;
-	height: 250px;
+  justify-content: center;
+  grid-template-columns: 128px auto;
+  grid-template-rows: auto auto;
+}
+
+#logged_in_info .user_info {
+	padding-left: 24px;
+}
+
+#family_account {
+	margin-top: 24px;
+	grid-column: 1 / span 2;
 }
 
 .locale-flag {
@@ -1166,4 +1172,12 @@ export default {
 		margin-bottom: 0.5rem;
 	}
 }
+
+.login-button {
+	display: block;
+  margin-left: auto;
+	padding-left: 24px;
+	padding-right: 24px;
+	margin-top: 0px;
+}
 </style>

src/lang/en.js

@@ -222,6 +222,7 @@ const en = {
 			title: 'Login',
 			loggedIn: 'You are logged in as {username}',
 			arl: {
+				title: 'Use ARL instead',
 				question: 'How do I get my own ARL?',
 				update: 'Update ARL'
 			},