first commit
This commit is contained in:
73
components/auth/BoxedLoginForm.vue
Normal file
73
components/auth/BoxedLoginForm.vue
Normal file
@@ -0,0 +1,73 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useAuthStore } from '@/stores/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" block>
|
||||
<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>
|
||||
61
components/auth/BoxedRegisterForm.vue
Normal file
61
components/auth/BoxedRegisterForm.vue
Normal file
@@ -0,0 +1,61 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import Logo from '@/layouts/full/logo/Logo.vue';
|
||||
/*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(true);
|
||||
const show1 = ref(false);
|
||||
const password = ref('');
|
||||
const email = ref('');
|
||||
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']);
|
||||
const fname = ref('');
|
||||
const fnameRules = ref([
|
||||
(v: string) => !!v || 'Name is required',
|
||||
(v: string) => (v && v.length <= 10) || 'Name must be less than 10 characters'
|
||||
]);
|
||||
</script>
|
||||
<template>
|
||||
<v-row class="d-flex mb-6">
|
||||
<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" block>
|
||||
<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">Or sign up with email</span>
|
||||
</div>
|
||||
</div>
|
||||
<v-form ref="form" v-model="valid" lazy-validation action="/pages/boxedlogin" class="mt-5">
|
||||
<v-label class="font-weight-medium pb-2">Name</v-label>
|
||||
<VTextField v-model="fname" :rules="fnameRules" required ></VTextField>
|
||||
<v-label class="font-weight-medium pb-2">Email Adddress</v-label>
|
||||
<VTextField v-model="email" :rules="emailRules" required ></VTextField>
|
||||
<v-label class="font-weight-medium pb-2">Password</v-label>
|
||||
<VTextField
|
||||
v-model="password"
|
||||
:counter="10"
|
||||
:rules="passwordRules"
|
||||
required
|
||||
variant="outlined"
|
||||
type="password"
|
||||
color="primary"
|
||||
></VTextField>
|
||||
<v-btn size="large" class="mt-2" color="darkgray" block submit flat>Sign Up</v-btn>
|
||||
</v-form>
|
||||
</template>
|
||||
67
components/auth/LoginForm.vue
Normal file
67
components/auth/LoginForm.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
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']);
|
||||
const { signIn, getProviders } = useAuth()
|
||||
const providers = await getProviders()
|
||||
const login = () => {
|
||||
console.log(providers)
|
||||
}
|
||||
</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 hover-link-primary" block>
|
||||
<img :src="google" height="16" class="mr-2" alt="google" />
|
||||
Google
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="6" sm="6" class="pl-2">
|
||||
<v-btn variant="outlined" size="large" class="border text-subtitle-1 hover-link-primary" block>
|
||||
<img :src="facebook" width="20" class="mr-1" alt="facebook" />
|
||||
Facebook
|
||||
</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">or sign in with</span>
|
||||
</div>
|
||||
</div> -->
|
||||
<Form 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>
|
||||
<v-label class="font-weight-semibold pb-2 ">Password</v-label>
|
||||
<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">Remeber this Device</template>
|
||||
</v-checkbox>
|
||||
<div class="ml-sm-auto">
|
||||
<RouterLink to="" class="text-primary text-decoration-none font-weight-medium">Forgot Password ?
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
<v-btn size="large" color="primary" :disabled="valid" block flat @click="login">Sign In</v-btn>
|
||||
<!-- <div class="mt-2">
|
||||
<v-alert color="error"></v-alert>
|
||||
</div> -->
|
||||
</Form>
|
||||
</template>
|
||||
61
components/auth/RegisterForm.vue
Normal file
61
components/auth/RegisterForm.vue
Normal file
@@ -0,0 +1,61 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import Logo from '~/components/layout/full/logo/Logo.vue';
|
||||
/*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(true);
|
||||
const show1 = ref(false);
|
||||
const password = ref('');
|
||||
const email = ref('');
|
||||
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']);
|
||||
const fname = ref('');
|
||||
const fnameRules = ref([
|
||||
(v: string) => !!v || 'Name is required',
|
||||
(v: string) => (v && v.length <= 10) || 'Name must be less than 10 characters'
|
||||
]);
|
||||
</script>
|
||||
<template>
|
||||
<v-row class="d-flex mb-6">
|
||||
<v-col cols="6" sm="6" class="pr-2">
|
||||
<v-btn variant="outlined" size="large" class="border text-subtitle-1 hover-link-primary" block>
|
||||
<img :src="google" height="16" class="mr-2" alt="google" />
|
||||
Google
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="6" sm="6" class="pl-2">
|
||||
<v-btn variant="outlined" size="large" class="border text-subtitle-1 hover-link-primary" block>
|
||||
<img :src="facebook" width="20" class="mr-1" alt="facebook" />
|
||||
Facebook
|
||||
</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">or sign in with</span>
|
||||
</div>
|
||||
</div>
|
||||
<v-form ref="form" v-model="valid" lazy-validation action="/pages/boxedlogin" class="mt-5">
|
||||
<v-label class=" font-weight-medium pb-2">Name</v-label>
|
||||
<VTextField v-model="fname" :rules="fnameRules" required ></VTextField>
|
||||
<v-label class=" font-weight-medium pb-2">Email Adddress</v-label>
|
||||
<VTextField v-model="email" :rules="emailRules" required ></VTextField>
|
||||
<v-label class=" font-weight-medium pb-2">Password</v-label>
|
||||
<VTextField
|
||||
v-model="password"
|
||||
:counter="10"
|
||||
:rules="passwordRules"
|
||||
required
|
||||
variant="outlined"
|
||||
type="password"
|
||||
color="primary"
|
||||
></VTextField>
|
||||
<v-btn size="large" class="mt-2" color="primary" block submit flat>Sign Up</v-btn>
|
||||
</v-form>
|
||||
</template>
|
||||
15
components/auth/ResetForm.vue
Normal file
15
components/auth/ResetForm.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import Logo from '@/layouts/full/logo/Logo.vue';
|
||||
const valid = ref(true);
|
||||
const show1 = ref(false);
|
||||
const email = ref('');
|
||||
const emailRules = ref([(v: string) => !!v || 'E-mail is required', (v: string) => /.+@.+\..+/.test(v) || 'E-mail must be valid']);
|
||||
</script>
|
||||
<template>
|
||||
<v-form ref="form" v-model="valid" lazy-validation action="/dashboards/analytical" class="mt-6">
|
||||
<v-label class="font-weight-semibold pb-2">Email Address</v-label>
|
||||
<VTextField v-model="email" :rules="emailRules" required ></VTextField>
|
||||
<v-btn size="large" color="darkgray" to="/" block submit flat>Forgot Password</v-btn>
|
||||
</v-form>
|
||||
</template>
|
||||
18
components/auth/TwoStepForm.vue
Normal file
18
components/auth/TwoStepForm.vue
Normal file
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<div class="mt-6">
|
||||
<v-label class="text-subtitle-1 font-weight-semibold pb-2 text-lightText">Type your 6 digits security code</v-label>
|
||||
<div class="d-flex justify-space-between gap-3 mb-2 verification">
|
||||
<VTextField></VTextField>
|
||||
<VTextField></VTextField>
|
||||
<VTextField></VTextField>
|
||||
<VTextField></VTextField>
|
||||
<VTextField></VTextField>
|
||||
<VTextField></VTextField>
|
||||
</div>
|
||||
<v-btn color="darkgray" size="large" block flat>Verify My Account</v-btn>
|
||||
<h6 class="text-16 text-medium-emphasis d-flex align-center mt-6" >
|
||||
Didn't get the code?
|
||||
<RouterLink to="/" class="pl-0 text-primary text-16 opacity-1 pl-2 text-decoration-none"> Resend</RouterLink>
|
||||
</h6>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user