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

[WEB-1385] chore: auth screen and space app improvement (#4529)

Browse Source 
* chore: instance sign in page alginment

* chore: strength indicator color updated

* chore: confirm password input improvement

* chore: space issue sidebar comment section validation added
This commit is contained in:
Anmol Singh Bhatia 2024-05-20 19:03:23 +05:30 committed by GitHub
parent c58e241159
commit f77761b4f9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 43 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
admin/components/instance/setup-form.tsx
View File

@ -128,6 +128,10 @@ export const InstanceSetupForm: FC = (props) => {
[formData.confirm_password, formData.email, formData.first_name, formData.password, isSubmitting]
);
const password = formData?.password ?? "";
const confirmPassword = formData?.confirm_password ?? "";
const renderPasswordMatchError = !isRetryPasswordInputFocused || confirmPassword.length >= password.length;
return (
<div className="max-w-lg lg:max-w-md w-full">
<div className="relative flex flex-col space-y-6">
@ -308,7 +312,7 @@ export const InstanceSetupForm: FC = (props) => {
</div>
{!!formData.confirm_password &&
formData.password !== formData.confirm_password &&
!isRetryPasswordInputFocused && <span className="text-sm text-red-500">Passwords don{"'"}t match</span>}
renderPasswordMatchError && <span className="text-sm text-red-500">Passwords don{"'"}t match</span>}
</div>
<div className="relative flex items-center pt-2 gap-2">

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

@ -94,7 +94,7 @@ export const InstanceSignInForm: FC = (props) => {
);
return (
<div className="relative w-full h-full overflow-hidden container mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 py-10 flex flex-col justify-center items-center">
<div className="flex-grow container mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 py-10 lg:pt-28 transition-all">
<div className="relative flex flex-col space-y-6">
<div className="text-center space-y-1">
<h3 className="flex gap-4 justify-center text-3xl font-bold text-onboarding-text-100">

6
space/components/account/auth-forms/password.tsx
View File

@ -84,6 +84,10 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
[isSubmitting, mode, passwordFormData.confirm_password, passwordFormData.password]
);
const password = passwordFormData.password ?? "";
const confirmPassword = passwordFormData.confirm_password ?? "";
const renderPasswordMatchError = !isRetryPasswordInputFocused || confirmPassword.length >= password.length;
return (
<form
className="mt-5 space-y-4"
@ -181,7 +185,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
</div>
{!!passwordFormData.confirm_password &&
passwordFormData.password !== passwordFormData.confirm_password &&
!isRetryPasswordInputFocused && <span className="text-sm text-red-500">Passwords don{"'"}t match</span>}
renderPasswordMatchError && <span className="text-sm text-red-500">Passwords don{"'"}t match</span>}
</div>
)}

20
space/components/issues/peek-overview/side-peek-view.tsx
View File

