diff --git a/public/locales/de/translations.json b/public/locales/de/translations.json index 80e15154..991a155d 100644 --- a/public/locales/de/translations.json +++ b/public/locales/de/translations.json @@ -1985,7 +1985,11 @@ "district": "Bezirk", "selectDistrict": "Bezirk auswählen…", "services": "Angebotene Leistungen", - "clientLanguages": "Von Bewohnenden gesprochene Sprachen" + "clientLanguages": "Von Bewohnenden gesprochene Sprachen", + "consent": { + "header": "Hiermit stimme ich zu:", + "and": "und" + } }, "errors": { "passwordTooShort": "Das Passwort muss mindestens 8 Zeichen lang sein", diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json index 8500eb80..46f228a2 100644 --- a/public/locales/en/translations.json +++ b/public/locales/en/translations.json @@ -1606,7 +1606,11 @@ "district": "District", "selectDistrict": "Select district…", "services": "Services provided", - "clientLanguages": "Languages spoken by residents" + "clientLanguages": "Languages spoken by residents", + "consent": { + "header": "I hereby agree to the:", + "and": "and" + } }, "errors": { "passwordTooShort": "Password must be at least 8 characters", diff --git a/src/components/AgentRegistration/helpers.ts b/src/components/AgentRegistration/helpers.ts index 6deca269..cd8724ff 100644 --- a/src/components/AgentRegistration/helpers.ts +++ b/src/components/AgentRegistration/helpers.ts @@ -47,6 +47,7 @@ export function validateStep( errors.confirmPassword = t("agentRegistration.errors.passwordMismatch"); if (!data.phone.trim()) errors.phone = required; else if (data.phone.trim().length < 7) errors.phone = t("agentRegistration.errors.phoneTooShort"); + if (!data.consent) errors.consent = required; } return errors; diff --git a/src/components/AgentRegistration/steps/AccountStep.tsx b/src/components/AgentRegistration/steps/AccountStep.tsx index e35e5f22..6e9d6917 100644 --- a/src/components/AgentRegistration/steps/AccountStep.tsx +++ b/src/components/AgentRegistration/steps/AccountStep.tsx @@ -2,7 +2,9 @@ import { FormInput } from "@/components/core/common"; import { useTranslation } from "react-i18next"; import { AgentRegistrationData } from "../types"; -import { FieldLabel, FieldWrapper, StepDescription, StepTitle } from "../styled"; +import { FieldConsent, FieldLabel, FieldWrapper, StepDescription, StepTitle, StyledErrorMessage } from "../styled"; +import { Subpage } from "@/types"; +import { WarningCircle } from "@phosphor-icons/react"; type Props = { data: AgentRegistrationData; @@ -81,6 +83,30 @@ export function AccountStep({ data, onChange, errors }: Props) { errors={errors.phone ? [errors.phone] : []} /> + + + + onChange({ consent: e.target.checked })} + /> + + {t("agentRegistration.fields.consent.header")}{" "} + {t("homepage.footer.legal.dataPrivacy")},{" "} + {t("homepage.footer.legal.guidelines")}{" "} + {t("agentRegistration.fields.consent.and")}{" "} + {t("homepage.footer.legal.agreement")}{" "} + + + {errors.consent && ( + + + {errors.consent} + + )} + ); } diff --git a/src/components/AgentRegistration/styled.ts b/src/components/AgentRegistration/styled.ts index 697a2865..544aef45 100644 --- a/src/components/AgentRegistration/styled.ts +++ b/src/components/AgentRegistration/styled.ts @@ -133,3 +133,29 @@ export const StyledTextarea = styled.textarea` border: var(--form-input-container-border-focus); } `; + +export const FieldConsent = styled.label` + display: flex; + align-items: flex-start; + gap: 0.5rem; + + input[type="checkbox"] { + width: 18px; + height: 18px; + margin-top: 4px; + accent-color: var(--color-aubergine); + cursor: pointer; + } +`; + +export const StyledErrorMessage = styled.div` + display: flex; + flex-direction: row; + align-items: center; + gap: var(--form-input-error-message-container-gap); + padding: var(--form-input-error-message-container-padding); + color: var(--form-input-error-message-color); + font-size: var(--form-input-error-message-fontSize); + font-weight: var(--form-input-error-message-fontWeight); + line-height: var(--form-input-error-message-lineHeight); +`; diff --git a/src/components/AgentRegistration/types.ts b/src/components/AgentRegistration/types.ts index 154fbbb2..fcb89ed7 100644 --- a/src/components/AgentRegistration/types.ts +++ b/src/components/AgentRegistration/types.ts @@ -31,6 +31,7 @@ export interface AgentRegistrationData { password: string; confirmPassword: string; phone: string; + consent: boolean; } export const defaultAgentRegistrationData: AgentRegistrationData = { @@ -40,6 +41,7 @@ export const defaultAgentRegistrationData: AgentRegistrationData = { password: "", confirmPassword: "", phone: "", + consent: false, }; export const TOTAL_STEPS = 1;