Adding more content to dd auth

thedevdojo · Apr 18, 2024 · eb4dd8e · eb4dd8e
1 parent 59d7c40
commit eb4dd8e
Show file tree

Hide file tree

Showing 27 changed files with 351 additions and 201 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-<p align="center"><a href="https://devdojo.com" target="_blank"><img src="https://cdn.devdojo.com/images/april2024/devdojo-auth.png" width="auto" height="64px" alt="Auth Logo"></a></p>
+<p align="center"><a href="https://devdojo.com" target="_blank"><img src="https://cdn.devdojo.com/images/april2024/dd-auth-logo.png" width="auto" height="64px" alt="Auth Logo"></a></p>
 <br>
 <p align="center">
 <a href="https://github.com/thedevdojo/auth/actions"><img src="https://github.com/thedevdojo/auth/workflows/tests/badge.svg" alt="Build Status"></a>

diff --git a/composer.json b/composer.json
@@ -20,7 +20,8 @@
         "illuminate/support": "^8.0|^9.0|^10.0|^11.0",
         "laravel/folio": "^1.0",
         "livewire/livewire": "^3.0",
-        "livewire/volt": "^1.0"
+        "livewire/volt": "^1.0",
+        "codeat3/blade-phosphor-icons": "^2.0"
     },
     "require-dev": {
         "orchestra/testbench": "^6.0",

diff --git a/config/devdojo/auth.php → config/devdojo/auth/auth.php b/config/devdojo/auth.php → config/devdojo/auth/auth.php
diff --git a/resources/views/components/devdojoauth/input.blade.php b/resources/views/components/devdojoauth/input.blade.php
diff --git a/resources/views/components/devdojoauth/logo.blade.php b/resources/views/components/devdojoauth/logo.blade.php
diff --git a/...s/components/devdojoauth/button.blade.php → ...iews/components/elements/button.blade.php b/...s/components/devdojoauth/button.blade.php → ...iews/components/elements/button.blade.php
@@ -19,12 +19,12 @@
 
 @php
     $typeClasses = match ($type) {
-        'primary' => 'bg-gray-800 dark:bg-gray-100 text-white dark:text-gray-700 hover:bg-gray-900 dark:focus:ring-offset-gray-900 dark:focus:ring-gray-100 dark:hover:bg-white dark:hover:text-gray-800 focus:ring-2 focus:ring-gray-900 focus:ring-offset-2',
-        'secondary' => 'bg-white border text-gray-500 hover:text-gray-700 border-gray-200/70 dark:focus:ring-offset-gray-900 dark:border-gray-400/10 hover:bg-gray-50 active:bg-white dark:focus:ring-gray-700 focus:bg-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-200/60 dark:bg-gray-800/50 dark:hover:bg-gray-800/70 dark:text-gray-400 focus:shadow-outline',
-        'success' => 'bg-green-600 text-white hover:bg-green-600/90 focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:bg-green-700/90 focus:ring-green-700',
-        'info' => 'bg-blue-600 text-white hover:bg-blue-600/90 focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:bg-blue-700/90 focus:ring-blue-700',
-        'warning' => 'bg-amber-500 text-white hover:bg-amber-500/90 focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:bg-amber-600/90 focus:ring-amber-600',
-        'danger' => 'bg-red-600 text-white hover:bg-red-600/90 focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:bg-red-700/90 focus:ring-red-700',
+        'primary' => 'bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-700 hover:bg-zinc-950 dark:focus:ring-offset-zinc-900 dark:focus:ring-zinc-100 dark:hover:bg-white dark:hover:text-zinc-800 focus:ring-2 focus:ring-zinc-950 focus:ring-offset-2',
+        'secondary' => 'bg-white border text-zinc-500 hover:text-zinc-700 border-zinc-200/70 dark:focus:ring-offset-zinc-900 dark:border-zinc-400/10 hover:bg-zinc-50 active:bg-white dark:focus:ring-zinc-700 focus:bg-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-zinc-200/60 dark:bg-zinc-800/50 dark:hover:bg-zinc-800/70 dark:text-zinc-400 focus:shadow-outline',
+        'success' => 'bg-green-600 text-white hover:bg-green-600/90 focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-zinc-900 focus:bg-green-700/90 focus:ring-green-700',
+        'info' => 'bg-blue-600 text-white hover:bg-blue-600/90 focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-zinc-900 focus:bg-blue-700/90 focus:ring-blue-700',
+        'warning' => 'bg-amber-500 text-white hover:bg-amber-500/90 focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-zinc-900 focus:bg-amber-600/90 focus:ring-amber-600',
+        'danger' => 'bg-red-600 text-white hover:bg-red-600/90 focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-zinc-900 focus:bg-red-700/90 focus:ring-red-700',
     };
 @endphp
 

diff --git a/...components/devdojoauth/checkbox.blade.php → ...ws/components/elements/checkbox.blade.php b/...components/devdojoauth/checkbox.blade.php → ...ws/components/elements/checkbox.blade.php
diff --git a/...omponents/devdojoauth/container.blade.php → ...s/components/elements/container.blade.php b/...omponents/devdojoauth/container.blade.php → ...s/components/elements/container.blade.php
diff --git a/.../components/devdojoauth/heading.blade.php → ...ews/components/elements/heading.blade.php b/.../components/devdojoauth/heading.blade.php → ...ews/components/elements/heading.blade.php
@@ -1,7 +1,7 @@
 <div class="sm:mx-auto sm:w-full sm:max-w-md">
-    <x-auth::devdojoauth.link href="/">
-        <x-auth::devdojoauth.logo class="mx-auto w-auto h-9 text-gray-700 fill-current dark:text-gray-100" />
-    </x-auth::devdojoauth.link>
+    <x-auth::elements.link href="/">
+        <x-auth::elements.logo class="mx-auto w-auto h-9 fill-current text-zinc-900 dark:text-gray-100" />
+    </x-auth::elements.link>
     <h2 class="mt-2 text-2xl font-medium leading-9 text-center text-gray-800 dark:text-gray-200">{{ $text ?? '' }}</h2>
     @if($description ?? false)
         <p class="mb-1.5 space-x-0.5 text-sm leading-5 text-center text-gray-500 dark:text-gray-400">{{ $description ?? '' }}</p>

diff --git a/resources/views/components/elements/input.blade.php b/resources/views/components/elements/input.blade.php
@@ -0,0 +1,24 @@
+@props([
+    'label' => null,
+    'id' => null,
+    'name' => null,
+    'type' => 'text',
+])
+
+@php $wireModel = $attributes->get('wire:model'); @endphp
+
+<div>
+    @if($label)
+        <label for="{{ $id ?? '' }}" class="block text-sm font-medium leading-5 text-gray-700 dark:text-gray-300">
+            {{ $label  }}
+        </label>
+    @endif
+
+    <div data-model="{{ $wireModel }}" class="mt-1.5 rounded-md shadow-sm">
+        <input {{ $attributes }} {{ $attributes->whereStartsWith('wire:model') }} id="{{ $id ?? '' }}" name="{{ $name ?? '' }}" type="{{ $type ?? '' }}" required autofocus class="appearance-none flex w-full h-10 px-3 py-2 text-sm bg-white dark:text-gray-300 dark:bg-white/[4%] border rounded-md border-gray-300 dark:border-white/10 ring-offset-background placeholder:text-gray-500 dark:placeholder:text-gray-400 focus:border-zinc-800 dark:focus:border-gray-700 focus:outline-none focus:ring-1 focus:ring-zinc-800 dark:focus:ring-white/20 disabled:cursor-not-allowed disabled:opacity-50 @error($wireModel) border-red-300 text-red-900 placeholder-red-300 focus:border-red-300 focus:ring-red @enderror" />
+    </div>
+
+    @error($wireModel)
+        <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
+    @enderror
+</div>
diff --git a/...ews/components/devdojoauth/link.blade.php → .../views/components/elements/link.blade.php b/...ews/components/devdojoauth/link.blade.php → .../views/components/elements/link.blade.php
diff --git a/resources/views/components/elements/logo.blade.php b/resources/views/components/elements/logo.blade.php
@@ -0,0 +1,6 @@
+<svg {{ $attributes }} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 151 201" fill="none"><path fill="currentColor" fill-rule="evenodd" d="M75.847.132c-28.092 23.884-45.7 25-75 25v96.125c0 15.285 4.238 26.069 12.393 35.442l17.526-33.718.345-.661 5.06-9.74L76.496 35l40.323 77.58c20.95 2.616 30.894 8.93 30.894 8.93a219.818 219.818 0 0 0-24.117 1.321l-1.371.15c-1.345.158-2.69.326-4.017.502a227.52 227.52 0 0 0-41.712 9.705C50.36 141.907 30.44 153.7 18.4 161.993c9.303 8.615 22.183 16.475 38.353 26.344 5.927 3.616 12.296 7.503 19.093 11.795 6.796-4.292 13.165-8.179 19.091-11.795 16.494-10.066 29.564-18.042 38.907-26.861a205.398 205.398 0 0 0-35.223-19.64 225.71 225.71 0 0 1 30.106-6.358l10.533 20.272c7.627-9.153 11.586-19.721 11.586-34.493V25.132c-29.3 0-46.909-1.117-75-25Zm.649 112.615c-6.892.793-14.306 1.973-22.26 3.655l2.566-4.923 19.694-37.896 19.693 37.896c-6.582.089-13.155.513-19.693 1.268Z" clip-rule="evenodd"/></svg>
+{{-- <svg {{ $attributes }} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 200" fill="none"><path fill="currentColor" fill-rule="evenodd" d="M75.847.132c-28.092 23.884-45.7 25-75 25v96.125c0 15.944 4.611 26.99 13.47 36.646l21.07-40.537.305-.584 4.477-8.617 35.674-68.633 35.673 68.633c18.533 2.314 27.331 7.9 27.331 7.9a194.232 194.232 0 0 0-21.336 1.169l-1.213.132c-1.19.141-2.379.289-3.553.444a201.313 201.313 0 0 0-36.902 8.586c-32.307 10.779-53.882 26.867-60.694 32.397 9.453 9.922 23.457 18.468 41.606 29.544 5.926 3.616 12.295 7.503 19.092 11.795 6.796-4.292 13.165-8.179 19.091-11.795 18.125-11.061 32.116-19.599 41.569-29.505a181.646 181.646 0 0 0-41.09-24.785 199.693 199.693 0 0 1 26.634-5.625l15.32 29.486c8.862-9.657 13.476-20.704 13.476-36.651V25.132c-29.3 0-46.909-1.117-75-25Zm-.004 108.181c-6.097.701-12.656 1.745-19.692 3.233l2.27-4.355 17.422-33.526 17.422 33.526c-5.823.079-11.638.453-17.422 1.122Z" clip-rule="evenodd"/></svg> --}}
+{{-- <svg {{ $attributes }} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 200" fill="none"><path fill="currentColor" fill-rule="evenodd" d="M75.847.132c-28.092 23.884-45.7 25-75 25v96.125c0 12.192 2.696 21.52 7.926 29.552l14.305-27.521.399-.764 5.854-11.269L75.984 21.5l46.652 89.755c13.007 1.624 22.348 4.481 28.211 6.779V25.132c-29.3 0-46.909-1.117-75-25ZM56.755 188.337c-16.123-9.839-28.975-17.682-38.271-26.268 13.98-8.691 33.47-18.955 57.5-26.972a263.162 263.162 0 0 1 48.259-11.228c1.535-.204 3.091-.398 4.646-.581l1.587-.173a254.077 254.077 0 0 1 20.369-1.419c-.063 11.857-2.704 20.992-7.77 28.874l-6.663-12.824a260.987 260.987 0 0 0-34.83 7.357 237.646 237.646 0 0 1 31.804 16.803c-9.31 8.649-22.222 16.529-38.448 26.431-5.926 3.616-12.295 7.503-19.091 11.795-6.797-4.292-13.166-8.179-19.092-11.795Zm19.229-76.889c-7.974.917-16.551 2.283-25.752 4.229l2.968-5.696 22.784-43.843 22.783 43.843c-7.614.103-15.219.593-22.783 1.467Z" clip-rule="evenodd"/></svg> --}}
+{{-- <svg {{ $attributes }} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 200" fill="none"><path fill="currentColor" fill-rule="evenodd" d="M75 0C46.908 23.883 29.3 25 0 25v96.125c0 32.962 19.71 44.989 55.908 67.08C61.835 191.821 68.204 195.708 75 200c6.796-4.292 13.165-8.179 19.092-11.795C130.29 166.114 150 154.087 150 121.125V25c-29.3 0-46.908-1.117-75-25ZM56.193 107.391a.624.624 0 0 0-.203-.713L29.127 83.622a.107.107 0 0 1-.037-.1.114.114 0 0 1 .066-.085c.222-.099.432-.148.63-.148 10.082-.014 21.09-.022 33.021-.023.141 0 .28.005.417.017.776.061.91-.375 1.09-.96.015-.049.03-.1.047-.15C67.808 71.28 71.254 60.385 74.7 49.486c.102-.321.286-.376.55-.165.066.052.113.12.14.206 3.5 11.034 7.002 22.083 10.503 33.146.127.398.4.597.817.597l33.625-.002c.69 0 .761.208.212.626l-74.39 56.77a.217.217 0 0 1-.228.023.225.225 0 0 1-.09-.077.225.225 0 0 1-.038-.114 2.282 2.282 0 0 1 .12-.809 6090.597 6090.597 0 0 0 10.273-32.297Zm39.159 5.317a.083.083 0 0 0-.033.016l-14.247 10.888a.502.502 0 0 0-.193.404.498.498 0 0 0 .21.394c7.857 5.484 15.66 10.931 23.407 16.342.12.085.214.065.281-.061a.544.544 0 0 0 .041-.44 13288.85 13288.85 0 0 1-8.937-26.602 3.714 3.714 0 0 0-.435-.905.09.09 0 0 0-.025-.025.097.097 0 0 0-.033-.013.088.088 0 0 0-.037.002Z" clip-rule="evenodd"/></svg> --}}
+{{-- <svg {{ $attributes }} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 200" fill="none"><path fill="currentColor" fill-rule="evenodd" d="M0 25c29.3 0 46.908-1.117 75-25 28.092 23.883 45.7 25 75 25v96.125c0 32.962-19.709 44.989-55.908 67.08C88.165 191.821 81.796 195.708 75 200c-6.796-4.292-13.165-8.179-19.092-11.795C19.71 166.114 0 154.087 0 121.125V25Zm84.837 60.957L75 55.686l-9.837 30.27h-31.83l25.75 18.712-9.837 30.271L75 116.231l25.75 18.708-9.837-30.271 25.754-18.711h-31.83Z" clip-rule="evenodd"/></svg> --}}
+{{-- <svg {{ $attributes }} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 200"  fill="none"><path fill="currentColor" fill-rule="evenodd" d="M0 25c29.3 0 46.908-1.117 75-25 28.092 23.883 45.7 25 75 25v96.125c0 32.962-19.709 44.989-55.908 67.08C88.165 191.821 81.796 195.708 75 200c-6.796-4.292-13.165-8.179-19.092-11.795C19.71 166.114 0 154.087 0 121.125V25Zm55 48v6.667h6.667V73c0-7.353 5.983-13.333 13.333-13.333 7.35 0 13.333 5.98 13.333 13.333v6.667H95V73c0-11.043-8.96-20-20-20-11.043 0-20 8.957-20 20Zm-10 60V86.333h60V133H45Z" clip-rule="evenodd"/></svg> --}}
diff --git a/...omponents/devdojoauth/text-link.blade.php → ...s/components/elements/text-link.blade.php b/...omponents/devdojoauth/text-link.blade.php → ...s/components/elements/text-link.blade.php
@@ -1,5 +1,5 @@
-<x-auth::devdojoauth.link
+<x-auth::elements.link
     {{ $attributes->except('wire:navigate') }}
     class="text-gray-500 underline cursor-pointer dark:text-gray-400 dark:hover:text-gray-300 hover:text-gray-800">
     {{ $slot }}
-</x-auth::devdojoauth.link>
+</x-auth::elements.link>
diff --git a/resources/views/components/layouts/app.blade.php b/resources/views/components/layouts/app.blade.php
@@ -6,7 +6,7 @@
         <meta name="csrf-token" content="{{ csrf_token() }}">
 
         <title>{{ config('app.name', 'Laravel') }}</title>
-        @if(config('devdojo.auth.dev'))
+        @if(config('devdojo.auth.auth.dev'))
             @vite(['packages/devdojo/auth/resources/css/auth.css', 'packages/devdojo/auth/resources/css/auth.js'])
         @else
             <script src="/auth/build/assets/scripts.js"></script>
@@ -15,7 +15,8 @@
 
     </head>
 <body class="bg-gray-50 dark:bg-zinc-950">
-
-    {{ $slot }}
+    <div class="flex flex-col justify-center items-stretch py-10 w-screen min-h-screen sm:items-center">
+        {{ $slot }} 
+    </div>
 </body>
 </html>
diff --git a/resources/views/components/layouts/setup.blade.php b/resources/views/components/layouts/setup.blade.php
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="csrf-token" content="{{ csrf_token() }}">
+
+        <title>Authentication Setup</title>
+        @if(config('devdojo.auth.auth.dev'))
+            @vite(['packages/devdojo/auth/resources/css/auth.css', 'packages/devdojo/auth/resources/css/auth.js'])
+        @else
+            <script src="/auth/build/assets/scripts.js"></script>
+            <link rel="stylesheet" href="/auth/build/assets/styles.css" />
+        @endif
+
+    </head>
+<body class="bg-gray-50 dark:bg-zinc-950">
+    <div class="flex justify-center items-start w-screen h-screen">
+
+        <div class="w-80 h-screen">
+            <div class="flex items-center px-5 space-x-1.5 w-full h-20">
+                <x-auth::elements.logo class="w-auto h-7"></x-auth::elements.log>
+                <h1 class="text-base font-bold leading-none">Authentication</h1>
+                <p class="flex text-sm font-light leading-none">setup</p>
+            </div>
+            <div class="px-5 py-2">
+                <a href="https://auth.devdojo.com/docs" target="_blank" class="block p-5 text-xs bg-white rounded-xl border duration-300 ease-out hover:shadow-md opacity-[0.98] hover:opacity-100 border-zinc-200">
+                    <span class="flex flex-col">
+                        <span class="font-semibold">Learn about configs & setup</span>
+                        <span class="underline">Visit the documenation here</span>
+                    </span>
+                </a>
+            </div>
+            <x-auth::setup.sidebar-links></x-auth::setup.sidebar-links>
+        </div>
+        <div class="flex items-stretch pt-2 w-full h-screen justify-stretch">
+            <div class="w-full h-full bg-white rounded-tl-2xl border-t border-l border-zinc-200">
+                {{ $slot }}
+            </div>
+        </div>
+    </div>
+
+</body>
+</html>
diff --git a/resources/views/components/setup/sidebar-link-item.blade.php b/resources/views/components/setup/sidebar-link-item.blade.php
@@ -0,0 +1,11 @@
+<li>
+    <a href="{{ $href ?? '' }}" class="flex gap-x-2 items-center px-2 py-1.5 text-sm font-medium leading-6 rounded-md text-zinc-500 hover:text-zinc-700 hover:bg-zinc-100 group">
+        {{-- <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border text-[0.625rem] font-medium bg-white text-zinc-400 border-zinc-200 group-hover:border-indigo-600 group-hover:text-indigo-600">H</span> --}}
+
+        @if($icon ?? false)
+            <x-dynamic-component class="w-4 h-4 shrink-0" component="phosphor-{{ $icon }}-duotone" />
+        @endif
+
+        <span class="truncate opacity-80">{{ $text ?? '' }}</span>
+    </a>
+</li>