From 4ea23a3b40025c13a7f739cdef1d4a8ed42e68b6 Mon Sep 17 00:00:00 2001
From: Rui Lopes <ruilopesm19@gmail.com>
Date: Thu, 14 Aug 2025 23:38:14 +0100
Subject: [PATCH 1/5] feat: reset password pages

---
 .../forgot-password/ForgotPasswordForm.vue    | 67 ++++++++++++++
 assets/vue/components/log-in/LoginForm.vue    |  6 +-
 .../registration/RegistrationForm.vue         |  2 +-
 .../reset-password/ResetPasswordForm.vue      | 87 +++++++++++++++++++
 .../forgot-password/UserForgotPassword.vue    | 22 +++++
 .../reset-password/UserResetPassword.vue      | 26 ++++++
 lib/katana/accounts/user.ex                   |  2 +-
 .../live/auth/user_forgot_password_live.ex    | 30 ++-----
 .../live/auth/user_reset_password_live.ex     | 72 ++++++---------
 lib/katana_web/router.ex                      |  2 +-
 10 files changed, 241 insertions(+), 75 deletions(-)
 create mode 100644 assets/vue/components/forgot-password/ForgotPasswordForm.vue
 create mode 100644 assets/vue/components/reset-password/ResetPasswordForm.vue
 create mode 100644 assets/vue/pages/forgot-password/UserForgotPassword.vue
 create mode 100644 assets/vue/pages/reset-password/UserResetPassword.vue

