From 55d67cf11861197b732c12a10b092e9273fe8d9a Mon Sep 17 00:00:00 2001
From: Sergey Krylov <ksv741@mail.ru>
Date: Thu, 13 Feb 2025 05:21:49 +0300
Subject: [PATCH] feat: add sign in page

---
 src/pages/SignIn.vue | 46 +++++++++++++++++++++++++
 src/pages/SignUp.vue |  8 ++---
 src/router/index.ts  |  5 +++
 src/store/auth.ts    | 82 ++++++++++++++++++++++++++------------------
 4 files changed, 104 insertions(+), 37 deletions(-)
 create mode 100644 src/pages/SignIn.vue

diff --git a/src/pages/SignIn.vue b/src/pages/SignIn.vue
new file mode 100644
index 0000000..07fe299
--- /dev/null
+++ b/src/pages/SignIn.vue
@@ -0,0 +1,46 @@
+<script setup>
+  import { Button, InputText, Message } from 'primevue';
+  import { ref } from 'vue';
+  import { useAuthStore } from '@/store/auth';
+  import Loader from '@/components/Loader.vue';
+
+  const authStore = useAuthStore()
+
+  const email = ref('')
+  const password = ref('')
+
+  const signin = async () => {
+    await authStore.auth('signIn',{ email: email.value, password: password.value })
+  }
+
+</script>
+
+<template>
+  <h2>Sign In</h2>
+  <form class="flex flex-column gap-3" @submit.prevent="signin">
+    <transition-group name="p-message" tag="div" class="flex flex-col">
+      <Message v-if="authStore.error" closable icon="pi pi-times-circle" class="flex-1" severity="error">{{authStore.error}}</Message>
+    </transition-group>
+
+    <div class="p-inputgroup flex align-items-center gap-4">
+      <span class="p-inputgroup-addon">
+          <i class="pi pi-user"></i>
+      </span>
+      <InputText type="email" class="flex-1" v-model="email" placeholder="Your Email" />
+    </div>
+
+    <div class="p-inputgroup flex align-items-center gap-4">
+      <span class="p-inputgroup-addon">
+          <i class="pi pi-at"></i>
+      </span>
+      <InputText type="password" class="flex-1" v-model="password" placeholder="Password" />
+    </div>
+
+    <div class="flex flex-column gap-3">
+      <Loader v-if="authStore.loading" />
+      <Button v-else label="Signin" type="submit" />
+
+      <span>Are you not registered yet? <router-link to="/sign-up">Sign up</router-link></span>
+    </div>
+  </form>
+</template>
diff --git a/src/pages/SignUp.vue b/src/pages/SignUp.vue
index c1992c7..5b18bd1 100644
--- a/src/pages/SignUp.vue
+++ b/src/pages/SignUp.vue
@@ -10,7 +10,7 @@
   const password = ref('')
 
   const signup = async () => {
-    await authStore.signUp({ email: email.value, password: password.value })
+    await authStore.auth('signUp', { email: email.value, password: password.value })
   }
 
 </script>
@@ -19,7 +19,7 @@
   <h2>Sign Up</h2>
   <form class="flex flex-column gap-3" @submit.prevent="signup">
     <transition-group name="p-message" tag="div" class="flex flex-col">
-      <Message v-if="authStore.error" closable icon="pi pi-times-circle" severity="error">{{authStore.error}}</Message>
+      <Message v-if="authStore.error" closable icon="pi pi-times-circle" class="flex-1" severity="error">{{authStore.error}}</Message>
     </transition-group>
 
     <div class="p-inputgroup flex align-items-center gap-4">
@@ -38,9 +38,9 @@
 
     <div class="flex flex-column gap-3">
       <Loader v-if="authStore.loading" />
-      <Button v-else label="Signup" @click="signup"/>
+      <Button v-else label="Signup" type="submit" />
 
-      <span>Are you already registered? <router-link to="/signin">Sign in</router-link></span>
+      <span>Are you already registered? <router-link to="/sign-in">Sign in</router-link></span>
     </div>
   </form>
 </template>
