Forgot Password

resources/js/vue/components/modal/auth/ChangePassword.vue

@@ -0,0 +1,61 @@
+<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="Change Password">
+            <v-layout row wrap class="px-3">
+              <v-flex xs12 md12 sm12>
+                <v-text-field
+                  v-model="form.password"
+                  label="Password"
+                  color="black"
+                ></v-text-field>
+              </v-flex>
+              <v-flex xs12 md12 sm12>
+                <v-text-field
+                  v-model="form.password_confirmation"
+                  label="Confirm Password"
+                  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="submitChangePassword">
+                  <v-icon class="white--text mr-2 caption">fas fa-sign-in-alt</v-icon>
+                  <span class="white--text">Submit</span>
+                </v-btn>
+              </v-flex>
+            </v-layout>
+          </material-card>
+        </v-flex>
+      </v-layout>
+    </v-container>
+  </v-form>
+</template>
+<script>
+import { mapActions } from "vuex";
+export default {
+  data() {
+    return {
+      form: {
+        password: "",
+        password_confirmation: "",
+      }
+    };
+  },
+  methods: {
+      ...mapActions('auth', [
+          'changePassword'
+      ]),
+      submitVerifyCode() {
+          if (this.form.code != '') {
+            this.changePassword({form: this.form});
+          }
+      }
+  }
+};
+</script>

resources/js/vue/components/modal/auth/VerifyCode.vue

@@ -9,7 +9,7 @@
             <v-layout row wrap class="px-3">
               <v-flex xs12 md12 sm12>
                 <v-text-field
-                  v-model="verifyCode"
+                  v-model="form.code"
                   label="Verify Code Number"
                   color="black"
                 ></v-text-field>
@@ -30,11 +30,13 @@
   </v-form>
 </template>
 <script>
-import { mapGetters, mapActions } from "vuex";
+import { mapActions } from "vuex";
 export default {
   data() {
     return {
-      verifyCode: "",
+      form: {
+        code: "",
+      }
     };
   },
   methods: {
@@ -42,8 +44,8 @@ export default {
           'verifyCodeSMS'
       ]),
       submitVerifyCode() {
-          if (this.verifyCode != '') {
-            this.verifyCodeSMS({verifyCode: this.verifyCode});
+          if (this.form.code != '') {
+            this.verifyCodeSMS({form: this.form});
           }
       }
   }

resources/js/vue/config/urls.js

@@ -8,6 +8,9 @@ const urls = {
     storeTestType : "/TestTypes",
     listTestTypeName : "/TestTypes/ListNames",
     getInputs : `/GetInputs`,
+    forgotPassword : `/password/phone`,
+    sendVerifyCode : `/password/verifyCode`,
+    changePassword : `/password/reset`,
     listTestType : function(page) {
         return "/TestTypes?page=" + page;
     },

resources/js/vue/services/auth/user.service.js

@@ -50,69 +50,6 @@ const UserService = {
             );
         }
     },
-    /**
-     * Login the user and store the access token to TokenService.
-     *
-     * @returns access_token
-     * @throws AuthenticationError
-     **/
-    forgotPassword: async function(cell_number) {
-        const requestData = {
-            method: "post",
-            url: "forgotPassword",
-            data: {
-                cell_number
-            },
-            auth: {
-                username: process.env.MIX_APP_CLIENT_ID,
-                password: process.env.MIX_APP_CLIENT_SECRET
-            }
-        };
-
-        try {
-            const response = await ApiService.customRequest(requestData);
-            ApiService.setAuthHeader();
-
-            return response.data;
-        } catch (error) {
-            throw new AuthenticationError(
-                error.response.status,
-                error.response.data.detail
-            );
-        }
-    },
-    /**
-     * Login the user and store the access token to TokenService.
-     *
-     * @returns access_token
-     * @throws AuthenticationError
-     **/
-    verifyCode: async function(verifyCode) {
-        const requestData = {
-            method: "post",
-            url: "forgotPassword",
-            data: {
-                verifyCode
-            },
-            auth: {
-                username: process.env.MIX_APP_CLIENT_ID,
-                password: process.env.MIX_APP_CLIENT_SECRET
-            }
-        };
-
-        try {
-            const response = await ApiService.customRequest(requestData);
-            ApiService.setAuthHeader();
-
-            return response.data;
-        } catch (error) {
-            throw new AuthenticationError(
-                error.response.status,
-                error.response.data.detail
-            );
-        }
-    },
-
     /**
      * Refresh the access token.
      **/

