cssd-back/resources/js/vue/views/Login.vue

<template>
  <v-form >
    <v-container grid-list-xs>
      <v-layout row wrap class="justify-center">
        <v-flex xs12 md3 sm3 class="WM-WidthScreen-SM WM-WidthScreen-XS">
          <material-card
          color="black"
          title="Login Page">
            <v-layout row wrap class="px-3">
              <v-flex xs12 md12 sm12>
                <v-text-field
                  v-model="cell_number"
                  name="cellnumber"
                  label="Cell Number"
                  id="id1"
                  color="black"
                ></v-text-field>
              </v-flex>
            </v-layout>
            <v-layout row wrap class="px-3">
              <v-flex xs12 md12 sm12>
                <v-text-field
                  v-model="password"
                  name="password"
                  label="Password"
                  id="id2"
                  color="black"
                ></v-text-field>
              </v-flex>
            </v-layout>
            <v-layout row wrap class="px-3">
              <v-flex xs12 md6 sm6 class="text-md-left text-sm-center text-xs-center">
                <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="handleSubmit">
                  <v-icon class="white--text mr-2 caption">fas fa-sign-in-alt</v-icon>
                  <span class="white--text">Login</span>
                </v-btn>
              </v-flex>
              <v-flex xs12 md6 sm6 class="text-md-right text-sm-center text-xs-center">
                  <router-link class="black--text" to="register">
                    <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
                      <v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
                      <span >Register</span>
                    </v-btn>
                  </router-link>
              </v-flex>
            </v-layout>
            <v-layout row wrap class="text-md-left text-sm-center text-xs-center">
              <v-flex xs12 md6 sm6 class="px-4 py-3">
                <router-link to="/forgot-password">
                  <span class="black--text" style="border-bottom:1px solid #000;">Forgot Password ?</span>
                </router-link>
              </v-flex>
            </v-layout>
          </material-card>
        </v-flex>
      </v-layout>
    </v-container>
  </v-form>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      cell_number: "",
      password: "",
    };
  },
  computed: {
      ...mapGetters('auth', [
          'authenticating',
          'authenticationError',
          'authenticationErrorCode'
      ])
  },
  methods: {
      ...mapActions('auth', [
          'login'
      ]),
      handleSubmit() {
          // Perform a simple validation that cell_number and password have been typed in
          if (this.cell_number != '' && this.password != '') {

            this.login({cell_number: this.cell_number, password: this.password});
            this.password = "";
          }
      }
  }
};
</script>
<style lang="scss" scoped>
</style>