customer_dashboard: set password max length to sign-in password input (#409)

* customer_dashboard: set password max length to sign-in password input

* customer_dashboard: fix silent password truncation on reset forms

* customer_dashboard: set password max length to sign-in password input

Author: Ryz0nd

apps/customer_dashboard/src/app/users/forgot_password/page.tsx

@@ -364,12 +364,18 @@ export default function ForgotPasswordPage() {
             placeholder="Enter new password"
             value={password}
             onChange={(e) => {
-              setPassword(e.target.value);
-              resetError();
+              const value = e.target.value;
+              setPassword(value);
+              if (value.length > PASSWORD_MAX_LENGTH) {
+                setError(
+                  `Password must be at most ${PASSWORD_MAX_LENGTH} characters`,
+                );
+              } else {
+                resetError();
+              }
             }}
             fullWidth
             requiredSymbol
-            maxLength={PASSWORD_MAX_LENGTH}
             helpText={
               error
                 ? undefined
@@ -392,12 +398,18 @@ export default function ForgotPasswordPage() {
             placeholder="Confirm password"
             value={confirmPassword}
             onChange={(e) => {
-              setConfirmPassword(e.target.value);
-              resetError();
+              const value = e.target.value;
+              setConfirmPassword(value);
+              if (value.length > PASSWORD_MAX_LENGTH) {
+                setError(
+                  `Password must be at most ${PASSWORD_MAX_LENGTH} characters`,
+                );
+              } else {
+                resetError();
+              }
             }}
             fullWidth
             requiredSymbol
-            maxLength={PASSWORD_MAX_LENGTH}
             SideComponent={
               <button
                 type="button"
@@ -440,7 +452,13 @@ export default function ForgotPasswordPage() {
             <Button
               type="submit"
               fullWidth
-              disabled={!password || !confirmPassword || isLoading}
+              disabled={
+                !password ||
+                !confirmPassword ||
+                isLoading ||
+                password.length > PASSWORD_MAX_LENGTH ||
+                confirmPassword.length > PASSWORD_MAX_LENGTH
+              }
             >
               {isLoading ? "Updating..." : "Update"}
             </Button>

apps/customer_dashboard/src/components/reset_password/reset_password.tsx

@@ -69,7 +69,6 @@ export const ResetPassword: FC<ResetPasswordProps> = ({ isAfterLogin }) => {
           placeholder="Enter new password"
           requiredSymbol
           type={showNewPassword ? "text" : "password"}
-          maxLength={PASSWORD_MAX_LENGTH}
           helpText={
             errors.newPassword
               ? ""
@@ -96,7 +95,6 @@ export const ResetPassword: FC<ResetPasswordProps> = ({ isAfterLogin }) => {
           placeholder="Confirm password"
           requiredSymbol
           type={showConfirmPassword ? "text" : "password"}
-          maxLength={PASSWORD_MAX_LENGTH}
           error={errors.confirmPassword?.message}
           fullWidth
           SideComponent={

apps/customer_dashboard/src/components/sign_in_form/sign_in_form.tsx

@@ -11,6 +11,7 @@ import type { FC } from "react";
 
 import styles from "./sign_in_form.module.scss";
 import { useSignInForm } from "./use_sign_in_form";
+import { PASSWORD_MAX_LENGTH } from "@oko-wallet-ct-dashboard/constants";
 import { AccountForm } from "@oko-wallet-ct-dashboard/ui";
 
 export const SignInForm: FC = () => {
@@ -54,6 +55,7 @@ export const SignInForm: FC = () => {
           type="password"
           placeholder="Password"
           fullWidth
+          maxLength={PASSWORD_MAX_LENGTH}
           error={errors.password?.message}
           resetError={() => resetErrors("password")}
           {...register("password")}