Improve MineGeo interface and functionality

components/PasswordForm.tsx

@@ -1,10 +1,13 @@
 "use client";
+import { useI18n } from "@/components/I18nProvider";
+
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { createBrowserClient } from "@supabase/ssr";
 import { passwordUpdateSchema } from "@/shared/account";
 
 export function PasswordForm({ recovery = false }: { recovery?: boolean }) {
+  const { t } = useI18n();
   const [current, setCurrent] = useState(""),
     [password, setPassword] = useState(""),
     [confirmation, setConfirmation] = useState(""),
@@ -77,7 +80,7 @@ export function PasswordForm({ recovery = false }: { recovery?: boolean }) {
     <form onSubmit={submit} aria-busy={busy} className="password-form">
       {!recovery && (
         <label className="field">
-          Current password
+          {t("Current password")}
           <input
             name="currentPassword"
             type="password"
@@ -90,7 +93,7 @@ export function PasswordForm({ recovery = false }: { recovery?: boolean }) {
         </label>
       )}
       <label className="field">
-        New password
+        {t("New password")}
         <input
           name="newPassword"
           type="password"
@@ -102,11 +105,11 @@ export function PasswordForm({ recovery = false }: { recovery?: boolean }) {
           disabled={busy}
         />
         <small>
-          At least 12 characters. Use a unique password or passphrase.
+          {t("At least 12 characters. Use a unique password or passphrase.")}
         </small>
       </label>
       <label className="field">
-        Confirm new password
+        {t("Confirm new password")}
         <input
           name="confirmPassword"
           type="password"
@@ -119,7 +122,7 @@ export function PasswordForm({ recovery = false }: { recovery?: boolean }) {
       </label>
       {needsNonce && (
         <label className="field">
-          Email verification code
+          {t("Email verification code")}
           <input
             inputMode="numeric"
             autoComplete="one-time-code"
@@ -132,16 +135,20 @@ export function PasswordForm({ recovery = false }: { recovery?: boolean }) {
       )}
       {error && (
         <p role="alert" className="error-message">
-          {error}
+          {t(error)}
         </p>
       )}
       {message && (
         <p role="status" className="success-message">
-          {message}
+          {t(message)}
         </p>
       )}
       <button className="button primary" disabled={busy}>
-        {busy ? "Updating…" : recovery ? "Set new password" : "Update password"}
+        {busy
+          ? t("Updating…")
+          : recovery
+            ? t("Set new password")
+            : t("Update password")}
       </button>
     </form>
   );