102 lines
3.2 KiB
Vue
102 lines
3.2 KiB
Vue
<template>
|
|
<v-card>
|
|
<v-toolbar color="primary" class="white--text" flat>
|
|
<v-toolbar-title text-center>Login</v-toolbar-title>
|
|
</v-toolbar>
|
|
<v-card-text>
|
|
<v-alert class="word-break" type="error" v-if="!!errorMessage">{{errorMessage}}</v-alert>
|
|
<v-alert class="word-break" type="success" v-if="!!signInMessage">{{signInMessage}}</v-alert>
|
|
<v-form ref="siginForm" id=signin-form @submit.prevent="signIn">
|
|
<v-text-field label="Email Id" class="textfield-border" placeholder="Enter your email id" type="email" ref="email" v-model="email" :rules="emailRules" prepend-icon="mdi-email-outline">
|
|
</v-text-field>
|
|
|
|
<v-text-field
|
|
type="password"
|
|
class="textfield-border"
|
|
label="Password"
|
|
placeholder="Enter your password"
|
|
ref="password"
|
|
v-model="password"
|
|
:rules="passwordRules"
|
|
prepend-icon="mdi-lock"
|
|
>
|
|
</v-text-field>
|
|
<v-checkbox v-model="logged" label="Keep me logged in" color="indigo"></v-checkbox>
|
|
<div class="text-right mt-4">
|
|
<v-hover v-slot:default="{ hover }">
|
|
<v-btn
|
|
:disabled="inProgress"
|
|
large
|
|
block
|
|
:outlined="hover ? false:true"
|
|
:color="hover ? 'primary' : 'primary'"
|
|
class="mt-6 body"
|
|
tile
|
|
type="submit"
|
|
form="signin-form"
|
|
@click="signIn"
|
|
><v-progress-circular :size="20" :color="hover ? 'primary' : 'primary'" indeterminate v-if="inProgress"></v-progress-circular> Login</v-btn>
|
|
</v-hover>
|
|
</div>
|
|
</v-form>
|
|
|
|
<v-row >
|
|
<!-- <v-col cols="12">
|
|
Create an account ?
|
|
<v-hover v-slot:default="{ hover }">
|
|
<router-link class="text-decoration-none" :to="{name:'SignUpPage'}" :class="hover ? 'content-link-hover-color' : 'primary--text'">Sign Up</router-link>
|
|
</v-hover>
|
|
</v-col>-->
|
|
<v-col cols="12" >
|
|
Forgot your password?
|
|
<v-hover v-slot:default="{ hover }">
|
|
<router-link class="text-decoration-none" :to="{name:'forgot-password'}" :class="hover ? 'content-link-hover-color' : 'primary--text'">Forgot Password</router-link>
|
|
</v-hover>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-text>
|
|
</v-card>
|
|
</template>
|
|
<script>
|
|
import { createHelpers } from "vuex-map-fields";
|
|
const { mapFields } = createHelpers({
|
|
getterType: "auth/getField",
|
|
mutationType: "auth/updateField"
|
|
});
|
|
|
|
export default {
|
|
name: "SignInComponent",
|
|
data: () => ({
|
|
valid: true,
|
|
passwordRules: [
|
|
v => !!v || "Password is required",
|
|
v => (v && v.length >= 8) || "Password must be at least 8 characters"
|
|
],
|
|
emailRules: [
|
|
v => !!v || "Email Id is required",
|
|
v => /.+@.+\..+/.test(v) || "Email Id must be valid"
|
|
]
|
|
}),
|
|
computed: {
|
|
...mapFields([
|
|
"one",
|
|
"one.email",
|
|
"one.password",
|
|
"one.logged",
|
|
"errorMessage",
|
|
"inProgress",
|
|
"signInMessage"
|
|
])
|
|
},
|
|
methods: {
|
|
signIn() {
|
|
if (this.$refs.siginForm.validate()) {
|
|
this.$store.dispatch("auth/login");
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.$store.dispatch("auth/newUserLogin");
|
|
}
|
|
};
|
|
</script> |