diff --git a/assets/vue/components/forgot-password/ForgotPasswordForm.vue b/assets/vue/components/forgot-password/ForgotPasswordForm.vue
new file mode 100644
index 0000000..1d0c153
--- /dev/null
+++ b/assets/vue/components/forgot-password/ForgotPasswordForm.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { Ref, ref } from "vue";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Link, useLiveVue } from "live_vue";
+
+const live = useLiveVue();
+
+const form: Ref<{ email: string }> = ref({
+  email: "",
+});
+
+const isSubmitting = ref(false);
+
+const submit = () => {
+  isSubmitting.value = true;
+
+  live.pushEvent(
+    "send_email",
+    {
+      user: { email: form.value.email },
+    },
+    (_reply: any, _ref: Ref) => {
+      isSubmitting.value = false;
+    },
+  );
+};
+</script>
+
+<template>
+  <form @submit.prevent="submit" class="flex flex-col gap-6">
+    <div class="flex flex-col items-center gap-2 text-center">
+      <h1 class="text-2xl font-bold">Forgot your password?</h1>
+      <p class="text-muted-foreground text-sm">
+        Enter the email address associated with your account and we'll send you
+        a link to reset your password
+      </p>
+    </div>
+    <div class="grid gap-6">
+      <div class="grid gap-3">
+        <Label for="email">Email</Label>
+        <Input
+          id="email"
+          type="email"
+          placeholder="mail@coderdojobraga.org"
+          v-model="form.email"
+          required
+        />
+      </div>
+      <Button
+        :disabled="!form.email || isSubmitting"
+        type="submit"
+        class="w-full"
+      >
+        <span v-if="isSubmitting">Sending...</span>
+        <span v-else>Send reset link</span>
+      </Button>
+    </div>
+    <div class="text-center text-sm">
+      Remember your password?
+      <Link navigate="/users/log_in" class="underline underline-offset-4">
+        Log in
+      </Link>
+    </div>
+  </form>
+</template>
diff --git a/assets/vue/components/log-in/LoginForm.vue b/assets/vue/components/log-in/LoginForm.vue
index 7fe4545..69054fa 100644
--- a/assets/vue/components/log-in/LoginForm.vue
+++ b/assets/vue/components/log-in/LoginForm.vue
@@ -51,12 +51,12 @@ const submit = () => {
       <div class="grid gap-3">
         <div class="flex items-center">
           <Label for="password">Password</Label>
-          <a
-            href="#"
+          <Link
+            navigate="/users/forgot_password"
             class="ml-auto text-sm underline-offset-4 hover:underline"
           >
             Forgot your password?
-          </a>
+          </Link>
         </div>
         <Input id="password" type="password" v-model="form.password" required />
       </div>
diff --git a/assets/vue/components/registration/RegistrationForm.vue b/assets/vue/components/registration/RegistrationForm.vue
index 90fb3b2..aafd027 100644
--- a/assets/vue/components/registration/RegistrationForm.vue
+++ b/assets/vue/components/registration/RegistrationForm.vue
@@ -39,7 +39,7 @@ const password = fields["password"];
     </div>
     <div class="grid gap-6">
       <div class="grid gap-3">
-        <Label for="name" mandatory> Name </Label>
+        <Label for="name" mandatory>Name</Label>
         <Input
           id="name"
           type="text"
diff --git a/assets/vue/components/reset-password/ResetPasswordForm.vue b/assets/vue/components/reset-password/ResetPasswordForm.vue
new file mode 100644
index 0000000..8527bcc
--- /dev/null
+++ b/assets/vue/components/reset-password/ResetPasswordForm.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { toRef } from "vue";
+import { Form, Link, useLiveForm } from "live_vue";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { FieldError } from "@/components/ui/field-error";
+
+type ResetPasswordFields = {
+  password: string;
+  password_confirmation: string;
+};
+
+const props = defineProps<{
+  form: Form<ResetPasswordFields>;
+}>();
+
+const { submit, form, fields, isSubmitting } = useLiveForm<ResetPasswordFields>(
+  toRef(props, "form"),
+  {
+    changeEvent: "validate",
+    submitEvent: "reset_password",
+  },
+);
+
+const password = fields["password"];
+const passwordConfirmation = fields["password_confirmation"];
+</script>
+
+<template>
+  <form class="flex flex-col gap-6">
+    <div class="flex flex-col items-center gap-2 text-center">
+      <h1 class="text-2xl font-bold">Reset your password</h1>
+      <p class="text-muted-foreground text-sm">
+        Create a new password for your account
+      </p>
+    </div>
+    <div class="grid gap-6">
+      <div class="grid gap-3">
+        <Label for="password" mandatory>New password</Label>
+        <Input
+          id="password"
+          type="password"
+          placeholder="Enter your new password"
+          v-model="password.value"
+          :name="password.name"
+          required
+        />
+        <FieldError :show="password.touched" :message="password.errorMessage" />
+      </div>
+      <div class="grid gap-3">
+        <Label for="password_confirmation" mandatory
+          >Confirm new password</Label
+        >
+        <Input
+          id="password_confirmation"
+          type="password"
+          placeholder="Confirm your new password"
+          v-model="passwordConfirmation.value"
+          :name="passwordConfirmation.name"
+          required
+        />
+        <FieldError
+          :show="passwordConfirmation.touched"
+          :message="passwordConfirmation.errorMessage"
+        />
+      </div>
+      <Button
+        :disabled="
+          (form.touched && !form.meta.valid) || isSubmitting || !form.meta.dirty
+        "
+        type="button"
+        @click="submit"
+        class="w-full"
+      >
+        <span v-if="isSubmitting">Resetting...</span>
+        <span v-else>Reset</span>
+      </Button>
+    </div>
+    <div class="text-center text-sm">
+      Remember your password?
+      <Link navigate="/users/log_in" class="underline underline-offset-4">
+        Log in
+      </Link>
+    </div>
+  </form>
+</template>
diff --git a/assets/vue/pages/forgot-password/UserForgotPassword.vue b/assets/vue/pages/forgot-password/UserForgotPassword.vue
new file mode 100644
index 0000000..8fa10d4
--- /dev/null
+++ b/assets/vue/pages/forgot-password/UserForgotPassword.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { GalleryVerticalEnd } from "lucide-vue-next";
+import ForgotPasswordForm from "@/components/forgot-password/ForgotPasswordForm.vue";
+</script>
+
+<template>
+  <div class="min-h-svh flex items-center justify-center p-6">
+    <div class="w-full max-w-md space-y-8">
+      <div class="flex justify-center">
+        <a href="#" class="flex items-center gap-2 font-medium">
+          <div
+            class="flex h-8 w-8 items-center justify-center rounded-md bg-primary text-primary-foreground"
+          >
+            <GalleryVerticalEnd class="size-5" />
+          </div>
+          Katana
+        </a>
+      </div>
+      <ForgotPasswordForm />
+    </div>
+  </div>
+</template>
diff --git a/assets/vue/pages/reset-password/UserResetPassword.vue b/assets/vue/pages/reset-password/UserResetPassword.vue
new file mode 100644
index 0000000..e6195c7
--- /dev/null
+++ b/assets/vue/pages/reset-password/UserResetPassword.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { GalleryVerticalEnd } from "lucide-vue-next";
+import ResetPasswordForm from "@/components/reset-password/ResetPasswordForm.vue";
+
+const props = defineProps<{
+  form: any;
+}>();
+</script>
+
+<template>
+  <div class="min-h-svh flex items-center justify-center p-6">
+    <div class="w-full max-w-md space-y-8">
+      <div class="flex justify-center">
+        <a href="#" class="flex items-center gap-2 font-medium">
+          <div
+            class="flex h-8 w-8 items-center justify-center rounded-md bg-primary text-primary-foreground"
+          >
+            <GalleryVerticalEnd class="size-5" />
+          </div>
+          Katana
+        </a>
+      </div>
+      <ResetPasswordForm :form="props.form" />
+    </div>
+  </div>
+</template>
diff --git a/lib/katana/accounts/user.ex b/lib/katana/accounts/user.ex
index e880af2..a8e25df 100644
--- a/lib/katana/accounts/user.ex
+++ b/lib/katana/accounts/user.ex
@@ -8,7 +8,7 @@ defmodule Katana.Accounts.User do
 
   @registration_fields ~w(name email password)a
 
-  @derive {LiveVue.Encoder, except: [:hashed_password, :current_password, :confirmed_at]}
+  @derive {LiveVue.Encoder, except: [:hashed_password, :confirmed_at]}
   schema "users" do
     field :name, :string
     field :email, :string
diff --git a/lib/katana_web/live/auth/user_forgot_password_live.ex b/lib/katana_web/live/auth/user_forgot_password_live.ex
index 846ebc8..c09a660 100644
--- a/lib/katana_web/live/auth/user_forgot_password_live.ex
+++ b/lib/katana_web/live/auth/user_forgot_password_live.ex
@@ -1,29 +1,11 @@
 defmodule KatanaWeb.UserForgotPasswordLive do
-  use KatanaWeb, :live_view
+  use KatanaWeb, {:live_view, :root}
 
   alias Katana.Accounts
 
   def render(assigns) do
     ~H"""
-    <%!-- <div class="mx-auto max-w-sm">
-      <.header class="text-center">
-        Forgot your password?
-        <:subtitle>We'll send a password reset link to your inbox</:subtitle>
-      </.header>
-
-      <.simple_form for={@form} id="reset_password_form" phx-submit="send_email">
-        <.input field={@form[:email]} type="email" placeholder="Email" required />
-        <:actions>
-          <.button phx-disable-with="Sending..." class="w-full">
-            Send password reset instructions
-          </.button>
-        </:actions>
-      </.simple_form>
-      <p class="text-center text-sm mt-4">
-        <.link href={~p"/users/register"}>Register</.link>
-        | <.link href={~p"/users/log_in"}>Log in</.link>
-      </p>
-    </div> --%>
+    <.vue v-component="UserForgotPassword" v-socket={@socket} />
     """
   end
 
@@ -39,12 +21,12 @@ defmodule KatanaWeb.UserForgotPasswordLive do
       )
     end
 
