[ENG-635] feat: Add password reset via OTP

public/locale/en.json

@@ -918,6 +918,7 @@
   "back_to_app_store": "Back to App Store",
   "back_to_consultation": "Go back to Consultation",
   "back_to_dispense_queue": "Back to Dispense Queue",
+  "back_to_email_reset": "Back to email reset",
   "back_to_encounter": "Back to Encounter",
   "back_to_facilities": "Back to Facilities",
   "back_to_home": "Back to Home",
@@ -1098,6 +1099,7 @@
   "cannot_select_month_out_of_range": "Cannot select month out of range",
   "cannot_select_year_out_of_range": "Cannot select year out of range",
   "cant_access_code": "Can't access your code?",
+  "cant_access_email": "Can't access your email?",
   "cant_scan_copy_key": "Can't scan? <strong>Copy setup key</strong> <CareIcon /> to add it to your authenticator app.",
   "cap": "Cap",
   "capacity": "Capacity",
@@ -2686,6 +2688,8 @@
   "footer_image": "Footer Image",
   "forget_password": "Forgot password?",
   "forget_password_instruction": "Enter your username, and if it exists, we will send you a link to reset your password.",
+  "forget_password_phone_instruction": "Enter your registered phone number, and if it exists, we will send you an OTP to reset your password.",
+  "forget_password_phone_otp_instruction": "Enter the OTP sent to your phone, then create and confirm your new password.",
   "form_preview": "Form Preview",
   "form_submission_discard_failed": "Failed to discard form submission",
   "form_submission_discarded": "Form submission discarded",
@@ -3552,6 +3556,8 @@
   "moving_camera": "Moving Camera",
   "mrp": "MRP",
   "multi_invoice": "Multi Invoice",
+  "multiple_users_linked_to_phone": "Multiple users linked to this phone number",
+  "multiple_users_linked_to_phone_hint": "Enter your username so we can reset the correct account.",
   "must_be_greater_than_value": "Must be greater than {{value}}",
   "my_dept": "My Dept.",
   "my_doctors": "My Doctors",
@@ -4137,6 +4143,7 @@
   "other_encounters": "Other Encounters",
   "other_medications": "Other Medications",
   "other_tags": "Other Tags",
+  "otp_password_reset_sent": "If this phone number is registered, you will receive an OTP.",
   "otp_verification_error": "Failed to verify OTP. Please try again later.",
   "otp_verification_success": "OTP has been verified successfully.",
   "out": "out",
@@ -5000,6 +5007,7 @@
   "reset_password_note_self": "Enter your current password, then create and confirm your new password",
   "reset_pinned_links": "Reset Pinned Links",
   "reset_to_default": "Reset to Default",
+  "reset_via_phone_number": "Reset via phone number",
   "resolved": "Resolved",
   "resource": "Resource",
   "resource_approving_facility": "Resource approving facility",

src/components/Auth/ForgotPasswordPanel.tsx

@@ -0,0 +1,115 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { cn } from "@/lib/utils";
+
+import CareIcon from "@/CAREUI/icons/CareIcon";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+import { ForgotPasswordPhone } from "@/components/Auth/ForgotPasswordPhone";
+import CircularProgress from "@/components/Common/CircularProgress";
+
+type ForgotMethod = "email" | "phone";
+
+interface ForgotPasswordPanelProps {
+  username: string;
+  usernameError?: string | null;
+  onUsernameChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onSubmitEmail: (e: React.SubmitEvent<HTMLFormElement>) => void;
+  onBackToLogin: () => void;
+  isSubmitting: boolean;
+}
+
+export function ForgotPasswordPanel({
+  username,
+  usernameError,
+  onUsernameChange,
+  onSubmitEmail,
+  onBackToLogin,
+  isSubmitting,
+}: ForgotPasswordPanelProps) {
+  const { t } = useTranslation();
+  const [forgotMethod, setForgotMethod] = useState<ForgotMethod>("email");
+
+  if (forgotMethod === "phone") {
+    return (
+      <ForgotPasswordPhone
+        onBackToEmail={() => setForgotMethod("email")}
+        onSuccess={onBackToLogin}
+      />
+    );
+  }
+
+  return (
+    <form onSubmit={onSubmitEmail} className="space-y-4">
+      <Button
+        variant="link"
+        type="button"
+        onClick={onBackToLogin}
+        className="px-0 mb-4 flex items-center gap-2"
+      >
+        <CareIcon icon="l-arrow-left" className="text-lg" />
+        <span>{t("back_to_login")}</span>
+      </Button>
+
+      <div className="space-y-4">
+        <div>
+          <h2 className="text-2xl font-bold text-gray-900">
+            {t("forget_password")}
+          </h2>
+          <p className="text-sm text-gray-500 mt-2">
+            {t("forget_password_instruction")}
+          </p>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="forgot_username">{t("username")}</Label>
+          <Input
+            id="forgot_username"
+            name="username"
+            type="text"
+            value={username}
+            onChange={onUsernameChange}
+            placeholder={t("enter_your_username")}
+            className={cn(
+              usernameError && "border-red-500 focus-visible:ring-red-500",
+            )}
+          />
+          {usernameError && (
+            <p className="text-sm text-red-500">{t(usernameError)}</p>
+          )}
+        </div>
+
+        <Button
+          type="submit"
+          className="w-full"
+          variant="primary"
+          disabled={isSubmitting}
+        >
+          {isSubmitting ? (
+            <CircularProgress className="text-white" />
+          ) : (
+            t("send_reset_link")
+          )}
+        </Button>
+
+        <div className="mt-5 text-center">
+          <p className="text-sm text-gray-500 font-base">
+            {t("cant_access_email")}
+          </p>
+          <ul className="list-disc inline-flex justify-center w-full">
+            <li
+              onClick={() => setForgotMethod("phone")}
+              className="text-sm font-medium text-primary-500 hover:underline cursor-pointer"
+            >
+              {t("reset_via_phone_number")}
+            </li>
+          </ul>
+        </div>
+      </div>
+    </form>
+  );
+}