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

* chore: instance sign in page alginment

* chore: strength indicator color updated

* chore: confirm password input improvement

* chore: space issue sidebar comment section validation added

admin/components/instance/setup-form.tsx

@@ -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">

admin/components/login/sign-in-form.tsx

@@ -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">

space/components/account/auth-forms/password.tsx

@@ -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>
       )}
 

space/components/issues/peek-overview/side-peek-view.tsx

@@ -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,6 +42,7 @@ 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 */}
+          {settings?.comments && (
             <div className="w-full pb-5">
               <PeekOverviewIssueActivity
                 issueDetails={issueDetails}
@@ -45,6 +50,7 @@ export const SidePeekView: React.FC<Props> = observer((props) => {
                 projectId={projectId}
               />
             </div>
+          )}
         </div>
       ) : (
         <Loader className="px-6">

web/components/account/auth-forms/password.tsx

@@ -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>
       )}
 

web/components/account/password-strength-meter.tsx

@@ -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";

web/pages/accounts/reset-password.tsx

@@ -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 && (
+                  renderPasswordMatchError && <span className="text-sm text-red-500">Passwords don{"'"}t match</span>}
-                    <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

web/pages/accounts/set-password.tsx

@@ -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 && (
+                  renderPasswordMatchError && <span className="text-sm text-red-500">Passwords don{"'"}t match</span>}
-                    <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

web/pages/profile/change-password.tsx

@@ -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>