new C'hnages

resources/js/vue/views/Auth/Login.vue

@@ -0,0 +1,97 @@
+<template>
+  <v-form ref="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"
+                  color="black"
+                  :rules="[rules.required, rules.cellNumberCounter]"
+                  mask="#### ### ####"
+                ></v-text-field>
+              </v-flex>
+            </v-layout>
+            <v-layout row wrap class="px-3">
+              <v-flex xs12 md12 sm12>
+              <v-text-field
+                  name="password"
+                  label="Password"
+                  v-model="password"
+                  :type="show1 ? 'text' : 'password'"
+                  :append-icon="show1 ? 'visibility' : 'visibility_off'"
+                  @click:append="show1 = !show1"
+                  :rules="[rules.required, rules.passCounter]"
+                  color="black"
+                  class="pa-2"
+                ></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-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="{name: 'ForgotPassword'}">
+                  <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: "",
+      show1: false,
+      rules: {
+        required: value => !!value || "Required.",
+        passCounter: value => (value && value.length >= 8) || "Min 8 characters",
+        cellNumberCounter: value => (value && value.length == 11) || "must 11 characters"
+      }
+    };
+  },
+  computed: {
+      ...mapGetters('auth', [
+          'authenticating',
+          'authenticationError',
+          'authenticationErrorCode'
+      ])
+  },
+  methods: {
+      ...mapActions('auth', [
+          'login'
+      ]),
+      async handleSubmit() {
+          // Perform a simple validation that cell_number and password have been typed in
+        if (this.$refs.form.validate()) { 
+          const response = await this.login({cell_number: this.cell_number, password: this.password});
+          
+          if (!response.status || response.status !== 200) {
+            this.password = "";
+          }
+        }
+      }
+  }
+};
+</script>
+<style lang="scss" scoped>
+</style>