Auth: convert auth views and verification email to Nova layout

resources/views/auth/register-notice.blade.php

@@ -0,0 +1,86 @@
+@extends('layouts.nova')
+
+@section('content')
+<div class="px-4 py-8 md:px-6 md:py-10">
+    <div class="mx-auto w-full max-w-xl rounded-2xl border border-sb-line bg-panel-dark shadow-sb p-6 md:p-8">
+        <div class="mb-4 text-sm text-sb-muted">
+            <p class="font-medium text-white">Check your inbox</p>
+            @if($email !== '')
+                <p class="mt-1">We sent a verification link to <strong class="text-white">{{ $email }}</strong>.</p>
+                <p class="mt-1">Click the link in that email to continue setup.</p>
+            @else
+                <p class="mt-1">Enter your email to resend verification if needed.</p>
+            @endif
+        </div>
+
+        @if (session('status'))
+            <div class="mb-4 rounded-md border border-green-700/60 bg-green-900/20 px-3 py-2 text-sm text-green-300">
+                {{ session('status') }}
+            </div>
+        @endif
+
+        @if ($errors->any())
+            <div class="mb-4 rounded-md border border-red-700/60 bg-red-900/20 px-3 py-2 text-sm text-red-300">
+                {{ $errors->first() }}
+            </div>
+        @endif
+
+        <form method="POST" action="{{ route('register.resend') }}" class="space-y-4" id="resend-form" data-resend-seconds="{{ (int) $resendSeconds }}">
+            @csrf
+
+            <div>
+                <x-input-label for="email" value="Email" class="text-sb-muted" />
+                <x-text-input id="email" class="block mt-1 w-full bg-black/20 border-sb-line text-white" type="email" name="email" :value="old('email', $email)" required autocomplete="email" />
+                <x-input-error :messages="$errors->get('email')" class="mt-2" />
+            </div>
+
+            <div class="flex items-center justify-between gap-3">
+                <div class="flex flex-col gap-1 sm:flex-row sm:items-center sm:gap-3">
+                    <a class="underline text-sm text-sb-muted hover:text-white" href="{{ route('login') }}">Back to login</a>
+                    <a class="underline text-sm text-sb-muted hover:text-white" href="{{ route('register', ['email' => $email]) }}">Change email</a>
+                </div>
+
+                <x-primary-button id="resend-btn" class="justify-center" type="submit">
+                    Resend verification email
+                </x-primary-button>
+            </div>
+
+            <p id="resend-timer" class="text-xs text-sb-muted"></p>
+        </form>
+    </div>
+</div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            const form = document.getElementById('resend-form');
+            const button = document.getElementById('resend-btn');
+            const timerText = document.getElementById('resend-timer');
+
+            if (!form || !button || !timerText) return;
+
+            let remaining = parseInt(form.dataset.resendSeconds || '0', 10);
+
+            const render = () => {
+                if (remaining > 0) {
+                    button.setAttribute('disabled', 'disabled');
+                    timerText.textContent = `You can resend in ${remaining}s.`;
+                } else {
+                    button.removeAttribute('disabled');
+                    timerText.textContent = 'Did not receive it? You can resend now.';
+                }
+            };
+
+            render();
+            if (remaining <= 0) return;
+
+            const interval = setInterval(() => {
+                remaining -= 1;
+                render();
+
+                if (remaining <= 0) {
+                    clearInterval(interval);
+                }
+            }, 1000);
+        });
+    </script>
+@endsection