BC-10341 - Registration Step: password (#3955)

Adds the password step for the registration of external persons.

* add password validation rules (required, min length 8; at least one: uppercase, lowercase letter, special char and number; passwords must match)
* create password registration step
* add validation rules for password
* add password validation on continue
* adjust layout for different screensizes, on display sizes <600px: password fields and first+last name are not in a row (column)
* fix layout shift caused by multiline error messages
* focus step headings on continue and on back button
* focus first invalid inputs on continue button
* fix cutoff of bullet points on IPad

---------

Co-authored-by: Sebastian Mueller <[email protected]>

Author: NFriedo

src/locales/de.ts

@@ -88,6 +88,7 @@ export default {
 	"common.labels.partial": "teilweise",
 	"common.labels.password.new": "Neues Passwort",
 	"common.labels.password": "Passwort",
+	"common.labels.password.confirmation": "Passwort wiederholen",
 	"common.labels.readmore": "Weiterlesen",
 	"common.labels.register": "Registrieren",
 	"common.labels.registration": "Registrierung",
@@ -1530,6 +1531,29 @@ export default {
 	"pages.registrationExternalMembers.steps.declarationOfConsent.title": "Einwilligungserklärung",
 	"pages.registrationExternalMembers.steps.confirmationCode.title": "Bestätigungscode",
 	"pages.registrationExternalMembers.steps.registration.title": "Registrierung",
+	"pages.registrationExternalMembers.steps.password.firstParagraph":
+		"Die {instance} bewahrt die Nutzenden-Daten sicher auf und gibt sie nicht an Dritte weiter. Die Verarbeitung der Daten erfolgt entsprechend der hohen gesetzlichen Datenschutz-Anforderungen.",
+	"pages.registrationExternalMembers.steps.password.secondParagraph":
+		"Die folgenden Daten hat eine Lehrkraft oder ein Schul-Admin eingetragen (falls Anpassungen notwendig sind, bitte an die entsprechende Person wenden):",
+	"pages.registrationExternalMembers.steps.password.setPassword": "Bitte ein Passwort vergeben",
+	"pages.registrationExternalMembers.steps.password.instructions.minLengthWithLowerAndUpperCase":
+		"mindestens 8 Zeichen, einen Groß- und einen Kleinbuchstaben",
+	"pages.registrationExternalMembers.steps.password.instructions.numberAndSpecialCharacter":
+		"davon jeweils mindestens eine Zahl und ein Sonderzeichen",
+	"pages.registrationExternalMembers.steps.password.instructions.allowedSpecialCharacters":
+		"erlaube Sonderzeichen sind: ! § $ % / ( ) = ? \\ ; : , . # + * ~ -",
+	"pages.registrationExternalMembers.steps.password.validation.required": "Bitte ein Passwort eingeben.",
+	"pages.registrationExternalMembers.steps.password.validation.minLength":
+		"Das Passwort muss mindestens 8 Zeichen lang sein.",
+	"pages.registrationExternalMembers.steps.password.validation.upperCase":
+		"Das Passwort muss mindestens einen Großbuchstaben enthalten.",
+	"pages.registrationExternalMembers.steps.password.validation.lowerCase":
+		"Das Passwort muss mindestens einen Kleinbuchstaben enthalten.",
+	"pages.registrationExternalMembers.steps.password.validation.number":
+		"Das Passwort muss mindestens eine Zahl enthalten.",
+	"pages.registrationExternalMembers.steps.password.validation.specialCharacter":
+		"Das Passwort muss mindestens ein Sonderzeichen enthalten.",
+	"pages.registrationExternalMembers.steps.password.validation.passwordsMatch": "Die Passwörter stimmen nicht überein.",
 	"pages.registrationExternalMembers.steps.registration.heading": "Registrierung erfolgreich",
 	"pages.registrationExternalMembers.steps.language.heading": "Bitte Sprache wählen",
 	"pages.registrationExternalMembers.steps.welcome.heading":

src/locales/en.ts

@@ -86,6 +86,7 @@ export default {
 	"common.labels.partial": "partial",
 	"common.labels.password.new": "New password",
 	"common.labels.password": "Password",
+	"common.labels.password.confirmation": "Confirm password",
 	"common.labels.readmore": "Read more",
 	"common.labels.register": "Register",
 	"common.labels.registration": "Registration",
@@ -1508,6 +1509,29 @@ export default {
 	"pages.registrationExternalMembers.steps.declarationOfConsent.title": "Declaration of consent",
 	"pages.registrationExternalMembers.steps.confirmationCode.title": "Confirmation code",
 	"pages.registrationExternalMembers.steps.registration.title": "Registration",
+	"pages.registrationExternalMembers.steps.password.firstParagraph":
+		"The {instance} stores user data securely and does not share it with third parties. Data is processed in accordance with strict legal data protection requirements.",
+	"pages.registrationExternalMembers.steps.password.secondParagraph":
+		"The following data has been entered by a teacher or school administrator (if adjustments are necessary, please contact the relevant person):",
+	"pages.registrationExternalMembers.steps.password.setPassword": "Please set a password",
+	"pages.registrationExternalMembers.steps.password.instructions.minLengthWithLowerAndUpperCase":
+		"at least 8 characters, one uppercase and one lowercase letter",
+	"pages.registrationExternalMembers.steps.password.instructions.numberAndSpecialCharacter":
+		"at least one number and one special character",
+	"pages.registrationExternalMembers.steps.password.instructions.allowedSpecialCharacters":
+		"allowed special characters are: ! § $ % / ( ) = ? \\ ; : , . # + * ~ -",
+	"pages.registrationExternalMembers.steps.password.validation.required": "Please enter a password.",
+	"pages.registrationExternalMembers.steps.password.validation.minLength":
+		"The password must be at least 8 characters long.",
+	"pages.registrationExternalMembers.steps.password.validation.upperCase":
+		"The password must contain at least one uppercase letter.",
+	"pages.registrationExternalMembers.steps.password.validation.lowerCase":
+		"The password must contain at least one lowercase letter.",
+	"pages.registrationExternalMembers.steps.password.validation.number":
+		"The password must contain at least one number.",
+	"pages.registrationExternalMembers.steps.password.validation.specialCharacter":
+		"The password must contain at least one special character.",
+	"pages.registrationExternalMembers.steps.password.validation.passwordsMatch": "The passwords do not match.",
 	"pages.registrationExternalMembers.steps.registration.heading": "Registration successful",
 	"pages.registrationExternalMembers.steps.language.heading": "Please select your language",
 	"pages.registrationExternalMembers.steps.welcome.heading":

src/locales/es.ts

@@ -88,6 +88,7 @@ export default {
 	"common.labels.partial": "parcial",
 	"common.labels.password.new": "Nueva contraseña",
 	"common.labels.password": "Contraseña",
+	"common.labels.password.confirmation": "Confirmar contraseña",
 	"common.labels.readmore": "Leer más",
 	"common.labels.register": "Registrarse",
 	"common.labels.registration": "Registro",
@@ -1541,6 +1542,29 @@ export default {
 	"pages.registrationExternalMembers.steps.declarationOfConsent.title": "Declaración de consentimiento",
 	"pages.registrationExternalMembers.steps.confirmationCode.title": "Código de confirmación",
 	"pages.registrationExternalMembers.steps.registration.title": "Registro",
+	"pages.registrationExternalMembers.steps.password.firstParagraph":
+		"La {instance} almacena los datos de los usuarios de forma segura y no los comparte con terceros. El tratamiento de los datos se realiza conforme a los altos requisitos legales de protección de datos.",
+	"pages.registrationExternalMembers.steps.password.secondParagraph":
+		"Los siguientes datos han sido introducidos por un docente o un administrador escolar (si es necesario realizar ajustes, por favor, dirígete a la persona correspondiente):",
+	"pages.registrationExternalMembers.steps.password.setPassword": "Por favor, establece una contraseña",
+	"pages.registrationExternalMembers.steps.password.instructions.minLengthWithLowerAndUpperCase":
+		"mínimo 8 caracteres, una letra mayúscula y una minúscula",
+	"pages.registrationExternalMembers.steps.password.instructions.numberAndSpecialCharacter":
+		"debe contener al menos un número y un carácter especial",
+	"pages.registrationExternalMembers.steps.password.instructions.allowedSpecialCharacters":
+		"los caracteres especiales permitidos son: ! § $ % / ( ) = ? \\ ; : , . # + * ~ -",
+	"pages.registrationExternalMembers.steps.password.validation.required": "Por favor, introduce una contraseña.",
+	"pages.registrationExternalMembers.steps.password.validation.minLength":
+		"La contraseña debe tener al menos 8 caracteres.",
+	"pages.registrationExternalMembers.steps.password.validation.upperCase":
+		"La contraseña debe contener al menos una letra mayúscula.",
+	"pages.registrationExternalMembers.steps.password.validation.lowerCase":
+		"La contraseña debe contener al menos una letra minúscula.",
+	"pages.registrationExternalMembers.steps.password.validation.number":
+		"La contraseña debe contener al menos un número.",
+	"pages.registrationExternalMembers.steps.password.validation.specialCharacter":
+		"La contraseña debe contener al menos un carácter especial.",
+	"pages.registrationExternalMembers.steps.password.validation.passwordsMatch": "Las contraseñas no coinciden.",
 	"pages.registrationExternalMembers.steps.registration.heading": "Registro exitoso",
 	"pages.registrationExternalMembers.steps.language.heading": "Por favor seleccione su idioma",
 	"pages.registrationExternalMembers.steps.welcome.heading":

src/locales/uk.ts

@@ -88,6 +88,7 @@ export default {
 	"common.labels.partial": "частковий",
 	"common.labels.password.new": "Новий пароль",
 	"common.labels.password": "Пароль",
+	"common.labels.password.confirmation": "Підтвердження пароля",
 	"common.labels.readmore": "Додаткові відомості",
 	"common.labels.register": "Реєстрація",
 	"common.labels.registration": "Реєстрація",
@@ -1517,6 +1518,28 @@ export default {
 	"pages.registrationExternalMembers.steps.declarationOfConsent.title": "Декларація про згоду",
 	"pages.registrationExternalMembers.steps.confirmationCode.title": "Код підтвердження",
 	"pages.registrationExternalMembers.steps.registration.title": "Реєстрація",
+	"pages.registrationExternalMembers.steps.password.firstParagraph":
+		"{instance} надійно зберігає дані користувачів і не передає їх третім особам. Обробка даних здійснюється відповідно до високих законодавчих вимог щодо захисту даних.",
+	"pages.registrationExternalMembers.steps.password.secondParagraph":
+		"Наступні дані були введені вчителем або адміністратором школи (якщо потрібні зміни, будь ласка, зверніться до відповідної особи):",
+	"pages.registrationExternalMembers.steps.password.setPassword": "Будь ласка, задайте пароль",
+	"pages.registrationExternalMembers.steps.password.instructions.minLengthWithLowerAndUpperCase":
+		"мінімум 8 символів, одна велика та одна мала буква",
+	"pages.registrationExternalMembers.steps.password.instructions.numberAndSpecialCharacter":
+		"мінімум одна цифра та один спеціальний символ",
+	"pages.registrationExternalMembers.steps.password.instructions.allowedSpecialCharacters":
+		"дозволені спеціальні символи: ! § $ % / ( ) = ? \\ ; : , . # + * ~ -",
+	"pages.registrationExternalMembers.steps.password.validation.required": "Будь ласка, введіть пароль.",
+	"pages.registrationExternalMembers.steps.password.validation.minLength":
+		"Пароль повинен містити щонайменше 8 символів.",
+	"pages.registrationExternalMembers.steps.password.validation.upperCase":
+		"Пароль повинен містити щонайменше одну велику літеру.",
+	"pages.registrationExternalMembers.steps.password.validation.lowerCase":
+		"Пароль повинен містити щонайменше одну малу літеру.",
+	"pages.registrationExternalMembers.steps.password.validation.number": "Пароль повинен містити щонайменше одну цифру.",
+	"pages.registrationExternalMembers.steps.password.validation.specialCharacter":
+		"Пароль повинен містити щонайменше один спеціальний символ.",
+	"pages.registrationExternalMembers.steps.password.validation.passwordsMatch": "Паролі не співпадають.",
 	"pages.registrationExternalMembers.steps.registration.heading": "Реєстрація успішна",
 	"pages.registrationExternalMembers.steps.language.heading": "Будь ласка, виберіть свою мову",
 	"pages.registrationExternalMembers.steps.welcome.heading":

src/modules/data/room/registration/registration.composable.ts

@@ -5,6 +5,7 @@ import { useI18n } from "vue-i18n";
 export const useRegistration = () => {
 	const i18n = useI18n();
 	const selectedLanguage = ref<LanguageType | undefined>(undefined);
+	const password = ref<string>("");
 
 	const initializeLanguage = () => {
 		const match = document.cookie.match(/(?:^|;\s*)USER_LANG=([^;]*)/);
@@ -26,5 +27,5 @@ export const useRegistration = () => {
 		i18n.locale.value = value;
 	};
 
-	return { selectedLanguage, setCookie, setSelectedLanguage, initializeLanguage };
+	return { selectedLanguage, setCookie, setSelectedLanguage, initializeLanguage, password };
 };

src/modules/feature/room/registration/Registration.unit.ts

@@ -1,8 +1,15 @@
 import Registration from "./Registration.vue";
+import LanguageSelection from "./steps/LanguageSelection.vue";
+import Password from "./steps/Password.vue";
 import { LanguageType } from "@/serverApi/v3";
+import { createTestEnvStore } from "@@/tests/test-utils";
 import { createTestingVuetify } from "@@/tests/test-utils/setup";
 import { useRegistration } from "@data-room";
+import { createTestingPinia } from "@pinia/testing";
+import { flushPromises } from "@vue/test-utils";
+import { setActivePinia } from "pinia";
 import { nextTick, ref } from "vue";
+import { VStepper, VStepperItem } from "vuetify/components";
 
 vi.mock("vue-i18n", () => ({
 	useI18n: () => ({
@@ -14,17 +21,24 @@ vi.mock("@data-room/registration/registration.composable");
 const useRegistrationMock = vi.mocked(useRegistration);
 
 describe("Registration.vue", () => {
+	beforeEach(() => {
+		setActivePinia(createTestingPinia());
+		createTestEnvStore();
+	});
 	const setup = () => {
 		useRegistrationMock.mockReturnValue({
 			selectedLanguage: ref(LanguageType.De),
+			password: ref(""),
 			setCookie: vi.fn(),
 			setSelectedLanguage: vi.fn(),
 			initializeLanguage: vi.fn(),
 		});
 
 		const wrapper = mount(Registration, {
+			attachTo: document.body,
 			global: {
 				plugins: [createTestingVuetify()],
+				stubs: { Welcome: true },
 			},
 		});
 
@@ -41,15 +55,15 @@ describe("Registration.vue", () => {
 	describe("Stepper Component", () => {
 		it("should have stepper component", () => {
 			const { wrapper } = setup();
-			const stepperComponent = wrapper.findComponent({ name: "VStepper" });
+			const stepperComponent = wrapper.findComponent(VStepper);
 			expect(stepperComponent.exists()).toBe(true);
 			expect(stepperComponent.props("modelValue")).toBe(1);
 		});
 
 		it("should have 6 steps", () => {
 			const { wrapper } = setup();
 
-			const stepComponents = wrapper.findAllComponents({ name: "VStepperItem" });
+			const stepComponents = wrapper.findAllComponents(VStepperItem);
 			expect(stepComponents.length).toBe(6);
 		});
 
@@ -63,8 +77,9 @@ describe("Registration.vue", () => {
 			describe("when step is 1", () => {
 				it("should have only 'Continue' button", () => {
 					const { wrapper } = setup();
+
 					const backButton = wrapper.find("[data-testid='registration-back-button']");
-					const nextButton = wrapper.find("[data-testid='registiration-continue-button']");
+					const nextButton = wrapper.find("[data-testid='registration-continue-button']");
 
 					expect(backButton.exists()).toBe(false);
 					expect(nextButton.exists()).toBe(true);
@@ -74,7 +89,7 @@ describe("Registration.vue", () => {
 			describe("when step is greater than 1", () => {
 				it("should have 'Back' and 'Continue' buttons", async () => {
 					const { wrapper } = setup();
-					const nextButton = wrapper.find("[data-testid='registiration-continue-button']");
+					const nextButton = wrapper.find("[data-testid='registration-continue-button']");
 
 					await nextButton.trigger("click");
 
@@ -83,12 +98,61 @@ describe("Registration.vue", () => {
 					expect(nextButton.exists()).toBe(true);
 				});
 			});
+
+			describe("back button", () => {
+				it("should go to previous step on click", async () => {
+					const { wrapper } = setup();
+					const stepper = wrapper.findComponent(VStepper);
+					await stepper.setValue(2);
+					expect(stepper.props("modelValue")).toBe(2);
+
+					const backButton = wrapper.get("[data-testid='registration-back-button']");
+					await backButton.trigger("click");
+					expect(stepper.props("modelValue")).toBe(1);
+				});
+
+				it("should focus heading of previous step on click", async () => {
+					const { wrapper } = setup();
+					const stepper = wrapper.findComponent(VStepper);
+					await stepper.setValue(2);
+
+					const backButton = wrapper.get("[data-testid='registration-back-button']");
+					await backButton.trigger("click");
+
+					const welcomeStepHeading = wrapper.get("#step-heading-language");
+					expect(document.activeElement).toEqual(welcomeStepHeading.element);
+				});
+			});
+
+			describe("continue button", () => {
+				it("should go to next step on click", async () => {
+					const { wrapper } = setup();
+					const stepper = wrapper.findComponent(VStepper);
+					const continueButton = wrapper.get("[data-testid='registration-continue-button']");
+
+					expect(stepper.props("modelValue")).toBe(1);
+
+					await continueButton.trigger("click");
+					expect(stepper.props("modelValue")).toBe(2);
+				});
+
+				it("should focus heading of next step on click", async () => {
+					const { wrapper } = setup();
+					const continueButton = wrapper.get("[data-testid='registration-continue-button']");
+
+					await continueButton.trigger("click");
+					await nextTick();
+
+					const welcomeStepHeading = wrapper.get("#step-heading-welcome");
+					expect(document.activeElement).toEqual(welcomeStepHeading.element);
+				});
+			});
 		});
 
 		describe("Language Selection Component", () => {
 			it("should call setSelectedLanguage when language is updated", async () => {
 				const { wrapper, useRegistration } = setup();
-				const languageSelectionComponent = wrapper.findComponent({ name: "LanguageSelection" });
+				const languageSelectionComponent = wrapper.getComponent(LanguageSelection);
 
 				languageSelectionComponent.vm.$emit("update:selected-language", LanguageType.En);
 				await nextTick();
@@ -99,10 +163,35 @@ describe("Registration.vue", () => {
 			it("should have default language as German even if the selectedLanguage's value is undefined", () => {
 				const { wrapper, useRegistration } = setup();
 				useRegistration.selectedLanguage.value = undefined;
-				const languageSelectionComponent = wrapper.findComponent({ name: "LanguageSelection" });
+				const languageSelectionComponent = wrapper.getComponent(LanguageSelection);
 
 				expect(languageSelectionComponent.props("selectedLanguage")).toBe(LanguageType.De);
 			});
 		});
+
+		describe("Password Step", () => {
+			it("should render Password component at password step (3)", async () => {
+				const { wrapper } = setup();
+				const stepper = wrapper.findComponent(VStepper);
+				await stepper.setValue(3);
+
+				const passwordComponent = wrapper.findComponent(Password);
+				expect(passwordComponent.exists()).toBe(true);
+			});
+
+			it("should focus first invalid field on continue button click", async () => {
+				const { wrapper } = setup();
+				// we need to step twice here to reach the password step as just setValue() will not initiliaze the step forms array properly
+				const continueButton = wrapper.get("[data-testid='registration-continue-button']");
+				await continueButton.trigger("click");
+				await continueButton.trigger("click");
+
+				await continueButton.trigger("click");
+				await flushPromises();
+
+				const passwordField = wrapper.get("[data-testid='password']").get("input");
+				expect(document.activeElement).toBe(passwordField.element);
+			});
+		});
 	});
 });