further Implementation Step 2

frontend/src/app/app.module.ts

@@ -27,6 +27,8 @@ import {MatButtonModule} from "@angular/material/button";
 import {MatRadioModule} from "@angular/material/radio";
 import {MatSelectModule} from "@angular/material/select";
 import {MatIconModule} from "@angular/material/icon";
+import {MatCheckboxModule} from "@angular/material/checkbox";
+import {MatTooltipModule} from "@angular/material/tooltip";
 
 @NgModule({
   declarations: [
@@ -61,6 +63,9 @@ import {MatIconModule} from "@angular/material/icon";
     MatButtonModule,
     MatRadioModule,
     MatSelectModule,
+    MatCheckboxModule,
+    MatTooltipModule,
+    MatIconModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

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

@@ -3,7 +3,49 @@
 <!--</button>-->
 
 <mat-stepper linear #stepper>
+  <!--  Step 2-->
+  <mat-step [stepControl]="secondFormGroup" [editable]="isEditable">
+    <form [formGroup]="secondFormGroup" class="flexContainerColumn  width30">
+      <ng-template matStepLabel>Banking Information</ng-template>
+      <mat-form-field appearance="fill">
+        <mat-label>Account Holder</mat-label>
+        <input matInput formControlName="accountHolder"
+               required>
+      </mat-form-field>
 
+      <mat-form-field appearance="fill">
+        <mat-label>IBAN</mat-label>
+        <input matInput formControlName="iban" required>
+      </mat-form-field>
+
+      <mat-form-field appearance="fill">
+        <mat-label>BIC</mat-label>
+        <input matInput formControlName="bic"
+               required>
+      </mat-form-field>
+
+      <mat-form-field appearance="fill">
+        <mat-label>Name of Financial Institute</mat-label>
+        <input matInput formControlName="nameOfFinancialInstitute"
+               required>
+      </mat-form-field>
+
+      <mat-form-field appearance="fill">
+        <mat-label>Amount in €/Month</mat-label>
+        <input matInput formControlName="amount" required>
+      </mat-form-field>
+
+      <div class="flexContainerRow width20">
+        <mat-checkbox formControlName="checked" required>Einzugsermächtigung</mat-checkbox>
+        <mat-icon aria-hidden="false" aria-label="Example home icon" matTooltip="{{infoText}}" matTooltipPosition="right">info</mat-icon>
+      </div>
+    </form>
+
+    <div class="buttonsContainer">
+      <button mat-button matStepperPrevious class="backButton">Back</button>
+      <button mat-button matStepperNext [disabled]="firstFormGroup.status == 'INVALID'" (click)="onClick()">Next</button>
+    </div>
+  </mat-step>
   <!--  Step 1-->
   <mat-step [stepControl]="firstFormGroup" class="firstStep">
     <form [formGroup]="firstFormGroup" class="formContainer">
@@ -38,7 +80,6 @@
               <mat-option value="divers">Divers</mat-option>
             </mat-select>
           </mat-form-field>
-
         </div>
         <div class="rightContainer">
 
@@ -69,45 +110,13 @@
     </div>
   </mat-step>
 
-  <!--  Step 2-->
-  <mat-step [stepControl]="secondFormGroup" [editable]="isEditable">
-    <form [formGroup]="secondFormGroup" class="formContainer2">
-      <ng-template matStepLabel>Banking Information</ng-template>
-      <mat-form-field appearance="fill">
-        <mat-label>Account Holder</mat-label>
-        <input matInput formControlName="accountHolder"
-               required>
-      </mat-form-field>
 
-      <mat-form-field appearance="fill">
-        <mat-label>IBAN</mat-label>
-        <input matInput formControlName="iban" required>
-      </mat-form-field>
-
-      <mat-form-field appearance="fill">
-        <mat-label>BIC</mat-label>
-        <input matInput formControlName="bic"
-               required>
-      </mat-form-field>
-
-      <mat-form-field appearance="fill">
-        <mat-label>Name of Financial Institute</mat-label>
-        <input matInput formControlName="nameOfFinancialInstitute"
-               required>
-      </mat-form-field>
-    </form>
-
-    <div class="buttonsContainer">
-    <button mat-button matStepperPrevious class="backButton">Back</button>
-    <button mat-button matStepperNext [disabled]="firstFormGroup.status == 'INVALID'" (click)="onClick()">Next</button>
-  </div>
-  </mat-step>
 
 <!--  &lt;!&ndash;  Step 1&ndash;&gt;-->
 <!--  <mat-step [stepControl]="firstFormGroup" class="firstStep">-->
 <!--    <form [formGroup]="firstFormGroup">-->
 <!--      <ng-template matStepLabel>Personal Information</ng-template>-->
-<!--      <div class="formContainer">-->
+<!--      <div class="formContainer1 width50">-->
 <!--        <div class="leftContainer">-->
 
 <!--          <mat-form-field appearance="fill">-->

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

@@ -23,21 +23,29 @@ button {
   color: white;
   background-color: #1576d5;
 }
-
+.flexContainerRow {
-.formContainer {
-  width: 50%;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  &.width50 {
+    width: 50%;
+  }
+  &.width20 {
+    width: 20%;
+  }
 }
 
-.formContainer2 {
+.flexContainerColumn {
-  width: 30%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  &.width30 {
+    width: 30%;
+  }
 }
 
+
+
 .leftContainer {
   display: flex;
   flex-direction: column;
@@ -48,6 +56,20 @@ button {
   flex-direction: column;
   width: 45%;
 }
+
 .backButton {
   margin-right: 10px;
 }
+
+mat-icon {
+  color: white;
+  scale: 80%;
+}
+
+mat-checkbox {
+  color: white;
+  margin-bottom: 16px;
+}
+
+
+

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

@@ -11,6 +11,12 @@ export class StudentRegisterComponent implements OnInit {
   firstFormGroup!: FormGroup;
   secondFormGroup!: FormGroup;
   isEditable = false;
+  infoText = "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" +
+    "wird zusammen mit dem nachfolgenden Monatsbeitrag vom gleichen Konto abgebucht."
 
   constructor(private _formBuilder: FormBuilder) {}
 
@@ -29,6 +35,8 @@ export class StudentRegisterComponent implements OnInit {
       iban:  ['', [Validators.required, Validators.pattern(/^\d+$/)]],
       bic: ['', Validators.required],
       nameOfFinancialInstitute: ['', Validators.required],
+      amount:  ['', [Validators.required, Validators.pattern(/^\d+$/)]],
+      checked: ['', Validators.required],
     });
   }