<template>
    <q-layout class="bg-grey-4">
      <transition-group
        appear
        enter-active-class="animated slideInRight"
        leave-active-class="hidden"
      >
        <div class="row flex flex-center" key="login-form">
          <div class="col-12 col-md-8 col-sm-12 col-xs-12">
            <q-card class="q-ma-sm q-my-xl" elevated bordered>
              <q-card-section>
                <div class="text-h5 text-grey-8 text-bold text-center">LOGIN DOC EXAMS</div>

                <q-form ref="loginForm" @submit="loginUser">
                  <div class="row">
                    <div class="col-12 col-md-12 q-pa-sm">
                      <q-input
                        outlined
                        v-model="newRecord.email"
                        dense
                        autocomplete="off"
                        type="email"
                        lazy-rules
                        :rules="[ val => val && val.length > 0 || 'Please type email']"
                        placeholder="Enter email adress"
                      />
                    </div>
                    <div class="col-12 col-md-12 q-pa-sm">
                      <q-input
                        v-model="newRecord.password"
                        outlined
                        dense
                        :type="isPwd ? 'password' : 'text'"
                        lazy-rules
                        :rules="[ val => val && val.length > 0 || 'Please type password']"
                        placeholder="Enter Password"
                      >
                        <template v-slot:append>
                          <q-icon
                            :name="isPwd ? 'visibility_off' : 'visibility'"
                            class="cursor-pointer"
                            @click="isPwd = !isPwd"
                          />
                        </template>
                      </q-input>
                    </div>
                  </div>
                  <div class="row justify-between">
                    <div class="q-pa-sm">
                      Need Help?
                      <a href="/#/forgot">Forgot pasword</a>
                    </div>
                    <div class="q-pa-sm">
                      <q-checkbox v-model="remember" label="Remember me" />
                    </div>
                  </div>
                  <div class="col-12">
                    <q-btn :loading="isRequestInProgress" color="secondary" type="submit" class="full-width" label="login" >
                      <template v-slot:loading>
                      <q-spinner-hourglass class="on-left" />
                      Loging in...
                    </template>
                    </q-btn>
                  </div>
                </q-form>
              </q-card-section>
              <q-card-section>
                <div class="row q-my-lg">
                  <q-separator inset />
                  <div class="or-separator">OR</div>
                  <q-separator inset />
                </div>
                <div class="row q-my-md">
                  <q-btn align="left" size="lg" class="full-width" color="blue-10">
                    <i style="font-size: 30px; width: 40px;" class="fab fa-facebook-f sizing"></i>
                    <q-separator vertical inset color="white" class="q-mx-md" />
                    <span class="show">Continue with</span> facebook
                  </q-btn>
                </div>
                <div class="row q-my-md">
                  <q-btn align="left" size="lg" class="full-width" color="red-10">
                    <i style="font-size: 30px; width: 40px;" class="fab fa-google-plus-g sizing"></i>
                    <q-separator vertical inset color="white" class="q-mx-md" />
                    <span class="show">Continue with</span> Google Plus
                  </q-btn>
                </div>
                <div class="row q-my-md">
                  <q-btn align="left" size="lg" class="full-width" color="light-blue-10">
                    <i style="font-size: 30px; width: 40px;" class="fab fa-linkedin-in sizing"></i>
                    <q-separator vertical inset color="white" class="q-mx-md" />
                    <span class="show">Continue with</span> linkedin
                  </q-btn>
                </div>
              </q-card-section>
              <q-card-section>
                <div class="row">
                  <div class="q-pa-sm">
                    Don't have an accouunt?
                    <router-link to="/register">Sign up</router-link>
                  </div>
                </div>
              </q-card-section>
            </q-card>
          </div>
        </div>
      </transition-group>
    </q-layout>
</template>

<script>
export default {
  data () {
    return {
      newRecord: {
        email: '',
        password: ''
      },
      isPwd: true,
      remember: false,
      isRequestInProgress: false
    }
  },
  props: ['query'],

  computed: {},
  mounted () {

  },
  methods: {
    loginUser: function () {
      this.$refs.loginForm.validate().then(success => {
        if (success) {
          this.isRequestInProgress = true
          this.$store.dispatch('auth/login', this.newRecord)
            .then(response => {
              console.log(response.data)
              this.$q.notify({
                type: 'success-notify',
                position: 'right',
                message: 'Success',
                caption:"Logged in Successfully!!",
                actions: [{ label: 'Dismiss', color: 'yellow', handler: () => { } }]
              })
              this.$router.push({
                name: 'qbank-welcome'
              })
            })
            .catch((e) => {
              this.$q.notify({
                type: 'error-notify',
                position: 'right',
                message:'Failed',
                caption: 'Sorry!! Login Failed.Email or Password is not correct',
                actions: [{ label: 'Dismiss', color: 'yellow', handler: () => { } }]
              })
              this.isRequestInProgress = false
            })
        } else {
        }
      })
    }
  }
}
</script>

<style lang="css" scoped>
.show {
  display: inline !important;
}
.or-separator{
  text-align: center;
  width: 100%;
}
@media only screen and (min-width: 0px) and (max-width: 900px) {
  .show {
    display: none !important;
  }
}
</style>
