From 3b2ea8115208c820d25df9ce915bbd7cba3b583b Mon Sep 17 00:00:00 2001 From: Immanuel Onyeka Date: Sun, 23 May 2021 10:23:50 -0400 Subject: [PATCH] Add feature for display name changes --- app/Http/Controllers/UserController.php | 23 +++++++++++-- resources/images/loading-white.svg | 1 + resources/js/main.js | 2 +- resources/js/panel/panel.vue | 45 ++++++++++++++++++++----- resources/scss/main.scss | 33 ++++++++++++++++-- routes/web.php | 9 +++++ 6 files changed, 98 insertions(+), 15 deletions(-) create mode 100644 resources/images/loading-white.svg diff --git a/app/Http/Controllers/UserController.php b/app/Http/Controllers/UserController.php index eccb8c3..4b97600 100644 --- a/app/Http/Controllers/UserController.php +++ b/app/Http/Controllers/UserController.php @@ -16,9 +16,8 @@ class UserController extends Controller { public function create(Request $request) { $validated = $request->validate([ - 'name' => 'required', + 'name' => 'required|max:30', 'email' => 'required|email|unique:users,email', - /* 'password' => 'required' */ 'password' => 'required|confirmed|min:8|regex:/[a-z]/|regex:/[A-Z]/|regex:/[0-9]/' ]); @@ -87,7 +86,27 @@ class UserController extends Controller /* Log::debug(Auth::user()->orders()->service_name); */ return Auth::user()->orders()->with('service')->withCasts(['updated_at' => 'datetime:d-m-Y'])->get(); + } + + public function changeName(Request $request) { + $validated = $request->validate([ + 'name' => 'required|max:30' + ]); + $user = Auth::user(); + $user->name = $request->name; + $user->save(); + return $user; + } + public function changeEmail(Request $request) { + $validated = $request->validate([ + 'email' => 'required|email|unique:users,email', + ]); } + public function changePassword(Request $request) { + $validated = $request->validate([ + 'password' => 'required|confirmed|min:8|regex:/[a-z]/|regex:/[A-Z]/|regex:/[0-9]/' + ]); + } } diff --git a/resources/images/loading-white.svg b/resources/images/loading-white.svg new file mode 100644 index 0000000..8f5a871 --- /dev/null +++ b/resources/images/loading-white.svg @@ -0,0 +1 @@ + diff --git a/resources/js/main.js b/resources/js/main.js index 83def40..c20b453 100644 --- a/resources/js/main.js +++ b/resources/js/main.js @@ -137,8 +137,8 @@ if (window.location.pathname == '/') { } else if (window.location.pathname == '/verify-email') { document.getElementById('resend_verification').addEventListener("click", resendLink) } else if (window.location.pathname == '/panel') { - if (!token) {getToken(app)} const app = createApp(Panel).mount('#panel') + getToken().then(()=> {app.token = token}) window.onhashchange = ()=>{app.active = location.hash} getUser(app) getOrders(app) diff --git a/resources/js/panel/panel.vue b/resources/js/panel/panel.vue index 30a392f..a7ff78c 100644 --- a/resources/js/panel/panel.vue +++ b/resources/js/panel/panel.vue @@ -74,20 +74,21 @@

Settings

Name

- - + + +

Email

- - + +

Change Password

-
Current Password
-
New Password
-
Confirm Password
- +
Current Password
+
New Password
+
Confirm Password
+
@@ -119,6 +120,32 @@ function moveHistory(forward) { } } +function changeName() { + let name = document.getElementById('changed_name').value + let info = document.querySelector('.change-name-pane span') + let pane = document.querySelector('.change-name-pane') + + pane.classList.add('loading') + fetch("/panel/change-name", { + method: 'POST', + headers: {'Content-Type': 'application/json', + 'Accept': 'application/json', + 'X-XSRF-TOKEN': this.token}, + body: JSON.stringify({'name': name}), + }).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 + } + + pane.classList.remove('loading') + }) +} + export default { components: { Sidebar, @@ -127,6 +154,6 @@ export default { return {active: window.location.hash, user: '', token: '', orders: '', historyPage: 1} }, - methods: {togglePending, toggleOrderItem, moveHistory} + methods: {togglePending, toggleOrderItem, moveHistory, changeName} } diff --git a/resources/scss/main.scss b/resources/scss/main.scss index f28d09a..c8d2b08 100644 --- a/resources/scss/main.scss +++ b/resources/scss/main.scss @@ -43,6 +43,12 @@ ul { padding: 0; } +input { + border: 2px solid black; + border-radius: 20px; + padding: 4px; +} + .services-cards li { padding-bottom: 8px; &:before { @@ -915,18 +921,39 @@ main.panel { display: inline-block; margin-right: 2em; margin-top: 0; + margin-bottom: 0.5em; color: vars.getColor('brand-orange'); } input { - display: inline-block; + display: block; margin-bottom: 1em; right: 2px; - margin-left: auto; position: relative; } button { - display: block; + &>*{vertical-align: middle;} + margin-right: 10px; + display: inline-block; @include vars.inverting-button(vars.getColor('text-blue-medium'), white); } + + .loading-icon { + width: 1.5em; + height: 1.5em; + display: none; + } + + .loading .loading-icon { + display: inline; + } + + .completed span { + color: vars.getColor('green'); + } + + .error span { + color: vars.getColor('red-alert'); + } + } diff --git a/routes/web.php b/routes/web.php index 99bf643..77fd05d 100644 --- a/routes/web.php +++ b/routes/web.php @@ -64,3 +64,12 @@ Route::get('/panel/orders', [UserController::class, Route::get('/logout', [UserController::class, 'logout'])->middleware('auth'); + +Route::post('/panel/change-name', [UserController::class, + 'changeName'])->middleware('auth'); + +Route::post('/panel/change-email', [UserController::class, + 'changeEmail'])->middleware('auth'); + +Route::post('/panel/change-password', [UserController::class, + 'changePassword'])->middleware('auth');