<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>