refactor: added demo logins to login page

Author: syntaxlexx

TODO.md

@@ -2,7 +2,7 @@
 - [x] Homepage
 - [x] Footer
 - [x] About us page
-- [ ] Contact us page
+- [x] Contact us page
 - [x] Login
 - [x] Register
 - [ ] Forgot Password
@@ -11,7 +11,7 @@
 - [x] Admin - dashboard
 - [x] Admin - configurations
 - [x] Admin - reset system
-- [ ] Admin Contact us messages 
+- [x] Admin Contact us messages 
 - [ ] Admin - profile
 - [x] User - dashboard
 - [ ] User - profile
@@ -28,7 +28,7 @@
 - [ ] Social logins (Socialite)
 - [ ] Admin - dashboard
 - [ ] Admin - configurations
-- [ ] Admin - manage contact form messages
+- [x] Admin - manage contact form messages
 - [ ] Admin - reset system
 - [ ] Admin - profile
 - [ ] User - dashboard

app/Actions/Auth/Pages/Login.php

@@ -4,6 +4,7 @@
 
 use App\Traits\CustomControllerResponsesTrait;
 use App\Traits\ThemesTrait;
+use Illuminate\Http\Request;
 use Lorisleiva\Actions\Concerns\AsAction;
 
 class Login
@@ -12,18 +13,19 @@ class Login
     use ThemesTrait;
     use CustomControllerResponsesTrait;
 
-    public function asController()
+    public function asController(Request $request)
     {
         $params = [
             'canRegister' => setting('allow_user_registrations'),
             'canResetPassword' => setting('allow_user_reset_password'),
             'oauth_providers' => config('system.providers') ?? []
         ];
 
-        if(isDemo()) {
+        if($request->is_demo) {
             $params = array_merge([
                 'username' => config('system.defaults.demo_username'),
                 'password' => config('system.defaults.demo_password'),
+                'is_demo' => true
             ], $params);
         }
 

app/Actions/User/Dashboard.php

@@ -16,7 +16,7 @@ public function asController()
             return redirect()->route('admin.dashboard');
         }
 
-        return $this->generateBackendPage('User/Dashboard', [
+        return $this->generateBackendPage('Dashboard', [
             'title' => "Welcome Back, " . doe()->full_name,
         ]);
     }

resources/ts/Layouts/AppLayout.svelte

@@ -85,13 +85,17 @@
                         <LightSwitch />
                     </div>
 
-                    <span class="">
+                    <span class="mr-2">
                         <a href={route('contact')} use:inertia class="btn btn-sm variant-ghost-surface">
                             <i class="bx bx-support text-[20px]" />
                             Talk to Us
                         </a>
                     </span>
 
+                    <span class="">
+                        <a href={route('demo')} use:inertia class="btn btn-sm variant-ghost-surface"> Demo </a>
+                    </span>
+
                     <button
                         type="button"
                         class="inline-flex items-center p-2 ml-2 text-sm rounded-lg md:hidden text-primary-token lg:hover:bg-primary-100 focus:outline-none focus:ring-2 focus:ring-primary-300 dark:focus:ring-primary-700"

resources/ts/Pages/Auth/Login.svelte

@@ -12,10 +12,15 @@
     export let canRegister: boolean
     export let status: string
     export let oauth_providers: string[]
+    export let username: string | null
+    export let password: string | null
+    export let is_demo: boolean = false
+
+    let showPassword = false
 
     let form = useForm({
-        username: '',
-        password: '',
+        username: username,
+        password: password,
         remember: false,
     })
 
@@ -32,6 +37,24 @@
             <h2 class="text-center">Login</h2>
             <p class="text-center">Fill in the form below</p>
             <br />
+            {#if is_demo}
+                <div class="card p-3">
+                    <h5 class="text-center">Demo Logins</h5>
+                    <div class="flex justify-between">
+                        <div>
+                            <p>Admin</p>
+                            <p>username: <strong>acelords</strong></p>
+                            <p>Password: <strong>acelords</strong></p>
+                        </div>
+                        <div>
+                            <p>User</p>
+                            <p>username: <strong>user</strong></p>
+                            <p>Password: <strong>user</strong></p>
+                        </div>
+                    </div>
+                </div>
+                <br />
+            {/if}
             <form on:submit|preventDefault={handleSubmit}>
                 <label class="label">
                     <input
@@ -48,13 +71,28 @@
                 {/if}
 
                 <label class="label my-3">
-                    <input
-                        class="input"
-                        class:input-error={$form.errors.username}
-                        type="password"
-                        placeholder="Password"
-                        bind:value={$form.password}
-                    />
+                    <div class="input-group input-group-divider grid-cols-[1fr_auto]">
+                        {#if showPassword}
+                            <input
+                                class="input"
+                                class:input-error={$form.errors.username}
+                                type="text"
+                                placeholder="Password"
+                                bind:value={$form.password}
+                            />
+                        {:else}
+                            <input
+                                class="input"
+                                class:input-error={$form.errors.username}
+                                type="password"
+                                placeholder="Password"
+                                bind:value={$form.password}
+                            />
+                        {/if}
+                        <button type="button" on:click={() => (showPassword = !showPassword)}>
+                            <i class="bx bx-lock" />
+                        </button>
+                    </div>
                 </label>
 
                 <!-- <label class="flex items-center space-x-2  my-3 ml-1">

routes/web.php

@@ -48,10 +48,9 @@
     return redirect()->back();
 })->name('change-language');
 
-Route::get('/demo', function() {
+Route::get('/demo', function () {
     return redirect()->to(route('login', [
-        'username' => config('system.default.demo_username'),
-        'password' => config('system.default.demo_password'),
+        'is_demo' => true,
     ]));
 })->name('demo');