frontend/src/app/components/students/student-register/student-register.component.html

@@ -2,7 +2,7 @@
 <!--  {{!isEditable ? 'Enable edit mode' : 'Disable edit mode'}}-->
 <!--</button>-->
 
-<mat-stepper linear #stepper>
+<mat-stepper>
   <!--  Step 1-->
   <mat-step [stepControl]="firstFormGroup" class="firstStep">
     <form [formGroup]="firstFormGroup" class="flexContainerRow width50">
@@ -87,8 +87,10 @@
 
   <!--  Step 2-->
   <mat-step [stepControl]="secondFormGroup">
-    <form [formGroup]="secondFormGroup" class="flexContainerColumn width30">
+    <form [formGroup]="secondFormGroup" class="flexContainerColumn width50">
       <ng-template matStepLabel>Bank Informationen</ng-template>
+      <div class="flexContainerRow">
+        <div class="leftContainer">
           <mat-form-field appearance="fill">
             <mat-label>Kontoinhaber</mat-label>
             <input matInput formControlName="accountHolder" required />
@@ -98,7 +100,9 @@
             <mat-label>IBAN</mat-label>
             <input matInput formControlName="iban" required />
           </mat-form-field>
+        </div>
 
+        <div class="rightContainer">
           <mat-form-field appearance="fill">
             <mat-label>BIC</mat-label>
             <input matInput formControlName="bic" required />
@@ -108,18 +112,12 @@
             <mat-label>Name der Bank</mat-label>
             <input matInput formControlName="nameOfFinancialInstitute" required />
           </mat-form-field>
+        </div>
+      </div>
 
-
-      <div class="flexContainerRow width20">
-        <mat-checkbox formControlName="einzugsermaechtigung" required
-          >Einzugsermächtigung</mat-checkbox
-        >
-        <mat-icon
-          aria-hidden="false"
-          matTooltip="{{ infoText }}"
-          matTooltipPosition="right"
-          >info</mat-icon
-        >
+      <div class="flexContainerColumn">
+        <textarea cols="30" rows="7" readonly>{{infoTextEinzugermaechtigung}}</textarea>
+        <mat-checkbox formControlName="einzugsermaechtigung" required>Einzugsermächtigung</mat-checkbox>
       </div>
     </form>
 
@@ -136,30 +134,21 @@
 
   <!--  Step 3-->
   <mat-step>
-    <form [formGroup]="thirdFormGroup" class="flexContainerColumn width30">
-      <ng-template matStepLabel>Consent</ng-template>
-      <div class="flexContainerRow width20">
+    <form [formGroup]="thirdFormGroup" class="flexContainerColumn width50">
+      <ng-template matStepLabel>Einwilligung</ng-template>
+      <div class="flexContainerColumn">
+        <textarea cols="30" rows="10" readonly>{{infoTextEinwilligungserklaerung}}</textarea>
         <mat-checkbox formControlName="einwilligung" required
         >Einwilligung zur Erhebung, Speicherung, Verarbeitung und Nutzung von
           personenbezogenen Daten
         </mat-checkbox>
-        <mat-icon
-          aria-hidden="false"
-          matTooltip="{{ infoTextEinwilligungserklaerung }}"
-          matTooltipPosition="right"
-          >info</mat-icon
-        >
       </div>
-      <div class="flexContainerRow width20">
+      <br style="margin-bottom: 20px;">
+      <div class="flexContainerColumn">
+        <textarea cols="30" rows="10" readonly>{{infoTextEinverstaendniserklaerung}}</textarea>
         <mat-checkbox formControlName="einverstaendniserklaerung" required
         >Einverständniserklärung zur Nutzung von Bild- und Videomaterial
         </mat-checkbox>
-        <mat-icon
-          aria-hidden="false"
-          matTooltip="{{ infoTextEinverstaendniserklaerung }}"
-          matTooltipPosition="right"
-          >info</mat-icon
-        >
       </div>
     </form>
 
@@ -174,4 +163,5 @@
       </button>
     </div>
   </mat-step>
+
 </mat-stepper>

frontend/src/app/components/students/student-register/student-register.component.scss

@@ -27,12 +27,12 @@ button {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  &.width50 {
+}
+.width50 {
   width: 50%;
-  }
-  &.width20 {
+}
+.width20 {
   width: 20%;
-  }
 }
 
 .flexContainerColumn {
@@ -63,3 +63,10 @@ mat-icon {
   color: white;
   scale: 80%;
 }
+
+textarea {
+  font-family: inherit;
+  border-radius: 10px 10px 0px 0px;
+  padding: 5px;
+  resize: none;
+}

frontend/src/app/components/students/student-register/student-register.component.ts

@@ -7,7 +7,10 @@ export const MY_DATE_FORMAT= {
     dateInput: 'DD.MM.YYYY'
   },
   display: {
-    dateInput: 'DD.MM.YYYY'
+    dateInput: 'DD.MM.YYYY',
+    monthYearLabel: 'MMM YYYY',
+    dateA11yLabel: 'YYYY-MM-DD',
+    monthYearA11yLabel: 'MMMM YYYY'
   }
 };
 
@@ -21,7 +24,7 @@ export class StudentRegisterComponent implements OnInit {
   firstFormGroup!: FormGroup;
   secondFormGroup!: FormGroup;
   thirdFormGroup!: FormGroup;
-  infoText =
+  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' +