binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: new sign-in, sign-up and forgot password workflows (#3415)

Browse source 
* chore: sign up workflow updated

* chore: sign in workflow updated

* refactor: folder structure

* chore: forgot password workflow

* refactor: form component props

* chore: forgot password popover for instances with smtp unconfigured

* chore: updated UX copy

* chore: update reset password link

* chore: update email placeholder
This commit is contained in:
Aaryan Khandelwal 2024-01-19 20:55:03 +05:30 • committed by sriram veeraghanta
parent 4a26f11e23
commit 577118ca02
36 changed files with 1022 additions and 763 deletions
Download patch file Download diff file Expand all files Collapse all files

113
web/components/account/sign-in-forms/optional-set-password.tsx
View file

@ -1,36 +1,76 @@
import React, { useState } from "react";
import Link from "next/link";
import { Controller, useForm } from "react-hook-form";
// services
import { AuthService } from "services/auth.service";
// hooks
import useToast from "hooks/use-toast";
// ui
import { Button, Input } from "@plane/ui";
// helpers
import { checkEmailValidity } from "helpers/string.helper";
// constants
import { ESignInSteps } from "components/account";
type Props = {
email: string;
handleStepChange: (step: ESignInSteps) => void;
handleSignInRedirection: () => Promise<void>;
isOnboarded: boolean;
};
export const OptionalSetPasswordForm: React.FC<Props> = (props) => {
const { email, handleStepChange, handleSignInRedirection, isOnboarded } = props;
type TCreatePasswordFormValues = {
email: string;
password: string;
};
const defaultValues: TCreatePasswordFormValues = {
email: "",
password: "",
};
// services
const authService = new AuthService();
export const SignInOptionalSetPasswordForm: React.FC<Props> = (props) => {
const { email, handleSignInRedirection } = props;
// states
const [isGoingToWorkspace, setIsGoingToWorkspace] = useState(false);
// toast alert
const { setToastAlert } = useToast();
// form info
const {
control,
formState: { errors, isValid },
} = useForm({
formState: { errors, isSubmitting, isValid },
handleSubmit,
} = useForm<TCreatePasswordFormValues>({
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.",
});
await handleSignInRedirection();
})
.catch((err) =>
setToastAlert({
type: "error",
title: "Error!",
message: err?.error ?? "Something went wrong. Please try again.",
})
);
};
const handleGoToWorkspace = async () => {
setIsGoingToWorkspace(true);
@ -39,12 +79,11 @@ export const OptionalSetPasswordForm: React.FC<Props> = (props) => {
return (
<>
<h1 className="sm:text-2.5xl text-center text-2xl font-medium text-onboarding-text-100">Set a password</h1>
<p className="mt-2.5 px-20 text-center text-sm text-onboarding-text-200">
<h1 className="sm:text-2.5xl text-center text-2xl font-medium text-onboarding-text-100">Set your password</h1>
<p className="mt-2.5 text-center text-sm text-onboarding-text-200">
If you{"'"}d like to do away with codes, set a password here.
</p>
<form className="mx-auto mt-5 space-y-4 sm:w-96">
<form onSubmit={handleSubmit(handleCreatePassword)} className="mx-auto mt-5 space-y-4 sm:w-96">
<Controller
control={control}
name="email"
@ -61,22 +100,47 @@ export const OptionalSetPasswordForm: React.FC<Props> = (props) => {
onChange={onChange}
ref={ref}
hasError={Boolean(errors.email)}
placeholder="orville.wright@frstflt.com"
className="h-[46px] w-full border border-onboarding-border-100 pr-12 text-onboarding-text-400"
placeholder="name@company.com"
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 text-onboarding-text-400"
disabled
/>
)}
/>
<div className="grid grid-cols-2 gap-2.5">
<div>
<Controller
control={control}
name="password"
rules={{
required: "Password is required",
}}
render={({ field: { value, onChange, ref } }) => (
<Input
type="password"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.password)}
placeholder="Enter password"
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
minLength={8}
autoFocus
/>
)}
/>
<p className="text-onboarding-text-200 text-xs mt-2 pb-3">
Whatever you choose now will be your account{"'"}s password until you change it.
</p>
</div>
<div className="space-y-2.5">
<Button
type="button"
type="submit"
variant="primary"
onClick={() => handleStepChange(ESignInSteps.CREATE_PASSWORD)}
className="w-full"
size="xl"
disabled={!isValid}
loading={isSubmitting}
>
Create password
Set password
</Button>
<Button
type="button"
@ -84,20 +148,11 @@ export const OptionalSetPasswordForm: React.FC<Props> = (props) => {
className="w-full"
size="xl"
onClick={handleGoToWorkspace}
disabled={!isValid}
loading={isGoingToWorkspace}
>
{isOnboarded ? "Go to workspace" : "Set up workspace"}
Skip to workspace
</Button>
</div>
<p className="text-xs text-onboarding-text-200">
When you click{" "}
<span className="text-custom-primary-100">{isOnboarded ? "Go to workspace" : "Set up workspace"}</span> above,
you agree with our{" "}
<Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
<span className="font-semibold underline">terms and conditions of service.</span>
</Link>
</p>
</form>
</>
);