Register and login working

app/Providers/FortifyServiceProvider.php

@@ -42,5 +42,13 @@ class FortifyServiceProvider extends ServiceProvider
         RateLimiter::for('two-factor', function (Request $request) {
             return Limit::perMinute(5)->by($request->session()->get('login.id'));
         });
+
+        Fortify::registerView(function () {
+            return view('auth.register');
+        });
+
+        Fortify::loginView(function () {
+            return view('auth.login');
+        });
     }
 }

config/fortify.php

@@ -73,7 +73,7 @@ return [
     |
     */
 
-    'home' => '/home',
+    'home' => '/',
 
     /*
     |--------------------------------------------------------------------------

package-lock.json

@@ -10,6 +10,7 @@
                 "tailwindcss": "^3.4.3"
             },
             "devDependencies": {
+                "@tailwindcss/forms": "^0.5.7",
                 "axios": "^1.6.4",
                 "laravel-vite-plugin": "^1.0",
                 "vite": "^5.0"
@@ -702,6 +703,18 @@
                 "win32"
             ]
         },
+        "node_modules/@tailwindcss/forms": {
+            "version": "0.5.7",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.7.tgz",
+            "integrity": "sha512-QE7X69iQI+ZXwldE+rzasvbJiyV/ju1FGHH0Qn2W3FKbuYtqp8LKcy6iSw79fVUT5/Vvf+0XgLCeYVG+UV6hOw==",
+            "dev": true,
+            "dependencies": {
+                "mini-svg-data-uri": "^1.2.3"
+            },
+            "peerDependencies": {
+                "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1"
+            }
+        },
         "node_modules/@types/estree": {
             "version": "1.0.5",
             "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -1410,6 +1423,15 @@
                 "node": ">= 0.6"
             }
         },
+        "node_modules/mini-svg-data-uri": {
+            "version": "1.4.4",
+            "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+            "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
+            "dev": true,
+            "bin": {
+                "mini-svg-data-uri": "cli.js"
+            }
+        },
         "node_modules/minimatch": {
             "version": "9.0.4",
             "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz",

package.json

@@ -6,6 +6,7 @@
         "build": "vite build"
     },
     "devDependencies": {
+        "@tailwindcss/forms": "^0.5.7",
         "axios": "^1.6.4",
         "laravel-vite-plugin": "^1.0",
         "vite": "^5.0"

resources/views/auth/login.blade.php

@@ -0,0 +1,13 @@
+<x-layout.guest>
+    <x-slot:heading>Log In</x-slot:heading>
+    <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-[480px]">
+        <div class="bg-white px-6 py-12 shadow sm:rounded-lg sm:px-12">
+            <form class="space-y-6" action="/login" method="POST">
+                @csrf
+                <x-auth.form-field name="email" label="Email address" type="email" autocomplete="email" required />
+                <x-auth.form-field name="password" label="Password" type="password" required />
+                <x-auth.form-button>Log In</x-auth.form-button>
+            </form>
+        </div>
+    </div>
+</x-layout.guest>

resources/views/auth/register.blade.php

@@ -0,0 +1,15 @@
+<x-layout.guest>
+    <x-slot:heading>Create an Account</x-slot:heading>
+    <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-[480px]">
+        <div class="bg-white px-6 py-12 shadow sm:rounded-lg sm:px-12">
+            <form class="space-y-6" action="/register" method="POST">
+                @csrf
+                <x-auth.form-field name="name" label="Full Name" type="text" autocomplete="name" required />
+                <x-auth.form-field name="email" label="Email address" type="email" autocomplete="email" required />
+                <x-auth.form-field name="password" label="Password" type="password" required />
+                <x-auth.form-field name="password_confirmation" label="Confirm Password" type="password" required />
+                <x-auth.form-button>Create Account</x-auth.form-button>
+            </form>
+        </div>
+    </div>
+</x-layout.guest>

resources/views/components/auth/form-button.blade.php

@@ -0,0 +1,6 @@
+@php
+    $buttonClasses = "flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600";
+@endphp
+<div>
+    <button {{ $attributes->merge(['class' => $buttonClasses, 'type'=>'submit']) }}>{{ $slot }}</button>
+</div>

resources/views/components/auth/form-field.blade.php

@@ -0,0 +1,21 @@
+@props([
+    'name',
+    'type',
+    'label' => 'text'
+])
+@php
+    $labelClasses = "block text-sm font-medium leading-6 text-gray-900";
+    $inputClasses = "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6";
+    $inputAttributes = [
+        'id' => $name,
+        'name' => $name,
+        'type' => $type,
+        'class' => $inputClasses
+    ];
+@endphp
+<div>
+    <label for="{{ $name }}" class="{{ $labelClasses }}">{{ $label }}</label>
+    <div class="mt-2">
+        <input {{$attributes->merge($inputAttributes)}}>
+    </div>
+</div>

resources/views/components/auth/rememberme-forgotpassword.blade.php

@@ -0,0 +1,10 @@
+<div class="flex items-center justify-between">
+    <div class="flex items-center">
+        <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600">
+        <label for="remember-me" class="ml-3 block text-sm leading-6 text-gray-900">Remember me</label>
+    </div>
+
+    <div class="text-sm leading-6">
+        <a href="#" class="font-semibold text-indigo-600 hover:text-indigo-500">Forgot password?</a>
+    </div>
+</div>

resources/views/components/auth/thirdpartylogin.blade.php

@@ -0,0 +1,29 @@
+<div>
+    <div class="relative mt-10">
+        <div class="absolute inset-0 flex items-center" aria-hidden="true">
+            <div class="w-full border-t border-gray-200"></div>
+        </div>
+        <div class="relative flex justify-center text-sm font-medium leading-6">
+            <span class="bg-white px-6 text-gray-900">Or continue with</span>
+        </div>
+    </div>
+
+    <div class="mt-6 grid grid-cols-2 gap-4">
+        <a href="#" class="flex w-full items-center justify-center gap-3 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:ring-transparent">
+            <svg class="h-5 w-5" viewBox="0 0 24 24" aria-hidden="true">
+                <path d="M12.0003 4.75C13.7703 4.75 15.3553 5.36002 16.6053 6.54998L20.0303 3.125C17.9502 1.19 15.2353 0 12.0003 0C7.31028 0 3.25527 2.69 1.28027 6.60998L5.27028 9.70498C6.21525 6.86002 8.87028 4.75 12.0003 4.75Z" fill="#EA4335" />
+                <path d="M23.49 12.275C23.49 11.49 23.415 10.73 23.3 10H12V14.51H18.47C18.18 15.99 17.34 17.25 16.08 18.1L19.945 21.1C22.2 19.01 23.49 15.92 23.49 12.275Z" fill="#4285F4" />
+                <path d="M5.26498 14.2949C5.02498 13.5699 4.88501 12.7999 4.88501 11.9999C4.88501 11.1999 5.01998 10.4299 5.26498 9.7049L1.275 6.60986C0.46 8.22986 0 10.0599 0 11.9999C0 13.9399 0.46 15.7699 1.28 17.3899L5.26498 14.2949Z" fill="#FBBC05" />
+                <path d="M12.0004 24.0001C15.2404 24.0001 17.9654 22.935 19.9454 21.095L16.0804 18.095C15.0054 18.82 13.6204 19.245 12.0004 19.245C8.8704 19.245 6.21537 17.135 5.2654 14.29L1.27539 17.385C3.25539 21.31 7.3104 24.0001 12.0004 24.0001Z" fill="#34A853" />
+            </svg>
+            <span class="text-sm font-semibold leading-6">Google</span>
+        </a>
+
+        <a href="#" class="flex w-full items-center justify-center gap-3 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:ring-transparent">
+            <svg class="h-5 w-5 fill-[#24292F]" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+                <path fill-rule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clip-rule="evenodd" />
+            </svg>
+            <span class="text-sm font-semibold leading-6">GitHub</span>
+        </a>
+    </div>
+</div>

resources/views/components/layout/guest.blade.php

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en" class="h-full bg-gray-50">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    @vite('resources/css/app.css')
+</head>
+<body class="h-full">
+<div class="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
+    <div class="sm:mx-auto sm:w-full sm:max-w-md">
+        <img class="mx-auto h-10 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" alt="Your Company">
+        <h2 class="mt-6 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">{{ $heading }}</h2>
+    </div>
+
+    {{ $slot }}
+</div>
+</body>
+</html>

resources/views/welcome.blade.php

@@ -1,3 +1,4 @@
+@php use Illuminate\Support\Facades\Auth; @endphp
 <!doctype html>
 <html lang="en">
 <head>
@@ -10,5 +11,19 @@
 </head>
 <body>
     <p class="text-blue-800 bg-amber-300">Hello, World</p>
+
+
+    <form method="POST" action="/logout">
+        @csrf
+        @auth
+            <p>Logged in as: {{ Auth::user()->name }}</p>
+            <x-auth.form-button>Logout</x-auth.form-button>
+        @endauth
+        @guest()
+            <p><a href="/register">Register</a></p>
+            <p><a href="/login">Login</a></p>
+        @endguest
+
+    </form>
 </body>
 </html>

tailwind.config.js

@@ -3,11 +3,12 @@ export default {
   content: [
 	"./resources/**/*.blade.php",
 	"./resources/**/*.js",
-	"./resources/**/*.vue",	
+	"./resources/**/*.vue",
 	],
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [
+      require('@tailwindcss/forms')
+  ],
 }
-