-    info =
-      "If your email is in our system, you will receive instructions to reset your password shortly."
-
     {:noreply,
      socket
-     |> put_flash(:info, info)
+     |> put_flash(
+       :info,
+       "If your email is in our system, you will receive instructions to reset your password shortly."
+     )
      |> redirect(to: ~p"/")}
   end
 end
diff --git a/lib/katana_web/live/auth/user_reset_password_live.ex b/lib/katana_web/live/auth/user_reset_password_live.ex
index c20c913..b8d1d94 100644
--- a/lib/katana_web/live/auth/user_reset_password_live.ex
+++ b/lib/katana_web/live/auth/user_reset_password_live.ex
@@ -1,47 +1,18 @@
 defmodule KatanaWeb.UserResetPasswordLive do
-  use KatanaWeb, :live_view
+  use KatanaWeb, {:live_view, :root}
 
   alias Katana.Accounts
 
   def render(assigns) do
     ~H"""
-    <%!-- <div class="mx-auto max-w-sm">
-      <.header class="text-center">Reset Password</.header>
-
-      <.simple_form
-        for={@form}
-        id="reset_password_form"
-        phx-submit="reset_password"
-        phx-change="validate"
-      >
-        <.error :if={@form.errors != []}>
-          Oops, something went wrong! Please check the errors below.
-        </.error>
-
-        <.input field={@form[:password]} type="password" label="New password" required />
-        <.input
-          field={@form[:password_confirmation]}
-          type="password"
-          label="Confirm new password"
-          required
-        />
-        <:actions>
-          <.button phx-disable-with="Resetting..." class="w-full">Reset Password</.button>
-        </:actions>
-      </.simple_form>
-
-      <p class="text-center text-sm mt-4">
-        <.link href={~p"/users/register"}>Register</.link>
-        | <.link href={~p"/users/log_in"}>Log in</.link>
-      </p>
-    </div> --%>
+    <.vue v-component="UserResetPassword" form={@form} v-socket={@socket} />
     """
   end
 
   def mount(params, _session, socket) do
     socket = assign_user_and_token(socket, params)
 
-    form_source =
+    source =
       case socket.assigns do
         %{user: user} ->
           Accounts.change_user_password(user)
@@ -50,29 +21,39 @@ defmodule KatanaWeb.UserResetPasswordLive do
           %{}
       end
 
-    {:ok, assign_form(socket, form_source), temporary_assigns: [form: nil]}
+    form = to_form(source, as: "user")
+    {:ok, assign(socket, form: form), temporary_assigns: [form: nil]}
+  end
+
+  def handle_event("validate", %{"user" => params}, socket) do
+    changeset =
+      Accounts.change_user_password(socket.assigns.user, params)
+      |> Map.put(:action, :validate)
+
+    {:noreply, reload(socket, changeset)}
   end
 
   # Do not log in the user after reset password to avoid a
   # leaked token giving the user access to the account.
-  def handle_event("reset_password", %{"user" => user_params}, socket) do
-    case Accounts.reset_user_password(socket.assigns.user, user_params) do
+  def handle_event("reset_password", %{"user" => params}, socket) do
+    case Accounts.reset_user_password(socket.assigns.user, params) do
       {:ok, _} ->
         {:noreply,
          socket
-         |> put_flash(:info, "Password reset successfully.")
+         |> put_flash(:info, "Password reset successfully. Please proceed to log in.")
          |> redirect(to: ~p"/users/log_in")}
 
-      {:error, changeset} ->
-        {:noreply, assign_form(socket, Map.put(changeset, :action, :insert))}
+      {:error, %Ecto.Changeset{} = changeset} ->
+        {:noreply,
+         socket
+         |> put_flash(
+           :error,
+           "Password reset failed. Please try again and if the problem persists, contact support."
+         )
+         |> reload(Map.put(changeset, :action, :insert))}
     end
   end
 
-  def handle_event("validate", %{"user" => user_params}, socket) do
-    changeset = Accounts.change_user_password(socket.assigns.user, user_params)
-    {:noreply, assign_form(socket, Map.put(changeset, :action, :validate))}
-  end
-
   defp assign_user_and_token(socket, %{"token" => token}) do
     if user = Accounts.get_user_by_reset_password_token(token) do
       assign(socket, user: user, token: token)
@@ -83,7 +64,8 @@ defmodule KatanaWeb.UserResetPasswordLive do
     end
   end
 
-  defp assign_form(socket, %{} = source) do
-    assign(socket, :form, to_form(source, as: "user"))
+  defp reload(socket, changeset) do
+    form = to_form(changeset, as: "user")
+    assign(socket, form: form)
   end
 end
diff --git a/lib/katana_web/router.ex b/lib/katana_web/router.ex
index 7f9aef0..d63b3dd 100644
--- a/lib/katana_web/router.ex
+++ b/lib/katana_web/router.ex
@@ -47,7 +47,7 @@ defmodule KatanaWeb.Router do
       on_mount: [{KatanaWeb.UserAuth, :redirect_if_user_is_authenticated}] do
       live "/users/register", UserRegistrationLive, :new
       live "/users/log_in", UserLoginLive, :new
