auth

src/components/SignInEmail.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { authClient } from '@/lib/auth-client.js'
+
+const REMEMBERED_EMAIL_KEY = 'rememberedEmail'
+
+const signInData = reactive({
+  email: localStorage.getItem(REMEMBERED_EMAIL_KEY) ?? '',
+  password: '',
+  rememberMe: true,
+  callbackURL: 'https://madsky.ru',
+})
+
+const signIn = async () => {
+  const { data, error } = await authClient.signIn.email({
+    email: signInData.email,
+    password: signInData.password,
+    rememberMe: signInData.rememberMe,
+    callbackURL: '/',
+  })
+
+  if (data) {
+    if (signInData.rememberMe) {
+      localStorage.setItem(REMEMBERED_EMAIL_KEY, signInData.email)
+    } else {
+      localStorage.removeItem(REMEMBERED_EMAIL_KEY)
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="d-flex flex-column ga-2">
+    <div class="text-uppercase">sign in</div>
+    <v-text-field prepend-inner-icon="mdi-email" placeholder="E-mail" v-model="signInData.email" />
+    <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 prepend-icon="mdi-login" density="comfortable" color="primary" @click="signIn">SIGN IN</v-btn>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>

src/components/SignInOtp.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { reactive, ref, watch } from 'vue'
+import { authClient } from '@/lib/auth-client.js'
+import { useRouter } from 'vue-router'
+
+const REMEMBERED_EMAIL_KEY = 'rememberedEmail'
+const router = useRouter()
+
+const otpError = ref('')
+const signIn = reactive({
+  email: localStorage.getItem(REMEMBERED_EMAIL_KEY) ?? '',
+  OTP: '',
+  rememberMe: true,
+  showOTP: false,
+})
+
+const sendOTP = async () => {
+  const { data, error } = await authClient.emailOtp.sendVerificationOtp({
+    email: signIn.email,
+    type: 'sign-in',
+  })
+
+  if (data?.success) {
+    if (signIn.rememberMe) localStorage.setItem(REMEMBERED_EMAIL_KEY, signIn.email)
+    signIn.showOTP = true
+    otpError.value = ''
+  }
+
+  if (error) {
+    localStorage.removeItem(REMEMBERED_EMAIL_KEY)
+  }
+}
+
+watch(
+  () => signIn.OTP,
+  (val) => {
+    if (val.length >= 1) otpError.value = ''
+  },
+)
+
+const checkOTP = async () => {
+  const { data, error } = await authClient.signIn.emailOtp({
+    email: signIn.email,
+    otp: signIn.OTP,
+  })
+  if (data) router.push('/')
+  if (error) {
+    if (error.status === 400 && error.message) otpError.value = error.message
+    if (error.status === 403 && error.message) {
+      otpError.value = error.message
+      signIn.showOTP = false
+    }
+    signIn.OTP = ''
+  }
+}
+</script>
+
+<template>
+  <div class="d-flex flex-column ga-2">
+    <div class="d-flex ga-2 align-center justify-space-between">
+      <div class="text-uppercase">Sign In</div>
+      <v-chip v-if="otpError" size="small" variant="flat" color="error" density="compact">{{ otpError }}</v-chip>
+    </div>
+    <v-text-field prepend-inner-icon="mdi-email" density="comfortable" placeholder="E-mail" v-model="signIn.email" />
+    <div v-if="signIn.showOTP">
+      <v-otp-input density="comfortable" autofocus pattern="numeric" v-model="signIn.OTP" @finish="checkOTP" />
+      <div class="d-flex ga-1 justify-end">
+        <v-btn prepend-icon="mdi-autorenew" density="comfortable" text="Resend Code" @click="sendOTP" />
+      </div>
+    </div>
+    <div class="d-flex ga-1 justify-end" v-else>
+      <v-btn prepend-icon="mdi-email-fast-outline" density="comfortable" @click="sendOTP" text="Send Code" />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>