Merge branch 'master' of http://git.digital-tps.tk/TPS/birzha-legalizasia-frontend

src/stores/auth.js

@@ -33,6 +33,28 @@ export const useAuthStore = defineStore({
           router.push({ path: "/" });
         });
     },
+    async register(newUser) {
+      return fetchWrapper
+        .post(`${baseUrl}/register`, newUser)
+        .then((response) => {
+          console.log("response: " + response);
+
+          console.log("user: " + response["success"]["token"]["plainTextToken"]); 
+
+          // update pinia state
+          this.user = user;
+
+          // store user details and jwt in local storage to keep user logged in between page refreshes
+          // localStorage.setItem("user", JSON.stringify(user));
+
+          // redirect to previous url or default to home page
+          // router.push(this.returnUrl || "/");
+        })
+        .catch((error) => {
+          const alertStore = useAlertStore();
+          alertStore.error(error);
+        });
+    },
     logout() {
       this.user = null;
       localStorage.removeItem(USER);

src/views/register/Main.vue

@@ -38,7 +38,7 @@
             class="my-auto mx-auto xl:ml-20 bg-white dark:bg-darkmode-600 xl:bg-transparent px-5 sm:px-8 py-8 xl:p-0 rounded-md shadow-md xl:shadow-none w-full sm:w-3/4 lg:w-2/4 xl:w-auto"
           >
             <h2
-              class="intro-x font-bold text-2xl xl:text-3xl text-center xl:text-left"
+              class="intro-x font-bold text-2xl xl:text-3xl text-center xl:text-left sapar-s"
             >
               Sign Up
             </h2>
@@ -100,39 +100,33 @@
                 </div>
               </template>
 
-              <input
-                type="password"
-                v-model.trim="validate.password.password.$model"
-                class="intro-x login__input form-control py-3 px-4 block mt-4"
-                :class="{ 'border-danger': validate.password.password.$error }"
-                placeholder="Password"
-              />
-              <template v-if="validate.password.password.$error">
+              <div class="relative">
+                <input
+                  type="password"
+                  v-model.trim="validate.password.$model"
+                  class="login__input form-control py-3 px-4 block mt-4"
+                  :class="{ 'border-danger': validate.password.$error }"
+                  placeholder="Password"
+                  name="password"
+                />
+                <EyeIcon
+                  class="block mx-auto absolute top-1/2 transform -translate-y-1/2 right-3 text-slate-400 cursor-pointer"
+                  @mousedown="mouseDownEyeIcon"
+                  @mouseup="mouseUpEyeIcon"
+                />
+              </div>
+              
+              
+              <template v-if="validate.password.$error">
                 <div
-                  v-for="(error, index) in validate.password.password.$errors"
-                  :key="index"
-                  class="text-danger mt-2"
-                >
-                  {{ error.$message }}
-                </div>
-              </template>
-
-              <input
-                type="password"
-                v-model.trim="validate.password.confirm.$model"
-                class="intro-x login__input form-control py-3 px-4 block mt-4"
-                :class="{ 'border-danger': validate.password.confirm.$error }"
-                placeholder="Password Confirmation"
-              />
-              <template v-if="validate.password.confirm.$error">
-                <div
-                  v-for="(error, index) in validate.password.confirm.$errors"
+                  v-for="(error, index) in validate.password.$errors"
                   :key="index"
                   class="text-danger mt-2"
                 >
                   {{ error.$message }}
                 </div>
               </template>
+              
             </div>
             
             <div class="intro-x mt-5 xl:mt-8 text-center xl:text-left">
@@ -176,24 +170,19 @@ import dom from "@left4code/tw-starter/dist/js/dom";
 import {
   required,
   minLength,
-  email,
-  helpers
+  email
 } from "@vuelidate/validators";
 import { useVuelidate } from "@vuelidate/core";
+import { useAuthStore } from '@/stores'
 import Toastify from "toastify-js";
 
 const formData = reactive({
   firstName: "",
   lastName: "",
   email: "",
-  password: {
-    password: '',
-    confirm: '',
-  },
+  password: "",
 });
 
-const mustBeTheSameAsPassword = (value) => value === formData.password.password
-
 const rules = {
   firstName: {
     required,
@@ -208,16 +197,9 @@ const rules = {
     email,
   },
   password: {
-    password: {
-      required,
-      minLength: minLength(8)
-    },
-    confirm: {
-      required,
-      mustBeTheSameAsPassword: helpers.withMessage('Must be the same as password',
-      mustBeTheSameAsPassword)
-    },
-  },
+    required,
+    minLength: minLength(8)
+  }
 };
 
 const validate = useVuelidate(rules, toRefs(formData));
@@ -236,13 +218,26 @@ const save = () => {
       position: "right",
       stopOnFocus: true,
     }).showToast();
-    // alert('failed')
   } else {
-    // Todo: register the user api
-    alert('success')
+    console.log("onRegister");
+    const authStore = useAuthStore();
+    let newUser = {
+      firstname: formData.firstName,
+      lastname: formData.lastName,
+      email: formData.email,
+      password: formData.password,
+    }
+    return authStore.register(newUser);
   }
 };
 
+const mouseDownEyeIcon = () => {
+  document.querySelector("input[name='password']").type = "text"
+}
+const mouseUpEyeIcon = () => {
+  document.querySelector("input[name='password']").type = "password"
+}
+
 onMounted(() => {
   dom("body").removeClass("main").removeClass("error-page").addClass("login");
 });