cleanup display

src/app/app.module.ts

@@ -52,6 +52,7 @@ import { DatetimeInterceptorService } from "./services/datetime-interceptor.serv
 import { MatDatepickerModule } from "@angular/material/datepicker";
 import { QuickstartComponent } from './pages/quickstart/quickstart.component';
 import {MatStepperModule} from "@angular/material/stepper";
+import {MatListModule} from "@angular/material/list";
 
 
 @NgModule({
@@ -78,40 +79,41 @@ import {MatStepperModule} from "@angular/material/stepper";
 		LongPressDirective,
   QuickstartComponent
 	],
-	imports: [
-		BrowserModule,
-		HttpClientModule,
-		AuthRoutingModule,
-		AppRoutingModule,
-		BrowserAnimationsModule,
-		MatSnackBarModule,
-		MatProgressBarModule,
-		MatButtonModule,
-		MatIconModule,
-		MatSelectModule,
-		MatMenuModule,
-		MatSliderModule,
-		MatTooltipModule,
-		MatRippleModule,
-		MatCardModule,
-		ReactiveFormsModule,
-		MatInputModule,
-		MatFormFieldModule,
-		MatDialogModule,
-		FormsModule,
-		MatTabsModule,
-		MatCheckboxModule,
-		AuthModule,
-		MatChipsModule,
-		MatAutocompleteModule,
-		MatExpansionModule,
-		InfiniteScrollModule,
-		MatBadgeModule,
-		HammerModule,
-		MatDatepickerModule,
-		MatNativeDateModule,
-		MatStepperModule
-	],
+    imports: [
+        BrowserModule,
+        HttpClientModule,
+        AuthRoutingModule,
+        AppRoutingModule,
+        BrowserAnimationsModule,
+        MatSnackBarModule,
+        MatProgressBarModule,
+        MatButtonModule,
+        MatIconModule,
+        MatSelectModule,
+        MatMenuModule,
+        MatSliderModule,
+        MatTooltipModule,
+        MatRippleModule,
+        MatCardModule,
+        ReactiveFormsModule,
+        MatInputModule,
+        MatFormFieldModule,
+        MatDialogModule,
+        FormsModule,
+        MatTabsModule,
+        MatCheckboxModule,
+        AuthModule,
+        MatChipsModule,
+        MatAutocompleteModule,
+        MatExpansionModule,
+        InfiniteScrollModule,
+        MatBadgeModule,
+        HammerModule,
+        MatDatepickerModule,
+        MatNativeDateModule,
+        MatStepperModule,
+        MatListModule
+    ],
 	bootstrap: [AppComponent],
 	exports: [
 		FallbackDirective

src/app/pages/quickstart/quickstart.component.html

@@ -1,41 +1,43 @@
-<p>Welcome in Quickstart</p>
-
-<img src="logo.jpg" class="logo" alt="Kyoo">
-
-<button (click)="toggleDisplayDivIf()" *ngIf="isShowDivIf">Start Config</button>
+<div class="welcome" *ngIf="isShowDivIf">
+	<img src="logo.jpg" class="logo" alt="Kyoo">
+	<div class="text_box">
+		<br>
+		<h4>Thanks for installing Kyoo</h4>
+		<br>
+		<button (click)="toggleDisplayDivIf()" class="mr-xl-5" color="accent"
+				mat-raised-button matTooltip="Start Configuration" matTooltipPosition="above">
+			<mat-icon>tune</mat-icon>
+			Start Configuration
+		</button>
+	</div>
+</div>
 
 <div class="content" *ngIf="!isShowDivIf">
 	<mat-stepper class="stepper" [orientation]="(stepperOrientation | async)!">
-		<mat-step [stepControl]="firstFormGroup" label="Fill out your name">
+		<mat-step [stepControl]="firstFormGroup" label="Media Library" state="library">
 			<form [formGroup]="firstFormGroup">
-				<mat-form-field appearance="outline">
-					<mat-label>Name</mat-label>
-					<input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
-				</mat-form-field>
+				<div>
+
+				</div>
 				<div>
 					<button mat-button matStepperNext>Next</button>
 				</div>
 			</form>
 		</mat-step>
-		<mat-step [stepControl]="secondFormGroup" label="Fill out your address">
+		<mat-step [stepControl]="secondFormGroup" label="Preferred MetaData Language">
 			<form [formGroup]="secondFormGroup">
-				<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 [stepControl]="thirdFormGroup" label="Fill out your phone number">
+		<mat-step [stepControl]="thirdFormGroup" label="Remote Access">
 			<form [formGroup]="thirdFormGroup">
-				<mat-form-field appearance="fill">
-					<mat-label>Phone number</mat-label>
-					<input matInput formControlName="thirdCtrl" placeholder="Ex. 12345678" required>
-				</mat-form-field>
+				<div>
+
+				</div>
 				<div>
 					<button mat-button matStepperPrevious>Back</button>
 					<button mat-button matStepperNext>Next</button>
@@ -47,6 +49,7 @@
 			<p>You are now done.</p>
 			<div>
 				<button mat-button matStepperPrevious>Back</button>
+				<button mat-button (click)="Register()">Register</button>
 			</div>
 		</mat-step>
 	</mat-stepper>

src/app/pages/quickstart/quickstart.component.scss

@@ -1,8 +1,3 @@
-.logo{
-	display: block;
-	margin-left: auto;
-	margin-right: auto;
-}
 .stepper {
 	margin-top: 8px;
 	background-color: #0a1128;
@@ -11,3 +6,22 @@
 .mat-form-field {
 	margin-top: 16px;
 }
+
+.content{
+	padding-top: 1.5%;
+}
+
+.welcome{
+	padding-top: 1.5%;
+	>.logo{
+		display: block;
+		margin-left: auto;
+		margin-right: auto;
+	}
+	>.text_box{
+		text-align: center;
+	}
+}
+.mr-xl-5{
+	margin-right: 0 !important;
+}

src/app/pages/quickstart/quickstart.component.ts

@@ -9,6 +9,7 @@ import { BreakpointObserver } from "@angular/cdk/layout";
 import { StepperOrientation } from "@angular/material/stepper";
 import { Observable } from "rxjs";
 import { map } from "rxjs/operators";
+import { AuthService } from "../../auth/auth.service";
 
 
 @Component({
@@ -18,6 +19,23 @@ import { map } from "rxjs/operators";
 })
 export class QuickstartComponent implements OnDestroy, AfterViewInit {
 
+
+	constructor(private route: ActivatedRoute,
+				         public authManager: AuthService,
+				         private snackBar: MatSnackBar,
+				         private sanitizer: DomSanitizer,
+				         private title: Title,
+				         private router: Router,
+				         private dialog: MatDialog,
+				         private http: HttpClient,
+				         private _formBuilder: FormBuilder,
+				         breakpointObserver: BreakpointObserver)
+	{
+		this.title.setTitle("Quickstart");
+		this.stepperOrientation = breakpointObserver.observe("(min-width: 800px)")
+			.pipe(map(({matches}) => matches ? "horizontal" : "vertical"));
+	}
+
 	private scrollZone: HTMLElement;
 	private toolbar: HTMLElement;
 
@@ -34,23 +52,19 @@ export class QuickstartComponent implements OnDestroy, AfterViewInit {
 
 	isShowDivIf = true;
 
+
+
+	// tslint:disable-next-line:typedef
 	toggleDisplayDivIf() {
 
 		this.isShowDivIf = !this.isShowDivIf;
 
 	}
-	constructor(private route: ActivatedRoute,
-				         private snackBar: MatSnackBar,
-				         private sanitizer: DomSanitizer,
-				         private title: Title,
-				         private router: Router,
-				         private dialog: MatDialog,
-				         private http: HttpClient,
-				         private _formBuilder: FormBuilder,
-				         breakpointObserver: BreakpointObserver) {
-		this.title.setTitle("Quickstart");
-		this.stepperOrientation = breakpointObserver.observe("(min-width: 800px)")
-			.pipe(map(({matches}) => matches ? "horizontal" : "vertical"));
+
+
+	Register(): void
+	{
+		this.authManager.login();
 	}
 
 	ngOnDestroy(): void {

src/styles.scss

@@ -118,3 +118,10 @@ mat-icon
 	-o-user-drag: none;
 	user-drag: none;
 }
+
+.mat-step-header .mat-step-icon-selected {
+	background-color: #e23c00;
+	color: #fff;
+}
+
+