From f77761b4f9afb64e6e8be134b1ff610f28f24da7 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Mon, 20 May 2024 19:03:23 +0530
Subject: [PATCH] [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      |  6 +++++-
 admin/components/login/sign-in-form.tsx       |  2 +-
 .../account/auth-forms/password.tsx           |  6 +++++-
 .../issues/peek-overview/side-peek-view.tsx   | 20 ++++++++++++-------
 .../account/auth-forms/password.tsx           |  6 +++++-
 .../account/password-strength-meter.tsx       |  2 +-
 web/pages/accounts/reset-password.tsx         |  8 +++++---
 web/pages/accounts/set-password.tsx           |  8 +++++---
 web/pages/profile/change-password.tsx         |  4 +++-
 9 files changed, 43 insertions(+), 19 deletions(-)

diff --git a/admin/components/instance/setup-form.tsx b/admin/components/instance/setup-form.tsx
index fb0811f2d..56d536c74 100644
--- a/admin/components/instance/setup-form.tsx
+++ b/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">
diff --git a/admin/components/login/sign-in-form.tsx b/admin/components/login/sign-in-form.tsx
index b68e78197..45d448d12 100644
--- a/admin/components/login/sign-in-form.tsx
+++ b/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">
diff --git a/space/components/account/auth-forms/password.tsx b/space/components/account/auth-forms/password.tsx
index 76a355827..361bd4fc3 100644
--- a/space/components/account/auth-forms/password.tsx
+++ b/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>
       )}
 
diff --git a/space/components/issues/peek-overview/side-peek-view.tsx b/space/components/issues/peek-overview/side-peek-view.tsx
index baa2b4ee5..a0b544bdd 100644
--- a/space/components/issues/peek-overview/side-peek-view.tsx
+++ b/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,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">
diff --git a/web/components/account/auth-forms/password.tsx b/web/components/account/auth-forms/password.tsx
index 999a49ea2..f84c2913e 100644
--- a/web/components/account/auth-forms/password.tsx
+++ b/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>
       )}
 
diff --git a/web/components/account/password-strength-meter.tsx b/web/components/account/password-strength-meter.tsx
index ebfdad7bb..7383b1e11 100644
--- a/web/components/account/password-strength-meter.tsx
+++ b/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";
diff --git a/web/pages/accounts/reset-password.tsx b/web/pages/accounts/reset-password.tsx
index 6e1af074a..a7e73ae76 100644
--- a/web/pages/accounts/reset-password.tsx
+++ b/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 && (
-                    <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
diff --git a/web/pages/accounts/set-password.tsx b/web/pages/accounts/set-password.tsx
index e170b24d0..d303cb8ca 100644
--- a/web/pages/accounts/set-password.tsx
+++ b/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 && (
-                    <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
diff --git a/web/pages/profile/change-password.tsx b/web/pages/profile/change-password.tsx
index 0d1575de8..2ddc02090 100644
--- a/web/pages/profile/change-password.tsx
+++ b/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>