github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: add loading spinners for all auth and onboarding form buttons.

Browse Source
This commit is contained in:
Prateek Shourya 2024-05-02 02:19:18 +05:30
parent a1bffd69ba
commit f59c9f7b08
14 changed files with 121 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
admin/app/login/components/sign-in-form.tsx
View File

@ -5,7 +5,7 @@ import { useSearchParams } from "next/navigation";
// services
import { AuthService } from "@/services/auth.service";
// ui
import { Button, Input } from "@plane/ui";
import { Button, Input, Spinner } from "@plane/ui";
// components
import { Banner } from "components/common";
// icons
@ -52,6 +52,7 @@ export const InstanceSignInForm: FC = (props) => {
const [showPassword, setShowPassword] = useState(false);
const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
const [formData, setFormData] = useState<TFormData>(defaultFromData);
const [isSubmitting, setIsSubmitting] = useState(false);
const handleFormChange = (key: keyof TFormData, value: string | boolean) =>
setFormData((prev) => ({ ...prev, [key]: value }));
@ -85,7 +86,10 @@ export const InstanceSignInForm: FC = (props) => {
} else return { type: undefined, message: undefined };
}, [errorCode, errorMessage]);
const isButtonDisabled = useMemo(() => (formData.email && formData.password ? false : true), [formData]);
const isButtonDisabled = useMemo(
() => (!isSubmitting && formData.email && formData.password ? false : true),
[formData.email, formData.password, isSubmitting]
);
return (
<div className="relative w-full h-full overflow-hidden container mx-auto px-5 md:px-0 flex justify-center items-center">
@ -97,7 +101,13 @@ export const InstanceSignInForm: FC = (props) => {
{errorData.type && errorData?.message && <Banner type="error" message={errorData?.message} />}
<form className="space-y-4" method="POST" action={`${API_BASE_URL}/api/instances/admins/sign-in/`}>
<form
className="space-y-4"
method="POST"
action={`${API_BASE_URL}/api/instances/admins/sign-in/`}
onSubmit={() => setIsSubmitting(true)}
onError={() => setIsSubmitting(false)}
>
<input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
<div className="w-full space-y-1">
@ -153,7 +163,7 @@ export const InstanceSignInForm: FC = (props) => {
</div>
<div className="py-2">
<Button type="submit" size="lg" className="w-full" disabled={isButtonDisabled}>
Sign in
{isSubmitting ? <Spinner height="20px" width="20px" /> : "Sign in"}
</Button>
</div>
</form>

40
admin/app/setup/components/sign-up-form.tsx
View File

@ -5,7 +5,7 @@ import { useSearchParams } from "next/navigation";
// services
import { AuthService } from "@/services/auth.service";
// ui
import { Button, Checkbox, Input } from "@plane/ui";
import { Button, Checkbox, Input, Spinner } from "@plane/ui";
// components
import { Banner, PasswordStrengthMeter } from "components/common";
// icons
@ -68,6 +68,7 @@ export const InstanceSignUpForm: FC = (props) => {
const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
const [formData, setFormData] = useState<TFormData>(defaultFromData);
const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
const [isSubmitting, setIsSubmitting] = useState(false);
const handleFormChange = (key: keyof TFormData, value: string | boolean) =>
setFormData((prev) => ({ ...prev, [key]: value }));
@ -109,6 +110,7 @@ export const InstanceSignUpForm: FC = (props) => {
const isButtonDisabled = useMemo(
() =>
!isSubmitting &&
formData.first_name &&
formData.email &&
formData.password &&
@ -116,7 +118,7 @@ export const InstanceSignUpForm: FC = (props) => {
formData.password === formData.confirm_password
? false
: true,
[formData]
[formData.confirm_password, formData.email, formData.first_name, formData.password, isSubmitting]
);
return (
@ -133,7 +135,13 @@ export const InstanceSignUpForm: FC = (props) => {
<Banner type="error" message={errorData?.message} />
)}
<form className="space-y-4" method="POST" action={`${API_BASE_URL}/api/instances/admins/sign-up/`}>
<form
className="space-y-4"
method="POST"
action={`${API_BASE_URL}/api/instances/admins/sign-up/`}
onSubmit={() => setIsSubmitting(true)}
onError={() => setIsSubmitting(false)}
>
<input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
<div className="flex items-center gap-4">
@ -252,25 +260,33 @@ export const InstanceSignUpForm: FC = (props) => {
<label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password">
Confirm password
</label>
<div className="relative flex items-center rounded-md bg-onboarding-background-200">
<div className="relative">
<Input
type={showPassword ? "text" : "password"}
id="confirm_password"
name="confirm_password"
inputSize="md"
value={formData.confirm_password}
onChange={(e) => handleFormChange("confirm_password", e.target.value)}
placeholder="Confirm password"
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
className={cn("w-full pr-10")}
/>
{showPassword ? (
<EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
<button
type="button"
className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
onClick={() => setShowPassword(false)}
/>
>
<EyeOff className="h-4 w-4" />
</button>
) : (
<Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
<button
type="button"
className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
onClick={() => setShowPassword(true)}
/>
>
<Eye className="h-4 w-4" />
</button>
)}
</div>
{!!formData.confirm_password && formData.password !== formData.confirm_password && (
@ -298,7 +314,7 @@ export const InstanceSignUpForm: FC = (props) => {
<div className="py-2">
<Button type="submit" size="lg" className="w-full" disabled={isButtonDisabled}>
Continue
{isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
</Button>
</div>
</form>

10
space/components/accounts/auth-forms/email.tsx
View File

@ -1,13 +1,13 @@
import React from "react";
import { Controller, useForm } from "react-hook-form";
// types
import { IEmailCheckData } from "types/auth";
// icons
import { XCircle, CircleAlert } from "lucide-react";
// ui
import { Button, Input } from "@plane/ui";
import { Button, Input, Spinner } from "@plane/ui";
// helpers
import { checkEmailValidity } from "@/helpers/string.helper";
// types
import { IEmailCheckData } from "types/auth";
type Props = {
onSubmit: (data: IEmailCheckData) => Promise<void>;
@ -84,8 +84,8 @@ export const EmailForm: React.FC<Props> = (props) => {
)}
/>
</div>
<Button type="submit" variant="primary" className="w-full" size="lg" disabled={!isValid} loading={isSubmitting}>
Continue
<Button type="submit" variant="primary" className="w-full" size="lg" disabled={!isValid || isSubmitting}>
{isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
</Button>
</form>
);

14
space/components/accounts/auth-forms/password.tsx
View File

@ -4,7 +4,7 @@ import Link from "next/link";
import { useRouter } from "next/router";
import { Eye, EyeOff, XCircle } from "lucide-react";
// ui
import { Button, Input } from "@plane/ui";
import { Button, Input, Spinner } from "@plane/ui";
import { EAuthModes, EAuthSteps, ForgotPasswordPopover, PasswordStrengthMeter } from "@/components/accounts";
// helpers
import { API_BASE_URL } from "@/helpers/common.helper";
@ -40,6 +40,7 @@ export const PasswordForm: React.FC<Props> = (props) => {
const [showPassword, setShowPassword] = useState(false);
const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
const [isSubmitting, setIsSubmitting] = useState(false);
// hooks
const {
instanceStore: { instance },
@ -82,6 +83,7 @@ export const PasswordForm: React.FC<Props> = (props) => {
const isButtonDisabled = useMemo(
() =>
!isSubmitting &&
!!passwordFormData.password &&
(mode === EAuthModes.SIGN_UP
? getPasswordStrength(passwordFormData.password) >= 3 &&
@ -89,7 +91,7 @@ export const PasswordForm: React.FC<Props> = (props) => {
: true)
? false
: true,
[mode, passwordFormData]
[isSubmitting, mode, passwordFormData.confirm_password, passwordFormData.password]
);
return (
@ -97,6 +99,8 @@ export const PasswordForm: React.FC<Props> = (props) => {
className="mx-auto mt-5 space-y-4 w-5/6 sm:w-96"
method="POST"
action={`${API_BASE_URL}/auth/spaces/${mode === EAuthModes.SIGN_IN ? "sign-in" : "sign-up"}/`}
onSubmit={() => setIsSubmitting(true)}
onError={() => setIsSubmitting(false)}
>
<input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
<input type="hidden" name="next_path" value={next_path} />
@ -153,7 +157,7 @@ export const PasswordForm: React.FC<Props> = (props) => {
</div>
{passwordSupport}
</div>
{mode === EAuthModes.SIGN_UP && getPasswordStrength(passwordFormData.password) >= 3 && (
{mode === EAuthModes.SIGN_UP && (
<div className="space-y-1">
<label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password">
Confirm password
@ -188,7 +192,7 @@ export const PasswordForm: React.FC<Props> = (props) => {
{mode === EAuthModes.SIGN_IN ? (
<>
<Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}>
Go to board
{isSubmitting ? <Spinner height="20px" width="20px" /> : "Go to board"}
</Button>
{instance && isSmtpConfigured && (
<Button
@ -204,7 +208,7 @@ export const PasswordForm: React.FC<Props> = (props) => {
</>
) : (
<Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}>
Create account
{isSubmitting ? <Spinner height="20px" width="20px" /> : "Create account"}
</Button>
)}
</div>

23
space/components/accounts/auth-forms/unique-code.tsx
View File

@ -8,7 +8,7 @@ import { IEmailCheckData } from "types/auth";
// icons
import { CircleCheck, XCircle } from "lucide-react";
// ui
import { Button, Input } from "@plane/ui";
import { Button, Input, Spinner } from "@plane/ui";
// helpers
import { API_BASE_URL } from "@/helpers/common.helper";
// services
@ -41,6 +41,7 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
const [uniqueCodeFormData, setUniqueCodeFormData] = useState<TUniqueCodeFormValues>({ ...defaultValues, email });
const [isRequestingNewCode, setIsRequestingNewCode] = useState(false);
const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
const [isSubmitting, setIsSubmitting] = useState(false);
// router
const router = useRouter();
const { next_path } = router.query;
@ -99,12 +100,15 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
}, []);
const isRequestNewCodeDisabled = isRequestingNewCode || resendTimerCode > 0;
const isButtonDisabled = isRequestingNewCode || !uniqueCodeFormData.code || isSubmitting;
return (
<form
className="mx-auto mt-5 space-y-4 w-5/6 sm:w-96"
method="POST"
action={`${API_BASE_URL}/auth/spaces/${mode === EAuthModes.SIGN_IN ? "magic-sign-in" : "magic-sign-up"}/`}
onSubmit={() => setIsSubmitting(true)}
onError={() => setIsSubmitting(false)}
>
<input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
<input type="hidden" name="next_path" value={next_path} />
@ -170,15 +174,14 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
</button>
</div>
</div>
<Button
type="submit"
variant="primary"
className="w-full"
size="lg"
loading={isRequestingNewCode}
disabled={isRequestingNewCode || !uniqueCodeFormData.code}
>
{isRequestingNewCode ? "Sending code" : submitButtonText}
<Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}>
{isRequestingNewCode ? (
"Sending code"
) : isSubmitting ? (
<Spinner height="20px" width="20px" />
) : (
submitButtonText
)}
</Button>
</form>
);

15
space/components/accounts/onboarding-form.tsx
View File

@ -4,7 +4,7 @@ import { Controller, useForm } from "react-hook-form";
// types
import { IUser } from "@plane/types";
// ui
import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
import { Button, Input, Spinner, TOAST_TYPE, setToast } from "@plane/ui";
// components
import { UserImageUploadModal } from "@/components/accounts";
// hooks
@ -93,7 +93,7 @@ export const OnBoardingForm: React.FC<Props> = observer((props) => {
});
};
const isButtonDisabled = useMemo(() => (isValid ? false : true), [isValid]);
const isButtonDisabled = useMemo(() => (isValid && !isSubmitting ? false : true), [isSubmitting, isValid]);
return (
<form onSubmit={handleSubmit(onSubmit)} className="w-full mx-auto mt-2 space-y-4 sm:w-96">
@ -202,15 +202,8 @@ export const OnBoardingForm: React.FC<Props> = observer((props) => {
{errors.last_name && <span className="text-sm text-red-500">{errors.last_name.message}</span>}
</div>
</div>
<Button
variant="primary"
type="submit"
size="lg"
className="w-full"
disabled={isButtonDisabled}
loading={isSubmitting}
>
Continue
<Button variant="primary" type="submit" size="lg" className="w-full" disabled={isButtonDisabled}>
{isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
</Button>
</form>
);

9
web/components/account/auth-forms/email.tsx
View File

@ -5,7 +5,7 @@ import { CircleAlert, XCircle } from "lucide-react";
// types
import { IEmailCheckData } from "@plane/types";
// ui
import { Button, Input } from "@plane/ui";
import { Button, Input, Spinner } from "@plane/ui";
// helpers
import { checkEmailValidity } from "@/helpers/string.helper";
@ -35,6 +35,8 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
setIsSubmitting(false);
};
const isButtonDisabled = email.length === 0 || Boolean(emailError?.email) || isSubmitting;
return (
<form onSubmit={handleFormSubmit} className="mx-auto mt-8 space-y-4 w-5/6 sm:w-96">
<div className="space-y-1">
@ -72,10 +74,9 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
variant="primary"
className="w-full"
size="lg"
disabled={email.length === 0 || Boolean(emailError?.email)}
loading={isSubmitting}
disabled={isButtonDisabled}
>
Continue
{isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
</Button>
</form>
);

19
web/components/account/auth-forms/password.tsx
View File

@ -4,7 +4,7 @@ import Link from "next/link";
// icons
import { Eye, EyeOff, XCircle } from "lucide-react";
// ui
import { Button, Input } from "@plane/ui";
import { Button, Input, Spinner } from "@plane/ui";
// components
import { ForgotPasswordPopover, PasswordStrengthMeter } from "@/components/account";
// constants
@ -45,6 +45,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
const [showPassword, setShowPassword] = useState(false);
const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
const [isSubmitting, setIsSubmitting] = useState(false);
// hooks
const { instance } = useInstance();
const { captureEvent } = useEventTracker();
@ -84,6 +85,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
const isButtonDisabled = useMemo(
() =>
!isSubmitting &&
!!passwordFormData.password &&
(mode === EAuthModes.SIGN_UP
? getPasswordStrength(passwordFormData.password) >= 3 &&
@ -91,7 +93,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
: true)
? false
: true,
[mode, passwordFormData]
[isSubmitting, mode, passwordFormData.confirm_password, passwordFormData.password]
);
return (
@ -99,6 +101,8 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
className="mx-auto mt-5 space-y-4 w-5/6 sm:w-96"
method="POST"
action={`${API_BASE_URL}/auth/${mode === EAuthModes.SIGN_IN ? "sign-in" : "sign-up"}/`}
onSubmit={() => setIsSubmitting(true)}
onError={() => setIsSubmitting(false)}
>
<input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
<div className="space-y-1">
@ -189,7 +193,13 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
{mode === EAuthModes.SIGN_IN ? (
<>
<Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}>
{isSmtpConfigured ? "Continue" : "Go to workspace"}
{isSubmitting ? (
<Spinner height="20px" width="20px" />
) : isSmtpConfigured ? (
"Continue"
) : (
"Go to workspace"
)}
</Button>
{instance && isSmtpConfigured && (
<Button
@ -205,11 +215,10 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
</>
) : (
<Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}>
Create account
{isSubmitting ? <Spinner height="20px" width="20px" /> : "Create account"}
</Button>
)}
</div>
</form>
);
});

2
web/components/account/auth-forms/sign-up-root.tsx
View File

@ -63,7 +63,7 @@ export const SignUpAuthRoot: FC = observer(() => {
await authService
.signUpEmailCheck(data)
.then(() => {
if (isSmtpConfigured) setAuthStep(EAuthSteps.PASSWORD);
if (isSmtpConfigured) setAuthStep(EAuthSteps.UNIQUE_CODE);
else setAuthStep(EAuthSteps.PASSWORD);
})
.catch((error) => {

23
web/components/account/auth-forms/unique-code.tsx
View File

@ -1,7 +1,7 @@
import React, { useEffect, useState } from "react";
import { CircleCheck, XCircle } from "lucide-react";
import { IEmailCheckData } from "@plane/types";
import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
import { Button, Input, Spinner, TOAST_TYPE, setToast } from "@plane/ui";
// helpers
import { EAuthModes } from "@/helpers/authentication.helper";
import { API_BASE_URL } from "@/helpers/common.helper";
@ -36,6 +36,7 @@ export const AuthUniqueCodeForm: React.FC<Props> = (props) => {
const [uniqueCodeFormData, setUniqueCodeFormData] = useState<TUniqueCodeFormValues>({ ...defaultValues, email });
const [isRequestingNewCode, setIsRequestingNewCode] = useState(false);
const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
const [isSubmitting, setIsSubmitting] = useState(false);
// store hooks
// const { captureEvent } = useEventTracker();
// timer
@ -88,12 +89,15 @@ export const AuthUniqueCodeForm: React.FC<Props> = (props) => {
}, []);
const isRequestNewCodeDisabled = isRequestingNewCode || resendTimerCode > 0;
const isButtonDisabled = isRequestingNewCode || !uniqueCodeFormData.code || isSubmitting;
return (
<form
className="mx-auto mt-5 space-y-4 w-5/6 sm:w-96"
method="POST"
action={`${API_BASE_URL}/auth/${mode === EAuthModes.SIGN_IN ? "magic-sign-in" : "magic-sign-up"}/`}
onSubmit={() => setIsSubmitting(true)}
onError={() => setIsSubmitting(false)}
>
<input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
<div className="space-y-1">
@ -159,15 +163,14 @@ export const AuthUniqueCodeForm: React.FC<Props> = (props) => {
</button>
</div>
</div>
<Button
type="submit"
variant="primary"
className="w-full"
size="lg"
loading={isRequestingNewCode}
disabled={isRequestingNewCode || !uniqueCodeFormData.code}
>
{isRequestingNewCode ? "Sending code" : submitButtonText}
<Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}>
{isRequestingNewCode ? (
"Sending code"
) : isSubmitting ? (
<Spinner height="20px" width="20px" />
) : (
submitButtonText
)}
</Button>
</form>
);

8
web/components/onboarding/create-workspace.tsx
View File

@ -3,7 +3,7 @@ import { Controller, useForm } from "react-hook-form";
// types
import { IUser, IWorkspace, TOnboardingSteps } from "@plane/types";
// ui
import { Button, CustomSelect, Input, TOAST_TYPE, setToast } from "@plane/ui";
import { Button, CustomSelect, Input, Spinner, TOAST_TYPE, setToast } from "@plane/ui";
// constants
import { WORKSPACE_CREATED } from "@/constants/event-tracker";
import { ORGANIZATION_SIZE, RESTRICTED_URLS } from "@/constants/workspace";
@ -116,6 +116,8 @@ export const CreateWorkspace: React.FC<Props> = (props) => {
});
};
const isButtonDisabled = !isValid || invalidSlug || isSubmitting;
return (
<div className="space-y-4">
{!!invitedWorkspaces && (
@ -256,8 +258,8 @@ export const CreateWorkspace: React.FC<Props> = (props) => {
)}
</div>
</div>
<Button variant="primary" type="submit" size="lg" className="w-full" disabled={!isValid || invalidSlug}>
{isSubmitting ? "Creating..." : "Continue"}
<Button variant="primary" type="submit" size="lg" className="w-full" disabled={isButtonDisabled}>
{isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
</Button>
</form>
</div>

4
web/components/onboarding/invitations.tsx
View File

@ -3,7 +3,7 @@ import useSWR from "swr";;
// types
import { IWorkspaceMemberInvitation } from "@plane/types";
// ui
import { Button, Checkbox } from "@plane/ui";
import { Button, Checkbox, Spinner } from "@plane/ui";
// constants
import { MEMBER_ACCEPTED } from "@/constants/event-tracker";
import { USER_WORKSPACE_INVITATIONS } from "@/constants/fetch-keys";
@ -127,7 +127,7 @@ export const Invitations: React.FC<Props> = (props) => {
onClick={submitInvitations}
disabled={isJoiningWorkspaces || !invitationsRespond.length}
>
Continue to workspace
{isJoiningWorkspaces ? <Spinner height="20px" width="20px" /> : "Continue to workspace"}
</Button>
<div className="mx-auto mt-4 flex items-center sm:w-96">
<hr className="w-full border-onboarding-border-100" />

7
web/components/onboarding/invite-members.tsx
View File

@ -18,7 +18,7 @@ import { Listbox, Transition } from "@headlessui/react";
// types
import { IUser, IWorkspace } from "@plane/types";
// ui
import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
import { Button, Input, Spinner, TOAST_TYPE, setToast } from "@plane/ui";
// constants
import { MEMBER_INVITED } from "@/constants/event-tracker";
import { EUserWorkspaceRoles, ROLE, ROLE_DETAILS } from "@/constants/workspace";
@ -420,10 +420,9 @@ export const InviteMembers: React.FC<Props> = (props) => {
type="submit"
size="lg"
className="w-full"
disabled={isInvitationDisabled || !isValid}
loading={isSubmitting}
disabled={isInvitationDisabled || !isValid || isSubmitting}
>
Continue
{isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
</Button>
<Button variant="link-neutral" size="lg" className="w-full" onClick={nextStep}>
I’ll do it later

16
web/components/onboarding/profile-setup.tsx
View File

@ -7,7 +7,7 @@ import { Eye, EyeOff } from "lucide-react";
// types
import { IUser, TUserProfile, TOnboardingSteps } from "@plane/types";
// ui
import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
import { Button, Input, Spinner, TOAST_TYPE, setToast } from "@plane/ui";
// components
import { PasswordStrengthMeter } from "@/components/account";
import { UserImageUploadModal } from "@/components/core";
@ -248,6 +248,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
// Also handles the condition for optional password i.e if password field is optional it only checks for above validation if it's not empty.
const isButtonDisabled = useMemo(
() =>
!isSubmitting &&
isValid &&
(isPasswordAlreadySetup
? true
@ -258,7 +259,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
: true)
? false
: true,
[isValid, isPasswordAlreadySetup, isSignUpUsingMagicCode, password, confirmPassword]
[isSubmitting, isValid, isPasswordAlreadySetup, isSignUpUsingMagicCode, password, confirmPassword]
);
const isCurrentStepUserPersonalization = profileSetupStep === EProfileSetupSteps.USER_PERSONALIZATION;
@ -541,15 +542,8 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
</div>
</>
)}
<Button
variant="primary"
type="submit"
size="lg"
className="w-full"
disabled={isButtonDisabled}
loading={isSubmitting}
>
Continue
<Button variant="primary" type="submit" size="lg" className="w-full" disabled={isButtonDisabled}>
{isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
</Button>
</form>
</div>