resources/js/vue/store/modules/auth/actions.js

@@ -1,5 +1,6 @@
-import { UserService, AuthenticationError } from '@/services/auth/user.service'
+import { UserService, AuthenticationError, ApiService, TokenService } from '@/services'
 import router from '@/router'
+import { urls } from '@/config/urls'
 
 export default {
     async login({ commit, dispatch }, {cell_number, password}) {
@@ -22,14 +23,31 @@ export default {
         }
     },
 
-    async forgotPassword({ commit }, {cell_number}) {
-         const result = await UserService.forgotPassword(cell_number);
-         // TODO: Open Modal For Get Section
+    async forgotPassword({commit}, {form}) {
+        var result = await ApiService.post(urls.forgotPassword, form);
+        if(result && result.status == 200) {
+            commit('modal/changeCurrentModal', { modal: "modal-auth-verify-code" }, {root: true});
+        }
+    },
+    
+
+    async verifyCodeSMS({commit, dispatch}, {form}) {
+        var response = await ApiService.post(urls.sendVerifyCode, form);
+        if(response && response.status == 200 && response.data.access_token) {
+            TokenService.saveToken(response.data.access_token);
+            TokenService.saveRefreshToken(response.data.refresh_token);
+            ApiService.setAuthHeader();
+            commit('loginSuccess', response.data.access_token);
+            commit('modal/changeCurrentModal', { modal: "modal-auth-change-password" }, {root: true});
+            dispatch('info', {}, {root : true});
+        }
     },
 
-    async verifyCodeSMS({ commit }, {verifyCode}) {
-         const result = await UserService.verifyCode(verifyCode);
-         // TODO: Open Modal For Get Section
+    async changePassword({commit}, {form}) {
+        var response = await ApiService.post(urls.changePassword, form);
+        if(response && response.status == 200 ) {
+            commit('modal/closeModal', {}, {root: true});
+        }
     },
 
     async logout({ commit }) {

resources/js/vue/views/Auth/ForgotPassword.vue

@@ -7,10 +7,9 @@
             <v-layout row wrap class="px-3">
               <v-flex xs12 md12 sm12>
                 <v-text-field
-                  v-model="cell_number"
+                  v-model="form.cell_number"
                   name="cellnumber"
                   label="Cell Number"
-                  id="id1"
                   color="black"
                 ></v-text-field>
               </v-flex>
@@ -27,7 +26,7 @@
                 </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="login">
+                <router-link class="black--text" :to="{name: 'Login'}">
                   <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
                     <v-icon class="black--text mr-2 caption">fas fa-sign-in-alt</v-icon>
                     <span class="black--text">Login</span>
@@ -43,17 +42,21 @@
 </template>
 <script>
 import { mapActions, mapMutations } from "vuex";
+import { ApiService } from "@/services";
+import { urls } from "@/config/urls";
 export default {
   data() {
     return {
-      cell_number: ""
+      form :{
+        cell_number: ""
+      }
     };
   },
   methods: {
     ...mapActions("auth", ["forgotPassword"]),
-    ...mapMutations("modal", ["changeCurrentModal"]),
-    handleSubmit() {
-      this.changeCurrentModal({ modal: "modal-auth-verify-code" });
+    // ...mapMutations("modal", ["changeCurrentModal"]),
+    async handleSubmit() {
+      this.forgotPassword({form : this.form});
     }
   }
 };

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

@@ -38,18 +38,10 @@
                   <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  class="black--text">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">
+                <router-link :to="{name: 'ForgotPassword'}">
                   <span class="black--text" style="border-bottom:1px solid #000;">Forgot Password ?</span>
                 </router-link>
               </v-flex>