add remember me button

app/Http/Controllers/AuthenticateSessionController.php

@@ -17,8 +17,9 @@ class AuthenticateSessionController extends Controller
     public function authenticate(AuthenticateSessionRequest $request): RedirectResponse
     {
         $credentials = $request->only("email", "password");
+        $remember = $request->input("remember", false);
 
-        if (auth()->attempt($credentials)) {
+        if (auth()->attempt($credentials, $remember)) {
             $request->session()->regenerate();
 
             return redirect()->route("home");

app/Http/Requests/Auth/AuthenticateSessionRequest.php

@@ -18,6 +18,7 @@ public function rules(): array
         return [
             "email" => ["required", "email", "max:255"],
             "password" => ["required", "string", "min:8", "max:255"],
+            "remember" => ["nullable", "boolean"],
         ];
     }
 }

resources/js/components/Common/Checkbox.vue

@@ -1,11 +1,15 @@
+<script setup lang="ts">
+defineProps<{ required?: boolean }>()
+</script>
+
 <template>
   <div class="inline-flex items-center">
     <label class="relative flex items-center rounded-full cursor-pointer">
       <input
         id="checkbox"
-        required
         type="checkbox"
         class="before:content[''] peer relative size-5 cursor-pointer appearance-none rounded-md border-2 border-primary/30 transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:size-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity checked:border-primary checked:bg-primary checked:before:bg-primary hover:before:opacity-10"
+        :required="required"
       >
       <span
         class="absolute text-white transition-opacity opacity-0 pointer-events-none top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100"

resources/js/components/Home/LoginForm.vue

@@ -2,6 +2,7 @@
 import CustomInput from '@/components/Common/CustomInput.vue'
 import { useForm } from '@inertiajs/vue3'
 import { type Errors } from '@inertiajs/core'
+import Checkbox from '@/components/Common/Checkbox.vue'
 
 const { errors } = defineProps<{ errors:Errors }>()
 const form = useForm({
@@ -23,6 +24,13 @@ function submit() {
       <a href="/auth/forgot-password" class="duration-200 font-semibold leading-6 text-primary hover:text-primary-dark text-sm">Nie pamiętam hasła</a>
     </div>
 
+    <label class="mx-2 mt-4 flex flex-row items-center gap-4">
+      <Checkbox />
+      <p class="w-fit text-sm text-gray-500">
+        Zapamiętaj mnie
+      </p>
+    </label>
+
     <div>
       <button
         :disabled="form.processing"