frontend/angular.json

@@ -31,6 +31,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",
               "src/styles.scss"
             ],
             "scripts": []
@@ -99,6 +100,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",
               "src/styles.scss"
             ],
             "scripts": []

frontend/src/app/app-routing.module.ts

@@ -3,11 +3,13 @@ import { RouterModule, Routes } from '@angular/router';
 import { StudentListComponent } from './components/students/student-list/student-list.component';
 import { VisitsComponent } from './components/visits/visits.component';
 import { VisitsDatetimeComponent } from './components/visits/visits-datetime/visits-datetime.component';
+import {StudentRegisterComponent} from "./components/students/student-register/student-register.component";
 
 const routes: Routes = [
   { path: 'students', component: StudentListComponent },
   { path: 'visits', component: VisitsComponent },
   { path: 'select', component: VisitsDatetimeComponent },
+  { path: 'register', component: StudentRegisterComponent },
   { path: 'visits/:date/:time', component: VisitsComponent },
   { path: '**', redirectTo: 'students' }
 ];

frontend/src/app/app.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { FormsModule } from '@angular/forms';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { StudentListComponent } from './components/students/student-list/student-list.component';
@@ -20,6 +20,12 @@ import { VisitsDatetimeComponent } from './components/visits/visits-datetime/vis
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
+import { StudentRegisterComponent } from './components/students/student-register/student-register.component';
+import {MatStepperModule} from "@angular/material/stepper";
+import {MatInputModule} from "@angular/material/input";
+import {MatButtonModule} from "@angular/material/button";
+import {MatRadioModule} from "@angular/material/radio";
+import {MatSelectModule} from "@angular/material/select";
 
 @NgModule({
   declarations: [
@@ -32,7 +38,8 @@ import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
     EnrollPipe,
     VisitsComponent,
     StudentEnrollComponent,
-    VisitsDatetimeComponent
+    VisitsDatetimeComponent,
+    StudentRegisterComponent,
   ],
   imports: [
     BrowserModule,
@@ -47,6 +54,12 @@ import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
     MatFormFieldModule,
     MatRippleModule,
     MatNativeDateModule,
+    MatStepperModule,
+    ReactiveFormsModule,
+    MatInputModule,
+    MatButtonModule,
+    MatRadioModule,
+    MatSelectModule
   ],
   providers: [],
   bootstrap: [AppComponent]

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

@@ -0,0 +1,84 @@
+<!--<button mat-raised-button (click)="isEditable = !isEditable">-->
+<!--  {{!isEditable ? 'Enable edit mode' : 'Disable edit mode'}}-->
+<!--</button>-->
+
+<mat-stepper linear #stepper>
+  <mat-step [stepControl]="firstFormGroup" class="firstStep">
+    <form [formGroup]="firstFormGroup">
+      <ng-template matStepLabel>Personal Information</ng-template>
+      <div class="formContainer">
+        <div class="leftContainer">
+
+          <mat-form-field appearance="fill">
+            <mat-label>Name</mat-label>
+            <input matInput formControlName="firstCtrl" placeholder="Last name, First name" required>
+          </mat-form-field>
+
+          <mat-form-field appearance="fill">
+            <mat-label>Surname</mat-label>
+            <input matInput formControlName="firstCtrl" placeholder="Last name, First name" required>
+          </mat-form-field>
+
+          <mat-form-field appearance="fill">
+            <mat-label>Birthdate</mat-label>
+            <input matInput formControlName="firstCtrl" placeholder="Last name, First name" required>
+          </mat-form-field>
+
+          <mat-form-field>
+            <mat-label>Gender</mat-label>
+            <mat-select>
+              <mat-option>Male</mat-option>
+              <mat-option value="valid">Female</mat-option>
+              <mat-option value="invalid">Divers</mat-option>
+            </mat-select>
+          </mat-form-field>
+
+        </div>
+        <div class="rightContainer">
+          <mat-form-field appearance="fill">
+            <mat-label>Address</mat-label>
+            <input matInput formControlName="firstCtrl" placeholder="Last name, First name" required>
+          </mat-form-field>
+          <mat-form-field appearance="fill">
+            <mat-label>Postal Code</mat-label>
+            <input matInput formControlName="firstCtrl" placeholder="Last name, First name" required>
+          </mat-form-field>
+          <mat-form-field appearance="fill">
+            <mat-label>Phone</mat-label>
+            <input matInput formControlName="firstCtrl" placeholder="Last name, First name" required>
+          </mat-form-field>
+          <mat-form-field appearance="fill">
+            <mat-label>E-Mail</mat-label>
+            <input matInput formControlName="firstCtrl" placeholder="Last name, First name" required>
+          </mat-form-field>
+        </div>
+      </div>
+
+      <div>
+        <button mat-button matStepperNext>Next</button>
+      </div>
+    </form>
+  </mat-step>
+  <mat-step [stepControl]="secondFormGroup" [editable]="isEditable">
+    <form [formGroup]="secondFormGroup">
+      <ng-template matStepLabel>Fill out your address</ng-template>
+      <mat-form-field appearance="fill">
+        <mat-label>Address</mat-label>
+        <input matInput formControlName="secondCtrl" placeholder="Ex. 1 Main St, New York, NY"
+               required>
+      </mat-form-field>
+      <div>
+        <button mat-button matStepperPrevious>Back</button>
+        <button mat-button matStepperNext>Next</button>
+      </div>
+    </form>
+  </mat-step>
+  <mat-step>
+    <ng-template matStepLabel>Done</ng-template>
+    <p>You are now done.</p>
+    <div>
+      <button mat-button matStepperPrevious>Back</button>
+      <button mat-button (click)="stepper.reset()">Reset</button>
+    </div>
+  </mat-step>
+</mat-stepper>

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

@@ -0,0 +1,43 @@
+.mat-stepper-horizontal {
+  margin-top: 8px;
+}
+
+.mat-form-field {
+  margin-top: 16px;
+}
+
+.mat-stepper-horizontal {
+  background-color: transparent;
+}
+
+input, button {
+  color: white;
+}
+
+button {
+  background-color: #0366d6;
+}
+
+
+::selection {
+  color: white;
+  background-color: #1576d5;
+}
+
+.formContainer {
+  width: 50%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+}
+.leftContainer {
+  display: flex;
+  flex-direction: column;
+  width: 45%;
+}
+.rightContainer {
+  display: flex;
+  flex-direction: column;
+  width: 45%;
+}

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

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StudentRegisterComponent } from './student-register.component';
+
+describe('StudentRegisterComponent', () => {
+  let component: StudentRegisterComponent;
+  let fixture: ComponentFixture<StudentRegisterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ StudentRegisterComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StudentRegisterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+import {FormBuilder, FormGroup, Validators} from "@angular/forms";
+
+@Component({
+  selector: 'li-student-register',
+  templateUrl: './student-register.component.html',
+  styleUrls: ['./student-register.component.scss']
+})
+
+export class StudentRegisterComponent implements OnInit {
+  firstFormGroup!: FormGroup;
+  secondFormGroup!: FormGroup;
+  isEditable = false;
+
+  constructor(private _formBuilder: FormBuilder) {}
+
+  ngOnInit() {
+    this.firstFormGroup = this._formBuilder.group({
+      firstCtrl: ['', Validators.required],
+    });
+    this.secondFormGroup = this._formBuilder.group({
+      secondCtrl: ['', Validators.required],
+    });
+  }
+}

frontend/src/styles.scss

@@ -66,3 +66,5 @@ body {
     background-color: #1b6ec2;
     border-color: #1861ac;    
 }
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }