Login password view

Raccoon254 · May 17, 2024 · a1ad864 · a1ad864
1 parent a6d00a2
commit a1ad864
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 21 deletions.
diff --git a/app/Http/Controllers/StaticPageController.php b/app/Http/Controllers/StaticPageController.php
@@ -10,7 +10,7 @@ public function welcome(): View
     {
         $process_steps = [
             [
-                'icon' => 'fa-solid avatar fa-pen-nib',
+                'icon' => 'fas avatar fa-pen-nib',
                 'color' => 'text-blue-500',
                 'title' => 'Place Your Order',
                 'text' => 'Submit your assignment details, including the topic, instructions, and due date.'

diff --git a/resources/css/app.css b/resources/css/app.css
@@ -11,7 +11,17 @@
     @apply px-4 py-2 bg-blue-500 text-white rounded;
 }
 
-/* Input */
-.input {
-    @apply px-4 py-2 border border-gray-300 rounded;
+/* Apply styles when input is autofilled */
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+    -webkit-box-shadow: 0 0 0 1000px white inset;
+    box-shadow: 0 0 0 1000px white inset;
+    -webkit-text-fill-color: #000;
+}
+
+/* Optional: Remove the default background color of the input field */
+input:-webkit-autofill {
+    background-color: transparent !important;
 }
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
@@ -1,40 +1,68 @@
 <x-guest-layout>
     <!-- Session Status -->
-    <x-auth-session-status class="mb-4" :status="session('status')" />
+    <x-auth-session-status class="mb-4" :status="session('status')"/>
 
     <form method="POST" action="{{ route('login') }}">
         @csrf
 
         <!-- Email Address -->
         <div>
-            <x-input-label for="email" :value="__('Email')" />
-            <x-text-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus autocomplete="username" />
-            <x-input-error :messages="$errors->get('email')" class="mt-2" />
+            <x-input-label for="email" :value="__('Email')"/>
+            <x-text-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required
+                          autofocus autocomplete="username"/>
+            <x-input-error :messages="$errors->get('email')" class="mt-2"/>
         </div>
 
         <!-- Password -->
         <div class="mt-4">
-            <x-input-label for="password" :value="__('Password')" />
+            <x-input-label for="password" :value="__('Password')"/>
 
-            <x-text-input id="password" class="block mt-1 w-full"
-                            type="password"
-                            name="password"
-                            required autocomplete="current-password" />
+            <div class="relative">
+                <x-text-input id="password" class="block mt-1 w-full"
+                              type="password"
+                              name="password"
+                              required autocomplete="current-password"/>
+                <!-- Show Password Button -->
+                <div class="absolute inset-y-0 right-0 pr-3 flex items-center text-sm leading-5">
+                    <button type="button" onclick="togglePasswordVisibility()">
+                        <i id="eyeIcon" class="fas fa-eye"></i>
+                    </button>
+                </div>
+            </div>
 
-            <x-input-error :messages="$errors->get('password')" class="mt-2" />
+            <script>
+                function togglePasswordVisibility() {
+                    var passwordInput = document.getElementById('password');
+                    var eyeIcon = document.getElementById('eyeIcon');
+
+                    if (passwordInput.type === "password") {
+                        passwordInput.type = "text";
+                        eyeIcon.classList.remove('fa-eye');
+                        eyeIcon.classList.add('fa-eye-slash');
+                    } else {
+                        passwordInput.type = "password";
+                        eyeIcon.classList.remove('fa-eye-slash');
+                        eyeIcon.classList.add('fa-eye');
+                    }
+                }
+            </script>
+
+            <x-input-error :messages="$errors->get('password')" class="mt-2"/>
         </div>
 
         <!-- Remember Me -->
         <div class="block mt-4">
             <label for="remember_me" class="inline-flex items-center">
-                <input id="remember_me" type="checkbox" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500" name="remember">
+                <input id="remember_me" type="checkbox"
+                       class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500" name="remember">
                 <span class="ms-2 text-sm text-gray-600">{{ __('Remember me') }}</span>
             </label>
         </div>
 
         <div class="flex items-center justify-end mt-4">
             @if (Route::has('password.request'))
-                <a class="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" href="{{ route('password.request') }}">
+                <a class="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+                   href="{{ route('password.request') }}">
                     {{ __('Forgot your password?') }}
                 </a>
             @endif

diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
@@ -10,7 +10,7 @@
         <!-- Fonts -->
         <link rel="preconnect" href="https://fonts.bunny.net">
         <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
-        <script src="https://kit.fontawesome.com/af6aba113a.js" crossorigin="anonymous"></script>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
 
         <!-- Scripts -->
         @vite(['resources/css/app.css', 'resources/js/app.js'])

diff --git a/resources/views/layouts/guest.blade.php b/resources/views/layouts/guest.blade.php
@@ -10,8 +10,7 @@
         <!-- Fonts -->
         <link rel="preconnect" href="https://fonts.bunny.net">
         <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
-        <script src="https://kit.fontawesome.com/af6aba113a.js" crossorigin="anonymous"></script>
-
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
         <!-- Scripts -->
         @vite(['resources/css/app.css', 'resources/js/app.js'])
     </head>

diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php
@@ -10,7 +10,8 @@
     <link rel="preconnect" href="https://fonts.bunny.net">
     <link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet"/>
     @vite(['resources/css/app.css', 'resources/js/app.js'])
-    <script src="https://kit.fontawesome.com/af6aba113a.js" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+
 </head>
 <body class="font-sans antialiased">
 <div class="bg-gray-50">
@@ -67,7 +68,8 @@ class="w-full max-w-md mx-auto rounded-lg">
                     <p class="text-lg text-black/50 mb-6">Our team of experienced writers have expertise in various
                         academic disciplines, ensuring you receive high-quality and well-researched assignments.</p>
                     <a href="#" class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-md">Learn
-                        More</a>
+                        More
+                    </a>
                 </div>
             </div>
         </div>

diff --git a/scholarspace b/scholarspace