first commit

2026-03-13 10:45:28 +07:00
commit 6bb6a1d430
568 changed files with 51753 additions and 0 deletions
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { ref } from "vue";
+// import { useAuthStore } from '@/store/auth';
+import { Form } from "vee-validate";
+
+/*Social icons*/
+import google from "@/assets/images/svgs/google-icon.svg";
+import facebook from "@/assets/images/svgs/facebook-icon.svg";
+
+const checkbox = ref(false);
+const valid = ref(false);
+const show1 = ref(false);
+const password = ref("admin123");
+const username = ref("info@wrappixel.com");
+const passwordRules = ref([
+  (v: string) => !!v || "Password is required",
+  (v: string) =>
+    (v && v.length <= 10) || "Password must be less than 10 characters"
+]);
+const emailRules = ref([
+  (v: string) => !!v || "E-mail is required",
+  (v: string) => /.+@.+\..+/.test(v) || "E-mail must be valid"
+]);
+
+function validate(values: any, { setErrors }: any) {
+  // const authStore = useAuthStore();
+  // return authStore.login(username.value, password.value).catch((error) => setErrors({ apiError: error }));
+}
+</script>
+
+<template>
+  <v-row class="d-flex mb-3">
+    <v-col cols="6" sm="6" class="pr-2">
+      <v-btn
+        variant="outlined"
+        size="large"
+        class="border text-subtitle-1 font-weight-semibold hover-link-primary"
+        block
+      >
+        <img :src="facebook" width="20" class="mr-1" alt="facebook" />
+        <span class="d-md-flex d-none mr-1">Sign in with</span> Facebook
+      </v-btn>
+    </v-col>
+    <v-col cols="6" sm="6" class="pl-2">
+      <v-btn
+        variant="outlined"
+        size="large"
+        class="border text-subtitle-1 font-weight-semibold hover-link-primary"
+        blocks
+      >
+        <img :src="google" height="16" class="mr-2" alt="google" />
+        <span class="d-md-flex d-none mr-1">Sign in with</span> Google
+      </v-btn>
+    </v-col>
+  </v-row>
+  <div class="d-flex align-center text-center mb-6">
+    <div
+      class="text-h6 w-100 px-5 font-weight-regular auth-divider position-relative"
+    >
+      <span class="bg-surface px-5 py-3 position-relative textSecondary"
+        >Or sign in with email</span
+      >
+    </div>
+  </div>
+  <Form @submit="validate" v-slot="{ errors, isSubmitting }" class="mt-5">
+    <v-label class="font-weight-semibold pb-2">Username</v-label>
+    <VTextField
+      v-model="username"
+      :rules="emailRules"
+      class="mb-8"
+      required
+      hide-details="auto"
+    ></VTextField>
+    <div class="d-flex justify-space-between align-center pb-2">
+      <v-label class="font-weight-semibold">Password</v-label>
+      <RouterLink
+        to="/auth/forgot-password2"
+        class="text-primary text-decoration-none font-weight-medium"
+        >Forgot Password ?</RouterLink
+      >
+    </div>
+
+    <VTextField
+      v-model="password"
+      :rules="passwordRules"
+      required
+      hide-details="auto"
+      type="password"
+      class="pwdInput"
+    ></VTextField>
+    <div class="d-flex flex-wrap align-center my-3 ml-n2">
+      <v-checkbox
+        class="pe-2"
+        v-model="checkbox"
+        :rules="[(v: any) => !!v || 'You must agree to continue!']"
+        required
+        hide-details
+        color="primary"
+      >
+        <template v-slot:label class="font-weight-medium"
+          >Keep me logged in</template
+        >
+      </v-checkbox>
+    </div>
+    <v-btn
+      size="large"
+      :loading="isSubmitting"
+      color="darkgray"
+      :disabled="valid"
+      block
+      type="submit"
+      flat
+      >Sign In</v-btn
+    >
+    <div v-if="errors.apiError" class="mt-2">
+      <v-alert color="error">{{ errors.apiError }}</v-alert>
+    </div>
+  </Form>
+</template>