From 55085ad5308a093c86010f040615f2fa01b4a6d9 Mon Sep 17 00:00:00 2001
From: Azam <azam.inoyatov.1998@gmail.com>
Date: Sat, 22 Jan 2022 02:01:27 +0500
Subject: [PATCH 1/2] npm audit fix and ability to show error messages in login
 and register pages

---
 app/Http/Controllers/AuthController.php |  4 ++-
 vue/package-lock.json                   | 14 ++++------
 vue/src/store/index.js                  | 28 +++++++++++++------
 vue/src/views/Login.vue                 | 19 +++++++++----
 vue/src/views/Register.vue              | 37 +++++++++++++++++++------
 5 files changed, 69 insertions(+), 33 deletions(-)

diff --git a/app/Http/Controllers/AuthController.php b/app/Http/Controllers/AuthController.php
index cec9572..8f2e46a 100644
--- a/app/Http/Controllers/AuthController.php
+++ b/app/Http/Controllers/AuthController.php
@@ -62,7 +62,9 @@ public function login(Request $request)
 
         if (!Auth::attempt($credentials, $remember)) {
             return response([
-                'error' => 'The Provided credentials are not correct'
+                'errors' => [
+                    'auth' => ['The Provided credentials are not correct']
+                ]
             ], 422);
         }
         $user = Auth::user();
