Adding a quicksart dialog

src/app/app.component.ts

@@ -16,6 +16,7 @@ import { LibraryService } from "./services/api.service";
 // noinspection ES6UnusedImports
 import * as $ from "jquery";
 import ChangeEvent = JQuery.ChangeEvent;
+import { QuickstartComponent } from "./pages/quickstart/quickstart.component";
 
 @Component({
 	selector: "app-root",
@@ -61,6 +62,11 @@ export class AppComponent
 		AppComponent.isMobile = !!navigator.userAgent.match(/Mobi/);
 		if (!AppComponent.isMobile)
 			document.body.classList.add("hoverEnabled");
+
+		this.dialog.open(QuickstartComponent, {
+			width: "60%",
+			height: "70%",
+		});
 	}
 
 	get isAuthenticated(): boolean

src/app/app.module.ts

@@ -48,6 +48,10 @@ import { ShowGridComponent } from "./components/show-grid/show-grid.component";
 import { MatBadgeModule } from "@angular/material/badge";
 import { StartupService } from "./services/startup.service";
 import { LongPressDirective } from "./misc/long-press.directive";
+import { QuickstartComponent } from './pages/quickstart/quickstart.component';
+import { MatStepperModule } from "@angular/material/stepper";
+import { MatDividerModule } from "@angular/material/divider";
+import { MatRadioModule } from "@angular/material/radio";
 
 
 @NgModule({
@@ -71,7 +75,8 @@ import { LongPressDirective } from "./misc/long-press.directive";
 		BufferToWidthPipe,
 		VolumeToButtonPipe,
 		SupportedButtonPipe,
-		LongPressDirective
+		LongPressDirective,
+		QuickstartComponent
 	],
 	imports: [
 		BrowserModule,
@@ -102,7 +107,10 @@ import { LongPressDirective } from "./misc/long-press.directive";
 		MatExpansionModule,
 		InfiniteScrollModule,
 		MatBadgeModule,
-		HammerModule
+		HammerModule,
+		MatStepperModule,
+		MatDividerModule,
+		MatRadioModule
 	],
 	bootstrap: [AppComponent],
 	exports: [

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

@@ -0,0 +1,96 @@
+<mat-horizontal-stepper [linear]="true">
+	<mat-step [stepControl]="setupForm" class="step">
+		<form [formGroup]="setupForm" class="container" autocomplete="off">
+			<div class="basic">
+				<ng-template matStepLabel>Basic configuration</ng-template>
+				<div>
+					<h3>General configuration</h3>
+					<mat-form-field>
+						<mat-label>URL</mat-label>
+						<input matInput placeholder="http://localhost:5000" required formControlName="url">
+						<mat-error *ngIf="setupForm.controls.url.hasError('required')">
+							Required
+						</mat-error>
+					</mat-form-field>
+				</div>
+				<mat-divider [vertical]="true"></mat-divider>
+				<div>
+					<h3>Database configuration</h3>
+					<div>
+						<mat-radio-group aria-label="Select a database" value="2">
+							<mat-radio-button disabled value="1">SQLite</mat-radio-button>
+							<mat-radio-button value="2">PostgreSQL</mat-radio-button>
+						</mat-radio-group>
+					</div>
+					<mat-form-field>
+						<mat-label>Server URL</mat-label>
+						<input matInput placeholder="127.0.0.1" required formControlName="psqlServer">
+						<mat-error *ngIf="setupForm.controls.url.hasError('required')">
+							Required
+						</mat-error>
+					</mat-form-field>
+					<mat-form-field>
+						<mat-label>Port</mat-label>
+						<input matInput placeholder="5432" required formControlName="psqlPort">
+						<mat-error *ngIf="setupForm.controls.url.hasError('required')">
+							Required
+						</mat-error>
+					</mat-form-field>
+					<mat-form-field>
+						<mat-label>Database</mat-label>
+						<input matInput placeholder="kyooDB" required formControlName="psqlDb">
+						<mat-error *ngIf="setupForm.controls.url.hasError('required')">
+							Required
+						</mat-error>
+					</mat-form-field>
+					<mat-form-field>
+						<mat-label>Database User</mat-label>
+						<input autocomplete="off" matInput placeholder="kyoo" required formControlName="psqlUser">
+						<mat-error *ngIf="setupForm.controls.url.hasError('required')">
+							Required
+						</mat-error>
+					</mat-form-field>
+					<mat-form-field>
+						<mat-label>Database Password</mat-label>
+						<input autocomplete="off" matInput type="password" required  formControlName="psqlPassword">
+						<mat-error *ngIf="setupForm.controls.url.hasError('required')">
+							Required
+						</mat-error>
+					</mat-form-field>
+					<div>
+						<button mat-raised-button color="accent">Test connection</button>
+					</div>
+				</div>
+			</div>
+			<div class="step-buttons">
+				<button mat-button matStepperNext>Next</button>
+			</div>
+		</form>
+	</mat-step>
+	<mat-step [stepControl]="userForm" class="step">
+		<form [formGroup]="userForm" class="container" autocomplete="off">
+			<ng-template matStepLabel>Admin User</ng-template>
+			<div>
+				<!--TODO list users and allow the selection of one-->
+				<button>Create a new user</button>
+			</div>
+			<div class="step-buttons">
+				<button mat-button matStepperPrevious>Previous</button>
+				<button mat-button matStepperNext>Next</button>
+			</div>
+		</form>
+	</mat-step>
+	<mat-step [stepControl]="libraryForm" class="step">
+		<form [formGroup]="libraryForm" class="container" autocomplete="off">
+			<ng-template matStepLabel>Create libraries</ng-template>
+			<div>
+				<!--TODO list libraries-->
+				<button>Create a new library</button>
+			</div>
+			<div class="step-buttons">
+				<button mat-button matStepperPrevious>Previous</button>
+				<button mat-button matStepperNext>Next</button>
+			</div>
+		</form>
+	</mat-step>
+</mat-horizontal-stepper>

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

@@ -0,0 +1,64 @@
+.container
+{
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+
+	> .step-buttons
+	{
+		align-self: flex-end;
+	}
+}
+
+.basic
+{
+	display: flex;
+	flex-direction: row;
+	justify-content: space-around;
+	height: 100%;
+	> div
+	{
+		max-width: 70%;
+
+		> h3
+		{
+			margin-bottom: 1.5rem;
+			text-align: center;
+		}
+
+		> mat-form-field
+		{
+			width: 100%;
+		}
+
+		> div
+		{
+			align-content: center;
+			display: flex;
+			flex-wrap: wrap;
+			flex-direction: column;
+		}
+	}
+}
+
+::ng-deep .mat-stepper-horizontal
+{
+	display: flex !important;
+	flex-direction: column;
+	height: 100%;
+
+	> .mat-horizontal-content-container
+	{
+		height: 100%;
+
+		> .mat-horizontal-stepper-content
+		{
+			height: 100%;
+		}
+	}
+}
+
+.mat-radio-button ~ .mat-radio-button
+{
+	margin-left: 16px;
+}

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

@@ -0,0 +1,28 @@
+import { Component } from "@angular/core";
+import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+
+@Component({
+	selector: "app-quickstart",
+	templateUrl: "./quickstart.component.html",
+	styleUrls: ["./quickstart.component.scss"]
+})
+export class QuickstartComponent
+{
+	setupForm: FormGroup;
+	userForm: FormGroup;
+	libraryForm: FormGroup;
+
+	constructor(private formBuilder: FormBuilder)
+	{
+		this.setupForm = formBuilder.group({
+			url: ["", Validators.required],
+			psqlServer: ["", Validators.required],
+			psqlPort: ["", Validators.required],
+			psqlDb: ["", Validators.required],
+			psqlUser: ["", Validators.required],
+			psqlPassword: ["", Validators.required]
+		});
+		this.userForm = formBuilder.group({});
+		this.libraryForm = formBuilder.group({});
+	}
+}