product key page

setup-wizard/package.json

@@ -11,36 +11,36 @@
     "lint": "ng lint"
   },
   "dependencies": {
-    "@angular/common": "12.1.0",
-    "@angular/core": "12.1.0",
-    "@angular/forms": "12.1.0",
-    "@angular/platform-browser": "12.1.0",
-    "@angular/platform-browser-dynamic": "12.1.0",
-    "@angular/router": "12.1.0",
-    "@ionic/angular": "5.6.10",
-    "rxjs": "6.5.3",
-    "tslib": "2.3.0",
-    "zone.js": "0.11.4"
+    "@angular/common": "^12.2.1",
+    "@angular/core": "^12.2.1",
+    "@angular/forms": "^12.2.1",
+    "@angular/platform-browser": "^12.2.1",
+    "@angular/platform-browser-dynamic": "^12.2.1",
+    "@angular/router": "^12.2.1",
+    "@ionic/angular": "^5.6.13",
+    "rxjs": "^6.6.7",
+    "tslib": "^2.3.1",
+    "zone.js": "^0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "12.1.0",
-    "@angular-eslint/builder": "12.2.0",
-    "@angular-eslint/eslint-plugin": "12.2.0",
-    "@angular-eslint/eslint-plugin-template": "12.2.0",
-    "@angular-eslint/template-parser": "12.2.0",
-    "@angular/cli": "12.1.0",
-    "@angular/compiler": "12.1.0",
-    "@angular/compiler-cli": "12.1.0",
-    "@angular/language-service": "12.1.0",
-    "@ionic/angular-toolkit": "4.0.0",
-    "@types/node": "15.12.4",
-    "@typescript-eslint/eslint-plugin": "4.28.0",
-    "@typescript-eslint/parser": "4.28.0",
-    "eslint": "7.29.0",
-    "eslint-plugin-import": "2.23.4",
-    "eslint-plugin-jsdoc": "35.4.0",
-    "eslint-plugin-prefer-arrow": "1.2.3",
-    "ts-node": "10.0.0",
-    "typescript": "4.2.4"
+    "@angular-devkit/build-angular": "^12.2.1",
+    "@angular-eslint/builder": "^12.3.1",
+    "@angular-eslint/eslint-plugin": "^12.3.1",
+    "@angular-eslint/eslint-plugin-template": "^12.3.1",
+    "@angular-eslint/template-parser": "^12.3.1",
+    "@angular/cli": "^12.2.1",
+    "@angular/compiler": "^12.2.1",
+    "@angular/compiler-cli": "^12.2.1",
+    "@angular/language-service": "^12.2.1",
+    "@ionic/angular-toolkit": "^4.0.0",
+    "@types/node": "^16.6.0",
+    "@typescript-eslint/eslint-plugin": "^4.29.1",
+    "@typescript-eslint/parser": "^4.29.1",
+    "eslint": "^7.32.0",
+    "eslint-plugin-import": "^2.24.0",
+    "eslint-plugin-jsdoc": "^36.0.7",
+    "eslint-plugin-prefer-arrow": "^1.2.3",
+    "ts-node": "^10.2.0",
+    "typescript": "4.3.5"
   }
 }

setup-wizard/src/app/app-routing.module.ts

