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

Merge branch 'chore-admin-file-structure' of gurusainath:makeplane/plane into chore-admin-file-structure

Browse Source
This commit is contained in:
gurusainath 2024-05-01 17:50:50 +05:30
commit eab53294bc
5 changed files with 102 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -39,6 +39,7 @@ type TFormData = {
email: string; email: string;
company_name: string; company_name: string;
password: string; password: string;
confirm_password?: string;
is_telemetry_enabled: boolean; is_telemetry_enabled: boolean;
}; };
@ -66,6 +67,7 @@ export const InstanceSignUpForm: FC = (props) => {
const [showPassword, setShowPassword] = useState(false); const [showPassword, setShowPassword] = useState(false);
const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined); const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
const [formData, setFormData] = useState<TFormData>(defaultFromData); const [formData, setFormData] = useState<TFormData>(defaultFromData);
const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
const handleFormChange = (key: keyof TFormData, value: string | boolean) => const handleFormChange = (key: keyof TFormData, value: string | boolean) =>
setFormData((prev) => ({ ...prev, [key]: value })); setFormData((prev) => ({ ...prev, [key]: value }));
@ -107,7 +109,11 @@ export const InstanceSignUpForm: FC = (props) => {
const isButtonDisabled = useMemo( const isButtonDisabled = useMemo(
() => () =>
formData.first_name && formData.email && formData.password && getPasswordStrength(formData.password) >= 3 formData.first_name &&
formData.email &&
formData.password &&
getPasswordStrength(formData.password) >= 3 &&
formData.password === formData.confirm_password
? false ? false
: true, : true,
[formData] [formData]
@ -144,6 +150,7 @@ export const InstanceSignUpForm: FC = (props) => {
placeholder="Wilber" placeholder="Wilber"
value={formData.first_name} value={formData.first_name}
onChange={(e) => handleFormChange("first_name", e.target.value)} onChange={(e) => handleFormChange("first_name", e.target.value)}
autoFocus
/> />
</div> </div>
<div className="w-full space-y-1"> <div className="w-full space-y-1">
@ -214,6 +221,8 @@ export const InstanceSignUpForm: FC = (props) => {
value={formData.password} value={formData.password}
onChange={(e) => handleFormChange("password", e.target.value)} onChange={(e) => handleFormChange("password", e.target.value)}
hasError={errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD ? true : false} hasError={errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD ? true : false}
onFocus={() => setIsPasswordInputFocused(true)}
onBlur={() => setIsPasswordInputFocused(false)}
/> />
{showPassword ? ( {showPassword ? (
<button <button
@ -236,7 +245,37 @@ export const InstanceSignUpForm: FC = (props) => {
{errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD && errorData.message && ( {errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD && errorData.message && (
<p className="px-1 text-xs text-red-500">{errorData.message}</p> <p className="px-1 text-xs text-red-500">{errorData.message}</p>
)} )}
<PasswordStrengthMeter password={formData.password} /> {isPasswordInputFocused && <PasswordStrengthMeter password={formData.password} />}
</div>
<div className="w-full space-y-1">
<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">
<Input
type={showPassword ? "text" : "password"}
name="confirm_password"
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"
/>
{showPassword ? (
<EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
onClick={() => setShowPassword(false)}
/>
) : (
<Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
onClick={() => setShowPassword(true)}
/>
)}
</div>
{!!formData.confirm_password && formData.password !== formData.confirm_password && (
<span className="text-sm text-red-500">Passwords don{"'"}t match</span>
)}
</div> </div>
<div className="relative flex items-center pt-2 gap-2"> <div className="relative flex items-center pt-2 gap-2">

14
admin/layouts/default-layout.tsx
View File

@ -13,16 +13,14 @@ export const DefaultLayout: FC<TDefaultLayout> = (props) => {
const { children } = props; const { children } = props;
return ( return (
<div className="relative h-screen max-h-max w-full overflow-hidden overflow-y-auto flex flex-col"> <div className="h-screen w-full overflow-hidden overflow-y-auto flex flex-col">
<div className="flex-shrink-0 h-[120px]"> <div className="container h-[100px] flex-shrink-0 mx-auto px-5 lg:px-0 flex items-center justify-between gap-5 z-50">
<div className="relative h-full container mx-auto px-5 lg:px-0 flex items-center justify-between gap-5 z-50"> <div className="flex items-center gap-x-2">
<div className="flex items-center gap-x-2"> <Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" className="mr-2" />
<Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" className="mr-2" /> <span className="text-2xl font-semibold sm:text-3xl">Plane</span>
<span className="text-2xl font-semibold sm:text-3xl">Plane</span>
</div>
</div> </div>
</div> </div>
<div className="w-full flex-grow">{children}</div> <div className="w-full px-5 lg:px-0 mb-[100px] flex-grow">{children}</div>
</div> </div>
); );
}; };

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

@ -437,7 +437,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
{errors.password && <span className="text-sm text-red-500">{errors.password.message}</span>} {errors.password && <span className="text-sm text-red-500">{errors.password.message}</span>}
</div> </div>
)} )}
{!isPasswordAlreadySetup && password && getPasswordStrength(password) >= 3 && ( {!isPasswordAlreadySetup && (
<div className="space-y-1"> <div className="space-y-1">
<label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password"> <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password">
Confirm password Confirm password

54
web/pages/accounts/reset-password.tsx
View File

@ -171,37 +171,35 @@ const ResetPasswordPage: NextPageWithLayout = () => {
</div> </div>
{isPasswordInputFocused && <PasswordStrengthMeter password={resetFormData.password} />} {isPasswordInputFocused && <PasswordStrengthMeter password={resetFormData.password} />}
</div> </div>
{getPasswordStrength(resetFormData.password) >= 3 && ( <div className="space-y-1">
<div className="space-y-1"> <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password">
<label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password"> Confirm password
Confirm password </label>
</label> <div className="relative flex items-center rounded-md bg-onboarding-background-200">
<div className="relative flex items-center rounded-md bg-onboarding-background-200"> <Input
<Input type={showPassword ? "text" : "password"}
type={showPassword ? "text" : "password"} name="confirm_password"
name="confirm_password" value={resetFormData.confirm_password}
value={resetFormData.confirm_password} onChange={(e) => handleFormChange("confirm_password", e.target.value)}
onChange={(e) => handleFormChange("confirm_password", e.target.value)} placeholder="Confirm password"
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="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400" />
{showPassword ? (
<EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
onClick={() => setShowPassword(false)}
/>
) : (
<Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
onClick={() => setShowPassword(true)}
/> />
{showPassword ? (
<EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
onClick={() => setShowPassword(false)}
/>
) : (
<Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
onClick={() => setShowPassword(true)}
/>
)}
</div>
{!!resetFormData.confirm_password && resetFormData.password !== resetFormData.confirm_password && (
<span className="text-sm text-red-500">Passwords don{"'"}t match</span>
)} )}
</div> </div>
)} {!!resetFormData.confirm_password && resetFormData.password !== resetFormData.confirm_password && (
<span className="text-sm text-red-500">Passwords don{"'"}t match</span>
)}
</div>
<Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}> <Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}>
Set password Set password
</Button> </Button>

58
web/pages/accounts/set-password.tsx
View File

@ -183,38 +183,36 @@ const SetPasswordPage: NextPageWithLayout = observer(() => {
</div> </div>
{isPasswordInputFocused && <PasswordStrengthMeter password={passwordFormData.password} />} {isPasswordInputFocused && <PasswordStrengthMeter password={passwordFormData.password} />}
</div> </div>
{getPasswordStrength(passwordFormData.password) >= 3 && ( <div className="space-y-1">
<div className="space-y-1"> <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password">
<label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password"> Confirm password
Confirm password </label>
</label> <div className="relative flex items-center rounded-md bg-onboarding-background-200">
<div className="relative flex items-center rounded-md bg-onboarding-background-200"> <Input
<Input type={showPassword ? "text" : "password"}
type={showPassword ? "text" : "password"} name="confirm_password"
name="confirm_password" value={passwordFormData.confirm_password}
value={passwordFormData.confirm_password} onChange={(e) => handleFormChange("confirm_password", e.target.value)}
onChange={(e) => handleFormChange("confirm_password", e.target.value)} placeholder="Confirm password"
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="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400" />
{showPassword ? (
<EyeOff
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
onClick={() => setShowPassword(false)}
/> />
{showPassword ? ( ) : (
<EyeOff <Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer" className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
onClick={() => setShowPassword(false)} onClick={() => setShowPassword(true)}
/> />
) : ( )}
<Eye
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
onClick={() => setShowPassword(true)}
/>
)}
</div>
{!!passwordFormData.confirm_password &&
passwordFormData.password !== passwordFormData.confirm_password && (
<span className="text-sm text-red-500">Passwords don{"'"}t match</span>
)}
</div> </div>
)} {!!passwordFormData.confirm_password &&
passwordFormData.password !== passwordFormData.confirm_password && (
<span className="text-sm text-red-500">Passwords don{"'"}t match</span>
)}
</div>
<Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}> <Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}>
Continue Continue
</Button> </Button>