mirror of
https://github.com/Start9Labs/start-os.git
synced 2026-03-30 20:14:49 +00:00
pw modal
This commit is contained in:
committed by
Aiden McClelland
parent
a458e0b5bc
commit
8f0e0a392e
@@ -10,7 +10,7 @@
|
|||||||
<h2 color="light">Select Data Drive</h2>
|
<h2 color="light">Select Data Drive</h2>
|
||||||
<ion-card
|
<ion-card
|
||||||
*ngFor="let drive of dataDrives"
|
*ngFor="let drive of dataDrives"
|
||||||
(click)="selectDrive(drive['logical-name'])"
|
(click)="selectDrive(drive)"
|
||||||
button="true"
|
button="true"
|
||||||
[class.selected]="selectedDrive === drive['logical-name']"
|
[class.selected]="selectedDrive === drive['logical-name']"
|
||||||
color="light"
|
color="light"
|
||||||
@@ -28,7 +28,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div *ngIf="stateService.selectedDataDrive">
|
<div *ngIf="stateService.selectedDataDrive">
|
||||||
<ion-card
|
<ion-card
|
||||||
[routerLink]="['/password']"
|
(click)="presentPasswordModal()"
|
||||||
button="true"
|
button="true"
|
||||||
color="light"
|
color="light"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -1,7 +1,8 @@
|
|||||||
import { Component } from '@angular/core'
|
import { Component } from '@angular/core'
|
||||||
import { AlertController } from '@ionic/angular'
|
import { AlertController, ModalController } from '@ionic/angular'
|
||||||
import { ApiService } from 'src/app/services/api/api.service'
|
import { ApiService } from 'src/app/services/api/api.service'
|
||||||
import { StateService } from 'src/app/services/state.service'
|
import { StateService } from 'src/app/services/state.service'
|
||||||
|
import { PasswordPage } from '../password/password.page'
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'home',
|
selector: 'home',
|
||||||
@@ -16,6 +17,7 @@ export class HomePage {
|
|||||||
private readonly apiService: ApiService,
|
private readonly apiService: ApiService,
|
||||||
private readonly stateService: StateService,
|
private readonly stateService: StateService,
|
||||||
private readonly alertController: AlertController,
|
private readonly alertController: AlertController,
|
||||||
|
private modalController: ModalController,
|
||||||
) {}
|
) {}
|
||||||
|
|
||||||
async ngOnInit() {
|
async ngOnInit() {
|
||||||
@@ -62,4 +64,25 @@ export class HomePage {
|
|||||||
this.stateService.selectedDataDrive = this.selectedDrive
|
this.stateService.selectedDataDrive = this.selectedDrive
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async presentPasswordModal() {
|
||||||
|
const modal = await this.modalController.create({
|
||||||
|
component: PasswordPage,
|
||||||
|
backdropDismiss: false,
|
||||||
|
componentProps: {
|
||||||
|
'version': null,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
modal.onDidDismiss().then(ret => {
|
||||||
|
if(ret.data.pwValid) {
|
||||||
|
this.submitPassword(ret.data.password)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
await modal.present();
|
||||||
|
}
|
||||||
|
|
||||||
|
async submitPassword (pw: string) {
|
||||||
|
await this.apiService.submitPassword(pw)
|
||||||
|
// @TODO navigate to embassyOS
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -6,15 +6,17 @@
|
|||||||
</ion-toolbar>
|
</ion-toolbar>
|
||||||
</ion-header>
|
</ion-header>
|
||||||
<ion-content>
|
<ion-content>
|
||||||
<div *ngIf="stateService.recoveryDrive">
|
<div *ngIf="!needsVer">
|
||||||
<h2>Enter Password</h2>
|
<h2>Enter Password</h2>
|
||||||
<ion-input type="password" [(ngModel)]="password">Password:</ion-input>
|
<ion-input type="password" [(ngModel)]="password">Password:</ion-input>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="!stateService.recoveryDrive">
|
|
||||||
|
<div *ngIf="needsVer">
|
||||||
<h2>Create Password</h2>
|
<h2>Create Password</h2>
|
||||||
<ion-input type="password" [(ngModel)]="password">Password:</ion-input>
|
<ion-input type="password" [(ngModel)]="password">Password:</ion-input>
|
||||||
<ion-input type="password" [(ngModel)]="passwordVer">Verify Password:</ion-input>
|
<ion-input type="password" [(ngModel)]="passwordVer">Verify Password:</ion-input>
|
||||||
</div>
|
</div>
|
||||||
<p>{{error}}</p>
|
<p>{{error}}</p>
|
||||||
|
<ion-button (click)="cancel()">Cancel</ion-button>
|
||||||
<ion-button (click)="submitPassword()" [disabled]="!password">Submit</ion-button>
|
<ion-button (click)="submitPassword()" [disabled]="!password">Submit</ion-button>
|
||||||
</ion-content>
|
</ion-content>
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
import { Component } from '@angular/core'
|
import { Component, Input } from '@angular/core'
|
||||||
import { ApiService } from 'src/app/services/api/api.service'
|
import { ModalController } from '@ionic/angular'
|
||||||
import { StateService } from 'src/app/services/state.service'
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'password',
|
selector: 'password',
|
||||||
@@ -8,24 +7,40 @@ import { StateService } from 'src/app/services/state.service'
|
|||||||
styleUrls: ['password.page.scss'],
|
styleUrls: ['password.page.scss'],
|
||||||
})
|
})
|
||||||
export class PasswordPage {
|
export class PasswordPage {
|
||||||
|
@Input() version: string | null
|
||||||
|
|
||||||
|
needsVer = true
|
||||||
|
|
||||||
error = ''
|
error = ''
|
||||||
password = ''
|
password = ''
|
||||||
passwordVer = ''
|
passwordVer = ''
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private readonly apiService: ApiService,
|
private modalController: ModalController
|
||||||
private readonly stateService: StateService,
|
|
||||||
) {}
|
) {}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.needsVer = !this.version?.startsWith('0.3')
|
||||||
|
console.log('needs', this.needsVer)
|
||||||
|
}
|
||||||
|
|
||||||
async submitPassword () {
|
async submitPassword () {
|
||||||
if (!this.stateService.recoveryDrive && this.password !== this.passwordVer) {
|
if (this.needsVer && this.password !== this.passwordVer) {
|
||||||
console.log('here')
|
|
||||||
this.error="*passwords dont match"
|
this.error="*passwords dont match"
|
||||||
} else {
|
} else {
|
||||||
console.log('submitting')
|
this.dismiss(true)
|
||||||
await this.apiService.submitPassword(this.password)
|
|
||||||
// @Todo navigate to embassy os
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
cancel () {
|
||||||
|
this.dismiss(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
dismiss(submitted: boolean) {
|
||||||
|
this.modalController.dismiss({
|
||||||
|
pwValid: submitted,
|
||||||
|
pw: this.password
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
<h2 color="light">Select Data Drive</h2>
|
<h2 color="light">Select Data Drive</h2>
|
||||||
<ion-card
|
<ion-card
|
||||||
*ngFor="let drive of dataDrives"
|
*ngFor="let drive of dataDrives"
|
||||||
(click)="selectDrive(drive['logical-name'])"
|
(click)="selectDrive(drive)"
|
||||||
button="true"
|
button="true"
|
||||||
[class.selected]="selectedDrive === drive['logical-name']"
|
[class.selected]="selectedDrive === drive['logical-name']"
|
||||||
color="light"
|
color="light"
|
||||||
@@ -30,11 +30,11 @@
|
|||||||
<h2>Progress: {{ 100 * stateService.dataProgress }}% <ion-spinner *ngIf="stateService.dataProgress != 1"></ion-spinner> </h2>
|
<h2>Progress: {{ 100 * stateService.dataProgress }}% <ion-spinner *ngIf="stateService.dataProgress != 1"></ion-spinner> </h2>
|
||||||
<ion-progress-bar value="{{stateService.dataProgress}}"></ion-progress-bar>
|
<ion-progress-bar value="{{stateService.dataProgress}}"></ion-progress-bar>
|
||||||
<ion-button
|
<ion-button
|
||||||
[routerLink]="['/password']"
|
(click)="navToEmbassy()"
|
||||||
color="primary"
|
color="primary"
|
||||||
[disabled]="stateService.dataProgress != 1"
|
[disabled]="stateService.dataProgress != 1"
|
||||||
>
|
>
|
||||||
Next
|
Go To Embassy
|
||||||
</ion-button>
|
</ion-button>
|
||||||
</div>
|
</div>
|
||||||
</ion-content>
|
</ion-content>
|
||||||
|
|||||||
@@ -1,7 +1,8 @@
|
|||||||
import { Component } from '@angular/core'
|
import { Component } from '@angular/core'
|
||||||
import { AlertController } from '@ionic/angular'
|
import { AlertController, ModalController } from '@ionic/angular'
|
||||||
import { ApiService } from 'src/app/services/api/api.service'
|
import { ApiService, EmbassyDrive } from 'src/app/services/api/api.service'
|
||||||
import { StateService } from 'src/app/services/state.service'
|
import { StateService } from 'src/app/services/state.service'
|
||||||
|
import { PasswordPage } from '../password/password.page'
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'recover',
|
selector: 'recover',
|
||||||
@@ -11,11 +12,13 @@ import { StateService } from 'src/app/services/state.service'
|
|||||||
export class RecoverPage {
|
export class RecoverPage {
|
||||||
dataDrives = []
|
dataDrives = []
|
||||||
selectedDrive = null
|
selectedDrive = null
|
||||||
|
selectedVersion = null
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private readonly apiService: ApiService,
|
private readonly apiService: ApiService,
|
||||||
private readonly stateService: StateService,
|
private readonly stateService: StateService,
|
||||||
public alertController: AlertController,
|
public alertController: AlertController,
|
||||||
|
private modalController: ModalController,
|
||||||
) {}
|
) {}
|
||||||
|
|
||||||
async ngOnInit() {
|
async ngOnInit() {
|
||||||
@@ -26,11 +29,15 @@ export class RecoverPage {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
selectDrive(name: string) {
|
selectDrive(disk: EmbassyDrive) {
|
||||||
|
const name = disk['logical-name']
|
||||||
|
const version = disk.version
|
||||||
if (name === this.selectedDrive) {
|
if (name === this.selectedDrive) {
|
||||||
this.selectedDrive = null
|
this.selectedDrive = null
|
||||||
|
this.selectedVersion = null
|
||||||
} else {
|
} else {
|
||||||
this.selectedDrive = name
|
this.selectedDrive = name
|
||||||
|
this.selectedVersion = version
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -60,9 +67,33 @@ export class RecoverPage {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async chooseDisk() {
|
async chooseDisk() {
|
||||||
await this.apiService.selectEmbassyDrive({logicalName: this.selectedDrive})
|
this.presentPasswordModal()
|
||||||
|
}
|
||||||
|
|
||||||
|
async presentPasswordModal() {
|
||||||
|
const modal = await this.modalController.create({
|
||||||
|
component: PasswordPage,
|
||||||
|
backdropDismiss: false,
|
||||||
|
componentProps: {
|
||||||
|
'version': this.selectedVersion,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
modal.onDidDismiss().then(ret => {
|
||||||
|
if(ret.data.pwValid) {
|
||||||
|
this.submitPWAndDisk(ret.data.password)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
await modal.present();
|
||||||
|
}
|
||||||
|
|
||||||
|
async submitPWAndDisk(pw: string) {
|
||||||
|
await this.apiService.selectEmbassyDrive({logicalName: this.selectedDrive}, pw)
|
||||||
this.stateService.recoveryDrive = this.selectedDrive
|
this.stateService.recoveryDrive = this.selectedDrive
|
||||||
this.stateService.pollDataTransferProgress()
|
this.stateService.pollDataTransferProgress()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async navToEmbassy() {
|
||||||
|
// @TODO nav to embassy
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ export abstract class ApiService {
|
|||||||
abstract getStorageDisks (): Promise<StorageDisk[]>
|
abstract getStorageDisks (): Promise<StorageDisk[]>
|
||||||
abstract selectStorageDisk (disk: { logicalName: string }): Promise<void>
|
abstract selectStorageDisk (disk: { logicalName: string }): Promise<void>
|
||||||
abstract getEmbassyDrives (): Promise<EmbassyDrive[]>
|
abstract getEmbassyDrives (): Promise<EmbassyDrive[]>
|
||||||
abstract selectEmbassyDrive (disk: { logicalName: string }): Promise<void>
|
abstract selectEmbassyDrive (disk: { logicalName: string }, password: string): Promise<void>
|
||||||
abstract getDataTransferProgress () : Promise<TransferProgress>
|
abstract getDataTransferProgress () : Promise<TransferProgress>
|
||||||
abstract submitPassword (password: string) : Promise<void>
|
abstract submitPassword (password: string) : Promise<void>
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -12,9 +12,8 @@ export class MockApiService extends ApiService {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async getState () {
|
async getState () {
|
||||||
await pauseFor(2000)
|
|
||||||
return {
|
return {
|
||||||
'selected-data-drive': null,
|
'selected-data-drive': 'page1',
|
||||||
'recovery-drive': null,
|
'recovery-drive': null,
|
||||||
'has-password': false,
|
'has-password': false,
|
||||||
'data-transfer-progress': null
|
'data-transfer-progress': null
|
||||||
@@ -74,4 +73,4 @@ export class MockApiService extends ApiService {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
let tries = 4
|
let tries = 2
|
||||||
Reference in New Issue
Block a user