diff --git a/src/router/index.ts b/src/router/index.ts
index a67c587..f7b7e63 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -8,6 +8,11 @@ const router = createRouter({
       path: '/sign-up',
       name: 'SignUp',
       component: () => import('../pages/SignUp.vue')
+    },
+    {
+      path: '/sign-in',
+      name: 'SignIn',
+      component: () => import('../pages/SignIn.vue')
     }
   ]
 })
diff --git a/src/store/auth.ts b/src/store/auth.ts
index d39a24e..f8e5f02 100644
--- a/src/store/auth.ts
+++ b/src/store/auth.ts
@@ -13,11 +13,13 @@ export const useAuthStore = defineStore('auth', () => {
   const loading = ref(false);
   const error = ref('');
 
-  const signUp = async (payload: {email: string; password: string}) => {
+  const auth = async <T extends 'signUp' | 'signIn'>(type: T, payload: {email: string; password: string}) => {
     error.value = '';
-    const url = `https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=${process.env.FIREBASE_API_KEY}`
+    const url = type === 'signUp'
+      ? `https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=${process.env.FIREBASE_API_KEY}`
+      : `https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=${process.env.FIREBASE_API_KEY}`;
 
-    type AuthResponse = {
+    type SignUpResponse = {
       kind: string
       idToken: string
       email: string;
@@ -25,9 +27,19 @@ export const useAuthStore = defineStore('auth', () => {
       expiresIn: string;
       localId: string;
     }
+    type SignInResponse = {
+      kind: string;
+      localId: string;
+      email: string;
+      displayName: string;
+      idToken: string;
+      registered: boolean;
+      refreshToken: string;
+      expiresIn: string;
+    }
     try {
       loading.value = true;
-      const { data } = await axios.post<AuthResponse>(url, {
+      const { data } = await axios.post<SignUpResponse | SignInResponse>(url, {
         ...payload,
         returnSecureToken: true
       })
@@ -40,43 +52,47 @@ export const useAuthStore = defineStore('auth', () => {
         token: data.idToken,
       }
     } catch (e) {
-      if (e instanceof AxiosError) {
-        switch (e?.response?.data?.error?.message) {
-          case 'EMAIL_EXISTS':
-            error.value = 'Email already exists';
-            break;
-          case 'OPERATION_NOT_ALLOWED':
-            error.value = 'Operation not allowed';
-            break;
-          case 'TOO_MANY_ATTEMPTS_TRY_LATER':
-            error.value = 'Too many attempts';
-            break;
-          case 'EMAIL_NOT_FOUND':
-            error.value = 'Email not found';
-            break;
-          case 'INVALID_PASSWORD':
-            error.value = 'Invalid password';
-            break;
-          case 'WEAK_PASSWORD':
-            error.value = 'Password is weak';
-            break;
-          case 'USER_DISABLED':
-            error.value = 'User disabled';
-            break;
-          default:
-            error.value = 'Something went wrong';
-            return;
-        }
+      if (!(e instanceof AxiosError)){
+        error.value = 'Something went wrong';
+        return;
       }
 
-      error.value = 'Something went wrong';
+      switch (e?.response?.data?.error?.message) {
+        case 'EMAIL_EXISTS':
+          error.value = 'Email already exists';
+          return;
+        case 'OPERATION_NOT_ALLOWED':
+          error.value = 'Operation not allowed';
+          return;
+        case 'TOO_MANY_ATTEMPTS_TRY_LATER':
+          error.value = 'Too many attempts';
+          return;
+        case 'EMAIL_NOT_FOUND':
+          error.value = 'Email not found';
+          return;
+        case 'INVALID_LOGIN_CREDENTIALS':
+          error.value = 'Invalid credentials';
+          return;
+        case 'INVALID_PASSWORD':
+          error.value = 'Invalid password';
+          return;
+        case 'WEAK_PASSWORD':
+          error.value = 'Password is weak';
+          return;
+        case 'USER_DISABLED':
+          error.value = 'User disabled';
+          return;
+        default:
+          error.value = 'Something went wrong';
+          return;
+      }
     } finally {
       loading.value = false;
     }
   };
 
   return {
-      signUp,
+      auth,
       userInfo,
       error,
       loading,