authentication implementation

2024-05-27 15:13:45 +03:30
parent a984a3937e
commit 021360e364
38 changed files with 1083 additions and 2995 deletions
@@ -1,84 +1,113 @@
 <template>
-    <div class="w-[25.573vw] text-secondaryTextColor space-y-6">
-        <p class="text-[1.502vw] border-b px-[0.5vw]">ورود</p>
-        <div class="relative flex flexBox w-full pt-[1vw]">
-          <input type="text" class="loginInput" placeholder="نام کاربری" />
-          <svg
-            class="h-[1.146vw] w-[1.146vw] absolute left-[1.2vw]"
-            viewBox="0 0 22 22"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M11.1464 9.96418C11.0547 9.95501 10.9447 9.95501 10.8439 9.96418C8.66219 9.89084 6.92969 8.10334 6.92969 5.90334C6.92969 3.65751 8.74469 1.83334 10.9997 1.83334C13.2455 1.83334 15.0697 3.65751 15.0697 5.90334C15.0605 8.10334 13.328 9.89084 11.1464 9.96418Z"
-              stroke="#878787"
-              stroke-width="1.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-            <path
-              d="M6.56414 13.3467C4.34581 14.8317 4.34581 17.2517 6.56414 18.7275C9.08497 20.4142 13.2191 20.4142 15.74 18.7275C17.9583 17.2425 17.9583 14.8225 15.74 13.3467C13.2283 11.6692 9.09414 11.6692 6.56414 13.3467Z"
-              stroke="#878787"
-              stroke-width="1.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          </svg>
-        </div>
-        <div class="relative flex flexBox w-full pb-[1vw]">
-          <input type="text" class="loginInput" placeholder="رمز عبور" />
-          <svg
-            class="h-[1.146vw] w-[1.146vw] absolute left-[1.2vw]"
-            viewBox="0 0 22 22"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M13.3196 8.68082L8.68125 13.3192C8.08542 12.7233 7.71875 11.9075 7.71875 11C7.71875 9.18499 9.18542 7.71832 11.0004 7.71832C11.9079 7.71832 12.7237 8.08499 13.3196 8.68082Z"
-              stroke="#878787"
-              stroke-width="1.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-            <path
-              d="M16.3358 5.28919C14.7317 4.07919 12.8983 3.41919 11.0008 3.41919C7.765 3.41919 4.74917 5.32586 2.65 8.62586C1.825 9.91836 1.825 12.0909 2.65 13.3834C3.37417 14.52 4.2175 15.5009 5.13417 16.2892"
-              stroke="#878787"
-              stroke-width="1.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-            <path
-              d="M7.71875 17.9025C8.76375 18.3425 9.87292 18.5808 11.0004 18.5808C14.2362 18.5808 17.2521 16.6742 19.3512 13.3742C20.1762 12.0817 20.1762 9.90916 19.3512 8.61666C19.0487 8.14 18.7187 7.69083 18.3796 7.26917"
-              stroke="#878787"
-              stroke-width="1.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-            <path
-              d="M14.2178 11.6417C13.9795 12.9342 12.9253 13.9883 11.6328 14.2267"
-              stroke="#878787"
-              stroke-width="1.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-            <path
-              d="M8.68148 13.3192L1.83398 20.1667"
-              stroke="#878787"
-              stroke-width="1.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-            <path
-              d="M20.1659 1.83331L13.3184 8.68081"
-              stroke="#878787"
-              stroke-width="1.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          </svg>
-        </div>
-        <nuxt-link to="/reset-password" class="text-[0.741vw] text-primaryGreen border-b border-primaryGreen ms-[0.5vw]">فراموشی رمز عبور</nuxt-link>
-    
-        <button class="greenButton w-full !mt-[1.5vw]">ورود</button>
-      </div>
-</template>
+  <div class="w-[25.573vw] text-secondaryTextColor space-y-6 relative">
+  
+    <p class="text-[1.502vw] border-b px-[0.5vw]">ورود</p>
+    <div class="relative flex flexBox w-full pt-[1vw]">
+      <input
+        v-model="phone"
+        type="text"
+        class="loginInput"
+        placeholder="شماره موبایل"
+      />
+      <svg
+        class="h-[1.146vw] w-[1.146vw] absolute left-[1.2vw]"
+        viewBox="0 0 22 22"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M11.1464 9.96418C11.0547 9.95501 10.9447 9.95501 10.8439 9.96418C8.66219 9.89084 6.92969 8.10334 6.92969 5.90334C6.92969 3.65751 8.74469 1.83334 10.9997 1.83334C13.2455 1.83334 15.0697 3.65751 15.0697 5.90334C15.0605 8.10334 13.328 9.89084 11.1464 9.96418Z"
+          stroke="#878787"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M6.56414 13.3467C4.34581 14.8317 4.34581 17.2517 6.56414 18.7275C9.08497 20.4142 13.2191 20.4142 15.74 18.7275C17.9583 17.2425 17.9583 14.8225 15.74 13.3467C13.2283 11.6692 9.09414 11.6692 6.56414 13.3467Z"
+          stroke="#878787"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </div>
+
+    <button class="greenButton w-full !mt-[1.5vw] relative" @click="login">
+      <span class="loader absolute" v-if="loading"></span>
+      <span v-else>ورود</span>
+      
+    </button>
+    <div class="backdrop-blur-sm bg-white/30 p-[1vw] rounded-[0.5vw] text-red-400 text-[0.7vw] absolute w-full" v-for="(error,index) in errors" :key="index">
+      <span>* {{error}}</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const phone = ref(null);
+const errors = ref([]);
+const loading = ref(false);
+const FormStatus = useState("showCheckOtpForm");
+async function login() {
+     if (phone.value == null) {
+        console.log("شماره موبایل الزامی است")
+        errors.value = []
+        return errors.value.push("شماره موبایل الزامی است")
+    }
+
+    const pattern = /^(\+98|0)?9\d{9}$/;
+
+    if (!pattern.test(phone.value)) {
+      errors.value = []
+       return errors.value.push("فرمت شماره موبایل معتبر نیست")
+    };
+
+  try {
+    loading.value = true;
+    errors.value = [];
+    const data = await $fetch("/api/auth/login", {
+      method: "POST",
+      body: {
+        phone: phone.value,
+        type: "1",
+      },
+      
+    });
+    if (data.message === 'کد با موفقیت ارسال شد') {
+      const phoneNumber = useState('phoneNumber', () => phone.value)
+      FormStatus.value = true;
+    }
+    loading.value = false;
+  } catch (error) {
+  //   console.log('errrrr :',error.data.data.message)
+  //  console.log('errrrr :', error.data.data.error)
+  loading.value = false;
+  return errors.value.push(error.data.data.error)
+  }
+}
+</script>
+
+
+<style scoped>
+.loader {
+  top: 0.65vw;
+  left: 12vw;
+  width: 1.5vw;
+  height: 1.5vw;
+  border: 0.2vw solid #fff;
+  border-bottom-color: transparent;
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>