diff --git a/frontend/src/app/components/students/student-register/student-register.component.html b/frontend/src/app/components/students/student-register/student-register.component.html index 1ee0c8c..e5c5a72 100644 --- a/frontend/src/app/components/students/student-register/student-register.component.html +++ b/frontend/src/app/components/students/student-register/student-register.component.html @@ -1,7 +1,8 @@ +
- -
+ + Persönliche Informationen
@@ -28,8 +29,8 @@ matInput [matDatepicker]="birthdatePicker" formControlName="birthdate" + placeholder="DD.MM.YYYY" required /> - DD.MM.YYYY @@ -40,7 +41,7 @@ Geschlecht - + männlich weiblich divers @@ -60,7 +61,7 @@ Telefon - + @@ -71,7 +72,6 @@
-
-
@@ -127,7 +126,6 @@
- @@ -154,10 +152,12 @@ mat-button matStepperNext [disabled]="thirdFormGroup.status == 'INVALID'" + (click)="submit()" > Fertig - + + diff --git a/frontend/src/app/components/students/student-register/student-register.component.scss b/frontend/src/app/components/students/student-register/student-register.component.scss index 81190a6..b45bf5a 100644 --- a/frontend/src/app/components/students/student-register/student-register.component.scss +++ b/frontend/src/app/components/students/student-register/student-register.component.scss @@ -1,24 +1,23 @@ +.stepperContainer { + display: flex; + justify-content: space-around; +} + .mat-stepper-horizontal { margin-top: 8px; + background-color: transparent; + min-width: 50%; } .mat-form-field { margin-top: 16px; } -.mat-stepper-horizontal { - background-color: transparent; -} - .flexContainerRow { display: flex; flex-direction: row; justify-content: space-between; } - -.width50 { - width: 50%; -} .width20 { width: 20%; } @@ -48,7 +47,6 @@ textarea { font-family: inherit; - border-radius: 10px 10px 0px 0px; padding: 5px; resize: none; } diff --git a/frontend/src/app/components/students/student-register/student-register.component.ts b/frontend/src/app/components/students/student-register/student-register.component.ts index affc528..9a804fa 100644 --- a/frontend/src/app/components/students/student-register/student-register.component.ts +++ b/frontend/src/app/components/students/student-register/student-register.component.ts @@ -26,40 +26,39 @@ export class StudentRegisterComponent implements OnInit { secondFormGroup!: FormGroup; thirdFormGroup!: FormGroup; infoTextEinzugermaechtigung = - 'Hiermit ermächtige ich die Tanz- und Sportschule Li-Dance, Inh. Lydia Kolepp (nachfolgend Li-\n' + - 'Dance) die Monatsbeiträge i.H.v. oben genannten Betrag, diverse Einmalzahlungen und sonstige\n' + - 'Verbindlichkeiten zu Lasten meines Kontos einzuziehen.\n' + - 'Bitte beachten Sie, dass im Falle einer unberechtigten Rücklastschrift Li-Dance ein\n' + - 'Verwaltungsaufwand entsteht und eine Gebühr i.H.v. derzeit 15,- € berechnet wird. Diese Gebühr\n' + + 'Hiermit ermächtige ich die Tanz- und Sportschule Li-Dance, Inh. Lydia Kolepp (nachfolgend Li-Dance) die Monatsbeiträge i.H.v. oben genannten Betrag, diverse Einmalzahlungen und sonstige' + + 'Verbindlichkeiten zu Lasten meines Kontos einzuziehen.' + + 'Bitte beachten Sie, dass im Falle einer unberechtigten Rücklastschrift Li-Dance ein' + + 'Verwaltungsaufwand entsteht und eine Gebühr i.H.v. derzeit 15,- € berechnet wird. Diese Gebühr' + 'wird zusammen mit dem nachfolgenden Monatsbeitrag vom gleichen Konto abgebucht.'; infoTextEinwilligungserklaerung = - 'Ich bin darüber informiert worden, dass meine personenbezogenen Daten aufgrund rechtlicher\n' + - 'Vorgaben mindestens 10 Jahre nach Vertragsende aufbewahrt werden müssen.\n' + - 'Ich bin damit einverstanden, dass die oben genannten personenbezogenen Daten zu den oben\n' + - 'genannten Zwecken erhoben, gespeichert, verarbeitet, genutzt und ggfs. weitergegeben werden.\n' + - 'Ich bin darauf hingewiesen worden, dass die im Rahmen der vorstehend genannten Zwecke\n' + - 'erhobenen persönlichen Daten meiner Person unter Beachtung der EU-\n' + - 'Datenschutzgrundverordnung (DSGVO) erhoben, gespeichert, genutzt und übermittelt werden.\n' + - 'Ich bin zudem darauf hingewiesen worden, dass die Erhebung, Speicherung, Verarbeitung und\n' + - 'Nutzung meiner Daten auf freiwilliger Basis erfolgt.\n' + - 'Ich bin darüber informiert worden, dass diese Einverständniserklärung jederzeit mit sofortiger\n' + - 'Wirkung verweigert, bzw. jederzeit mit Wirkung für die Zukunft widerrufen werden kann. Meine\n' + + 'Ich bin darüber informiert worden, dass meine personenbezogenen Daten aufgrund rechtlicher' + + 'Vorgaben mindestens 10 Jahre nach Vertragsende aufbewahrt werden müssen.' + + 'Ich bin damit einverstanden, dass die oben genannten personenbezogenen Daten zu den oben' + + 'genannten Zwecken erhoben, gespeichert, verarbeitet, genutzt und ggfs. weitergegeben werden.' + + 'Ich bin darauf hingewiesen worden, dass die im Rahmen der vorstehend genannten Zwecke' + + 'erhobenen persönlichen Daten meiner Person unter Beachtung der EU-' + + 'Datenschutzgrundverordnung (DSGVO) erhoben, gespeichert, genutzt und übermittelt werden.' + + 'Ich bin zudem darauf hingewiesen worden, dass die Erhebung, Speicherung, Verarbeitung und' + + 'Nutzung meiner Daten auf freiwilliger Basis erfolgt.' + + 'Ich bin darüber informiert worden, dass diese Einverständniserklärung jederzeit mit sofortiger' + + 'Wirkung verweigert, bzw. jederzeit mit Wirkung für die Zukunft widerrufen werden kann. Meine' + 'Widerrufserklärung werde ich richten an die unten angegebene Adresse'; infoTextEinverstaendniserklaerung = - 'Ich bin damit einverstanden, dass Bilder und Videos der Tanzschule und der Veranstaltungen,\n' + - 'die durch die Tanzschule organisiert sind und/oder an denen die Tanzschule teilnimmt, auf\n' + - 'denen ich selbst, mein Sohn oder meine Tochter zu sehen ist auf den Webseiten von Li-Dance und in anderen Online- und/oder Printmedien veröffentlicht\n' + - 'werden und für Werbezwecke von Li-Dance genutzt werden dürfen. Rechtsgrundlage: Das Recht am eigenen Bild ist ein Teil des vom Gesetz geschützten\n' + - 'allgemeinen Persönlichkeitsrechts (§22 Kunsturheberrechtsgesetz). Es gilt der Grundsatz, dass\n' + - 'Bild- und Video-Material nur mit Einwilligung des Abgebildeten verbreitet oder veröffentlicht\n' + - 'werden kann. Es handelt sich hierbei um eine rechtsgeschäftliche Willenserklärung. Deshalb\n' + - 'kann bei Minderjährigen eine Einwilligung nur durch den gesetzlichen Vertreter erfolgen.\n' + - 'Diese Einverständniserklärung kann mit sofortiger Wirkung verweigert, bzw. jederzeit mit\n' + - 'Wirkung für die Zukunft widerrufen werden. Ein Widerruf kann einen Ausschluss aus der\n' + - 'jeweiligen Veranstaltung zur Folge haben.\n' + - 'Ein späterer rückwirkender Widerruf für aktuell stattfindende bzw. bereits stattgefundene\n' + + 'Ich bin damit einverstanden, dass Bilder und Videos der Tanzschule und der Veranstaltungen,' + + 'die durch die Tanzschule organisiert sind und/oder an denen die Tanzschule teilnimmt, auf' + + 'denen ich selbst, mein Sohn oder meine Tochter zu sehen ist auf den Webseiten von Li-Dance und in anderen Online- und/oder Printmedien veröffentlicht' + + 'werden und für Werbezwecke von Li-Dance genutzt werden dürfen. Rechtsgrundlage: Das Recht am eigenen Bild ist ein Teil des vom Gesetz geschützten' + + 'allgemeinen Persönlichkeitsrechts (§22 Kunsturheberrechtsgesetz). Es gilt der Grundsatz, dass' + + 'Bild- und Video-Material nur mit Einwilligung des Abgebildeten verbreitet oder veröffentlicht' + + 'werden kann. Es handelt sich hierbei um eine rechtsgeschäftliche Willenserklärung. Deshalb' + + 'kann bei Minderjährigen eine Einwilligung nur durch den gesetzlichen Vertreter erfolgen.' + + 'Diese Einverständniserklärung kann mit sofortiger Wirkung verweigert, bzw. jederzeit mit' + + 'Wirkung für die Zukunft widerrufen werden. Ein Widerruf kann einen Ausschluss aus der' + + 'jeweiligen Veranstaltung zur Folge haben.' + + 'Ein späterer rückwirkender Widerruf für aktuell stattfindende bzw. bereits stattgefundene' + 'Veranstaltungen ist ausgeschlossen.'; constructor(private _formBuilder: FormBuilder, private registerService: RegisterService) {} @@ -72,14 +71,15 @@ export class StudentRegisterComponent implements OnInit { birthdate: ['', Validators.required], postalCode: ['', [Validators.required, Validators.pattern(/^\d+$/)]], //^: Asserts the start of the string. \d+: Matches one or more digits.$: Asserts the end of the string. address: ['', Validators.required], - phone: ['', [Validators.required, Validators.pattern(/^\d+$/)]], + phone: ['', [Validators.required, Validators.pattern(/^(\+?\d{1,3})?[ ]*\d{9,}$/)]], + gender: ['', Validators.required], email: ['', [Validators.required, Validators.email]], }); this.secondFormGroup = this._formBuilder.group({ accountHolder: ['', Validators.required], iban: ['', [Validators.required, ValidatorService.validateIban]], - bic: ['', Validators.required], + bic: ['', [Validators.required, Validators.pattern(/^[A-Z]{6}[A-Z0-9]{2}([A-Z0-9]{3})?$/)]], nameOfFinancialInstitute: ['', Validators.required], directDebitAuthorization: ['', Validators.required], }); @@ -105,6 +105,10 @@ export class StudentRegisterComponent implements OnInit { } } + removeWhiteSpace(input:string):string { + return input.replace(/\s+/g, '') + } + submit() { const studentRegistration: StudentRegistration = { // First Form Group @@ -113,7 +117,7 @@ export class StudentRegisterComponent implements OnInit { birthdate: this.firstFormGroup.get('birthdate')?.value, postalCode: this.firstFormGroup.get('postalCode')?.value, address: this.firstFormGroup.get('address')?.value, - phone: this.firstFormGroup.get('phone')?.value, + phone: this.removeWhiteSpace(this.firstFormGroup.get('phone')?.value), email: this.firstFormGroup.get('email')?.value, // Second Form Group diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 56f924a..949e7c4 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -23,6 +23,10 @@ $my-theme: mat.define-light-theme(( .mdc-button { background: rgba(255, 255, 255, 0.82) !important; } +.mat-horizontal-stepper-wrapper { + width: 100%; +} + body {