-      live "/users/reset_password", UserForgotPasswordLive, :new
+      live "/users/forgot_password", UserForgotPasswordLive, :new
       live "/users/reset_password/:token", UserResetPasswordLive, :edit
     end
 

From ece0a390938af796957ca1b1cf2941d3bb09b4e8 Mon Sep 17 00:00:00 2001
From: Rui Lopes <ruilopesm19@gmail.com>
Date: Sat, 16 Aug 2025 18:06:34 +0100
Subject: [PATCH 2/5] Update
 assets/vue/components/forgot-password/ForgotPasswordForm.vue

Co-authored-by: GuilhermePSF <guilhermepsf23@gmail.com>
---
 .../forgot-password/ForgotPasswordForm.vue     | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/assets/vue/components/forgot-password/ForgotPasswordForm.vue b/assets/vue/components/forgot-password/ForgotPasswordForm.vue
index 1d0c153..0da1ccf 100644
--- a/assets/vue/components/forgot-password/ForgotPasswordForm.vue
+++ b/assets/vue/components/forgot-password/ForgotPasswordForm.vue
@@ -48,14 +48,16 @@ const submit = () => {
           required
         />
       </div>
-      <Button
-        :disabled="!form.email || isSubmitting"
-        type="submit"
-        class="w-full"
-      >
-        <span v-if="isSubmitting">Sending...</span>
-        <span v-else>Send reset link</span>
-      </Button>
+	<Button
+  	:disabled="!form.email || isSubmitting"
+  	type="submit"
+  	class="w-full"
+  	:aria-busy="isSubmitting"
+	>
+  	<span role="status" aria-live="polite">
+    	{{ isSubmitting ? "Sending..." : "Send reset link" }}
+  	</span>
+	</Button>
     </div>
     <div class="text-center text-sm">
       Remember your password?

From 360888874ad843e119ffdc9499d0af2812bb1ba0 Mon Sep 17 00:00:00 2001
From: Rui Lopes <ruilopesm19@gmail.com>
Date: Sat, 16 Aug 2025 18:12:02 +0100
Subject: [PATCH 3/5] chore: apply suggestions

---
 assets/vue/pages/forgot-password/UserForgotPassword.vue | 5 +++--
 assets/vue/pages/log-in/UserLogin.vue                   | 5 +++--
 assets/vue/pages/registration/UserRegistration.vue      | 5 +++--
 assets/vue/pages/reset-password/UserResetPassword.vue   | 5 +++--
 4 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/assets/vue/pages/forgot-password/UserForgotPassword.vue b/assets/vue/pages/forgot-password/UserForgotPassword.vue
index 8fa10d4..5774861 100644
--- a/assets/vue/pages/forgot-password/UserForgotPassword.vue
+++ b/assets/vue/pages/forgot-password/UserForgotPassword.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { GalleryVerticalEnd } from "lucide-vue-next";
+import { Link } from "live_vue";
 import ForgotPasswordForm from "@/components/forgot-password/ForgotPasswordForm.vue";
 </script>
 
@@ -7,14 +8,14 @@ import ForgotPasswordForm from "@/components/forgot-password/ForgotPasswordForm.
   <div class="min-h-svh flex items-center justify-center p-6">
     <div class="w-full max-w-md space-y-8">
       <div class="flex justify-center">
-        <a href="#" class="flex items-center gap-2 font-medium">
+        <Link navigate="/" class="flex items-center gap-2 font-medium">
           <div
             class="flex h-8 w-8 items-center justify-center rounded-md bg-primary text-primary-foreground"
           >
             <GalleryVerticalEnd class="size-5" />
           </div>
           Katana
-        </a>
+        </Link>
       </div>
       <ForgotPasswordForm />
     </div>
diff --git a/assets/vue/pages/log-in/UserLogin.vue b/assets/vue/pages/log-in/UserLogin.vue
index cf85916..8e3039f 100644
--- a/assets/vue/pages/log-in/UserLogin.vue
+++ b/assets/vue/pages/log-in/UserLogin.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { GalleryVerticalEnd } from "lucide-vue-next";
+import { Link } from "live_vue";
 import LoginForm from "@/components/log-in/LoginForm.vue";
 
 const URL = import.meta.env.VITE_PHOENIX_URL;
@@ -9,14 +10,14 @@ const URL = import.meta.env.VITE_PHOENIX_URL;
   <div class="grid min-h-svh lg:grid-cols-2">
     <div class="flex flex-col gap-4 p-6 md:p-10">
       <div class="flex justify-center gap-2 md:justify-start">
-        <a href="#" class="flex items-center gap-2 font-medium">
+        <Link navigate="/" class="flex items-center gap-2 font-medium">
           <div
             class="flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground"
           >
             <GalleryVerticalEnd class="size-4" />
           </div>
           Katana is your place
-        </a>
+        </Link>
       </div>
       <div class="flex flex-1 items-center justify-center">
         <div class="w-full max-w-xs">
diff --git a/assets/vue/pages/registration/UserRegistration.vue b/assets/vue/pages/registration/UserRegistration.vue
index 14408d1..9d8af2b 100644
--- a/assets/vue/pages/registration/UserRegistration.vue
+++ b/assets/vue/pages/registration/UserRegistration.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { GalleryVerticalEnd } from "lucide-vue-next";
+import { Link } from "live_vue";
 import RegistrationForm from "@/components/registration/RegistrationForm.vue";
 
 const props = defineProps<{
@@ -19,14 +20,14 @@ const URL = import.meta.env.VITE_PHOENIX_URL;
     </div>
     <div class="flex flex-col gap-4 p-6 md:p-10">
       <div class="flex justify-center gap-2 md:justify-start">
-        <a href="#" class="flex items-center gap-2 font-medium">
+        <Link navigate="/" class="flex items-center gap-2 font-medium">
           <div
             class="flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground"
           >
             <GalleryVerticalEnd class="size-4" />
           </div>
           Welcome to Katana
-        </a>
+        </Link>
       </div>
       <div class="flex flex-1 items-center justify-center">
         <div class="w-full max-w-xs">
diff --git a/assets/vue/pages/reset-password/UserResetPassword.vue b/assets/vue/pages/reset-password/UserResetPassword.vue
index e6195c7..ed90922 100644
--- a/assets/vue/pages/reset-password/UserResetPassword.vue
+++ b/assets/vue/pages/reset-password/UserResetPassword.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { GalleryVerticalEnd } from "lucide-vue-next";
+import { Link } from "live_vue";
 import ResetPasswordForm from "@/components/reset-password/ResetPasswordForm.vue";
 
 const props = defineProps<{
@@ -11,14 +12,14 @@ const props = defineProps<{
   <div class="min-h-svh flex items-center justify-center p-6">
     <div class="w-full max-w-md space-y-8">
       <div class="flex justify-center">
-        <a href="#" class="flex items-center gap-2 font-medium">
+        <Link navigate="/" class="flex items-center gap-2 font-medium">
           <div
             class="flex h-8 w-8 items-center justify-center rounded-md bg-primary text-primary-foreground"
           >
             <GalleryVerticalEnd class="size-5" />
           </div>
           Katana
-        </a>
+        </Link>
       </div>
       <ResetPasswordForm :form="props.form" />
     </div>

From 0a30fcb3f0ff771d8fad2073e56f42403944b3cb Mon Sep 17 00:00:00 2001
From: Rui Lopes <ruilopesm19@gmail.com>
Date: Wed, 3 Sep 2025 12:28:16 +0100
Subject: [PATCH 4/5] refactor: useLiveForm new API

---
 .../forgot-password/ForgotPasswordForm.vue    | 40 ++++------------
 .../registration/RegistrationForm.vue         |  7 ++-
 .../reset-password/ResetPasswordForm.vue      | 47 +++++++++----------
 3 files changed, 36 insertions(+), 58 deletions(-)

diff --git a/assets/vue/components/forgot-password/ForgotPasswordForm.vue b/assets/vue/components/forgot-password/ForgotPasswordForm.vue
index 0da1ccf..c12f9d0 100644
--- a/assets/vue/components/forgot-password/ForgotPasswordForm.vue
+++ b/assets/vue/components/forgot-password/ForgotPasswordForm.vue
@@ -3,33 +3,15 @@ import { Ref, ref } from "vue";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Link, useLiveVue } from "live_vue";
-
-const live = useLiveVue();
+import { Link } from "live_vue";
 
 const form: Ref<{ email: string }> = ref({
   email: "",
 });
-
-const isSubmitting = ref(false);
-
-const submit = () => {
-  isSubmitting.value = true;
-
-  live.pushEvent(
-    "send_email",
-    {
-      user: { email: form.value.email },
-    },
-    (_reply: any, _ref: Ref) => {
-      isSubmitting.value = false;
-    },
-  );
-};
 </script>
 
 <template>
-  <form @submit.prevent="submit" class="flex flex-col gap-6">
+  <form class="flex flex-col gap-6">
     <div class="flex flex-col items-center gap-2 text-center">
       <h1 class="text-2xl font-bold">Forgot your password?</h1>
       <p class="text-muted-foreground text-sm">
@@ -48,16 +30,14 @@ const submit = () => {
           required
         />
       </div>
-	<Button
-  	:disabled="!form.email || isSubmitting"
-  	type="submit"
-  	class="w-full"
-  	:aria-busy="isSubmitting"
-	>
-  	<span role="status" aria-live="polite">
-    	{{ isSubmitting ? "Sending..." : "Send reset link" }}
-  	</span>
-	</Button>
+      <Button
+        type="button"
+        @click="$live.pushEvent('send_email', { user: { email: form.email } })"
+        :disabled="!form.email"
+        class="w-full"
+      >
+        Send reset link
+      </Button>
     </div>
     <div class="text-center text-sm">
       Remember your password?
diff --git a/assets/vue/components/registration/RegistrationForm.vue b/assets/vue/components/registration/RegistrationForm.vue
index 2dc5dfe..e21ede9 100644
--- a/assets/vue/components/registration/RegistrationForm.vue
+++ b/assets/vue/components/registration/RegistrationForm.vue
@@ -79,11 +79,14 @@ const passwordField = form.field("password");
       </div>
       <Button
         type="button"
+        class="w-full"
         :disabled="!form.isValid.value || form.isValidating.value"
+        :aria-busy="form.isValidating.value"
         @click="form.submit()"
-        class="w-full"
       >
-        {{ form.isValidating.value ? "Validating..." : "Register" }}
+        <span role="status" aria-live="polite">
+          {{ form.isValidating.value ? "Validating..." : "Register" }}
+        </span>
       </Button>
       <div
         class="after:border-border relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t"
diff --git a/assets/vue/components/reset-password/ResetPasswordForm.vue b/assets/vue/components/reset-password/ResetPasswordForm.vue
index 8527bcc..995bf38 100644
--- a/assets/vue/components/reset-password/ResetPasswordForm.vue
+++ b/assets/vue/components/reset-password/ResetPasswordForm.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { toRef } from "vue";
-import { Form, Link, useLiveForm } from "live_vue";
+import { type Form, Link, useLiveForm } from "live_vue";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -15,16 +14,13 @@ const props = defineProps<{
   form: Form<ResetPasswordFields>;
 }>();
 
-const { submit, form, fields, isSubmitting } = useLiveForm<ResetPasswordFields>(
-  toRef(props, "form"),
-  {
-    changeEvent: "validate",
-    submitEvent: "reset_password",
-  },
-);
+const form = useLiveForm(() => props.form, {
+  changeEvent: "validate",
+  submitEvent: "reset_password",
+});
 
-const password = fields["password"];
-const passwordConfirmation = fields["password_confirmation"];
+const passwordField = form.field("password");
+const passwordConfirmationField = form.field("password_confirmation");
 </script>
 
 <template>
@@ -39,42 +35,41 @@ const passwordConfirmation = fields["password_confirmation"];
       <div class="grid gap-3">
         <Label for="password" mandatory>New password</Label>
         <Input
-          id="password"
           type="password"
           placeholder="Enter your new password"
-          v-model="password.value"
-          :name="password.name"
+          v-bind="passwordField.inputAttrs.value"
           required
         />
-        <FieldError :show="password.touched" :message="password.errorMessage" />
+        <FieldError
+          :show="passwordField.isTouched.value"
+          :message="passwordField.errorMessage.value"
+        />
       </div>
       <div class="grid gap-3">
         <Label for="password_confirmation" mandatory
           >Confirm new password</Label
         >
         <Input
-          id="password_confirmation"
           type="password"
           placeholder="Confirm your new password"
-          v-model="passwordConfirmation.value"
-          :name="passwordConfirmation.name"
+          v-bind="passwordConfirmationField.inputAttrs.value"
           required
         />
         <FieldError
-          :show="passwordConfirmation.touched"
-          :message="passwordConfirmation.errorMessage"
+          :show="passwordConfirmationField.isTouched.value"
+          :message="passwordConfirmationField.errorMessage.value"
         />
       </div>
       <Button
-        :disabled="
-          (form.touched && !form.meta.valid) || isSubmitting || !form.meta.dirty
-        "
         type="button"
-        @click="submit"
         class="w-full"
+        :disabled="form.isValidating.value"
+        :aria-busy="form.isValidating.value"
+        @click="form.submit()"
       >
-        <span v-if="isSubmitting">Resetting...</span>
-        <span v-else>Reset</span>
+        <span role="status" aria-live="polite">
+          {{ form.isValidating.value ? "Validating..." : "Reset" }}
+        </span>
       </Button>
     </div>
     <div class="text-center text-sm">

From d653d9eda70dc807a5eddb8ce0c22725e35fdf18 Mon Sep 17 00:00:00 2001
From: Rui Lopes <ruilopesm19@gmail.com>
Date: Thu, 2 Oct 2025 11:21:05 +0100
Subject: [PATCH 5/5] chore: apply suggestions

---
 assets/vue/components/log-in/LoginForm.vue    |  2 +-
 lib/katana/accounts.ex                        |  4 ++--
 .../live/forgot-password/ForgotPassword.vue   |  2 +-
 .../components}/ForgotPasswordForm.vue        | 12 +++++-----
 .../forgot_password_live.ex}                  |  8 +++----
 .../live/reset-password/ResetPassword.vue     |  6 ++---
 .../components}/ResetPasswordForm.vue         | 23 ++++++++-----------
 .../reset_password_live.ex}                   |  4 ++--
 .../live/reset-password/types/form.ts         |  4 ++++
 lib/katana_web/router.ex                      |  4 ++--
 test/katana/accounts_test.exs                 |  4 ++--
 11 files changed, 36 insertions(+), 37 deletions(-)
 rename assets/vue/pages/forgot-password/UserForgotPassword.vue => lib/katana_web/live/forgot-password/ForgotPassword.vue (88%)
 rename {assets/vue/components/forgot-password => lib/katana_web/live/forgot-password/components}/ForgotPasswordForm.vue (79%)
 rename lib/katana_web/live/{auth/user_forgot_password_live.ex => forgot-password/forgot_password_live.ex} (73%)
 rename assets/vue/pages/reset-password/UserResetPassword.vue => lib/katana_web/live/reset-password/ResetPassword.vue (82%)
 rename {assets/vue/components/reset-password => lib/katana_web/live/reset-password/components}/ResetPasswordForm.vue (79%)
 rename lib/katana_web/live/{auth/user_reset_password_live.ex => reset-password/reset_password_live.ex} (93%)
 create mode 100644 lib/katana_web/live/reset-password/types/form.ts