diff --git a/vue/package-lock.json b/vue/package-lock.json
index 951d3a9..b197a54 100644
--- a/vue/package-lock.json
+++ b/vue/package-lock.json
@@ -944,9 +944,9 @@
       }
     },
     "node_modules/follow-redirects": {
-      "version": "1.14.6",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.6.tgz",
-      "integrity": "sha512-fhUl5EwSJbbl8AR+uYL2KQDxLkdSjZGR36xy46AO7cOMTrCMON6Sa28FmAnC2tRTDbd/Uuzz3aJBv7EBN7JH8A==",
+      "version": "1.14.7",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.7.tgz",
+      "integrity": "sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ==",
       "funding": [
         {
           "type": "individual",
@@ -983,7 +983,6 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -2422,9 +2421,9 @@
       }
     },
     "follow-redirects": {
-      "version": "1.14.6",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.6.tgz",
-      "integrity": "sha512-fhUl5EwSJbbl8AR+uYL2KQDxLkdSjZGR36xy46AO7cOMTrCMON6Sa28FmAnC2tRTDbd/Uuzz3aJBv7EBN7JH8A=="
+      "version": "1.14.7",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.7.tgz",
+      "integrity": "sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ=="
     },
     "fraction.js": {
       "version": "4.1.2",
@@ -2440,7 +2439,6 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
       "optional": true
     },
     "function-bind": {
diff --git a/vue/src/store/index.js b/vue/src/store/index.js
index aedcb7e..764cf6a 100644
--- a/vue/src/store/index.js
+++ b/vue/src/store/index.js
@@ -32,18 +32,28 @@ const store = createStore({
 
     register({commit}, user) {
       return axiosClient.post('/register', user)
-        .then(({data}) => {
-          commit('setUser', data.user);
-          commit('setToken', data.token)
-          return data;
-        })
+        .then(res => {
+          return new Promise((resolve, reject) => {
+            if (res.isAxiosError)
+              reject(res.response.data.errors)
+            const data = res.data
+            commit('setUser', data.user);
+            commit('setToken', data.token)
+            resolve()
+          })
+      })
     },
     login({commit}, user) {
       return axiosClient.post('/login', user)
-        .then(({data}) => {
-          commit('setUser', data.user);
-          commit('setToken', data.token)
-          return data;
+        .then(res => {
+          return new Promise((resolve, reject) => {
+            if (res.isAxiosError)
+              reject(res.response.data.errors)
+            const data = res.data
+            commit('setUser', data.user);
+            commit('setToken', data.token)
+            resolve()
+          })
         })
     },
     logout({commit}) {
diff --git a/vue/src/views/Login.vue b/vue/src/views/Login.vue
index 11456ca..131d11e 100644
--- a/vue/src/views/Login.vue
+++ b/vue/src/views/Login.vue
@@ -20,10 +20,17 @@
     </p>
   </div>
   <form class="mt-8 space-y-6" @submit="login">
-    <Alert v-if="errorMsg">
-      {{ errorMsg }}
+    <Alert v-if="errors">
+      <div class="text-sm">
+        <div v-for="(field, i) of Object.keys(errors)" :key="i">
+          <div v-for="(error, ind) of errors[field] || []" :key="ind">
+            * {{ error }}
+          </div>
+        </div>
+      </div>
+
       <span
-        @click="errorMsg = ''"
+        @click="errors = ''"
         class="w-8 h-8 flex items-center justify-center rounded-full transition-colors cursor-pointer hover:bg-[rgba(0,0,0,0.2)]"
       >
         <svg
@@ -144,7 +151,7 @@ const user = {
   password: "",
 };
 let loading = ref(false);
-let errorMsg = ref("");
+let errors = ref("");
 
 function login(ev) {
   ev.preventDefault();
@@ -158,9 +165,9 @@ function login(ev) {
         name: "Dashboard",
       });
     })
-    .catch((err) => {
+    .catch((error) => {
       loading.value = false;
-      errorMsg.value = err.response.data.error;
+      errors.value = error;
     });
 }
 </script>
diff --git a/vue/src/views/Register.vue b/vue/src/views/Register.vue
index f2aa9a9..6c536c2 100644
--- a/vue/src/views/Register.vue
+++ b/vue/src/views/Register.vue
@@ -20,12 +20,33 @@
     </p>
   </div>
   <form class="mt-8 space-y-6" @submit="register">
-    <Alert v-if="Object.keys(errors).length" class="flex-col items-stretch text-sm">
-      <div v-for="(field, i) of Object.keys(errors)" :key="i">
-        <div v-for="(error, ind) of errors[field] || []" :key="ind">
-          * {{ error }}
+    <Alert v-if="Object.keys(errors).length">
+      <div class="flex-col items-stretch text-sm">
+        <div v-for="(field, i) of Object.keys(errors)" :key="i">
+          <div v-for="(error, ind) of errors[field] || []" :key="ind">
+            * {{ error }}
+          </div>
         </div>
       </div>
+      <span
+        @click="errors = ''"
+        class="w-8 h-8 flex items-center justify-center rounded-full transition-colors cursor-pointer hover:bg-[rgba(0,0,0,0.2)]"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-6 w-6"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M6 18L18 6M6 6l12 12"
+          />
+        </svg>
+      </span>
     </Alert>
 
     <input type="hidden" name="remember" value="true" />
@@ -53,7 +74,7 @@
           required=""
           v-model="user.email"
           class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
-          :class="{ 'border-red-500': errors.email, 'z-10': errors.email }"
+          :class="{ 'border-red-500/50': errors.email, 'z-10': errors.email }"
           placeholder="Email address"
         />
       </div>
@@ -68,7 +89,7 @@
           v-model="user.password"
           class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
           placeholder="Password"
-          :class="{ 'border-red-500': errors.password, 'z-10': errors.password }"
+          :class="{ 'border-red-500/50': errors.password, 'z-10': errors.password }"
         />
       </div>
       <div>
@@ -158,9 +179,7 @@ function register(ev) {
     })
     .catch((error) => {
       loading.value = false;
-      if (error.response.status === 422) {
-        errors.value = error.response.data.errors;
-      }
+      errors.value = error;
     });
 }
 </script>

From 75f4ea7e1bbeed8dfb3887777c05b698a61559da Mon Sep 17 00:00:00 2001
From: Azam <azam.inoyatov.1998@gmail.com>
Date: Sat, 22 Jan 2022 13:36:09 +0500
Subject: [PATCH 2/2] line break

---
 vue/src/store/index.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/vue/src/store/index.js b/vue/src/store/index.js
index 764cf6a..511dd64 100644
--- a/vue/src/store/index.js
+++ b/vue/src/store/index.js
@@ -36,6 +36,7 @@ const store = createStore({
           return new Promise((resolve, reject) => {
             if (res.isAxiosError)
               reject(res.response.data.errors)
+
             const data = res.data
             commit('setUser', data.user);
             commit('setToken', data.token)
@@ -49,6 +50,7 @@ const store = createStore({
           return new Promise((resolve, reject) => {
             if (res.isAxiosError)
               reject(res.response.data.errors)
+
             const data = res.data
             commit('setUser', data.user);
             commit('setToken', data.token)