Add password changing

app/Http/Controllers/UserController.php

@@ -135,7 +135,12 @@ class UserController extends Controller
 
 	public function changePassword(Request $request) {
 		$validated = $request->validate([
-			'password' => 'required|confirmed|min:8|regex:/[a-z]/|regex:/[A-Z]/|regex:/[0-9]/'
+			'current_password' => 'password',
+			'password' => 'required|confirmed|min:8|regex:/.*[a-z].*/|regex:/.*[A-Z].*/|regex:/.*[0-9].*/'
 		]);
+
+		$user = Auth::user();
+		$user->password = Hash::make($request->password);
+		$user->save();
 	}
 }

resources/js/icons/plus-fill.vue

@@ -0,0 +1,5 @@
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-square-fill" viewBox="0 0 16 16">
+  <path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z"/>
+</svg>
+</template>

resources/js/icons/plus.vue

@@ -0,0 +1,6 @@
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-square" viewBox="0 0 16 16">
+  <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
+  <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
+</svg>
+</template>

resources/js/panel/panel.vue

@@ -26,7 +26,6 @@
 	</section>
 </div>
 <div v-else-if="active === '#orders'" id="main">
-	<div class="actions"><a class="new-order" href="#orders/new">New</a></div>
 	<section class="pending-pane">
 	<h4>Pending Orders</h4>
 	<ul>
@@ -87,7 +86,7 @@
 	<section class="change-password-pane">
 		<h4>Change Password</h4>
 		<h5>Current Password</h5><input name="current_passowrd" id="current_password" type="password">
-		<h5>New Password</h5><input id="changed_password" name="passowrd" type="password">
+		<h5>New Password</h5><input id="new_password" name="passowrd" type="password">
 		<h5>Confirm Password</h5><input id="confirm_password" name="confirm_passowrd" type="password">
 		<button @click="changePassword">Save<img class="loading-icon" src="../../images/loading-white.svg" alt=""></button>
 		<span></span>
@@ -129,6 +128,7 @@ function changeName() {
 	let pane = document.querySelector('.change-name-pane')
 
 	pane.classList.add('loading')
+	pane.classList.remove('error')
 	fetch("/panel/change-name", {
 		method: 'POST',
 		headers: {'Content-Type': 'application/json',
@@ -142,7 +142,7 @@ function changeName() {
 			info.textContent = 'Completed'
 		} else {
 			pane.classList.add('error')
-			info.textContent = 'Error:' + response.status
+			info.textContent = 'Error: ' + response.status
 		}
 
 		pane.classList.remove('loading')
@@ -155,6 +155,7 @@ function changeEmail() {
 	let pane = document.querySelector('.change-email-pane')
 
 	pane.classList.add('loading')
+	pane.classList.remove('error')
 	fetch("/panel/change-name", {
 		method: 'POST',
 		headers: {'Content-Type': 'application/json',
@@ -163,12 +164,37 @@ function changeEmail() {
 		body: JSON.stringify({'email': email}),
 	}).then(response => {
 		if (response.ok) {
-			response.json().then(data => {this.user = data})
 			pane.classList.add('completed')
 			info.textContent = 'Completed'
 		} else {
 			pane.classList.add('error')
-			info.textContent = 'Error:' + response.status
+			info.textContent = 'Error: ' + response.status
+		}
+
+		pane.classList.remove('loading')
+	})
+}
+
+function changePassword() {
+	let info = document.querySelector('.change-password-pane span')
+	let pane = document.querySelector('.change-password-pane')
+
+	pane.classList.add('loading')
+	pane.classList.remove('error')
+	fetch("/panel/change-password", {
+		method: 'POST',
+		headers: {'Content-Type': 'application/json',
+			'Accept': 'application/json',
+		'X-XSRF-TOKEN': this.token},
+		body: JSON.stringify({'current_password': document.getElementById('current_password').value, 'password': document.getElementById('new_password').value, 'password_confirmation': document.getElementById('confirm_password').value}),
+	}).then(response => {
+		response.json().then(data => {console.log(data)})
+		if (response.ok) {
+			pane.classList.add('completed')
+			info.textContent = 'Completed'
+		} else {
+			pane.classList.add('error')
+			info.textContent = 'Error: ' + response.status
 		}
 
 		pane.classList.remove('loading')
@@ -183,6 +209,6 @@ export default {
 	return {active: window.location.hash, user: '',
 	token: '', orders: '', historyPage: 1}
 	},
-	methods: {togglePending, toggleOrderItem, moveHistory, changeName, changeEmail}
+	methods: {togglePending, toggleOrderItem, moveHistory, changeName, changeEmail, changePassword}
 }
 </script>

resources/js/panel/sidebar.vue

@@ -8,6 +8,9 @@
 <a :class="{selected: active == '#orders'}" href="/panel#orders">
 <svg fill="currentColor" enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m16.12 1.929-10.891 5.576-4.329-2.13 10.699-5.283c.24-.122.528-.122.78 0z"/><path d="m23.088 5.375-11.082 5.49-4.15-2.045-.6-.305 10.903-5.575.6.304z"/><path d="m11.118 12.447-.012 11.553-10.614-5.539c-.3-.158-.492-.475-.492-.816v-10.688l4.498 2.216v3.896c0 .499.408.913.9.913s.9-.414.9-.913v-2.995l.6.292z"/><path d="m23.988 6.969-11.07 5.466-.012 11.553 11.094-5.793z"/></svg>
 </a>
+<a :class="{selected: active == '#new-order'}" href="/panel#new-order">
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M12,2C6.486,2,2,6.486,2,12s4.486,10,10,10c5.514,0,10-4.486,10-10S17.514,2,12,2z M17,13h-4v4h-2v-4H7v-2h4V7h2v4h4V13z"></path></svg>
+</a>
 <a :class="{selected: active == '#settings'}" href="/panel#settings">
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gear-fill" viewBox="0 0 16 16">
   <path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>

resources/scss/main.scss

@@ -943,6 +943,8 @@ main.panel {
 		height: 1.5em;
 		display: none;
 		color: white;
+		margin-left: 0.5em;
+		margin-right: 0.5em;
 	}
 
 	.loading .loading-icon {