diff --git a/assets/vue/components/log-in/LoginForm.vue b/assets/vue/components/log-in/LoginForm.vue
index 69054fa..9e0e76d 100644
--- a/assets/vue/components/log-in/LoginForm.vue
+++ b/assets/vue/components/log-in/LoginForm.vue
@@ -52,7 +52,7 @@ const submit = () => {
         <div class="flex items-center">
           <Label for="password">Password</Label>
           <Link
-            navigate="/users/forgot_password"
+            navigate="/forgot_password"
             class="ml-auto text-sm underline-offset-4 hover:underline"
           >
             Forgot your password?
diff --git a/lib/katana/accounts.ex b/lib/katana/accounts.ex
index 0491baf..ca1d21b 100644
--- a/lib/katana/accounts.ex
+++ b/lib/katana/accounts.ex
@@ -296,11 +296,11 @@ defmodule Katana.Accounts do
 
   ## Examples
 
-      iex> deliver_user_reset_password_instructions(user, &url(~p"/users/reset_password/#{&1}"))
+      iex> deliver_reset_password_instructions(user, &url(~p"/users/reset_password/#{&1}"))
       {:ok, %{to: ..., body: ...}}
 
   """
-  def deliver_user_reset_password_instructions(%User{} = user, reset_password_url_fun)
+  def deliver_reset_password_instructions(%User{} = user, reset_password_url_fun)
       when is_function(reset_password_url_fun, 1) do
     {encoded_token, user_token} = UserToken.build_email_token(user, "reset_password")
     Repo.insert!(user_token)
diff --git a/assets/vue/pages/forgot-password/UserForgotPassword.vue b/lib/katana_web/live/forgot-password/ForgotPassword.vue
similarity index 88%
rename from assets/vue/pages/forgot-password/UserForgotPassword.vue
rename to lib/katana_web/live/forgot-password/ForgotPassword.vue
index 5774861..cb7b553 100644
--- a/assets/vue/pages/forgot-password/UserForgotPassword.vue
+++ b/lib/katana_web/live/forgot-password/ForgotPassword.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { GalleryVerticalEnd } from "lucide-vue-next";
 import { Link } from "live_vue";
-import ForgotPasswordForm from "@/components/forgot-password/ForgotPasswordForm.vue";
+import ForgotPasswordForm from "./components/ForgotPasswordForm.vue";
 </script>
 
 <template>
diff --git a/assets/vue/components/forgot-password/ForgotPasswordForm.vue b/lib/katana_web/live/forgot-password/components/ForgotPasswordForm.vue
similarity index 79%
rename from assets/vue/components/forgot-password/ForgotPasswordForm.vue
rename to lib/katana_web/live/forgot-password/components/ForgotPasswordForm.vue
index c12f9d0..c7c2552 100644
--- a/assets/vue/components/forgot-password/ForgotPasswordForm.vue
+++ b/lib/katana_web/live/forgot-password/components/ForgotPasswordForm.vue
@@ -13,10 +13,10 @@ const form: Ref<{ email: string }> = ref({
 <template>
   <form class="flex flex-col gap-6">
     <div class="flex flex-col items-center gap-2 text-center">
-      <h1 class="text-2xl font-bold">Forgot your password?</h1>
+      <h1 class="text-2xl font-bold">Esqueceu-se da sua palavra-passe?</h1>
       <p class="text-muted-foreground text-sm">
-        Enter the email address associated with your account and we'll send you
-        a link to reset your password
+        Introduza o endereço de email associado à sua conta e enviaremos um
+        link para redefinir a sua palavra-passe
       </p>
     </div>
     <div class="grid gap-6">
@@ -36,13 +36,13 @@ const form: Ref<{ email: string }> = ref({
         :disabled="!form.email"
         class="w-full"
       >
-        Send reset link
+        Enviar link de redefinição
       </Button>
     </div>
     <div class="text-center text-sm">
-      Remember your password?
+      Lembra-se da sua palavra-passe?
       <Link navigate="/users/log_in" class="underline underline-offset-4">
-        Log in
+        Iniciar sessão
       </Link>
     </div>
   </form>
diff --git a/lib/katana_web/live/auth/user_forgot_password_live.ex b/lib/katana_web/live/forgot-password/forgot_password_live.ex
similarity index 73%
rename from lib/katana_web/live/auth/user_forgot_password_live.ex
rename to lib/katana_web/live/forgot-password/forgot_password_live.ex
index c09a660..591a4eb 100644
--- a/lib/katana_web/live/auth/user_forgot_password_live.ex
+++ b/lib/katana_web/live/forgot-password/forgot_password_live.ex
@@ -1,11 +1,11 @@
-defmodule KatanaWeb.UserForgotPasswordLive do
+defmodule KatanaWeb.ForgotPasswordLive do
   use KatanaWeb, {:live_view, :root}
 
   alias Katana.Accounts
 
   def render(assigns) do
     ~H"""
-    <.vue v-component="UserForgotPassword" v-socket={@socket} />
+    <.vue v-component="ForgotPassword" v-socket={@socket} />
     """
   end
 
@@ -15,9 +15,9 @@ defmodule KatanaWeb.UserForgotPasswordLive do
 
   def handle_event("send_email", %{"user" => %{"email" => email}}, socket) do
     if user = Accounts.get_user_by_email(email) do
-      Accounts.deliver_user_reset_password_instructions(
+      Accounts.deliver_reset_password_instructions(
         user,
-        &url(~p"/users/reset_password/#{&1}")
+        &url(~p"/reset_password/#{&1}")
       )
     end
 
diff --git a/assets/vue/pages/reset-password/UserResetPassword.vue b/lib/katana_web/live/reset-password/ResetPassword.vue
similarity index 82%
rename from assets/vue/pages/reset-password/UserResetPassword.vue
rename to lib/katana_web/live/reset-password/ResetPassword.vue
index ed90922..5ddd66a 100644
--- a/assets/vue/pages/reset-password/UserResetPassword.vue
+++ b/lib/katana_web/live/reset-password/ResetPassword.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { GalleryVerticalEnd } from "lucide-vue-next";
-import { Link } from "live_vue";
-import ResetPasswordForm from "@/components/reset-password/ResetPasswordForm.vue";
+import { Form, Link } from "live_vue";
+import ResetPasswordForm from "./components/ResetPasswordForm.vue";
 
 const props = defineProps<{
-  form: any;
+  form: Form<ResetPasswordFields>
 }>();
 </script>
 
diff --git a/assets/vue/components/reset-password/ResetPasswordForm.vue b/lib/katana_web/live/reset-password/components/ResetPasswordForm.vue
similarity index 79%
rename from assets/vue/components/reset-password/ResetPasswordForm.vue
rename to lib/katana_web/live/reset-password/components/ResetPasswordForm.vue
index 995bf38..c461a6f 100644
--- a/assets/vue/components/reset-password/ResetPasswordForm.vue
+++ b/lib/katana_web/live/reset-password/components/ResetPasswordForm.vue
@@ -5,11 +5,6 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { FieldError } from "@/components/ui/field-error";
 
-type ResetPasswordFields = {
-  password: string;
-  password_confirmation: string;
-};
-
 const props = defineProps<{
   form: Form<ResetPasswordFields>;
 }>();
@@ -26,17 +21,17 @@ const passwordConfirmationField = form.field("password_confirmation");
 <template>
   <form class="flex flex-col gap-6">
     <div class="flex flex-col items-center gap-2 text-center">
-      <h1 class="text-2xl font-bold">Reset your password</h1>
+      <h1 class="text-2xl font-bold">Redefinir a sua palavra-passe</h1>
       <p class="text-muted-foreground text-sm">
-        Create a new password for your account
+        Crie uma nova palavra-passe para a sua conta
       </p>
     </div>
     <div class="grid gap-6">
       <div class="grid gap-3">
-        <Label for="password" mandatory>New password</Label>
+        <Label for="password" mandatory>Nova palavra-passe</Label>
         <Input
           type="password"
-          placeholder="Enter your new password"
+          placeholder="Introduza a sua nova palavra-passe"
           v-bind="passwordField.inputAttrs.value"
           required
         />
@@ -47,11 +42,11 @@ const passwordConfirmationField = form.field("password_confirmation");
       </div>
       <div class="grid gap-3">
         <Label for="password_confirmation" mandatory
-          >Confirm new password</Label
+          >Confirmar nova palavra-passe</Label
         >
         <Input
           type="password"
-          placeholder="Confirm your new password"
+          placeholder="Confirme a sua nova palavra-passe"
           v-bind="passwordConfirmationField.inputAttrs.value"
           required
         />
@@ -68,14 +63,14 @@ const passwordConfirmationField = form.field("password_confirmation");
         @click="form.submit()"
       >
         <span role="status" aria-live="polite">
-          {{ form.isValidating.value ? "Validating..." : "Reset" }}
+          {{ form.isValidating.value ? "A validar..." : "Redefinir" }}
         </span>
       </Button>
     </div>
     <div class="text-center text-sm">
-      Remember your password?
+      Lembra-se da sua palavra-passe?
       <Link navigate="/users/log_in" class="underline underline-offset-4">
-        Log in
+        Iniciar sessão
       </Link>
     </div>
   </form>
diff --git a/lib/katana_web/live/auth/user_reset_password_live.ex b/lib/katana_web/live/reset-password/reset_password_live.ex
similarity index 93%
rename from lib/katana_web/live/auth/user_reset_password_live.ex
rename to lib/katana_web/live/reset-password/reset_password_live.ex
index b8d1d94..9ff3e93 100644
--- a/lib/katana_web/live/auth/user_reset_password_live.ex
+++ b/lib/katana_web/live/reset-password/reset_password_live.ex
@@ -1,11 +1,11 @@
-defmodule KatanaWeb.UserResetPasswordLive do
+defmodule KatanaWeb.ResetPasswordLive do
   use KatanaWeb, {:live_view, :root}
 
   alias Katana.Accounts
 
   def render(assigns) do
     ~H"""
-    <.vue v-component="UserResetPassword" form={@form} v-socket={@socket} />
+    <.vue v-component="ResetPassword" form={@form} v-socket={@socket} />
     """
   end
 
diff --git a/lib/katana_web/live/reset-password/types/form.ts b/lib/katana_web/live/reset-password/types/form.ts
new file mode 100644
index 0000000..5f67c86
--- /dev/null
+++ b/lib/katana_web/live/reset-password/types/form.ts
@@ -0,0 +1,4 @@
+type ResetPasswordFields = {
+  password: string;
+  password_confirmation: string;
+};
diff --git a/lib/katana_web/router.ex b/lib/katana_web/router.ex
index d63b3dd..2775cdf 100644
--- a/lib/katana_web/router.ex
+++ b/lib/katana_web/router.ex
@@ -47,8 +47,8 @@ defmodule KatanaWeb.Router do
       on_mount: [{KatanaWeb.UserAuth, :redirect_if_user_is_authenticated}] do
       live "/users/register", UserRegistrationLive, :new
       live "/users/log_in", UserLoginLive, :new
-      live "/users/forgot_password", UserForgotPasswordLive, :new
-      live "/users/reset_password/:token", UserResetPasswordLive, :edit
+      live "/forgot_password", ForgotPasswordLive, :new
+      live "/reset_password/:token", ResetPasswordLive, :edit
     end
 
     post "/users/log_in", UserSessionController, :create
diff --git a/test/katana/accounts_test.exs b/test/katana/accounts_test.exs
index efc00ff..a9b0a08 100644
--- a/test/katana/accounts_test.exs
+++ b/test/katana/accounts_test.exs
@@ -415,7 +415,7 @@ defmodule Katana.AccountsTest do
     end
   end
 
-  describe "deliver_user_reset_password_instructions/2" do
+  describe "deliver_reset_password_instructions/2" do
     setup do
       %{user: user_fixture()}
     end
@@ -423,7 +423,7 @@ defmodule Katana.AccountsTest do
     test "sends token through notification", %{user: user} do
       token =
         extract_user_token(fn url ->
-          Accounts.deliver_user_reset_password_instructions(user, url)
+          Accounts.deliver_reset_password_instructions(user, url)
         end)
 
       {:ok, token} = Base.url_decode64(token, padding: false)