import React, { useState } from "react"; import { Controller, useForm } from "react-hook-form"; // services import { AuthService } from "services/auth.service"; // hooks import useToast from "hooks/use-toast"; import { useEventTracker } from "hooks/store"; // ui import { Button, Input } from "@plane/ui"; // helpers import { checkEmailValidity } from "helpers/string.helper"; // constants import { ESignUpSteps } from "components/account"; import { PASSWORD_CREATE_SELECTED, PASSWORD_CREATE_SKIPPED, SETUP_PASSWORD } from "constants/event-tracker"; // icons import { Eye, EyeOff } from "lucide-react"; type Props = { email: string; handleStepChange: (step: ESignUpSteps) => void; handleSignInRedirection: () => Promise; }; type TCreatePasswordFormValues = { email: string; password: string; }; const defaultValues: TCreatePasswordFormValues = { email: "", password: "", }; // services const authService = new AuthService(); export const SignUpOptionalSetPasswordForm: React.FC = (props) => { const { email, handleSignInRedirection } = props; // states const [isGoingToWorkspace, setIsGoingToWorkspace] = useState(false); const [showPassword, setShowPassword] = useState(false); // store hooks const { captureEvent } = useEventTracker(); // toast alert const { setToastAlert } = useToast(); // form info const { control, formState: { errors, isSubmitting, isValid }, handleSubmit, } = useForm({ defaultValues: { ...defaultValues, email, }, mode: "onChange", reValidateMode: "onChange", }); const handleCreatePassword = async (formData: TCreatePasswordFormValues) => { const payload = { password: formData.password, }; await authService .setPassword(payload) .then(async () => { setToastAlert({ type: "success", title: "Success!", message: "Password created successfully.", }); captureEvent(SETUP_PASSWORD, { state: "SUCCESS", first_time: true, }); await handleSignInRedirection(); }) .catch((err) => { captureEvent(SETUP_PASSWORD, { state: "FAILED", first_time: true, }); setToastAlert({ type: "error", title: "Error!", message: err?.error ?? "Something went wrong. Please try again.", }); }); }; const handleGoToWorkspace = async () => { setIsGoingToWorkspace(true); await handleSignInRedirection().finally(() => { captureEvent(PASSWORD_CREATE_SKIPPED, { state: "SUCCESS", first_time: true, }); setIsGoingToWorkspace(false); }); }; return ( <>

Moving to the runway

Let{"'"}s set a password so
you can do away with codes.

checkEmailValidity(value) || "Email is invalid", }} render={({ field: { value, onChange, ref } }) => ( )} />
(
{showPassword ? ( setShowPassword(false)} /> ) : ( setShowPassword(true)} /> )}
)} />

This password will continue to be your account{"'"}s password.

); };