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..511dd64 100644
--- a/vue/src/store/index.js
+++ b/vue/src/store/index.js
@@ -32,18 +32,30 @@ 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>