@qite/tide-booking-component 1.4.124 → 1.4.125

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

@@ -1,159 +0,0 @@
-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 (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    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

@@ -1,109 +0,0 @@
-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

@@ -1,191 +0,0 @@
-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 +0,0 @@
-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;
-}