Consolidate destructive buttons in <Button> and tidy auth/settings

- AuthController.reset_password no longer manually deletes reset
  tokens; Accounts.reset_user_password/2 already wipes them. Drops
  the now-unused Repo and UserToken aliases too.
- <Button> grows danger and dangerOutline variants, and Settings.tsx
  replaces its two hand-rolled red buttons with them.
- SettingsController.update_password fallback now attaches the
  "current and new password are required" error to both fields so
  it surfaces next to the right input(s).

Author: andreogle

assets/js/components/Button.tsx

@@ -1,7 +1,7 @@
 import type { ButtonHTMLAttributes } from 'react';
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'secondary';
+  variant?: 'primary' | 'secondary' | 'danger' | 'dangerOutline';
 }
 
 const base =
@@ -11,6 +11,9 @@ const variants: Record<NonNullable<ButtonProps['variant']>, string> = {
   primary: 'bg-primary text-white hover:opacity-90 focus-visible:outline-primary',
   secondary:
     'border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:outline-gray-500',
+  danger: 'bg-red-600 text-white hover:bg-red-700 focus-visible:outline-red-500',
+  dangerOutline:
+    'border border-red-300 text-red-700 dark:border-red-700 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/40 focus-visible:outline-red-500',
 };
 
 export default function Button({ variant = 'primary', className = '', type = 'button', ...rest }: ButtonProps) {

assets/js/pages/Settings.tsx

@@ -119,12 +119,9 @@ function DeleteAccountSection() {
         }}
       >
         <AlertDialogTrigger asChild>
-          <button
-            type="button"
-            className="inline-flex items-center justify-center rounded px-4 py-2 text-sm font-medium border border-red-300 text-red-700 dark:border-red-700 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/40 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500"
-          >
+          <Button type="button" variant="dangerOutline">
             {t('settings.deleteAccount.button')}
-          </button>
+          </Button>
         </AlertDialogTrigger>
 
         <AlertDialogContent>
@@ -157,13 +154,9 @@ function DeleteAccountSection() {
                 </Button>
               </AlertDialogCancel>
               <AlertDialogAction asChild>
-                <button
-                  type="submit"
-                  disabled={processing}
-                  className="inline-flex items-center justify-center rounded px-4 py-2 text-sm font-medium bg-red-600 text-white hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500"
-                >
+                <Button type="submit" variant="danger" disabled={processing}>
                   {t('settings.deleteAccount.confirm')}
-                </button>
+                </Button>
               </AlertDialogAction>
             </AlertDialogFooter>
           </form>

lib/elixir_react_starter_web/controllers/auth_controller.ex

@@ -23,9 +23,7 @@ defmodule ElixirReactStarterWeb.AuthController do
 
   alias ElixirReactStarter.Accounts
   alias ElixirReactStarter.Accounts.User
-  alias ElixirReactStarter.Accounts.UserToken
   alias ElixirReactStarter.Log
-  alias ElixirReactStarter.Repo
   alias ElixirReactStarterWeb.Email
   alias ElixirReactStarterWeb.UserAuth
 
@@ -236,11 +234,6 @@ defmodule ElixirReactStarterWeb.AuthController do
       user ->
         case Accounts.reset_user_password(user, %{password: password}) do
           {:ok, _user} ->
-            # Consume the reset token so the same link can't be reused.
-            Repo.delete_all(
-              UserToken.delete_user_tokens_by_context_query(user.id, "password_reset")
-            )
-
             conn
             |> put_flash(:info, dgettext("app", "Password reset successfully. Please log in."))
             |> redirect(to: ~p"/login")

lib/elixir_react_starter_web/controllers/settings_controller.ex

@@ -47,8 +47,10 @@ defmodule ElixirReactStarterWeb.SettingsController do
   end
 
   def update_password(conn, _params) do
+    message = dgettext("app", "Current and new password are required")
+
     conn
-    |> assign_errors(%{password: dgettext("app", "Current and new password are required")})
+    |> assign_errors(%{current_password: message, password: message})
     |> redirect(to: ~p"/settings")
   end