BC-10340: Registration welcome page (#3950)

sebmue-dataport · muratmerdoglu-dp · web-flow · commit 9bf1bd9342cc · 2025-11-11T14:47:01.000+01:00
* add translations and display on page

* move code to separate component

* use enum instead of number for steps

* conditional rendering of h2 subtitle

* use enum

* adjust margin

* change wording

* undo changing a file for local debugging

* change naming of subtitle to heading, make sure h2 has unique ids across steps

* focus heading on initial load and moving forward in stepper

* remove on initial mounting

* remove focus indicator on heading element

* fix translation key

* fix typo

---------

Co-authored-by: Murat Merdoglu &lt;64781656+muratmerdoglu-dp@users.noreply.github.com&gt;
diff --git a/src/locales/de.ts b/src/locales/de.ts
@@ -1529,9 +1529,13 @@ 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.registration.subtitle": "Registrierung erfolgreich",
-	"pages.registrationExternalMembers.steps.language.subtitle": "Bitte Sprache wählen",
-	"pages.registrationExternalMembers.steps.password.subtitle": "Passwort vergeben",
+	"pages.registrationExternalMembers.steps.registration.heading": "Registrierung erfolgreich",
+	"pages.registrationExternalMembers.steps.language.heading": "Bitte Sprache wählen",
+	"pages.registrationExternalMembers.steps.welcome.heading":
+		"Mit der Registrierung in der dBildungscloud im nächsten Schritt werden die {dataProtection} und {tos} akzeptiert. Die {dataProtection} ist jederzeit im Footer verfügbar. Für die Nutzung gilt folgende {tos} (soweit die Schule oder Bildungseinrichtung keine eigene Nutzungsordnung erlassen hat).",
+	"pages.registrationExternalMembers.steps.welcome.dataProtection": "Datenschutzerklärung",
+	"pages.registrationExternalMembers.steps.welcome.tos": "Nutzungsordnung",
+	"pages.registrationExternalMembers.steps.password.heading": "Passwort vergeben",
 	"pages.room.boardCard.label.columnBoard": "Bereich {'|'} mehrspaltig",
 	"pages.room.boardCard.label.courseBoard": "Kurs-Bereich",
 	"pages.room.boardCard.label.listBoard": "Bereich {'|'} einspaltig",
@@ -1648,7 +1652,7 @@ export default {
 	"pages.rooms.infoAlert.welcome.teamsAndCourses":
 		"Räume werden weiter ausgebaut. Teams und Kurse bleiben bestehen, bis die Inhalte in Räume überführt werden können.",
 	"pages.rooms.infoAlert.welcome.furtherInformation":
-		"Weitere Information gibt es auf unserer {helpLink}. Wir freuen uns über {feedbackLink} zum aktuellen Stand.",
+		"Weitere Information gibt es auf unserer {helpLink}. Wir freuen uns über {feedbackLink} zum aktuellen Stand.", // tada
 	"pages.rooms.infoAlert.welcome.furtherInformation.help": "Hilfeseite",
 	"pages.rooms.infoAlert.welcome.furtherInformation.feedback": "Rückmeldungen",
 	"pages.rooms.leaveRoom.confirmation": 'Raum "{roomName}" wirklich verlassen?',
diff --git a/src/locales/en.ts b/src/locales/en.ts
@@ -1507,9 +1507,13 @@ 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.registration.subtitle": "Registration successful",
-	"pages.registrationExternalMembers.steps.language.subtitle": "Please select your language",
-	"pages.registrationExternalMembers.steps.password.subtitle": "Set password",
+	"pages.registrationExternalMembers.steps.registration.heading": "Registration successful",
+	"pages.registrationExternalMembers.steps.language.heading": "Please select your language",
+	"pages.registrationExternalMembers.steps.welcome.heading":
+		"By registering in the dBildungscloud in the next step, you accept the {dataProtection} and {tos}. The {dataProtection} are always available in the footer. The following {tos} apply for use (unless your school or educational institution has issued its own terms of use).",
+	"pages.registrationExternalMembers.steps.welcome.dataProtection": "Privacy policy",
+	"pages.registrationExternalMembers.steps.welcome.tos": "Terms of use",
+	"pages.registrationExternalMembers.steps.password.heading": "Set password",
 	"pages.room.boardCard.label.columnBoard": "Column Board",
 	"pages.room.boardCard.label.courseBoard": "Course Board",
 	"pages.room.boardCard.label.listBoard": "List Board",
diff --git a/src/locales/es.ts b/src/locales/es.ts
@@ -1540,9 +1540,13 @@ 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.registration.subtitle": "Registro exitoso",
-	"pages.registrationExternalMembers.steps.language.subtitle": "Por favor seleccione su idioma",
-	"pages.registrationExternalMembers.steps.password.subtitle": "Establecer contraseña",
+	"pages.registrationExternalMembers.steps.registration.heading": "Registro exitoso",
+	"pages.registrationExternalMembers.steps.language.heading": "Por favor seleccione su idioma",
+	"pages.registrationExternalMembers.steps.welcome.heading":
+		"Al registrarse en dBildungscloud en el siguiente paso, acepta la {dataProtection} y los {tos}. La {dataProtection} está siempre disponible en el pie de página. Para el uso, se aplican los siguientes {tos} (a menos que su escuela o institución educativa haya establecido sus propias condiciones de uso).",
+	"pages.registrationExternalMembers.steps.welcome.dataProtection": "Política de privacidad",
+	"pages.registrationExternalMembers.steps.welcome.tos": "Condiciones de uso",
+	"pages.registrationExternalMembers.steps.password.heading": "Establecer contraseña",
 	"pages.room.boardCard.label.columnBoard": "Tablero de columna",
 	"pages.room.boardCard.label.courseBoard": "Junta del curso",
 	"pages.room.boardCard.label.listBoard": "Tablero de listas",
diff --git a/src/locales/uk.ts b/src/locales/uk.ts
@@ -1516,9 +1516,13 @@ export default {
 	"pages.registrationExternalMembers.steps.declarationOfConsent.title": "Декларація про згоду",
 	"pages.registrationExternalMembers.steps.confirmationCode.title": "Код підтвердження",
 	"pages.registrationExternalMembers.steps.registration.title": "Реєстрація",
-	"pages.registrationExternalMembers.steps.registration.subtitle": "Реєстрація успішна",
-	"pages.registrationExternalMembers.steps.language.subtitle": "Будь ласка, виберіть свою мову",
-	"pages.registrationExternalMembers.steps.password.subtitle": "Встановіть пароль",
+	"pages.registrationExternalMembers.steps.registration.heading": "Реєстрація успішна",
+	"pages.registrationExternalMembers.steps.language.heading": "Будь ласка, виберіть свою мову",
+	"pages.registrationExternalMembers.steps.welcome.heading":
+		"Реєструючись у dBildungscloud на наступному кроці, ви приймаєте {dataProtection} та {tos}. {dataProtection} завжди доступні у футері. Для використання діють наступні {tos} (якщо ваша школа або освітній заклад не встановили власні умови використання).",
+	"pages.registrationExternalMembers.steps.welcome.dataProtection": "Політика конфіденційності",
+	"pages.registrationExternalMembers.steps.welcome.tos": "Умови використання",
+	"pages.registrationExternalMembers.steps.password.heading": "Встановіть пароль",
 	"pages.room.boardCard.label.columnBoard": "Колонна дошка",
 	"pages.room.boardCard.label.courseBoard": "Дошка оголошень",
 	"pages.room.boardCard.label.listBoard": "Список дошки оголошень",
diff --git a/src/modules/feature/room/registration/Registration.vue b/src/modules/feature/room/registration/Registration.vue
@@ -10,12 +10,13 @@
 			<VStepperWindow>
 				<template v-for="step in steps" :key="step.value">
 					<VStepperWindowItem :value="step.value">
-						<h2 id="language-heading" class="mb-10">{{ step.subtitle }}</h2>
+						<h2 :id="`step-heading-${step.id}`" class="mb-4 heading" :tabindex="-1">{{ step.heading }}</h2>
 						<LanguageSelection
-							v-if="step.value === 1"
+							v-if="step.value === RegistrationSteps.LanguageSelection"
 							:selected-language="lang"
 							@update:selected-language="onUpdateSelectedLanguage"
 						/>
+						<Welcome v-else-if="step.value === RegistrationSteps.Welcome" />
 					</VStepperWindowItem>
 				</template>
 			</VStepperWindow>
@@ -26,7 +27,7 @@
 					</VBtn>
 				</template>
 				<template #next>
-					<VSpacer v-if="stepValue === 1" />
+					<VSpacer v-if="stepValue < steps.length" />
 					<VBtn
 						variant="flat"
 						color="primary"
@@ -44,12 +45,22 @@
 
 <script setup lang="ts">
 import LanguageSelection from "./steps/LanguageSelection.vue";
+import Welcome from "./steps/Welcome.vue";
 import { LanguageType } from "@/serverApi/v3";
 import { useRegistration } from "@data-room";
 import { computed, onMounted, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useDisplay } from "vuetify";
 
+enum RegistrationSteps {
+	LanguageSelection = 1,
+	Welcome,
+	PasswordSetup,
+	DeclarationOfConsent,
+	ConfirmationCode,
+	Registration,
+}
+
 const { t } = useI18n();
 const { xs, sm } = useDisplay();
 const mobileView = computed(() => xs.value || sm.value);
@@ -61,10 +72,16 @@ const onUpdateSelectedLanguage = (value: string) => {
 	setSelectedLanguage(value as LanguageType);
 };
 
-const stepValue = ref(1);
+const stepValue = ref(RegistrationSteps.LanguageSelection);
+
+const focusHeading = () => {
+	const headingElement = document.getElementById(`step-heading-${stepValue.value - 1}`);
+	headingElement?.focus();
+};
 
-const onStepperClick = (value: number) => {
+const onStepperClick = (value: RegistrationSteps) => {
 	stepValue.value = value;
+	focusHeading();
 };
 
 onMounted(() => {
@@ -73,30 +90,45 @@ onMounted(() => {
 
 const steps = computed(() => [
 	{
-		value: 1,
+		value: RegistrationSteps.LanguageSelection,
 		title: t("common.labels.language"),
-		subtitle: t("pages.registrationExternalMembers.steps.language.subtitle"),
+		heading: t("pages.registrationExternalMembers.steps.language.heading"),
+		id: "language",
+	},
+	{
+		value: RegistrationSteps.Welcome,
+		title: t("common.labels.welcome"),
+		heading: t("common.labels.welcome"),
+		id: "welcome",
 	},
-	{ value: 2, title: t("common.labels.welcome"), subtitle: t("common.labels.welcome") },
 	{
-		value: 3,
+		value: RegistrationSteps.PasswordSetup,
 		title: t("common.labels.password"),
-		subtitle: t("pages.registrationExternalMembers.steps.password.subtitle"),
+		heading: t("pages.registrationExternalMembers.steps.password.heading"),
+		id: "password",
 	},
 	{
-		value: 4,
+		value: RegistrationSteps.DeclarationOfConsent,
 		title: t("pages.registrationExternalMembers.steps.declarationOfConsent.title"),
-		subtitle: t("pages.registrationExternalMembers.steps.declarationOfConsent.title"),
+		heading: t("pages.registrationExternalMembers.steps.declarationOfConsent.heading"),
+		id: "consent",
 	},
 	{
-		value: 5,
+		value: RegistrationSteps.ConfirmationCode,
 		title: t("pages.registrationExternalMembers.steps.confirmationCode.title"),
-		subtitle: t("pages.registrationExternalMembers.steps.confirmationCode.title"),
+		heading: t("pages.registrationExternalMembers.steps.confirmationCode.heading"),
+		id: "confirmation",
 	},
 	{
-		value: 6,
+		value: RegistrationSteps.Registration,
 		title: t("pages.registrationExternalMembers.steps.registration.title"),
-		subtitle: t("pages.registrationExternalMembers.steps.registration.subtitle"),
+		heading: t("pages.registrationExternalMembers.steps.registration.heading"),
+		id: "registration",
 	},
 ]);
 </script>
+<style scoped>
+.heading:focus {
+	outline: none;
+}
+</style>
diff --git a/src/modules/feature/room/registration/steps/Welcome.vue b/src/modules/feature/room/registration/steps/Welcome.vue
@@ -0,0 +1,21 @@
+<template>
+	<div class="mb-10">
+		<i18n-t keypath="pages.registrationExternalMembers.steps.welcome.heading" scope="global">
+			<template #dataProtection>
+				<strong>
+					{{ t("pages.registrationExternalMembers.steps.welcome.dataProtection") }}
+				</strong>
+			</template>
+			<template #tos>
+				<strong>
+					{{ t("pages.registrationExternalMembers.steps.welcome.tos") }}
+				</strong>
+			</template>
+		</i18n-t>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+</script>
