feat(migrate-account): implement MigrateAccountStep for passwordless WHMCS account migration
This commit is contained in:
barsa
parent
464f98284a
commit
0ee1f00bf8
@ -0,0 +1,364 @@
|
|||||||
|
/**
|
||||||
|
* MigrateAccountStep - Migrate WHMCS account to portal (passwordless)
|
||||||
|
*
|
||||||
|
* For whmcs_unmapped users who have verified their email via OTP.
|
||||||
|
* Email verification serves as identity proof - no legacy password needed.
|
||||||
|
* Shows prefilled WHMCS data and collects password + required fields.
|
||||||
|
*/
|
||||||
|
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { Button, Input, Label } from "@/components/atoms";
|
||||||
|
import { Checkbox } from "@/components/atoms/checkbox";
|
||||||
|
import { getSafeRedirect } from "@/features/auth/utils/route-protection";
|
||||||
|
import { useGetStartedStore } from "../../../stores/get-started.store";
|
||||||
|
|
||||||
|
interface FormErrors {
|
||||||
|
password?: string | undefined;
|
||||||
|
confirmPassword?: string | undefined;
|
||||||
|
dateOfBirth?: string | undefined;
|
||||||
|
gender?: string | undefined;
|
||||||
|
acceptTerms?: string | undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function MigrateAccountStep() {
|
||||||
|
const router = useRouter();
|
||||||
|
const {
|
||||||
|
formData,
|
||||||
|
updateFormData,
|
||||||
|
migrateWhmcsAccount,
|
||||||
|
prefill,
|
||||||
|
loading,
|
||||||
|
error,
|
||||||
|
clearError,
|
||||||
|
goBack,
|
||||||
|
redirectTo,
|
||||||
|
serviceContext,
|
||||||
|
} = useGetStartedStore();
|
||||||
|
|
||||||
|
// Compute effective redirect URL from store state (with validation)
|
||||||
|
const effectiveRedirectTo = getSafeRedirect(
|
||||||
|
redirectTo || serviceContext?.redirectTo,
|
||||||
|
"/account/dashboard"
|
||||||
|
);
|
||||||
|
|
||||||
|
const [password, setPassword] = useState("");
|
||||||
|
const [confirmPassword, setConfirmPassword] = useState("");
|
||||||
|
const [dateOfBirth, setDateOfBirth] = useState(formData.dateOfBirth);
|
||||||
|
const [gender, setGender] = useState<"male" | "female" | "other" | "">(formData.gender);
|
||||||
|
const [acceptTerms, setAcceptTerms] = useState(formData.acceptTerms);
|
||||||
|
const [marketingConsent, setMarketingConsent] = useState(formData.marketingConsent);
|
||||||
|
const [localErrors, setLocalErrors] = useState<FormErrors>({});
|
||||||
|
|
||||||
|
const validatePassword = (pass: string): string | undefined => {
|
||||||
|
if (!pass) return "Password is required";
|
||||||
|
if (pass.length < 8) return "Password must be at least 8 characters";
|
||||||
|
if (!/[A-Z]/.test(pass)) return "Password must contain an uppercase letter";
|
||||||
|
if (!/[a-z]/.test(pass)) return "Password must contain a lowercase letter";
|
||||||
|
if (!/[0-9]/.test(pass)) return "Password must contain a number";
|
||||||
|
return undefined;
|
||||||
|
};
|
||||||
|
|
||||||
|
const validate = (): boolean => {
|
||||||
|
const errors: FormErrors = {};
|
||||||
|
|
||||||
|
const passwordError = validatePassword(password);
|
||||||
|
if (passwordError) {
|
||||||
|
errors.password = passwordError;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (password !== confirmPassword) {
|
||||||
|
errors.confirmPassword = "Passwords do not match";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!dateOfBirth) {
|
||||||
|
errors.dateOfBirth = "Date of birth is required";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!gender) {
|
||||||
|
errors.gender = "Please select a gender";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!acceptTerms) {
|
||||||
|
errors.acceptTerms = "You must accept the terms of service";
|
||||||
|
}
|
||||||
|
|
||||||
|
setLocalErrors(errors);
|
||||||
|
return Object.keys(errors).length === 0;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = async () => {
|
||||||
|
clearError();
|
||||||
|
|
||||||
|
if (!validate()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update form data
|
||||||
|
updateFormData({
|
||||||
|
password,
|
||||||
|
confirmPassword,
|
||||||
|
dateOfBirth,
|
||||||
|
gender: gender as "male" | "female" | "other",
|
||||||
|
acceptTerms,
|
||||||
|
marketingConsent,
|
||||||
|
});
|
||||||
|
|
||||||
|
const result = await migrateWhmcsAccount();
|
||||||
|
if (result) {
|
||||||
|
// Redirect to the effective redirect URL on success
|
||||||
|
router.push(effectiveRedirectTo);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const canSubmit = password && confirmPassword && dateOfBirth && gender && acceptTerms;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="text-center space-y-2">
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
{prefill?.firstName
|
||||||
|
? `Welcome back, ${prefill.firstName}! Set up your new portal password.`
|
||||||
|
: "Set up your new portal password to continue."}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Pre-filled info display in gray disabled inputs */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label className="text-muted-foreground">First Name</Label>
|
||||||
|
<Input
|
||||||
|
value={prefill?.firstName || formData.firstName || ""}
|
||||||
|
disabled
|
||||||
|
className="bg-muted text-muted-foreground"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label className="text-muted-foreground">Last Name</Label>
|
||||||
|
<Input
|
||||||
|
value={prefill?.lastName || formData.lastName || ""}
|
||||||
|
disabled
|
||||||
|
className="bg-muted text-muted-foreground"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label className="text-muted-foreground">Email</Label>
|
||||||
|
<Input value={formData.email} disabled className="bg-muted text-muted-foreground" />
|
||||||
|
</div>
|
||||||
|
{(prefill?.phone || formData.phone) && (
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label className="text-muted-foreground">Phone</Label>
|
||||||
|
<Input
|
||||||
|
value={prefill?.phone || formData.phone}
|
||||||
|
disabled
|
||||||
|
className="bg-muted text-muted-foreground"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{prefill?.address && (
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label className="text-muted-foreground">Address</Label>
|
||||||
|
<Input
|
||||||
|
value={[
|
||||||
|
prefill.address.postcode,
|
||||||
|
prefill.address.state,
|
||||||
|
prefill.address.city,
|
||||||
|
prefill.address.address1,
|
||||||
|
prefill.address.address2,
|
||||||
|
]
|
||||||
|
.filter(Boolean)
|
||||||
|
.join(", ")}
|
||||||
|
disabled
|
||||||
|
className="bg-muted text-muted-foreground"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Date of Birth */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="dateOfBirth">
|
||||||
|
Date of Birth <span className="text-danger">*</span>
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="dateOfBirth"
|
||||||
|
type="date"
|
||||||
|
value={dateOfBirth}
|
||||||
|
onChange={e => {
|
||||||
|
setDateOfBirth(e.target.value);
|
||||||
|
setLocalErrors(prev => ({ ...prev, dateOfBirth: undefined }));
|
||||||
|
}}
|
||||||
|
disabled={loading}
|
||||||
|
error={localErrors.dateOfBirth}
|
||||||
|
max={new Date().toISOString().split("T")[0]}
|
||||||
|
/>
|
||||||
|
{localErrors.dateOfBirth && (
|
||||||
|
<p className="text-sm text-danger">{localErrors.dateOfBirth}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Gender */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>
|
||||||
|
Gender <span className="text-danger">*</span>
|
||||||
|
</Label>
|
||||||
|
<div className="flex gap-4">
|
||||||
|
{(["male", "female", "other"] as const).map(option => (
|
||||||
|
<label key={option} className="flex items-center gap-2 cursor-pointer">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="gender"
|
||||||
|
value={option}
|
||||||
|
checked={gender === option}
|
||||||
|
onChange={() => {
|
||||||
|
setGender(option);
|
||||||
|
setLocalErrors(prev => ({ ...prev, gender: undefined }));
|
||||||
|
}}
|
||||||
|
disabled={loading}
|
||||||
|
className="h-4 w-4 text-primary focus:ring-primary"
|
||||||
|
/>
|
||||||
|
<span className="text-sm capitalize">{option}</span>
|
||||||
|
</label>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
{localErrors.gender && <p className="text-sm text-danger">{localErrors.gender}</p>}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Password */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="password">
|
||||||
|
Password <span className="text-danger">*</span>
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="password"
|
||||||
|
type="password"
|
||||||
|
value={password}
|
||||||
|
onChange={e => {
|
||||||
|
setPassword(e.target.value);
|
||||||
|
setLocalErrors(prev => ({ ...prev, password: undefined }));
|
||||||
|
}}
|
||||||
|
placeholder="Create a strong password"
|
||||||
|
disabled={loading}
|
||||||
|
error={localErrors.password}
|
||||||
|
autoComplete="new-password"
|
||||||
|
/>
|
||||||
|
{localErrors.password && <p className="text-sm text-danger">{localErrors.password}</p>}
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
At least 8 characters with uppercase, lowercase, and numbers
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Confirm Password */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="confirmPassword">
|
||||||
|
Confirm Password <span className="text-danger">*</span>
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="confirmPassword"
|
||||||
|
type="password"
|
||||||
|
value={confirmPassword}
|
||||||
|
onChange={e => {
|
||||||
|
setConfirmPassword(e.target.value);
|
||||||
|
setLocalErrors(prev => ({ ...prev, confirmPassword: undefined }));
|
||||||
|
}}
|
||||||
|
placeholder="Confirm your password"
|
||||||
|
disabled={loading}
|
||||||
|
error={localErrors.confirmPassword}
|
||||||
|
autoComplete="new-password"
|
||||||
|
/>
|
||||||
|
{localErrors.confirmPassword && (
|
||||||
|
<p className="text-sm text-danger">{localErrors.confirmPassword}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Terms & Marketing */}
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex items-start gap-2">
|
||||||
|
<Checkbox
|
||||||
|
id="acceptTerms"
|
||||||
|
checked={acceptTerms}
|
||||||
|
onChange={e => {
|
||||||
|
setAcceptTerms(e.target.checked);
|
||||||
|
setLocalErrors(prev => ({ ...prev, acceptTerms: undefined }));
|
||||||
|
}}
|
||||||
|
disabled={loading}
|
||||||
|
/>
|
||||||
|
<Label htmlFor="acceptTerms" className="text-sm font-normal leading-tight cursor-pointer">
|
||||||
|
I accept the{" "}
|
||||||
|
<a
|
||||||
|
href="/terms"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-primary hover:underline"
|
||||||
|
>
|
||||||
|
Terms of Service
|
||||||
|
</a>{" "}
|
||||||
|
and{" "}
|
||||||
|
<a
|
||||||
|
href="/privacy"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-primary hover:underline"
|
||||||
|
>
|
||||||
|
Privacy Policy
|
||||||
|
</a>{" "}
|
||||||
|
<span className="text-danger">*</span>
|
||||||
|
</Label>
|
||||||
|
</div>
|
||||||
|
{localErrors.acceptTerms && (
|
||||||
|
<p className="text-sm text-danger ml-6">{localErrors.acceptTerms}</p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="flex items-start gap-2">
|
||||||
|
<Checkbox
|
||||||
|
id="marketingConsent"
|
||||||
|
checked={marketingConsent}
|
||||||
|
onChange={e => setMarketingConsent(e.target.checked)}
|
||||||
|
disabled={loading}
|
||||||
|
/>
|
||||||
|
<Label
|
||||||
|
htmlFor="marketingConsent"
|
||||||
|
className="text-sm font-normal leading-tight cursor-pointer"
|
||||||
|
>
|
||||||
|
I would like to receive marketing emails and updates
|
||||||
|
</Label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Error display */}
|
||||||
|
{error && (
|
||||||
|
<div className="p-3 rounded-lg bg-danger/10 border border-danger/20">
|
||||||
|
<p className="text-sm text-danger">{error}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
<div className="space-y-3">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
onClick={handleSubmit}
|
||||||
|
disabled={loading || !canSubmit}
|
||||||
|
loading={loading}
|
||||||
|
className="w-full h-11"
|
||||||
|
>
|
||||||
|
{loading ? "Setting Up Account..." : "Set Up Account"}
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
onClick={goBack}
|
||||||
|
disabled={loading}
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
Go Back
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user