@qite/tide-booking-component 1.4.94 → 1.4.95

package/src/content/login/reset-password-component.tsx

@@ -1,191 +1,191 @@
-import React, { useEffect, useState } from 'react';
-import { LoginComponentProps } from './types';
-import { getTranslations } from '../../shared/utils/localization-util';
-import { newPassword } from './login-services';
-import { jwtDecode } from 'jwt-decode';
-
-interface TouchedFields {
-  password?: boolean;
-  repeatPassword?: boolean;
-}
-
-interface FormFields {
-  password: string;
-  repeatPassword: string;
-}
-
-const ResetPasswordComponent: React.FC<LoginComponentProps> = ({ tideClientConfig, languageCode, handleBackToLogin }) => {
-  const [passwordSet, setPasswordSet] = useState<boolean>(false);
-  const [touched, setTouched] = useState<TouchedFields>({
-    password: false,
-    repeatPassword: false
-  });
-  const [formValues, setFormValues] = useState<FormFields>({
-    password: '',
-    repeatPassword: ''
-  });
-  const [submitted, setSubmitted] = useState<boolean>(false);
-  const [errors, setErrors] = useState({} as any);
-  const [token, setToken] = useState<string | null>(null);
-  const [invalidToken, setInvalidToken] = useState<boolean>(false);
-
-  const translations = getTranslations(languageCode ?? 'en-GB');
-
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      const rawToken = new URLSearchParams(window.location.search).get('token');
-      setToken(rawToken);
-
-      if (rawToken) {
-        try {
-          const decoded = jwtDecode(rawToken);
-
-          if (!decoded.exp || decoded.exp * 1000 < Date.now()) {
-            setInvalidToken(true);
-          }
-        } catch (e) {
-          setInvalidToken(true);
-        }
-      } else {
-        setInvalidToken(true);
-      }
-    }
-  }, []);
-
-  const handleBlur = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setTouched((prev) => ({
-      ...prev,
-      [event.target.name]: true
-    }));
-    validate();
-  };
-
-  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setFormValues({ ...formValues, [event.target.name]: event.target.value });
-
-    validate();
-  };
-
-  const validate = () => {
-    const validationErrors: any = {};
-    const { password, repeatPassword } = formValues;
-
-    // Validate password
-    if (!password) {
-      validationErrors.password = 'required';
-    } else if (touched.password || submitted) {
-      const hasNumber = /\d/.test(password);
-      const hasCapital = /[A-Z]/.test(password);
-
-      if (!hasNumber || !hasCapital) {
-        validationErrors.passwordComplexity = 'invalid';
-      }
-    }
-
-    // Validate repeat password
-    if (!repeatPassword) {
-      validationErrors.repeatPassword = 'required';
-    } else if ((touched.repeatPassword || submitted) && password && repeatPassword !== password) {
-      validationErrors.matchPassword = 'mismatch';
-    }
-
-    setErrors(validationErrors);
-    return Object.keys(validationErrors).length === 0;
-  };
-
-  const handleResetPassword = async (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    setSubmitted(true);
-    setTouched({ password: true, repeatPassword: true });
-
-    const isValid = validate();
-
-    if (!isValid) return;
-
-    if (token) {
-      try {
-        const response = await newPassword(token, formValues.password, tideClientConfig);
-        if (response) {
-          setPasswordSet(true);
-        }
-      } catch {
-        setErrors((prevErrors: any) => ({
-          ...prevErrors,
-          api: true
-        }));
-        setInvalidToken(true);
-      }
-    }
-  };
-
-  useEffect(() => {
-    validate();
-  }, [formValues, token]);
-
-  return (
-    <>
-      {!passwordSet && !invalidToken && (
-        <>
-          <h4 className="login__card__title">{translations.LOGIN.RESET_PASSWORD_TITLE}</h4>
-
-          <form className="login__form" onSubmit={(e) => e.preventDefault()} noValidate>
-            <div className="login__form__group">
-              <label htmlFor="password">{translations.LOGIN.RESET_PASSWORD_LABEL}</label>
-              <input type="password" id="password" name="password" value={formValues.password} onChange={onChange} onBlur={handleBlur} required />
-              {(touched.password || submitted) && (errors.password || errors.passwordComplexity) && (
-                <div id="username-error" className="login__error">
-                  {errors.password === 'required' && translations.LOGIN.PASSWORD_REQUIRED}
-                  {errors.passwordComplexity === 'invalid' && translations.LOGIN.PASSWORD_COMPLEXITY}
-                </div>
-              )}
-            </div>
-            <div className="login__form__group">
-              <label htmlFor="repeatPassword">{translations.LOGIN.RESET_REPEAT_PASSWORD_LABEL}</label>
-              <input
-                type="password"
-                id="repeatPassword"
-                name="repeatPassword"
-                value={formValues.repeatPassword}
-                onChange={onChange}
-                onBlur={handleBlur}
-                required
-              />
-              {(touched.repeatPassword || submitted) && (errors.repeatPassword || errors.matchPassword) && (
-                <div id="username-error" className="login__error">
-                  {errors.repeatPassword === 'required' && translations.LOGIN.REPEAT_PASSWORD_REQUIRED}
-                  {errors.matchPassword === 'mismatch' && translations.LOGIN.PASSWORDS_DO_NOT_MATCH}
-                </div>
-              )}
-            </div>
-
-            <button type="button" className="cta cta--primary" onClick={handleResetPassword}>
-              {translations.LOGIN.RESET_PASSWORD_SUBMIT_LABEL}
-            </button>
-          </form>
-        </>
-      )}
-
-      {passwordSet && (
-        <div className="login__welcome">
-          <h3 className="login__card__title">{translations.LOGIN.RESET_PASSWORD_TITLE}</h3>
-          <p>{translations.LOGIN.RESET_PASSWORD_SUCCESSFUL_MESSAGE}</p>
-          <button className="cta cta--primary" onClick={handleBackToLogin}>
-            {translations.LOGIN.BACK_TO_LOGIN}
-          </button>
-        </div>
-      )}
-
-      {invalidToken && (
-        <div className="login__welcome">
-          <h3 className="login__card__title">{translations.LOGIN.RESET_PASSWORD_INVALID_TOKEN_TITLE}</h3>
-          <p>{translations.LOGIN.RESET_PASSWORD_INVALID_TOKEN_DESCRIPTION}</p>
-          <button className="cta cta--primary" onClick={handleBackToLogin}>
-            {translations.LOGIN.BACK_TO_LOGIN}
-          </button>
-        </div>
-      )}
-    </>
-  );
-};
-
-export default ResetPasswordComponent;
+import React, { useEffect, useState } from 'react';
+import { LoginComponentProps } from './types';
+import { getTranslations } from '../../shared/utils/localization-util';
+import { newPassword } from './login-services';
+import { jwtDecode } from 'jwt-decode';
+
+interface TouchedFields {
+  password?: boolean;
+  repeatPassword?: boolean;
+}
+
+interface FormFields {
+  password: string;
+  repeatPassword: string;
+}
+
+const ResetPasswordComponent: React.FC<LoginComponentProps> = ({ tideClientConfig, languageCode, handleBackToLogin }) => {
+  const [passwordSet, setPasswordSet] = useState<boolean>(false);
+  const [touched, setTouched] = useState<TouchedFields>({
+    password: false,
+    repeatPassword: false
+  });
+  const [formValues, setFormValues] = useState<FormFields>({
+    password: '',
+    repeatPassword: ''
+  });
+  const [submitted, setSubmitted] = useState<boolean>(false);
+  const [errors, setErrors] = useState({} as any);
+  const [token, setToken] = useState<string | null>(null);
+  const [invalidToken, setInvalidToken] = useState<boolean>(false);
+
+  const translations = getTranslations(languageCode ?? 'en-GB');
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const rawToken = new URLSearchParams(window.location.search).get('token');
+      setToken(rawToken);
+
+      if (rawToken) {
+        try {
+          const decoded = jwtDecode(rawToken);
+
+          if (!decoded.exp || decoded.exp * 1000 < Date.now()) {
+            setInvalidToken(true);
+          }
+        } catch (e) {
+          setInvalidToken(true);
+        }
+      } else {
+        setInvalidToken(true);
+      }
+    }
+  }, []);
+
+  const handleBlur = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setTouched((prev) => ({
+      ...prev,
+      [event.target.name]: true
+    }));
+    validate();
+  };
+
+  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setFormValues({ ...formValues, [event.target.name]: event.target.value });
+
+    validate();
+  };
+
+  const validate = () => {
+    const validationErrors: any = {};
+    const { password, repeatPassword } = formValues;
+
+    // Validate password
+    if (!password) {
+      validationErrors.password = 'required';
+    } else if (touched.password || submitted) {
+      const hasNumber = /\d/.test(password);
+      const hasCapital = /[A-Z]/.test(password);
+
+      if (!hasNumber || !hasCapital) {
+        validationErrors.passwordComplexity = 'invalid';
+      }
+    }
+
+    // Validate repeat password
+    if (!repeatPassword) {
+      validationErrors.repeatPassword = 'required';
+    } else if ((touched.repeatPassword || submitted) && password && repeatPassword !== password) {
+      validationErrors.matchPassword = 'mismatch';
+    }
+
+    setErrors(validationErrors);
+    return Object.keys(validationErrors).length === 0;
+  };
+
+  const handleResetPassword = async (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    setSubmitted(true);
+    setTouched({ password: true, repeatPassword: true });
+
+    const isValid = validate();
+
+    if (!isValid) return;
+
+    if (token) {
+      try {
+        const response = await newPassword(token, formValues.password, tideClientConfig);
+        if (response) {
+          setPasswordSet(true);
+        }
+      } catch {
+        setErrors((prevErrors: any) => ({
+          ...prevErrors,
+          api: true
+        }));
+        setInvalidToken(true);
+      }
+    }
+  };
+
+  useEffect(() => {
+    validate();
+  }, [formValues, token]);
+
+  return (
+    <>
+      {!passwordSet && !invalidToken && (
+        <>
+          <h4 className="login__card__title">{translations.LOGIN.RESET_PASSWORD_TITLE}</h4>
+
+          <form className="login__form" onSubmit={(e) => e.preventDefault()} noValidate>
+            <div className="login__form__group">
+              <label htmlFor="password">{translations.LOGIN.RESET_PASSWORD_LABEL}</label>
+              <input type="password" id="password" name="password" value={formValues.password} onChange={onChange} onBlur={handleBlur} required />
+              {(touched.password || submitted) && (errors.password || errors.passwordComplexity) && (
+                <div id="username-error" className="login__error">
+                  {errors.password === 'required' && translations.LOGIN.PASSWORD_REQUIRED}
+                  {errors.passwordComplexity === 'invalid' && translations.LOGIN.PASSWORD_COMPLEXITY}
+                </div>
+              )}
+            </div>
+            <div className="login__form__group">
+              <label htmlFor="repeatPassword">{translations.LOGIN.RESET_REPEAT_PASSWORD_LABEL}</label>
+              <input
+                type="password"
+                id="repeatPassword"
+                name="repeatPassword"
+                value={formValues.repeatPassword}
+                onChange={onChange}
+                onBlur={handleBlur}
+                required
+              />
+              {(touched.repeatPassword || submitted) && (errors.repeatPassword || errors.matchPassword) && (
+                <div id="username-error" className="login__error">
+                  {errors.repeatPassword === 'required' && translations.LOGIN.REPEAT_PASSWORD_REQUIRED}
+                  {errors.matchPassword === 'mismatch' && translations.LOGIN.PASSWORDS_DO_NOT_MATCH}
+                </div>
+              )}
+            </div>
+
+            <button type="button" className="cta cta--primary" onClick={handleResetPassword}>
+              {translations.LOGIN.RESET_PASSWORD_SUBMIT_LABEL}
+            </button>
+          </form>
+        </>
+      )}
+
+      {passwordSet && (
+        <div className="login__welcome">
+          <h3 className="login__card__title">{translations.LOGIN.RESET_PASSWORD_TITLE}</h3>
+          <p>{translations.LOGIN.RESET_PASSWORD_SUCCESSFUL_MESSAGE}</p>
+          <button className="cta cta--primary" onClick={handleBackToLogin}>
+            {translations.LOGIN.BACK_TO_LOGIN}
+          </button>
+        </div>
+      )}
+
+      {invalidToken && (
+        <div className="login__welcome">
+          <h3 className="login__card__title">{translations.LOGIN.RESET_PASSWORD_INVALID_TOKEN_TITLE}</h3>
+          <p>{translations.LOGIN.RESET_PASSWORD_INVALID_TOKEN_DESCRIPTION}</p>
+          <button className="cta cta--primary" onClick={handleBackToLogin}>
+            {translations.LOGIN.BACK_TO_LOGIN}
+          </button>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default ResetPasswordComponent;

package/src/content/login/types.ts

@@ -1,29 +1,29 @@
-import { MemberInfo, TideClientConfig } from '@qite/tide-client';
-
-export interface LoginProps {
-  tideClientConfig: TideClientConfig;
-  portalId: number;
-  languageCode: string;
-  imageSrc?: string;
-  logo?: React.ReactNode;
-  isLoginPage: boolean;
-  isMemberConfirmation: boolean;
-  isResetPassword: boolean;
-
-  // onLanguageChange: (lang: string) => void;
-  member?: MemberInfo;
-  setMember: (member: MemberInfo) => void;
-  handleBackToHome: () => void;
-  handleBackToLogin: () => void;
-}
-
-export interface LoginComponentProps {
-  tideClientConfig: TideClientConfig;
-  portalId: number;
-  languageCode: string;
-
-  member?: MemberInfo;
-  setMember: (member: MemberInfo) => void;
-  handleBackToHome: () => void;
-  handleBackToLogin: () => void;
-}
+import { MemberInfo, TideClientConfig } from '@qite/tide-client';
+
+export interface LoginProps {
+  tideClientConfig: TideClientConfig;
+  portalId: number;
+  languageCode: string;
+  imageSrc?: string;
+  logo?: React.ReactNode;
+  isLoginPage: boolean;
+  isMemberConfirmation: boolean;
+  isResetPassword: boolean;
+
+  // onLanguageChange: (lang: string) => void;
+  member?: MemberInfo;
+  setMember: (member: MemberInfo) => void;
+  handleBackToHome: () => void;
+  handleBackToLogin: () => void;
+}
+
+export interface LoginComponentProps {
+  tideClientConfig: TideClientConfig;
+  portalId: number;
+  languageCode: string;
+
+  member?: MemberInfo;
+  setMember: (member: MemberInfo) => void;
+  handleBackToHome: () => void;
+  handleBackToLogin: () => void;
+}