sign in

src/layouts/DefaultLayout.vue

@@ -95,7 +95,7 @@ const goToSettings = () => {
           <span>v{{ version }}</span>
           <v-divider class="mx-2" vertical />
 
-          <project-menu />
+          <project-menu v-if="session.data" />
         </div>
       </v-app-bar-title>
 

src/views/users/SignInView.vue

@@ -2,8 +2,10 @@
 import { reactive } from 'vue'
 import { authClient } from '@/lib/auth-client.js'
 
+const REMEMBERED_EMAIL_KEY = 'rememberedEmail'
+
 const signInData = reactive({
-  email: 'vadim.olonin@gmail.com',
+  email: localStorage.getItem(REMEMBERED_EMAIL_KEY) ?? '',
   password: '',
   rememberMe: true,
   callbackURL: 'https://madsky.ru',
@@ -17,6 +19,14 @@ const signIn = async () => {
     callbackURL: '/',
   })
 
+  if (data) {
+    if (signInData.rememberMe) {
+      localStorage.setItem(REMEMBERED_EMAIL_KEY, signInData.email)
+    } else {
+      localStorage.removeItem(REMEMBERED_EMAIL_KEY)
+    }
+  }
+
   console.log(data)
   console.log(error)
 }
@@ -24,16 +34,16 @@ const signIn = async () => {
 
 <template>
   <v-row>
-    <v-col cols="4" offset="4">
+    <v-col cols="12" md="6" sm="8" offset-sm="2" offset-md="3" offset="0">
       <div class="d-flex flex-column ga-2">
         <div class="text-uppercase">sign in</div>
-        <v-text-field prepend-inner-icon="mdi-email" v-model="signInData.email" />
+        <v-text-field prepend-inner-icon="mdi-email" placeholder="email" v-model="signInData.email" />
-        <v-text-field prepend-inner-icon="mdi-lock" v-model="signInData.password" />
+        <v-text-field prepend-inner-icon="mdi-lock" placeholder="password" v-model="signInData.password" />
         <div class="d-flex ga-2 align-center">
           <v-switch color="info" v-model="signInData.rememberMe" label="Remember me" />
           <v-spacer />
           <div>
-            <v-btn @click="signIn">login</v-btn>
+            <v-btn prepend-icon="mdi-login" density="comfortable" color="primary" @click="signIn">SIGN IN</v-btn>
           </div>
         </div>
       </div>