<template>
  <v-row justify="center" style="height: 100%; margin: 0;">
    <v-col cols="12" md="5" style="background: rgba(255,255,255,0.3)">
      <v-row style="height: 100%">
        <v-col cols="12" align-self="center">
          <v-row class="text-center" justify="center">
            <v-col cols="12">
              <router-link :to="{name: 'pub-home'}">
              <v-img
                :src="require('../../assets/logo.png')"
                height="80"
                contain
                transition="scale-transition"
              />
              </router-link>
            </v-col>
            <v-col cols="12" class="body-1">
              Manage Your Design Process from Idea to Product Concept.
            </v-col>
            <v-col cols="12">
              <v-card flat
                      :disabled="form.loading"
                      :class="$vuetify.breakpoint.lgAndUp ? 'mx-10' : ''"
                      color="rgba(255,255,255,0)">
                <v-form ref="form" v-model="form.valid" lazy-validation @submit="onSubmit">
                  <v-card-text class="text-left">
                    <v-row no-gutters>
                      <v-col cols="12">
                        <div class="text-h5 text--primary mb-3">Log In</div>
                        <v-text-field
                          label="Team Name"
                          v-model="form.body.teamname"
                          solo flat
                          :rules="[value => !!value || 'Team Name is required.']"
                        ></v-text-field>
                      </v-col>
                      <v-col cols="12">
                        <div class="text-h5 text--primary mb-3">Password</div>
                        <v-text-field
                          label="Password"
                          v-model="form.body.password"
                          :append-icon="form.show ? 'mdi-eye' : 'mdi-eye-off'"
                          :type="form.show ? 'text' : 'password'"
                          solo flat
                          @click:append="form.show = !form.show"
                          :rules="[value => !!value || 'Password is required.']"
                        ></v-text-field>
                      </v-col>
                      <v-col cols="12">
                        <v-checkbox
                          v-model="form.staySignedIn"
                          color="accent"
                        ><span slot="label" class="black--text body-2">Stay signed in</span></v-checkbox>
                      </v-col>
                    </v-row>

                  </v-card-text>
                  <v-card-actions class="pb-0">
                    <v-row>
                      <v-col cols="6">
                        <register></register>
                      </v-col>
                      <v-col cols="6">
                        <v-btn depressed color="primary" block
                               :loading="form.loading"
                               type="submit" :disabled="!form.valid">
                          Login
                        </v-btn>
                      </v-col>
                    </v-row>
                  </v-card-actions>
                  <v-card-text class="text-left pt-1 px-2 body-2">
                    <v-row>
                      <v-col cols="6">
                        Not registered yet? Create an account.
                      </v-col>
                      <v-col cols="6" class="text-right">
                        <v-fade-transition>
                          <div v-for="error in form.errors" :key="error" class="red--text">
                            {{ error }}
                          </div>
                        </v-fade-transition>

                      </v-col>
                    </v-row>
                  </v-card-text>
                </v-form>
              </v-card>

            </v-col>
          </v-row>
        </v-col>
      </v-row>

    </v-col>

  </v-row>
</template>

<script>
import Register from "@/components/Register";

export default {
  name: "Login",
  components: {Register},
  props: ['waitingForApproval'],
  data: () => ({
    form: {
      body: {
        teamname: '',
        password: '',
      },

      valid: true,
      show: false,
      remember: true,
      staySignedIn: false,
      errors: {},
      loading: false,
    },

    fetchUser: true, // stays fixed i.e. always load team data from database (required)
  }),
  methods: {
    errors(res) {
      this.form.errors = Object.fromEntries(res.data.errors.map(item => [item.field, item.msg]))
    },

    onSubmit(e) {
      e.preventDefault()
      if (this.$refs.form.validate()) {
        this.form.loading = true

        this.$store.dispatch('auth/login', {
          data: this.form.body,
          remember: this.form.remember,
          staySignedIn: this.form.staySignedIn,
          fetchUser: this.fetchUser,
        })
          .then(null, (res) => {
            this.errors(res.response)
            this.form.loading = false
          })
      }
    },
  },
  created() {
    // Development only
    // this.form.body.teamname = 'team100'
    // this.form.body.password = 'mypassword'
    // this.form.staySignedIn = true
  }
}
</script>

<style scoped>

</style>