chore: update copy of register and login
This commit is contained in:
me
@@ -1,44 +1,43 @@
|
|||||||
import type { UseFormRegisterReturn } from "react-hook-form";
|
import type { UseFormRegisterReturn } from "react-hook-form";
|
||||||
|
|
||||||
interface FormFieldProps {
|
interface FormFieldProps {
|
||||||
label: string;
|
label: string;
|
||||||
type?: string;
|
type?: string;
|
||||||
placeholder?: string;
|
placeholder?: string;
|
||||||
registration: UseFormRegisterReturn;
|
registration: UseFormRegisterReturn;
|
||||||
error?: string;
|
error?: string;
|
||||||
handleFocus?: () => void;
|
handleFocus?: () => void;
|
||||||
"data-testid"?: string;
|
"data-testid"?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function FormField({
|
export default function FormField({
|
||||||
label,
|
label,
|
||||||
type = "text",
|
type = "text",
|
||||||
placeholder,
|
placeholder,
|
||||||
registration,
|
registration,
|
||||||
error,
|
error,
|
||||||
handleFocus,
|
handleFocus,
|
||||||
"data-testid": testId,
|
"data-testid": testId,
|
||||||
}: FormFieldProps) {
|
}: FormFieldProps) {
|
||||||
return (
|
return (
|
||||||
<div className="form-control">
|
<div className="form-control">
|
||||||
<label
|
<label
|
||||||
htmlFor={registration.name}
|
htmlFor={registration.name}
|
||||||
className="field-label font-display text-base-content/90 font-medium"
|
className="field-label font-display text-neutral-content/80 font-medium"
|
||||||
>
|
>
|
||||||
{label}
|
{label}
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
{...registration}
|
{...registration}
|
||||||
id={registration.name}
|
id={registration.name}
|
||||||
data-testid={testId}
|
data-testid={testId}
|
||||||
type={type}
|
type={type}
|
||||||
placeholder={placeholder}
|
placeholder={placeholder}
|
||||||
className={`input input-bordered focus:input-primary ${
|
className={`input input-bordered focus:input-primary ${error ? "input-error" : ""
|
||||||
error ? "input-error" : ""
|
}`}
|
||||||
}`}
|
onFocus={handleFocus}
|
||||||
onFocus={handleFocus}
|
/>
|
||||||
/>
|
{error && <p className="text-error">{error}</p>}
|
||||||
{error && <p className="text-error">{error}</p>}
|
</div>
|
||||||
</div>
|
);
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
+116
-117
@@ -16,135 +16,134 @@ import { useAuth } from "../hooks/useAuth";
|
|||||||
import { CryptoUtils } from "../utils/crypto";
|
import { CryptoUtils } from "../utils/crypto";
|
||||||
|
|
||||||
const loginSchema = z.object({
|
const loginSchema = z.object({
|
||||||
email: z.email("Please enter a valid email"),
|
email: z.email("Please enter a valid email"),
|
||||||
password: z.string().min(1, "Password is required"),
|
password: z.string().min(1, "Password is required"),
|
||||||
});
|
});
|
||||||
|
|
||||||
type LoginInputs = z.infer<typeof loginSchema>;
|
type LoginInputs = z.infer<typeof loginSchema>;
|
||||||
|
|
||||||
export default function Login() {
|
export default function Login() {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
const [apiError, setApiError] = useState<string | null>(null);
|
const [apiError, setApiError] = useState<string | null>(null);
|
||||||
const { setAuthStore } = useAuth();
|
const { setAuthStore } = useAuth();
|
||||||
const [showWelcome, setShowWelcome] = useState(!!location.state?.firstTime);
|
const [showWelcome, setShowWelcome] = useState(!!location.state?.firstTime);
|
||||||
const [saajanMessage, setSaajanMessage] = useState<string>(
|
const [saajanMessage, setSaajanMessage] = useState<string>(
|
||||||
"I was wondering when you'd return.",
|
"I was wondering when you'd return.",
|
||||||
);
|
);
|
||||||
const nextRoute = location.state?.redirectUrl || ROUTES.DRAWER;
|
const nextRoute = location.state?.redirectUrl || ROUTES.DRAWER;
|
||||||
|
|
||||||
const {
|
const {
|
||||||
register,
|
register,
|
||||||
handleSubmit,
|
handleSubmit,
|
||||||
formState: { errors },
|
formState: { errors },
|
||||||
} = useForm<LoginInputs>({
|
} = useForm<LoginInputs>({
|
||||||
resolver: zodResolver(loginSchema),
|
resolver: zodResolver(loginSchema),
|
||||||
});
|
});
|
||||||
|
|
||||||
const onSubmit = async (data: LoginInputs) => {
|
const onSubmit = async (data: LoginInputs) => {
|
||||||
setIsLoading(true);
|
setIsLoading(true);
|
||||||
setApiError(null);
|
setApiError(null);
|
||||||
try {
|
try {
|
||||||
// client side key derivation for e2e encryption
|
// client side key derivation for e2e encryption
|
||||||
const { masterKey, authHash } = await CryptoUtils.deriveKeyBundle(
|
const { masterKey, authHash } = await CryptoUtils.deriveKeyBundle(
|
||||||
data.password,
|
data.password,
|
||||||
data.email,
|
data.email,
|
||||||
);
|
);
|
||||||
|
|
||||||
// send just the authHash as the password to the server
|
// send just the authHash as the password to the server
|
||||||
const { data: authData } = await publicApi.post(endpoints.LOGIN, {
|
const { data: authData } = await publicApi.post(endpoints.LOGIN, {
|
||||||
email: data.email,
|
email: data.email,
|
||||||
password: authHash,
|
password: authHash,
|
||||||
});
|
});
|
||||||
|
|
||||||
const { data: userData } = await api.get(endpoints.ME, {
|
const { data: userData } = await api.get(endpoints.ME, {
|
||||||
headers: { Authorization: `Bearer ${authData.access}` },
|
headers: { Authorization: `Bearer ${authData.access}` },
|
||||||
});
|
});
|
||||||
|
|
||||||
await setAuthStore(authData.access, userData, masterKey);
|
await setAuthStore(authData.access, userData, masterKey);
|
||||||
|
|
||||||
navigate(nextRoute, { replace: true, state: location.state });
|
navigate(nextRoute, { replace: true, state: location.state });
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
let message =
|
let message =
|
||||||
"Sorry, we're experiencing technical issues.\nPlease try again later.";
|
"Sorry, we're experiencing technical issues.\nPlease try again later.";
|
||||||
if (axios.isAxiosError(err) && err.response?.status !== 500) {
|
if (axios.isAxiosError(err) && err.response?.status !== 500) {
|
||||||
message = err.response?.data?.detail || err.response?.data?.message;
|
message = err.response?.data?.detail || err.response?.data?.message;
|
||||||
}
|
|
||||||
setApiError(message);
|
|
||||||
} finally {
|
|
||||||
setIsLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col items-center">
|
|
||||||
{!showWelcome && <Saajan message={saajanMessage} position="top" />}
|
|
||||||
{showWelcome && <WelcomeModal setShowWelcome={setShowWelcome} />}
|
|
||||||
<div className="glass-card w-full max-w-sm p-2 transition-all duration-500 hover:shadow-2xl fade-zoom">
|
|
||||||
<form onSubmit={handleSubmit(onSubmit)} className="card-body gap-4">
|
|
||||||
<h1 className="flex items-center font-display text-2xl justify-center text-primary/80 tracking-tight">
|
|
||||||
Enter <Logo type="logo" scale={0.7} /> Archive
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
{apiError && (
|
|
||||||
<div className="alert alert-error text-xs py-2 rounded-md">
|
|
||||||
<span data-testid="login-error-message">{apiError}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<FormField
|
|
||||||
label="Email"
|
|
||||||
type="email"
|
|
||||||
placeholder="f.kafka@wrongtrain.com"
|
|
||||||
data-testid="email-input"
|
|
||||||
registration={register("email")}
|
|
||||||
error={errors.email?.message}
|
|
||||||
handleFocus={() => setSaajanMessage("I remember you.")}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<FormField
|
|
||||||
label="Password"
|
|
||||||
type="password"
|
|
||||||
placeholder="••••••••"
|
|
||||||
data-testid="password-input"
|
|
||||||
registration={register("password")}
|
|
||||||
error={errors.password?.message}
|
|
||||||
handleFocus={() =>
|
|
||||||
setSaajanMessage("The one thing I cannot know for you.")
|
|
||||||
}
|
}
|
||||||
/>
|
setApiError(message);
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
<div className="card-actions mt-4">
|
return (
|
||||||
<button
|
<div className="flex flex-col items-center">
|
||||||
type="submit"
|
{!showWelcome && <Saajan message={saajanMessage} position="top" />}
|
||||||
name="login"
|
{showWelcome && <WelcomeModal setShowWelcome={setShowWelcome} />}
|
||||||
disabled={isLoading}
|
<div className="glass-card w-full max-w-sm p-2 transition-all duration-500 hover:shadow-2xl fade-zoom">
|
||||||
aria-label="Sign In"
|
<form onSubmit={handleSubmit(onSubmit)} className="card-body gap-4">
|
||||||
data-testid="login-submit-btn"
|
<h1 className="flex items-center font-display text-2xl justify-center text-primary/80 tracking-tight">
|
||||||
className="btn btn-primary w-full shadow-lg"
|
Enter <Logo type="logo" scale={0.7} /> Archive
|
||||||
>
|
</h1>
|
||||||
{isLoading ? (
|
|
||||||
<span className="loading loading-spinner loading-sm" />
|
|
||||||
) : (
|
|
||||||
"Sign In"
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="text-center text-sm font-medium text-base-content/70">
|
{apiError && (
|
||||||
Don't have an account?{" "}
|
<div className="alert alert-error text-xs py-2 rounded-md">
|
||||||
<button
|
<span data-testid="login-error-message">{apiError}</span>
|
||||||
type="button"
|
</div>
|
||||||
name="register"
|
)}
|
||||||
onClick={() => navigate(ROUTES.ONBOARD)}
|
|
||||||
className="link link-primary no-underline hover:underline font-bold"
|
<FormField
|
||||||
>
|
label="Email"
|
||||||
Register
|
type="email"
|
||||||
</button>
|
placeholder="f.kafka@wrongtrain.com"
|
||||||
</div>
|
data-testid="email-input"
|
||||||
</form>
|
registration={register("email")}
|
||||||
</div>
|
error={errors.email?.message}
|
||||||
</div>
|
handleFocus={() => setSaajanMessage("I remember you.")}
|
||||||
);
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
label="Password"
|
||||||
|
type="password"
|
||||||
|
placeholder="••••••••"
|
||||||
|
data-testid="password-input"
|
||||||
|
registration={register("password")}
|
||||||
|
error={errors.password?.message}
|
||||||
|
handleFocus={() =>
|
||||||
|
setSaajanMessage("The one thing I cannot know for you.")
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="card-actions mt-4">
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
name="login"
|
||||||
|
disabled={isLoading}
|
||||||
|
data-testid="login-submit-btn"
|
||||||
|
className="btn btn-primary w-full shadow-lg"
|
||||||
|
>
|
||||||
|
{isLoading ? (
|
||||||
|
<span className="loading loading-spinner loading-sm" />
|
||||||
|
) : (
|
||||||
|
"Continue"
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="divider text-neutral my-0">or</div>
|
||||||
|
<div className="text-center text-sm font-medium text-neutral">
|
||||||
|
New to <Logo type="inline" />?{" "}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
name="register"
|
||||||
|
onClick={() => navigate(ROUTES.ONBOARD)}
|
||||||
|
className="link link-primary"
|
||||||
|
>
|
||||||
|
Start here
|
||||||
|
</button>.
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
+156
-144
@@ -14,158 +14,170 @@ import { ROUTES } from "../config/routes";
|
|||||||
import { CryptoUtils } from "../utils/crypto";
|
import { CryptoUtils } from "../utils/crypto";
|
||||||
|
|
||||||
const registerSchema = z
|
const registerSchema = z
|
||||||
.object({
|
.object({
|
||||||
full_name: z.string().min(2, "Name must be at least 2 characters"),
|
full_name: z.string().min(2, "Name must be at least 2 characters"),
|
||||||
email: z.email("Please enter a valid email"),
|
email: z.email("Please enter a valid email"),
|
||||||
password: z.string().min(8, "Password must be at least 8 characters"),
|
password: z.string().min(8, "Password must be at least 8 characters"),
|
||||||
confirm_password: z.string(),
|
confirm_password: z.string(),
|
||||||
})
|
})
|
||||||
.refine((data) => data.password === data.confirm_password, {
|
.refine((data) => data.password === data.confirm_password, {
|
||||||
message: "Passwords don't match",
|
message: "Passwords don't match",
|
||||||
path: ["confirm_password"],
|
path: ["confirm_password"],
|
||||||
});
|
});
|
||||||
|
|
||||||
type RegisterInputs = z.infer<typeof registerSchema>;
|
type RegisterInputs = z.infer<typeof registerSchema>;
|
||||||
|
|
||||||
export default function Register() {
|
export default function Register() {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
const [apiError, setApiError] = useState<string | null>(null);
|
const [apiError, setApiError] = useState<string | null>(null);
|
||||||
const [saajanMessage, setSaajanMessage] = useState<string>(
|
const [saajanMessage, setSaajanMessage] = useState<string>(
|
||||||
"I didn't think I'd be here either.\nAnd yet, here we are.",
|
"I didn't think I'd be here either.\nAnd yet, here we are.",
|
||||||
);
|
);
|
||||||
|
|
||||||
const {
|
const {
|
||||||
register,
|
register,
|
||||||
handleSubmit,
|
handleSubmit,
|
||||||
formState: { errors },
|
formState: { errors },
|
||||||
} = useForm<RegisterInputs>({
|
} = useForm<RegisterInputs>({
|
||||||
resolver: zodResolver(registerSchema),
|
resolver: zodResolver(registerSchema),
|
||||||
});
|
});
|
||||||
|
|
||||||
const onSubmit = async (data: RegisterInputs) => {
|
const onSubmit = async (data: RegisterInputs) => {
|
||||||
setSaajanMessage("Good. I'll remember that.");
|
setSaajanMessage("Good. I'll remember that.");
|
||||||
setIsLoading(true);
|
setIsLoading(true);
|
||||||
setApiError(null);
|
setApiError(null);
|
||||||
try {
|
try {
|
||||||
// we generate the key bundle here to get the authHash (password) to be haSHed and stored in the db.
|
// we generate the key bundle here to get the authHash (password) to be haSHed and stored in the db.
|
||||||
const { authHash } = await CryptoUtils.deriveKeyBundle(
|
const { authHash } = await CryptoUtils.deriveKeyBundle(
|
||||||
data.password,
|
data.password,
|
||||||
data.email,
|
data.email,
|
||||||
);
|
);
|
||||||
|
|
||||||
await publicApi.post(endpoints.REGISTER, {
|
await publicApi.post(endpoints.REGISTER, {
|
||||||
full_name: data.full_name,
|
full_name: data.full_name,
|
||||||
email: data.email,
|
email: data.email,
|
||||||
password: authHash,
|
password: authHash,
|
||||||
});
|
});
|
||||||
navigate(ROUTES.VERIFY_EMAIL, { replace: true });
|
navigate(ROUTES.VERIFY_EMAIL, { replace: true });
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
let message = "Registration failed. Please try again.";
|
let message = "Registration failed. Please try again.";
|
||||||
if (axios.isAxiosError(err)) {
|
if (axios.isAxiosError(err)) {
|
||||||
message = err.response?.data?.message || message;
|
message = err.response?.data?.message || message;
|
||||||
}
|
}
|
||||||
setApiError(message);
|
setApiError(message);
|
||||||
} finally {
|
} finally {
|
||||||
setIsLoading(false);
|
setIsLoading(false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
<Saajan message={saajanMessage} position="right" />
|
<Saajan message={saajanMessage} position="right" />
|
||||||
<div className="glass-card w-full max-w-sm p-2 transition-all duration-500 hover:shadow-2xl fade-zoom">
|
<div className="glass-card w-full max-w-sm p-2 transition-all duration-500 hover:shadow-2xl fade-zoom">
|
||||||
<form onSubmit={handleSubmit(onSubmit)} className="card-body gap-4">
|
<form onSubmit={handleSubmit(onSubmit)} className="card-body gap-4">
|
||||||
<div className="card-title font-display text-2xl justify-center text-primary/80 tracking-tight whitespace-nowrap">
|
<div className="card-title font-display text-2xl justify-center text-primary/80 tracking-tight whitespace-nowrap">
|
||||||
Create a <Logo type="logo" scale={0.7} /> Account
|
Create a <Logo type="logo" scale={0.7} /> Account
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{apiError && (
|
{apiError && (
|
||||||
<div className="alert alert-error text-xs py-2 rounded-md">
|
<div className="alert alert-error text-xs py-2 rounded-md">
|
||||||
<span>{apiError}</span>
|
<span>{apiError}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
label="Pen Name"
|
||||||
|
placeholder="Word Smith"
|
||||||
|
data-testid="pen-name-input"
|
||||||
|
registration={register("full_name")}
|
||||||
|
error={errors.full_name?.message}
|
||||||
|
handleFocus={() =>
|
||||||
|
setSaajanMessage("Hello friend. What should I call you?")
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
label="Email"
|
||||||
|
type="email"
|
||||||
|
placeholder="f.kafka@wrongtrain.com"
|
||||||
|
data-testid="email-input"
|
||||||
|
registration={register("email")}
|
||||||
|
error={errors.email?.message}
|
||||||
|
handleFocus={() =>
|
||||||
|
setSaajanMessage(
|
||||||
|
"Where should I send your letters?\nNo empty lunchboxes, please.",
|
||||||
|
)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
label="Password"
|
||||||
|
type="password"
|
||||||
|
placeholder="••••••••"
|
||||||
|
data-testid="password-input"
|
||||||
|
registration={register("password")}
|
||||||
|
error={errors.password?.message}
|
||||||
|
handleFocus={() =>
|
||||||
|
setSaajanMessage(
|
||||||
|
"Something only you know.\nI have one of those too.",
|
||||||
|
)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
label="Confirm Password"
|
||||||
|
type="password"
|
||||||
|
placeholder="••••••••"
|
||||||
|
data-testid="confirm-password-input"
|
||||||
|
registration={register("confirm_password")}
|
||||||
|
error={errors.confirm_password?.message}
|
||||||
|
handleFocus={() =>
|
||||||
|
setSaajanMessage(
|
||||||
|
"Just once? Trust me, \nsome things are worth repeating twice.",
|
||||||
|
)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="alert alert-warning items-start text-left p-3 gap-2 rounded-md border-warning/20">
|
||||||
|
<InfoIcon size={20} weight="duotone" className="mt-0.5 shrink-0" />
|
||||||
|
<p className="text-sm font-semibold">
|
||||||
|
Choose a password you won't forget. <br />
|
||||||
|
Just like life,{" "}
|
||||||
|
<span className="underline decoration-2">there is no reset</span>{" "}
|
||||||
|
here. If you lose it, your letters cannot be recovered.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="card-actions mt-4">
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={isLoading}
|
||||||
|
aria-label="Register"
|
||||||
|
data-testid="register-submit-btn"
|
||||||
|
className="btn btn-primary w-full shadow-lg"
|
||||||
|
>
|
||||||
|
{isLoading ? (
|
||||||
|
<span className="loading loading-spinner loading-sm" />
|
||||||
|
) : (
|
||||||
|
"Begin"
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="divider text-neutral my-0">or</div>
|
||||||
|
<div className="text-center text-sm font-medium text-neutral">
|
||||||
|
Been here before?{" "}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
name="register"
|
||||||
|
onClick={() => navigate(ROUTES.LOGIN)}
|
||||||
|
className="link link-primary"
|
||||||
|
>
|
||||||
|
Continue where you left off
|
||||||
|
</button>.
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
|
);
|
||||||
<FormField
|
|
||||||
label="Pen Name"
|
|
||||||
placeholder="Word Smith"
|
|
||||||
data-testid="pen-name-input"
|
|
||||||
registration={register("full_name")}
|
|
||||||
error={errors.full_name?.message}
|
|
||||||
handleFocus={() =>
|
|
||||||
setSaajanMessage("Hello friend. What should I call you?")
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<FormField
|
|
||||||
label="Email"
|
|
||||||
type="email"
|
|
||||||
placeholder="f.kafka@wrongtrain.com"
|
|
||||||
data-testid="email-input"
|
|
||||||
registration={register("email")}
|
|
||||||
error={errors.email?.message}
|
|
||||||
handleFocus={() =>
|
|
||||||
setSaajanMessage(
|
|
||||||
"Where should I send your letters?\nNo empty lunchboxes, please.",
|
|
||||||
)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<FormField
|
|
||||||
label="Password"
|
|
||||||
type="password"
|
|
||||||
placeholder="••••••••"
|
|
||||||
data-testid="password-input"
|
|
||||||
registration={register("password")}
|
|
||||||
error={errors.password?.message}
|
|
||||||
handleFocus={() =>
|
|
||||||
setSaajanMessage(
|
|
||||||
"Something only you know.\nI have one of those too.",
|
|
||||||
)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<FormField
|
|
||||||
label="Confirm Password"
|
|
||||||
type="password"
|
|
||||||
placeholder="••••••••"
|
|
||||||
data-testid="confirm-password-input"
|
|
||||||
registration={register("confirm_password")}
|
|
||||||
error={errors.confirm_password?.message}
|
|
||||||
handleFocus={() =>
|
|
||||||
setSaajanMessage(
|
|
||||||
"Just once? Trust me, \nsome things are worth repeating twice.",
|
|
||||||
)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="alert alert-warning items-start text-left p-3 gap-2 rounded-md border-warning/20">
|
|
||||||
<InfoIcon size={20} weight="duotone" className="mt-0.5 shrink-0" />
|
|
||||||
<p className="text-sm font-semibold">
|
|
||||||
Choose a password you won't forget. <br />
|
|
||||||
Just like life,{" "}
|
|
||||||
<span className="underline decoration-2">there is no reset</span>{" "}
|
|
||||||
here. If you lose it, your letters cannot be recovered.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="card-actions mt-4">
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={isLoading}
|
|
||||||
aria-label="Register"
|
|
||||||
data-testid="register-submit-btn"
|
|
||||||
className="btn btn-primary w-full shadow-lg"
|
|
||||||
>
|
|
||||||
{isLoading ? (
|
|
||||||
<span className="loading loading-spinner loading-sm" />
|
|
||||||
) : (
|
|
||||||
"Register"
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user