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

admin/app/setup/components/sign-up-form.tsx

@@ -39,6 +39,7 @@ type TFormData = {
   email: string;
   company_name: string;
   password: string;
+  confirm_password?: string;
   is_telemetry_enabled: boolean;
 };
 
@@ -66,6 +67,7 @@ export const InstanceSignUpForm: FC = (props) => {
   const [showPassword, setShowPassword] = useState(false);
   const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
   const [formData, setFormData] = useState<TFormData>(defaultFromData);
+  const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
 
   const handleFormChange = (key: keyof TFormData, value: string | boolean) =>
     setFormData((prev) => ({ ...prev, [key]: value }));
@@ -107,7 +109,11 @@ export const InstanceSignUpForm: FC = (props) => {
 
   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
         : true,
     [formData]
@@ -144,6 +150,7 @@ export const InstanceSignUpForm: FC = (props) => {
                 placeholder="Wilber"
                 value={formData.first_name}
                 onChange={(e) => handleFormChange("first_name", e.target.value)}
+                autoFocus
               />
             </div>
             <div className="w-full space-y-1">
@@ -214,6 +221,8 @@ export const InstanceSignUpForm: FC = (props) => {
                 value={formData.password}
                 onChange={(e) => handleFormChange("password", e.target.value)}
                 hasError={errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD ? true : false}
+                onFocus={() => setIsPasswordInputFocused(true)}
+                onBlur={() => setIsPasswordInputFocused(false)}
               />
               {showPassword ? (
                 <button
@@ -236,7 +245,37 @@ export const InstanceSignUpForm: FC = (props) => {
             {errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD && errorData.message && (
               <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 className="relative flex items-center pt-2 gap-2">

admin/layouts/default-layout.tsx

@@ -13,16 +13,14 @@ export const DefaultLayout: FC<TDefaultLayout> = (props) => {
   const { children } = props;
 
   return (
-    <div className="relative h-screen max-h-max w-full overflow-hidden overflow-y-auto flex flex-col">
-      <div className="flex-shrink-0 h-[120px]">
-        <div className="relative h-full container mx-auto px-5 lg:px-0 flex items-center justify-between gap-5 z-50">
+    <div className="h-screen w-full overflow-hidden overflow-y-auto flex flex-col">
+      <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="flex items-center gap-x-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>
         </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>
   );
 };

web/components/onboarding/profile-setup.tsx

@@ -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>}
                   </div>
                 )}
-                {!isPasswordAlreadySetup && password && getPasswordStrength(password) >= 3 && (
+                {!isPasswordAlreadySetup && (
                   <div className="space-y-1">
                     <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password">
                       Confirm password

web/pages/accounts/reset-password.tsx

@@ -171,7 +171,6 @@ const ResetPasswordPage: NextPageWithLayout = () => {
                   </div>
                   {isPasswordInputFocused && <PasswordStrengthMeter password={resetFormData.password} />}
                 </div>
-                {getPasswordStrength(resetFormData.password) >= 3 && (
                 <div className="space-y-1">
                   <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password">
                     Confirm password
@@ -201,7 +200,6 @@ const ResetPasswordPage: NextPageWithLayout = () => {
                     <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
                 </Button>

web/pages/accounts/set-password.tsx

@@ -183,7 +183,6 @@ const SetPasswordPage: NextPageWithLayout = observer(() => {
                   </div>
                   {isPasswordInputFocused && <PasswordStrengthMeter password={passwordFormData.password} />}
                 </div>
-                {getPasswordStrength(passwordFormData.password) >= 3 && (
                 <div className="space-y-1">
                   <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password">
                     Confirm password
@@ -214,7 +213,6 @@ const SetPasswordPage: NextPageWithLayout = observer(() => {
                       <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
                 </Button>