Auth: convert auth views and verification email to Nova layout

resources/js/Pages/Admin/UsernameQueue.jsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import AdminUsernameQueue from '../../components/admin/AdminUsernameQueue'
+
+export default function UsernameQueuePage() {
+  return <AdminUsernameQueue />
+}

resources/js/app.js

@@ -1,4 +1,5 @@
 import './bootstrap';
+import './username-availability';
 
 import Alpine from 'alpinejs';
 import React from 'react';

resources/js/components/admin/AdminUsernameQueue.jsx

@@ -0,0 +1,92 @@
+import React, { useEffect, useState } from 'react'
+
+export default function AdminUsernameQueue() {
+  const [items, setItems] = useState([])
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+  const [notes, setNotes] = useState({})
+
+  const loadPending = async () => {
+    setLoading(true)
+    setError('')
+
+    try {
+      const response = await window.axios.get('/api/admin/usernames/pending')
+      setItems(Array.isArray(response?.data?.data) ? response.data.data : [])
+    } catch (loadError) {
+      setError(loadError?.response?.data?.message || 'Failed to load username moderation queue.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    loadPending()
+  }, [])
+
+  const moderate = async (id, action) => {
+    try {
+      const payload = { note: String(notes[id] || '') }
+      await window.axios.post(`/api/admin/usernames/${id}/${action}`, payload)
+      setItems((prev) => prev.filter((item) => item.id !== id))
+    } catch (moderateError) {
+      setError(moderateError?.response?.data?.message || `Failed to ${action} username request.`)
+    }
+  }
+
+  return (
+    <section aria-label="Username moderation queue" className="mx-auto w-full max-w-5xl rounded-2xl border border-white/10 bg-slate-900/60 p-4 md:p-6">
+      <div className="mb-4 flex items-center justify-between">
+        <h2 className="text-lg font-semibold text-white">Pending Username Approvals</h2>
+        <button type="button" onClick={loadPending} className="rounded-lg border border-white/20 px-3 py-1 text-xs text-white">
+          Refresh
+        </button>
+      </div>
+
+      {loading ? <p role="status" className="text-sm text-white/70">Loading…</p> : null}
+      {error ? <p role="alert" className="mb-3 text-sm text-rose-200">{error}</p> : null}
+      {!loading && items.length === 0 ? <p role="status" className="text-sm text-white/60">No pending username requests.</p> : null}
+
+      <ul className="space-y-3">
+        {items.map((item) => (
+          <li key={item.id} className="rounded-xl border border-white/10 bg-white/5 p-3">
+            <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
+              <div>
+                <div className="text-sm font-medium text-white">{item.requested_username}</div>
+                <div className="mt-1 text-xs text-white/65">Request #{item.id} · {item.context}</div>
+                {item.similar_to ? <div className="mt-1 text-xs text-amber-200">Similar to reserved: {item.similar_to}</div> : null}
+              </div>
+
+              <div className="w-full max-w-sm space-y-2">
+                <input
+                  type="text"
+                  aria-label={`Moderation note for request ${item.id}`}
+                  value={notes[item.id] || ''}
+                  onChange={(event) => setNotes((prev) => ({ ...prev, [item.id]: event.target.value }))}
+                  placeholder="Review note"
+                  className="w-full rounded-lg border border-white/15 bg-white/10 px-3 py-2 text-xs text-white"
+                />
+                <div className="flex gap-2">
+                  <button
+                    type="button"
+                    onClick={() => moderate(item.id, 'approve')}
+                    className="rounded-lg bg-emerald-500 px-3 py-2 text-xs font-semibold text-black"
+                  >
+                    Approve
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => moderate(item.id, 'reject')}
+                    className="rounded-lg bg-rose-500 px-3 py-2 text-xs font-semibold text-white"
+                  >
+                    Reject
+                  </button>
+                </div>
+              </div>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </section>
+  )
+}

resources/js/username-availability.js

@@ -0,0 +1,62 @@
+const debounce = (fn, wait = 350) => {
+  let timeoutId
+  return (...args) => {
+    clearTimeout(timeoutId)
+    timeoutId = setTimeout(() => fn(...args), wait)
+  }
+}
+
+const setStatus = (target, message, tone = 'neutral') => {
+  if (!target) return
+  target.textContent = message || ''
+  target.classList.remove('text-green-600', 'text-red-600', 'text-gray-500')
+
+  if (tone === 'success') target.classList.add('text-green-600')
+  else if (tone === 'error') target.classList.add('text-red-600')
+  else target.classList.add('text-gray-500')
+}
+
+const initUsernameAvailability = () => {
+  const fields = document.querySelectorAll('[data-username-field="true"]')
+
+  fields.forEach((field) => {
+    const url = field.getAttribute('data-availability-url') || '/api/username/availability'
+    const statusId = field.getAttribute('data-availability-target')
+    const statusEl = statusId ? document.getElementById(statusId) : null
+
+    const check = debounce(async () => {
+      const raw = String(field.value || '')
+      const username = raw.trim().toLowerCase()
+
+      if (!username) {
+        setStatus(statusEl, '')
+        return
+      }
+
+      setStatus(statusEl, 'Checking availability...')
+
+      try {
+        const response = await window.axios.get(url, { params: { username } })
+        const data = response?.data || {}
+
+        if (data.available) {
+          setStatus(statusEl, `Available: ${data.normalized || username}`, 'success')
+        } else {
+          setStatus(statusEl, `Taken: ${data.normalized || username}`, 'error')
+        }
+      } catch (error) {
+        if (error?.response?.status === 422) {
+          const message = error?.response?.data?.errors?.username?.[0] || 'Invalid username.'
+          setStatus(statusEl, message, 'error')
+          return
+        }
+
+        setStatus(statusEl, 'Could not check availability right now.', 'error')
+      }
+    })
+
+    field.addEventListener('input', check)
+  })
+}
+
+document.addEventListener('DOMContentLoaded', initUsernameAvailability)