Update account (#7)

SebKay · web-flow · commit 24bc97ac4315 · 2022-12-09T16:29:13.000Z
* Create AccountController

* Add Vue component for updating account

* Allow updating of account password

* Move Login and Register components into directories to keep things consistent

* Add AccountController tests
diff --git a/app/Http/Controllers/AccountController.php b/app/Http/Controllers/AccountController.php
@@ -0,0 +1,35 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Http\Requests\Account\AccountUpdate;
+use App\Http\Resources\UserResource;
+use Illuminate\Support\Facades\Auth;
+use Inertia\Inertia;
+
+class AccountController extends Controller
+{
+    public function edit()
+    {
+        $user = UserResource::make(Auth::user());
+
+        return Inertia::render('Account/Edit', [
+            'first_name' => $user->first_name,
+            'last_name'  => $user->last_name,
+            'email'      => $user->email,
+        ]);
+    }
+
+    public function update(AccountUpdate $request)
+    {
+        $user = $request->user();
+
+        $user->update($request->only('first_name', 'last_name', 'email'));
+        $user->updatePassword($request->validated('password'));
+
+        return redirect()->route('account.edit')->with('notice', [
+            'type'    => 'success',
+            'message' => 'Your account has been updated.',
+        ]);
+    }
+}
diff --git a/app/Http/Controllers/LoginController.php b/app/Http/Controllers/LoginController.php
@@ -16,7 +16,7 @@ public function show(Request $request)
     {
         $isProd = App::environment('production');
 
-        return Inertia::render('Login', [
+        return Inertia::render('Login/Show', [
             'email'    => !$isProd ? \env('SEED_ADMIN_EMAIL') : '',
             'password' => !$isProd ? '12345' : '',
             'remember' => !$isProd ? true : false,
diff --git a/app/Http/Controllers/RegisterController.php b/app/Http/Controllers/RegisterController.php
@@ -16,7 +16,7 @@ public function show()
     {
         $isProd = App::environment('production');
 
-        return Inertia::render('Register', [
+        return Inertia::render('Register/Show', [
             'first_name' => !$isProd ? 'Jim' : '',
             'last_name'  => !$isProd ? 'Gordon' : '',
             'email'      => !$isProd ? 'test@test.com' : '',
diff --git a/app/Http/Requests/Account/AccountUpdate.php b/app/Http/Requests/Account/AccountUpdate.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace App\Http\Requests\Account;
+
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rules\Password;
+
+class AccountUpdate extends FormRequest
+{
+    public function rules()
+    {
+        return [
+            'first_name'  => ['required', 'string', 'max:255'],
+            'last_name'   => ['required', 'string', 'max:255'],
+            'email'       => ['required', 'string', 'email', 'max:255', 'unique:users,email,' . Auth::id()],
+            'password'    => [
+                'nullable',
+                Password::min(6)
+                    ->mixedCase()
+                    ->numbers()
+                    ->symbols()
+                    ->uncompromised(),
+            ],
+        ];
+    }
+}
diff --git a/app/Models/User.php b/app/Models/User.php
@@ -58,4 +58,13 @@ public function currentOrganisation()
     {
         return $this->belongsTo(Organisation::class);
     }
+
+    public function updatePassword(?string $new_password = '')
+    {
+        if ($new_password && $new_password != $this->password) {
+            $this->password = $new_password;
+
+            $this->save();
+        }
+    }
 }
diff --git a/resources/js/Layouts/App.vue b/resources/js/Layouts/App.vue
@@ -5,6 +5,14 @@
 
     <div class="app-page">
         <div class="app-page__inner">
+            <Link :href="route('home')">Home</Link>
+            <br>
+            <Link :href="route('account.edit')">Account</Link>
+            <br>
+            <Link :href="route('logout')" method="post" as="button"
+                >Logout</Link
+            >
+
             <slot />
         </div>
     </div>
diff --git a/resources/js/Pages/Account/Edit.vue b/resources/js/Pages/Account/Edit.vue
@@ -0,0 +1,128 @@
+<template>
+    <Head :title="title" />
+
+    <h1 v-text="title"></h1>
+
+    <form class="form" @submit.prevent="login">
+        <div class="form__section">
+            <div class="form__row">
+                <div class="form__item">
+                    <label class="form__label" for="first_name"
+                        >First Name</label
+                    >
+                    <input
+                        id="first-name"
+                        type="text"
+                        v-model="form.first_name"
+                        tabindex="1"
+                        required
+                    />
+                </div>
+            </div>
+
+            <div class="form__row">
+                <div class="form__item">
+                    <label class="form__label" for="last_name">Last Name</label>
+                    <input
+                        id="last-name"
+                        type="text"
+                        v-model="form.last_name"
+                        tabindex="2"
+                        required
+                    />
+                </div>
+            </div>
+
+            <div class="form__row">
+                <div class="form__item">
+                    <label class="form__label" for="email">Email</label>
+                    <input
+                        id="email"
+                        type="email"
+                        v-model="form.email"
+                        tabindex="3"
+                        required
+                    />
+                </div>
+            </div>
+
+            <div class="form__row">
+                <div class="form__item">
+                    <label class="form__label" for="password">Password</label>
+                    <input
+                        id="password"
+                        type="password"
+                        v-model="form.password"
+                        tabindex="4"
+                    />
+                </div>
+            </div>
+
+            <div class="form__row">
+                <div class="form__item">
+                    <AppButton
+                        text="Update"
+                        tabindex="5"
+                        :disabled="form.processing"
+                    />
+                </div>
+            </div>
+        </div>
+    </form>
+</template>
+
+<script>
+    import AppLayout from "@js/Layouts/App.vue";
+    import AppButton from "@js/Components/AppButton.vue";
+
+    import { useForm } from "@inertiajs/inertia-vue3";
+
+    export default {
+        layout: AppLayout,
+
+        components: {
+            AppButton,
+        },
+
+        props: {
+            first_name: {
+                type: String,
+                default: "",
+            },
+            last_name: {
+                type: String,
+                default: "",
+            },
+            email: {
+                type: String,
+                default: "",
+            },
+        },
+
+        data() {
+            return {
+                title: "Update Account",
+                form: useForm({
+                    first_name: this.first_name,
+                    last_name: this.last_name,
+                    email: this.email,
+                    password: "",
+                }),
+            };
+        },
+
+        methods: {
+            login() {
+                let form = this.form;
+                form.patch(route("account.update"), {
+                    ...form,
+                    ...{
+                        onSuccess: () => {
+                            form.clearErrors();
+                        },
+                    },
+                });
+            },
+        },
+    };
+</script>
diff --git a/resources/js/Pages/Login/Show.vue b/resources/js/Pages/Login/Show.vue
diff --git a/resources/js/Pages/Register/Show.vue b/resources/js/Pages/Register/Show.vue
diff --git a/resources/js/pages/Index.vue b/resources/js/pages/Index.vue
@@ -4,8 +4,6 @@
     <h1 v-text="title"></h1>
 
     <p v-if="userCan($page.props, 'create-posts')">User can create posts.</p>
-
-    <Link :href="route('logout')" method="post" as="button">Logout</Link>
 </template>
 
 <script>
diff --git a/routes/web.php b/routes/web.php
@@ -1,26 +1,53 @@
 <?php
 
+use App\Http\Controllers\AccountController;
 use App\Http\Controllers\HomeController;
 use App\Http\Controllers\LoginController;
 use App\Http\Controllers\RegisterController;
 use Illuminate\Support\Facades\Route;
 
+/**
+ * Register
+ */
 Route::middleware('guest')->group(function () {
-    Route::controller(LoginController::class)->group(function () {
-        Route::get('login', 'show')->name('login');
-        Route::post('login', 'store')->name('login.store');
-    });
-
     Route::controller(RegisterController::class)->group(function () {
         Route::get('register', 'show')->name('register');
         Route::post('register', 'store')->name('register.store');
     });
 });
 
+/**
+ * Login
+ */
+Route::middleware('guest')->group(function () {
+    Route::controller(LoginController::class)->group(function () {
+        Route::get('login', 'show')->name('login');
+        Route::post('login', 'store')->name('login.store');
+    });
+});
+
+/**
+ * Logout
+ */
 Route::middleware(['auth'])->group(function () {
     Route::post('logout', [LoginController::class, 'destroy'])->name('logout');
 });
 
+/**
+ * Home
+ */
 Route::middleware('auth')->group(function () {
     Route::get('/', [HomeController::class, 'index'])->name('home');
 });
+
+/**
+ * Account
+ */
+Route::middleware('auth')->group(function () {
+    Route::prefix('account')->group(function () {
+        Route::controller(AccountController::class)->group(function () {
+            Route::get('', 'edit')->name('account.edit');
+            Route::patch('', 'update')->name('account.update');
+        });
+    });
+});
diff --git a/tests/Feature/Controllers/AccountControllerTest.php b/tests/Feature/Controllers/AccountControllerTest.php
@@ -0,0 +1,77 @@
+<?php
+
+use App\Models\User;
+use Illuminate\Support\Facades\Hash;
+use Inertia\Testing\AssertableInertia as Assert;
+
+use function Pest\Laravel\actingAs;
+use function Pest\Laravel\get;
+use function Pest\Laravel\patch;
+
+test("Authenticated users can access \"edit\" route", function () {
+    /**
+     * @var User
+     */
+    $user = User::factory()->create();
+
+    actingAs($user)
+        ->get(route('account.edit'))
+        ->assertStatus(200)
+        ->assertSessionHasNoErrors()
+        ->assertInertia(
+            fn (Assert $page) => $page
+                ->component('Account/Edit')
+        );
+});
+
+test("Guests can't access \"edit\" route", function () {
+    get(route('account.edit'))
+        ->assertRedirect(route('login'))
+        ->assertSessionHasNoErrors();
+});
+
+test("Authenticated users can update their details", function () {
+    /**
+     * @var User
+     */
+    $user = User::factory()->create([
+        'first_name' => 'Jim',
+        'last_name'  => 'Gordon',
+        'email'      => 'jim@test.com',
+        'password'   => 'oldPassword#123',
+    ]);
+
+    expect(Hash::check('oldPassword#123', $user->password))->toBeTrue();
+
+    expect($user)
+        ->first_name->toBe('Jim')
+        ->last_name->toBe('Gordon')
+        ->email->toBe('jim@test.com');
+
+    actingAs($user)
+        ->patch(route('account.update'), [
+            'first_name' => 'Tim',
+            'last_name'  => 'Drake',
+            'email'      => 'tim@test.com',
+            'password'   => 'newPassword#123',
+        ])
+        ->assertRedirect(route('account.edit'))
+        ->assertSessionHasNoErrors();
+
+    $user->refresh();
+
+    expect($user)
+        ->first_name->toBe('Tim')
+        ->last_name->toBe('Drake')
+        ->email->toBe('tim@test.com');
+
+    expect(Hash::check('newPassword#123', $user->password))->toBeTrue();
+});
+
+test("Guests can't access \"update\" route", function () {
+    patch(route('account.update'), [
+        'name'  => 'Tim Drake',
+        'email' => 'tim@test.com',
+    ])
+        ->assertRedirect(route('login'));
+});
diff --git a/tests/Feature/Controllers/LoginControllerTest.php b/tests/Feature/Controllers/LoginControllerTest.php
@@ -15,7 +15,7 @@
         ->assertSessionHasNoErrors()
         ->assertInertia(
             fn (Assert $page) => $page
-                ->component('Login')
+                ->component('Login/Show')
         );
 });
 
diff --git a/tests/Feature/Controllers/RegisterControllerTest.php b/tests/Feature/Controllers/RegisterControllerTest.php
diff --git a/tests/Integration/UserTest.php b/tests/Integration/UserTest.php

Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@ public function show(Request $request)`
`16`	`16`	`{`
`17`	`17`	`$isProd = App::environment('production');`
`18`	`18`
`19`		`- return Inertia::render('Login', [`
	`19`	`+ return Inertia::render('Login/Show', [`
`20`	`20`	`'email' => !$isProd ? \env('SEED_ADMIN_EMAIL') : '',`
`21`	`21`	`'password' => !$isProd ? '12345' : '',`
`22`	`22`	`'remember' => !$isProd ? true : false,`
Original file line number	Diff line number	Diff line change
`@@ -58,4 +58,13 @@ public function currentOrganisation()`
`58`	`58`	`{`
`59`	`59`	`return $this->belongsTo(Organisation::class);`
`60`	`60`	`}`
	`61`	`+`
	`62`	`+ public function updatePassword(?string $new_password = '')`
	`63`	`+ {`
	`64`	`+ if ($new_password && $new_password != $this->password) {`
	`65`	`+ $this->password = $new_password;`
	`66`	`+`
	`67`	`+ $this->save();`
	`68`	`+ }`
	`69`	`+ }`
`61`	`70`	`}`