@ -7,6 +7,8 @@ import {
PeekOverviewIssueDetails,
PeekOverviewIssueProperties,
} from "@/components/issues/peek-overview";
// hooks
import { useProject } from "@/hooks/store";
// types
import { IIssue } from "@/types/issue";
@ -20,6 +22,8 @@ type Props = {
export const SidePeekView: React.FC<Props> = observer((props) => {
const { handleClose, issueDetails, workspaceSlug, projectId } = props;
const { settings } = useProject();
return (
<div className="flex h-full w-full flex-col overflow-hidden">
<div className="w-full p-5">
@ -38,13 +42,15 @@ export const SidePeekView: React.FC<Props> = observer((props) => {
{/* divider */}
<div className="my-5 h-[1] w-full border-t border-custom-border-200" />
{/* issue activity/comments */}
<div className="w-full pb-5">
<PeekOverviewIssueActivity
issueDetails={issueDetails}
workspaceSlug={workspaceSlug}
projectId={projectId}
/>
</div>
{settings?.comments && (
<div className="w-full pb-5">
<PeekOverviewIssueActivity
issueDetails={issueDetails}
workspaceSlug={workspaceSlug}
projectId={projectId}
/>
</div>
)}
</div>
) : (
<Loader className="px-6">

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

@ -105,6 +105,10 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
[isSubmitting, mode, passwordFormData.confirm_password, passwordFormData.password]
);
const password = passwordFormData?.password ?? "";
const confirmPassword = passwordFormData?.confirm_password ?? "";
const renderPasswordMatchError = !isRetryPasswordInputFocused || confirmPassword.length >= password.length;
return (
<form
className="mt-5 space-y-4"
@ -201,7 +205,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
</div>
{!!passwordFormData.confirm_password &&
passwordFormData.password !== passwordFormData.confirm_password &&
!isRetryPasswordInputFocused && <span className="text-sm text-red-500">Passwords don{"'"}t match</span>}
renderPasswordMatchError && <span className="text-sm text-red-500">Passwords don{"'"}t match</span>}
</div>
)}

2
web/components/account/password-strength-meter.tsx
View File

@ -26,7 +26,7 @@ export const PasswordStrengthMeter: React.FC<Props> = (props: Props) => {
} else if (strength < 3) {
bars = [`bg-[#DC3E42]`, `bg-[#F0F0F3]`, `bg-[#F0F0F3]`];
text = "Password is weak";
textColor = `text-[#F0F0F3]`;
textColor = `text-[#DC3E42]`;
} else {
bars = [`bg-[#3E9B4F]`, `bg-[#3E9B4F]`, `bg-[#3E9B4F]`];
text = "Password is strong";

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

@ -97,6 +97,10 @@ const ResetPasswordPage: NextPageWithLayout = () => {
}
}, [error_code]);
const password = resetFormData?.password ?? "";
const confirmPassword = resetFormData?.confirm_password ?? "";
const renderPasswordMatchError = !isRetryPasswordInputFocused || confirmPassword.length >= password.length;
return (
<div className="relative w-screen h-screen overflow-hidden">
<PageHead title="Reset Password" />
@ -209,9 +213,7 @@ const ResetPasswordPage: NextPageWithLayout = () => {
</div>
{!!resetFormData.confirm_password &&
resetFormData.password !== resetFormData.confirm_password &&
!isRetryPasswordInputFocused && (
<span className="text-sm text-red-500">Passwords don{"'"}t match</span>
)}
renderPasswordMatchError && <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}>
Set password

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

@ -99,6 +99,10 @@ const SetPasswordPage: NextPageWithLayout = observer(() => {
}
};
const password = passwordFormData?.password ?? "";
const confirmPassword = passwordFormData?.confirm_password ?? "";
const renderPasswordMatchError = !isRetryPasswordInputFocused || confirmPassword.length >= password.length;
return (
<div className="relative w-screen h-screen overflow-hidden">
<PageHead title="Reset Password" />
@ -203,9 +207,7 @@ const SetPasswordPage: NextPageWithLayout = observer(() => {
</div>
{!!passwordFormData.confirm_password &&
passwordFormData.password !== passwordFormData.confirm_password &&
!isRetryPasswordInputFocused && (
<span className="text-sm text-red-500">Passwords don{"'"}t match</span>
)}
renderPasswordMatchError && <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}>
Continue

4
web/pages/profile/change-password.tsx
View File

@ -129,6 +129,8 @@ const ChangePasswordPage: NextPageWithLayout = observer(() => {
</div>
);
const renderPasswordMatchError = !isRetryPasswordInputFocused || confirmPassword.length >= password.length;
return (
<>
<PageHead title="Profile - Change Password" />
@ -252,7 +254,7 @@ const ChangePasswordPage: NextPageWithLayout = observer(() => {
/>
)}
</div>
{!!confirmPassword && password !== confirmPassword && !isRetryPasswordInputFocused && (
{!!confirmPassword && password !== confirmPassword && renderPasswordMatchError && (
<span className="text-sm text-red-500">Passwords don{"'"}t match</span>
)}
</div>