@qite/tide-booking-component 1.4.56 → 1.4.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "1.4.56",
+  "version": "1.4.57",
   "description": "React Booking wizard & Booking product component for Tide",
   "main": "build/build-cjs/index.js",
   "types": "build/build-cjs/src/index.d.ts",
@@ -71,8 +71,10 @@
     "uuid": "^11.1.0"
   },
   "dependencies": {
+    "jwt-decode": "^4.0.0",
     "react-html-comment": "^2.0.16",
     "react-router-dom": "^6.30.3",
-    "signalr-no-jquery": "^0.2.1"
+    "signalr-no-jquery": "^0.2.1",
+    "yup": "^1.6.1"
   }
 }

package/src/content/login/confirm-component.tsx

@@ -0,0 +1,149 @@
+import React, { useEffect, useState } from 'react';
+import { LoginComponentProps } from './types';
+import { getTranslations } from '../../shared/utils/localization-util';
+import { confirmMember } from './login-services';
+
+interface TouchedFields {
+  password?: boolean;
+  repeatPassword?: boolean;
+}
+
+interface FormFields {
+  password: string;
+  repeatPassword: string;
+}
+
+const ConfirmComponent: React.FC<LoginComponentProps> = ({ tideClientConfig, languageCode, handleBackToLogin }) => {
+  const [isConfirmed, setIsConfirmed] = useState<boolean>(false);
+  const [touched, setTouched] = useState<TouchedFields>();
+  const [formValues, setFormValues] = useState<FormFields>({
+    password: '',
+    repeatPassword: ''
+  });
+  const [errors, setErrors] = useState({} as any);
+  const [token, setToken] = useState<string | null>(null);
+
+  const translations = getTranslations(languageCode ?? 'en-GB');
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      setToken(new URLSearchParams(window.location.search).get('token'));
+    }
+  }, []);
+
+  const handleBlur = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (!touched) {
+      setTouched({ password: false, repeatPassword: false });
+    }
+    setTouched({
+      ...touched,
+      [event.target.name]: true
+    });
+
+    validate();
+  };
+
+  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setFormValues({ ...formValues, [event.target.name]: event.target.value });
+
+    validate();
+  };
+
+  const validate = () => {
+    let validationErrors = {} as any;
+    if (formValues) {
+      if (!formValues.password || formValues.password.length === 0) {
+        validationErrors.password = true;
+      }
+      if (!formValues.repeatPassword || formValues.repeatPassword.length === 0) {
+        validationErrors.repeatPassword = true;
+      } else if (formValues.password !== formValues.repeatPassword) {
+        validationErrors.passwordMatch = true;
+      }
+      if (!token || token.length === 0) {
+        validationErrors.token = true;
+      }
+    }
+
+    setErrors(validationErrors);
+    return Object.keys(validationErrors).length === 0;
+  };
+
+  const handleConfirmation = async () => {
+    setTouched({ password: true, repeatPassword: true });
+    const isValid = validate();
+    if (!isValid) return;
+
+    if (token) {
+      try {
+        const response = await confirmMember(token, formValues.password, true, tideClientConfig);
+        if (response.ok) {
+          setIsConfirmed(true);
+        }
+      } catch {
+        // Optional: handle unexpected API issues
+      }
+    }
+  };
+
+  useEffect(() => {
+    validate();
+  }, [formValues, token]);
+
+  return (
+    <>
+      {!isConfirmed && (
+        <>
+          <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 || touched?.repeatPassword) && errors.password && (
+                <div id="username-error" className="login__error">
+                  {translations.LOGIN.PASSWORD_REQUIRED}
+                </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 || touched?.password) && (errors.repeatPassword || errors.passwordMatch) && (
+                <div id="username-error" className="login__error">
+                  {errors.repeatPassword === 'required' && translations.LOGIN.REPEAT_PASSWORD_REQUIRED}
+                  {errors.passwordMatch === 'mismatch' && translations.LOGIN.PASSWORDS_DO_NOT_MATCH}
+                </div>
+              )}
+            </div>
+
+            <button type="button" className="cta cta--primary" onClick={handleConfirmation}>
+              {translations.LOGIN.RESET_PASSWORD_SUBMIT_LABEL}
+            </button>
+          </form>
+        </>
+      )}
+
+      {isConfirmed && (
+        <div className="login__welcome">
+          <h3 className="login__card__title">{translations.LOGIN.RECEIVED_REQUEST}</h3>
+          <p>{translations.LOGIN.ACCOUNT_ACTIVATED_LOGIN}</p>
+          <button className="cta cta--primary" onClick={handleBackToLogin}>
+            {translations.LOGIN.BACK_TO_LOGIN}
+          </button>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default ConfirmComponent;

package/src/content/login/index.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { LoginProps } from './types';
+import LoginComponent from './login-component';
+import ResetPasswordComponent from './reset-password-component';
+import ConfirmComponent from './confirm-component';
+
+const Login: React.FC<LoginProps> = ({
+  tideClientConfig,
+  portalId,
+  languageCode,
+  imageSrc,
+  logo,
+  isMemberConfirmation,
+  isLoginPage,
+  isResetPassword,
+  member,
+  setMember,
+  handleBackToHome,
+  handleBackToLogin
+}) => {
+  return (
+    <div className="login">
+      <div className="login__img__wrapper">
+        <img className="login__img" src={imageSrc ? imageSrc : 'https://cdn.pixabay.com/photo/2022/04/08/06/36/rock-7118843_1280.jpg'} alt="Login" />
+      </div>
+
+      <div className="login__container">
+        <div className="login__card">
+          {logo && <div className="login__logo">{logo}</div>}
+
+          {isLoginPage && (
+            <LoginComponent
+              tideClientConfig={tideClientConfig}
+              portalId={portalId}
+              languageCode={languageCode}
+              member={member}
+              setMember={setMember}
+              handleBackToHome={handleBackToHome}
+              handleBackToLogin={handleBackToLogin}
+            />
+          )}
+          {isResetPassword && (
+            <ResetPasswordComponent
+              tideClientConfig={tideClientConfig}
+              portalId={portalId}
+              languageCode={languageCode}
+              member={member}
+              setMember={setMember}
+              handleBackToHome={handleBackToHome}
+              handleBackToLogin={handleBackToLogin}
+            />
+          )}
+          {isMemberConfirmation && (
+            <ConfirmComponent
+              tideClientConfig={tideClientConfig}
+              portalId={portalId}
+              languageCode={languageCode}
+              member={member}
+              setMember={setMember}
+              handleBackToHome={handleBackToHome}
+              handleBackToLogin={handleBackToLogin}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Login;

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

@@ -0,0 +1,158 @@
+import React, { useState } from 'react';
+import { LoginComponentProps } from './types';
+import { getTranslations } from '../../shared/utils/localization-util';
+import { useFormik } from 'formik';
+import * as Yup from 'yup';
+import { decodeTokenToMemberInfo, loginMember, passwordForgotten } from './login-services';
+
+const LoginComponent: React.FC<LoginComponentProps> = ({ tideClientConfig, portalId, languageCode, member, setMember, handleBackToHome }) => {
+  const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const [isForgotPassword, setIsForgotPassword] = useState<boolean>(false);
+  const [newPasswordRequested, setNewPasswordRequested] = useState<boolean>(false);
+
+  const [apiError, setApiError] = useState(false);
+
+  const translations = getTranslations(languageCode ?? 'en-GB');
+
+  const formik = useFormik({
+    initialValues: {
+      username: '',
+      password: ''
+    },
+    validationSchema: Yup.object({
+      username: Yup.string().email(translations.LOGIN.EMAIL_INVALID).required(translations.LOGIN.EMAIL_REQUIRED),
+      password: Yup.string().required(translations.LOGIN.PASSWORD_REQUIRED)
+    }),
+    onSubmit: async (values) => {
+      try {
+        const response = await loginMember(values.username, values.password, tideClientConfig, portalId);
+        const member = decodeTokenToMemberInfo(response.token);
+        if (member && member.id !== 0) {
+          setMember(member);
+          localStorage.setItem('token', response.token);
+          setIsLoggedIn(true);
+        }
+      } catch (error) {
+        setApiError(true);
+      }
+    }
+  });
+
+  const handleForgotPasswordClick = async () => {
+    formik.setTouched({ username: true }, true);
+    const errors = await formik.validateForm();
+
+    if (!errors.username) {
+      handleForgotPassword();
+    }
+  };
+
+  const handleForgotPassword = async () => {
+    try {
+      const response = await passwordForgotten(formik.values.username, tideClientConfig, portalId);
+      if (response) {
+        setNewPasswordRequested(true);
+      }
+    } catch (error) {
+      setApiError(true);
+    }
+  };
+
+  return (
+    <>
+      {!isLoggedIn && !isForgotPassword && (
+        <>
+          <h4 className="login__card__title">{translations.LOGIN.LOGIN_INTO}</h4>
+
+          <form className="login__form" onSubmit={formik.handleSubmit} noValidate>
+            <div className="login__form__group">
+              <label htmlFor="email">{translations.LOGIN.EMAIL}</label>
+              <input type="text" id="username" placeholder={translations.LOGIN.ENTER_YOUR_EMAIL} {...formik.getFieldProps('username')} />
+              {formik.touched.username && formik.errors.username && (
+                <div id="username-error" className="login__error">
+                  {formik.errors.username}
+                </div>
+              )}
+            </div>
+
+            <div className="login__form__group">
+              <label htmlFor="password">{translations.LOGIN.PASSWORD}</label>
+              <input
+                type={showPassword ? 'text' : 'password'}
+                id="password"
+                placeholder={translations.LOGIN.ENTER_YOUR_PASSWORD}
+                {...formik.getFieldProps('password')}
+                required
+              />
+              {(formik.touched.password || formik.submitCount > 0) && formik.errors.password && (
+                <div id="password-error" className="login__error">
+                  {formik.values.password === '' ? translations.LOGIN.PASSWORD_REQUIRED : formik.errors.password}
+                </div>
+              )}
+            </div>
+
+            {!formik.errors.password && apiError && <div className="login__error">{translations.LOGIN.INVALID_CREDENTIALS}</div>}
+
+            <button type="submit" className="cta cta--primary">
+              {translations.LOGIN.LOGIN}
+            </button>
+
+            <button
+              type="button"
+              className="login__forgot"
+              onClick={() => {
+                formik.setFieldValue('password', '');
+                formik.setFieldTouched('password', false, false);
+                formik.setFieldError('password', undefined);
+
+                setApiError(false);
+
+                setIsForgotPassword(true);
+              }}>
+              {translations.LOGIN.FORGOT_PASSWORD}
+            </button>
+          </form>
+        </>
+      )}
+
+      {isLoggedIn && member && !isForgotPassword && (
+        <div className="login__welcome">
+          <h3 className="login__card__title">
+            {translations.LOGIN.WELCOME_X}
+            {member?.name}
+          </h3>
+          <button className="cta cta--primary" onClick={handleBackToHome}>
+            {translations.LOGIN.BACK_TO_HOMEPAGE}
+          </button>
+        </div>
+      )}
+
+      {isForgotPassword && !newPasswordRequested && (
+        <>
+          <h4 className="login__card__title">{translations.LOGIN.FORGOT_PASSWORD}</h4>
+
+          <form className="login__form" noValidate>
+            <div className="login__form__group">
+              <label htmlFor="email">{translations.LOGIN.EMAIL}</label>
+              <input type="text" id="username" placeholder={translations.LOGIN.ENTER_YOUR_EMAIL} {...formik.getFieldProps('username')} required />
+              {(((formik.submitCount > 0 || formik.touched.username) && formik.errors.username) || apiError) && (
+                <div id="username-error" className="login__error">
+                  {translations.LOGIN.EMAIL_REQUIRED}
+                </div>
+              )}
+            </div>
+
+            <button className="cta cta--primary" onClick={handleForgotPasswordClick}>
+              {translations.LOGIN.FORGOT_PASSWORD_EMAIL_SUBMIT_LABEL}
+            </button>
+          </form>
+        </>
+      )}
+
+      {newPasswordRequested && <h4 className="login__card__title">{translations.LOGIN.RESET_REQUESTED}</h4>}
+    </>
+  );
+};
+
+export default LoginComponent;

package/src/content/login/login-services.ts

@@ -0,0 +1,109 @@
+import { login, confirm, forgotPassword, resetPassword, TideClientConfig, MemberInfo } from '@qite/tide-client';
+import { MemberConfirmationRequest, MemberForgotPasswordRequest, MemberLoginRequest, MemberResetPasswordRequest } from '@qite/tide-client';
+import { JwtPayload, jwtDecode } from 'jwt-decode';
+
+interface MemberInfoPayload extends JwtPayload {
+  company: string;
+  companyName: string;
+  language: string;
+  member: string;
+  email: string;
+  unique_name: string;
+  addressId: string;
+  addressName: string;
+  addressLogo: string;
+  'http://schemas.xmlsoap.org/ws/2005/05/identity/claims/sid': string;
+  'http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name': string;
+  'http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress': string;
+}
+
+export const loginMember = async (username: string, password: string, tideClientConfig: TideClientConfig, portalId: number) => {
+  if (!tideClientConfig.host || !tideClientConfig.apiKey) {
+    return Promise.reject();
+  }
+
+  const memberLogingRequest: MemberLoginRequest = {
+    username: username,
+    password: password,
+    portalId: portalId
+  };
+
+  const memberInfo = await login(tideClientConfig, memberLogingRequest, undefined);
+  return memberInfo;
+};
+
+export const confirmMember = async (token: string, password: string, hasAgreed: boolean, tideClientConfig: TideClientConfig) => {
+  if (!tideClientConfig.host || !tideClientConfig.apiKey) {
+    return Promise.reject();
+  }
+
+  const memberConfirmationRequest: MemberConfirmationRequest = {
+    token: token,
+    password: password,
+    hasAgreed: hasAgreed
+  };
+
+  const response = await confirm(tideClientConfig, memberConfirmationRequest, undefined);
+  return response;
+};
+
+export const passwordForgotten = async (username: string, tideClientConfig: TideClientConfig, portalId: number) => {
+  if (!tideClientConfig.host || !tideClientConfig.apiKey) {
+    return Promise.reject();
+  }
+
+  const memberForgotPasswordRequest: MemberForgotPasswordRequest = {
+    username: username,
+    portalId: portalId
+  };
+
+  const response = await forgotPassword(tideClientConfig, memberForgotPasswordRequest, undefined);
+  return response.ok;
+};
+
+export const newPassword = async (token: string, password: string, tideClientConfig: TideClientConfig) => {
+  if (!tideClientConfig.host || !tideClientConfig.apiKey) {
+    return Promise.reject();
+  }
+
+  const memberResetPasswordRequest: MemberResetPasswordRequest = {
+    token: token,
+    password: password
+  };
+
+  const response = await resetPassword(tideClientConfig, memberResetPasswordRequest, undefined);
+  return response.ok;
+};
+
+export const decodeTokenToMemberInfo = (token: string | null): MemberInfo | undefined => {
+  if (!token) {
+    return undefined;
+  }
+
+  const decodedToken = jwtDecode<MemberInfoPayload>(token);
+  let member: MemberInfo | undefined = undefined;
+  // check if token is not expired
+  if (decodedToken?.exp && decodedToken.exp * 1000 < new Date().getTime()) {
+    return undefined;
+  }
+
+  if (decodedToken) {
+    member = {
+      id: decodedToken['http://schemas.xmlsoap.org/ws/2005/05/identity/claims/sid']
+        ? parseInt(decodedToken['http://schemas.xmlsoap.org/ws/2005/05/identity/claims/sid'])
+        : 0,
+      companyId: decodedToken.company ? parseInt(decodedToken.company) : 0,
+      companyName: decodedToken.companyName,
+      name: decodedToken.unique_name,
+      email: decodedToken.email || decodedToken['http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress'],
+      language: decodedToken.language,
+      agentId: decodedToken['http://schemas.xmlsoap.org/ws/2005/05/identity/claims/sid']
+        ? parseInt(decodedToken['http://schemas.xmlsoap.org/ws/2005/05/identity/claims/sid'])
+        : 0,
+      addressId: decodedToken.addressId ? parseInt(decodedToken.addressId) : undefined,
+      addressName: decodedToken.addressName,
+      addressLogo: decodedToken.addressLogo
+    } as MemberInfo;
+  }
+  return member;
+};

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

@@ -0,0 +1,190 @@
+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 () => {
+    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;