chore: forgot password loader updated

This commit is contained in:
Anmol Singh Bhatia 2023-12-04 15:14:35 +05:30
parent 06fed034a2
commit 5bb3759f59

View File

@ -1,4 +1,5 @@
import React from "react"; import React, { useState } from "react";
import Link from "next/link";
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
import { XCircle } from "lucide-react"; import { XCircle } from "lucide-react";
// services // services
@ -33,6 +34,8 @@ const defaultValues: TPasswordFormValues = {
export const PasswordForm: React.FC<Props> = (props) => { export const PasswordForm: React.FC<Props> = (props) => {
const { email, updateEmail, handleStepChange, handleSignInRedirection } = props; const { email, updateEmail, handleStepChange, handleSignInRedirection } = props;
// states
const [isSendingResetPasswordLink, setIsSendingResetPasswordLink] = useState(false);
// toast alert // toast alert
const { setToastAlert } = useToast(); const { setToastAlert } = useToast();
// form info // form info
@ -110,6 +113,8 @@ export const PasswordForm: React.FC<Props> = (props) => {
return; return;
} }
setIsSendingResetPasswordLink(true);
authService authService
.sendResetPasswordLink({ email: emailFormValue }) .sendResetPasswordLink({ email: emailFormValue })
.then(() => handleStepChange(ESignInSteps.SET_PASSWORD_LINK)) .then(() => handleStepChange(ESignInSteps.SET_PASSWORD_LINK))
@ -119,7 +124,8 @@ export const PasswordForm: React.FC<Props> = (props) => {
title: "Error!", title: "Error!",
message: err?.error ?? "Something went wrong. Please try again.", message: err?.error ?? "Something went wrong. Please try again.",
}) })
); )
.finally(() => setIsSendingResetPasswordLink(false));
}; };
return ( return (
@ -182,17 +188,28 @@ export const PasswordForm: React.FC<Props> = (props) => {
/> />
)} )}
/> />
<button <div className="w-full text-right">
type="button" <button
onClick={handleForgotPassword} type="button"
className="text-xs font-medium text-right w-full text-custom-primary-100" onClick={handleForgotPassword}
> className={`text-xs font-medium ${
Forgot your password? isSendingResetPasswordLink ? "text-onboarding-text-300" : "text-custom-primary-100"
</button> }`}
disabled={isSendingResetPasswordLink}
>
{isSendingResetPasswordLink ? "Sending link..." : "Forgot your password?"}
</button>
</div>
</div> </div>
<Button type="submit" variant="primary" className="w-full" size="xl" disabled={!isValid} loading={isSubmitting}> <Button type="submit" variant="primary" className="w-full" size="xl" disabled={!isValid} loading={isSubmitting}>
{isSubmitting ? "Signing in..." : "Go to workspace"} {isSubmitting ? "Signing in..." : "Go to workspace"}
</Button> </Button>
<p className="text-xs text-onboarding-text-200">
When you click the button 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> </form>
</> </>
); );