Handle registration errors correctly

app/Http/Controllers/UserController.php

@@ -21,7 +21,7 @@ class UserController extends Controller
 	public function create(Request $request) {
 		$validated = $request->validate([
 			'name' => 'required|max:30',
-			'email' => 'required|email|unique:users,email',
+			'email' => 'required|email|unique:users|max:255',
 			'password' => 'required|confirmed|min:8|regex:/[a-z]/|regex:/[A-Z]/|regex:/[0-9]/'
 		]);
 

resources/js/main.js

@@ -67,7 +67,6 @@ function resendLink(event) {
 			`${response.status} : ${response.statusText}`
 		}
 	})
-	event.stopPropogation();
 	event.preventDefault();
 }
 

resources/js/register-area/register-area.vue

@@ -70,33 +70,46 @@ function getToken() {
 	})
 }
 	function register(event) {
-		/* this.active = 'loading' */
 		event.preventDefault();
 		event.stopPropagation();
+
+		this.errorMessage = ''
+		let name = document.getElementById("register-name").value
+		let email = document.getElementById("register-email").value
+		let password = document.getElementById("register-password").value
+		let password_confirmation = document.getElementById("confirm-password").value
+
+		this.active = 'loading'
+
 		this.getToken().then(() => {fetch("/register", {
 			method: 'POST',
 			headers: {'Content-Type': 'application/json',
 			'Accept': 'application/json',
 			'X-XSRF-TOKEN': this.token},
-			body: JSON.stringify({"name": document.getElementById("register-name").value,
-			"email": document.getElementById("register-email").value,
-			"password": document.getElementById("register-password").value,
-			"password_confirmation": document.getElementById("confirm-password").value})})
+			body: JSON.stringify({"name": name,
+			"email": email,
+			"password": password,
+			"password_confirmation": password_confirmation})})
 		.then(response => {
 			//Give completed or error
 			if (response.ok) {
 				this.active = 'register-completed'
-			} else {
-				if (response.status === 422) {
-					this.errorMessage = 'That email is already registered.'
+			} else if (response.status != 500) {
+				response.json().then((e) => {
+					try {
+						for (let i in e.errors) {
+							this.errorMessage = e.errors[i].flat().join("\n") +
+							"\n" + this.errorMessage
+						}
+					} catch (x) {
+						this.errorMessage = e.message
+						}
+					})
 					this.active = 'register'
-				} else {
-					this.error = response.status
-					this.errorMessage = response.statusText
-					this.active = 'error'
+			} else {
+				this.errorMessage = response.statusText
+				this.active = 'register'
 				}
-			}
-			/* console.log(response.json()) */
 		});
 		})
 		return false