@@ -1,14 +1,6 @@
 import { NgModule } from '@angular/core';
 import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
 const routes: Routes = [
-  {
-    path: 'wizard',
-    loadChildren: () => import('./pages/home/home.module').then( m => m.HomePageModule),
-  },
-  {
-    path: 'recover',
-    loadChildren: () => import('./pages/recover/recover.module').then( m => m.RecoverPageModule),
-  },
   {
     path: 'embassy',
     loadChildren: () => import('./pages/embassy/embassy.module').then( m => m.EmbassyPageModule),
@@ -17,6 +9,18 @@ const routes: Routes = [
     path: 'loading',
     loadChildren: () => import('./pages/loading/loading.module').then( m => m.LoadingPageModule),
   },
+  {
+    path: 'product-key',
+    loadChildren: () => import('./pages/product-key/product-key.module').then( m => m.ProductKeyPageModule),
+  },
+  {
+    path: 'recover',
+    loadChildren: () => import('./pages/recover/recover.module').then( m => m.RecoverPageModule),
+  },
+  {
+    path: 'home',
+    loadChildren: () => import('./pages/home/home.module').then( m => m.HomePageModule),
+  },
 ];
 
 @NgModule({

setup-wizard/src/app/app.component.ts

@@ -17,6 +17,6 @@ export class AppComponent implements OnInit {
 
   async ngOnInit() {
     this.stateService.reset()
-    await this.navCtrl.navigateForward(`/wizard`)
+    await this.navCtrl.navigateForward(`/home`)
   }
 }

setup-wizard/src/app/pages/embassy/embassy.page.ts

@@ -5,7 +5,7 @@ import { StateService } from 'src/app/services/state.service'
 import { PasswordPage } from '../password/password.page'
 
 @Component({
-  selector: 'embassy',
+  selector: 'app-embassy',
   templateUrl: 'embassy.page.html',
   styleUrls: ['embassy.page.scss'],
 })

setup-wizard/src/app/pages/home/home.page.ts

@@ -2,7 +2,7 @@ import { Component } from '@angular/core'
 import { NavController } from '@ionic/angular'
 
 @Component({
-  selector: 'home',
+  selector: 'app-home',
   templateUrl: 'home.page.html',
   styleUrls: ['home.page.scss'],
 })

setup-wizard/src/app/pages/loading/loading.page.ts

@@ -1,10 +1,9 @@
 import { Component } from '@angular/core'
-import { AlertController, NavController } from '@ionic/angular'
-import { BehaviorSubject } from 'rxjs'
+import { AlertController } from '@ionic/angular'
 import { StateService } from 'src/app/services/state.service'
 
 @Component({
-  selector: 'loading',
+  selector: 'app-loading',
   templateUrl: 'loading.page.html',
   styleUrls: ['loading.page.scss'],
 })

setup-wizard/src/app/pages/password/password.page.ts

@@ -4,7 +4,7 @@ import { ApiService, EmbassyDrive, RecoveryDrive } from 'src/app/services/api/ap
 import { StateService } from 'src/app/services/state.service'
 
 @Component({
-  selector: 'password',
+  selector: 'app-password',
   templateUrl: 'password.page.html',
   styleUrls: ['password.page.scss'],
 })

setup-wizard/src/app/pages/product-key/product-key-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { ProductKeyPage } from './product-key.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ProductKeyPage,
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ProductKeyPageRoutingModule {}

setup-wizard/src/app/pages/product-key/product-key.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+import { FormsModule } from '@angular/forms';
+import { ProductKeyPage } from './product-key.page';
+import { PasswordPageModule } from '../password/password.module';
+import { ProductKeyPageRoutingModule } from './product-key-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    ProductKeyPageRoutingModule,
+    PasswordPageModule,
+  ],
+  declarations: [ProductKeyPage]
+})
+export class ProductKeyPageModule {}

setup-wizard/src/app/pages/product-key/product-key.page.html

@@ -0,0 +1,32 @@
+<ion-content color="light">
+  <ion-grid style="padding-top: 32px; height: 100%; max-width: 540px;">
+    <ion-row class="ion-align-items-center" style="height: 100%;">
+      <ion-col class="ion-text-center">
+
+        <div style="padding-bottom: 32px;">
+          <img src="assets/png/logo.png" style="max-width: 240px;" />
+        </div>
+
+        <ion-card color="dark">
+          <ion-card-header class="ion-text-center" style="padding-bottom: 8px;">
+            <ion-card-title>Enter Product Key</ion-card-title>
+          </ion-card-header>
+          <ion-card-content>
+            <form (submit)="submit()">
+              <p class="input-label">Product Key</p>
+              <ion-item color="light" class="ion-padding-bottom">
+                <ion-label>
+                  <ion-icon slot="start" name="key-outline" style="margin-right: 16px;"></ion-icon>
+                  <ion-input placeholder="Enter Product Key"></ion-input>
+                </ion-label>
+              </ion-item>
+              <ion-button type="submit" color="light">
+                Submit
+              </ion-button>
+            </form>
+          </ion-card-content>
+        </ion-card>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+</ion-content>

setup-wizard/src/app/pages/product-key/product-key.page.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core'
+import { NavController } from '@ionic/angular'
+
+@Component({
+  selector: 'app-product-key',
+  templateUrl: 'product-key.page.html',
+  styleUrls: ['product-key.page.scss'],
+})
+export class ProductKeyPage {
+  constructor(
+    private readonly navCtrl: NavController,
+  ) {}
+
+  async recoverNav () {
+    await this.navCtrl.navigateForward(`/recover`, { animationDirection: 'forward' })
+  }
+
+  async embassyNav () {
+    await this.navCtrl.navigateForward(`/embassy`, { animationDirection: 'forward' })
+  }
+}
+

setup-wizard/src/app/pages/recover/recover.page.ts

@@ -5,7 +5,7 @@ import { StateService } from 'src/app/services/state.service'
 import { PasswordPage } from '../password/password.page'
 
 @Component({
-  selector: 'recover',
+  selector: 'app-recover',
   templateUrl: 'recover.page.html',
   styleUrls: ['recover.page.scss'],
 })

setup-wizard/src/global.scss

@@ -25,6 +25,13 @@
 @import "~@ionic/angular/css/text-transformation.css";
 @import "~@ionic/angular/css/flex-utils.css";
 
+.input-label {
+  text-align: left;
+  padding-bottom: 2px;
+  font-size: small;
+  color: var(--ion-color-light);
+  font-weight: bold;
+}
 
 .alert-error .alert-title {
   color: var(--ion-color-danger) !important;