mirror of
https://github.com/Start9Labs/start-os.git
synced 2026-03-27 02:41:53 +00:00
setup wizard style
This commit is contained in:
Drew Ansbacher
committed by
Aiden McClelland
Aiden McClelland
parent
7661626a94
commit
ca19ffd9f7
@@ -1,12 +1,7 @@
|
||||
<ion-app>
|
||||
<ion-header>
|
||||
<ion-toolbar color="primary">
|
||||
<ion-title>
|
||||
Embassy Setup Wizard
|
||||
</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content *ngIf="!stateService.loading" class="has-header">
|
||||
<ion-router-outlet></ion-router-outlet>
|
||||
</ion-content>
|
||||
<body>
|
||||
<ion-content *ngIf="!stateService.loading" class="has-header">
|
||||
<ion-router-outlet></ion-router-outlet>
|
||||
</ion-content>
|
||||
</body>
|
||||
</ion-app>
|
||||
|
||||
@@ -1,76 +1,114 @@
|
||||
<ion-content>
|
||||
<div *ngIf="!stateService.dataDrive && dataDrives">
|
||||
<div *ngIf="!dataDrives.length">
|
||||
<h2 color="light">No data drives found</h2>
|
||||
<p color="light">Please connect a data drive to your embassy and refresh the page.</p>
|
||||
</div>
|
||||
<div *ngIf="dataDrives.length">
|
||||
<h2 style="text-align: center;" color="secondary">Select Data Drive</h2>
|
||||
|
||||
<ion-card
|
||||
color="medium"
|
||||
*ngFor="let drive of dataDrives"
|
||||
(click)="selectDrive(drive)"
|
||||
button="true"
|
||||
[class.selected]="selectedDrive?.logicalname === drive.logicalname"
|
||||
color="light"
|
||||
class="wiz-card"
|
||||
>
|
||||
<ion-card-header>
|
||||
<ion-card-title>{{drive.logicalname}}</ion-card-title>
|
||||
<ion-card-subtitle>{{drive.labels}}</ion-card-subtitle>
|
||||
</ion-card-header>
|
||||
|
||||
<ion-card-content>
|
||||
Currently using {{drive.used}} out of {{drive.capacity}} bytes.
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
<div style="width: 100%; text-align: center;">
|
||||
<ion-button
|
||||
(click)="warn()"
|
||||
color="primary"
|
||||
[disabled]="!selectedDrive"
|
||||
style="text-align:center"
|
||||
size="large"
|
||||
>
|
||||
Next
|
||||
</ion-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="stateService.dataDrive">
|
||||
<ion-grid style="max-width: 800px; margin: auto; margin-top: 30px;">
|
||||
<ion-row>
|
||||
<ion-col size-xs="12" size-sm="6">
|
||||
<ion-card
|
||||
(click)="presentPasswordModal()"
|
||||
button="true"
|
||||
color="light"
|
||||
class="wiz-card"
|
||||
style="text-align: center; background-color: #00919b !important; height: 160px;"
|
||||
>
|
||||
<ion-card-header style="margin-top: 25px;">
|
||||
<ion-card-title style="font-size: 40px">Start Fresh</ion-card-title>
|
||||
<ion-card-subtitle>Get started with a brand new Embassy</ion-card-subtitle>
|
||||
</ion-card-header>
|
||||
</ion-card>
|
||||
</ion-col>
|
||||
<ion-col size-xs="12" size-sm="6">
|
||||
<ion-card
|
||||
[routerLink]="['/recover']"
|
||||
button="true"
|
||||
color="light"
|
||||
class="wiz-card"
|
||||
style="text-align: center; background-color: #bf5900 !important; height: 160px;"
|
||||
>
|
||||
<ion-card-header style="margin-top: 25px;">
|
||||
<ion-card-title style="font-size: 40px">Recover</ion-card-title>
|
||||
<ion-card-subtitle>Recover the data from an old embassy</ion-card-subtitle>
|
||||
</ion-card-header>
|
||||
</ion-card>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
<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>
|
||||
<div style="padding-bottom: 32px;">
|
||||
<img src="assets/png/logo.png" style="max-width: 240px;" />
|
||||
</div>
|
||||
|
||||
<ion-card>
|
||||
<ion-card-header class="ion-text-center" style="padding-bottom: 8px;">
|
||||
<ion-card-title>{{ stateService.dataDrive ? 'Startup Options' : 'Select Data Drive'}}</ion-card-title>
|
||||
</ion-card-header>
|
||||
|
||||
<ion-card-content class="ion-margin">
|
||||
<div *ngIf="!stateService.loading && !stateService.dataDrive && dataDrives">
|
||||
<div *ngIf="!dataDrives.length">
|
||||
<h2 color="light">No data drives found</h2>
|
||||
<p color="light">Please connect a data drive to your embassy and refresh the page.</p>
|
||||
<ion-button
|
||||
(click)="window.location.reload()"
|
||||
style="text-align:center"
|
||||
class="claim-button"
|
||||
>
|
||||
Refresh
|
||||
</ion-button>
|
||||
</div>
|
||||
<div *ngIf="dataDrives.length">
|
||||
<ion-card
|
||||
color="light"
|
||||
*ngFor="let drive of dataDrives"
|
||||
(click)="selectDrive(drive)"
|
||||
button="true"
|
||||
style="border-radius: 11px;"
|
||||
[class.selected]="selectedDrive?.logicalname === drive.logicalname"
|
||||
>
|
||||
<ion-card-header>
|
||||
<ion-card-title>{{drive.logicalname}}</ion-card-title>
|
||||
<ion-card-subtitle>{{drive.labels}}</ion-card-subtitle>
|
||||
</ion-card-header>
|
||||
|
||||
<ion-card-content>
|
||||
Using {{drive.used}} out of {{drive.capacity}} bytes.
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
<div style="width: 100%; text-align: center;">
|
||||
<ion-button
|
||||
(click)="warn()"
|
||||
[disabled]="!selectedDrive"
|
||||
class="claim-button"
|
||||
>
|
||||
Next
|
||||
</ion-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="stateService.dataDrive">
|
||||
<ion-card
|
||||
(click)="presentPasswordModal()"
|
||||
button="true"
|
||||
color="light"
|
||||
class="wiz-card"
|
||||
style="text-align: center; background-color: #00919b !important; height: 160px;"
|
||||
>
|
||||
<ion-card-header>
|
||||
<ion-card-title style="font-size: 40px">Start Fresh</ion-card-title>
|
||||
<ion-card-subtitle>Get started with a brand new Embassy</ion-card-subtitle>
|
||||
</ion-card-header>
|
||||
</ion-card>
|
||||
<ion-card
|
||||
[routerLink]="['/recover']"
|
||||
button="true"
|
||||
color="light"
|
||||
class="wiz-card"
|
||||
style="text-align: center; background-color: #bf5900 !important; height: 160px;"
|
||||
>
|
||||
<ion-card-header>
|
||||
<ion-card-title style="font-size: 40px">Recover</ion-card-title>
|
||||
<ion-card-subtitle>Recover the data from an old embassy</ion-card-subtitle>
|
||||
</ion-card-header>
|
||||
</ion-card>
|
||||
</div>
|
||||
</ion-card-content>
|
||||
|
||||
<ion-card-header class="card-footer">
|
||||
<ion-item lines="none">
|
||||
<ion-label class="ion-text-wrap">
|
||||
<p *ngIf="!stateService.dataDrive">
|
||||
Choose drive to save all Embassy data to.
|
||||
</p>
|
||||
<p *ngIf="stateService.dataDrive">
|
||||
Spin up a brand new Embassy, or recover data from an old device.
|
||||
</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-card-header>
|
||||
</ion-card>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="footer">
|
||||
<p style="margin-bottom: 30px;">Contact/Community</p>
|
||||
<ion-icon name="logo-youtube"></ion-icon>
|
||||
<ion-icon name="paper-plane"></ion-icon>
|
||||
<ion-icon name="mail"></ion-icon>
|
||||
<ion-icon name="logo-github"></ion-icon>
|
||||
<ion-icon name="logo-twitter"></ion-icon>
|
||||
<ion-icon name="logo-mastodon"></ion-icon>
|
||||
<ion-icon name="logo-medium"></ion-icon>
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</ion-content>
|
||||
|
||||
@@ -1,3 +1,43 @@
|
||||
.selected {
|
||||
border: 1px solid white;
|
||||
border: 4px solid gray;
|
||||
}
|
||||
ion-card-title {
|
||||
margin: 24px 0;
|
||||
font-family: 'Montserrat';
|
||||
font-size: x-large;
|
||||
--color: var(--ion-color-light);
|
||||
}
|
||||
|
||||
ion-item {
|
||||
--border-radius: 4px;
|
||||
--border-style: solid;
|
||||
--border-width: 1px;
|
||||
--border-color: var(--ion-color-light);
|
||||
}
|
||||
|
||||
.input-label {
|
||||
text-align: left;
|
||||
padding-bottom: 2px;
|
||||
font-size: small;
|
||||
color: var(--ion-color-light);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.claim-button {
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0;
|
||||
margin-top: 24px;
|
||||
height: 48px;
|
||||
--background: linear-gradient(45deg, var(--ion-color-light) 16%, var(--ion-color-medium) 150%);
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
text-align: left;
|
||||
--background: rgb(222, 222, 222);
|
||||
border-top: solid;
|
||||
border-width: 1px;
|
||||
border-color: var(--ion-color-medium);
|
||||
ion-item {
|
||||
--border-color: var(--ion-color-medium);
|
||||
}
|
||||
}
|
||||
@@ -10,8 +10,9 @@ import { PasswordPage } from '../password/password.page'
|
||||
styleUrls: ['home.page.scss'],
|
||||
})
|
||||
export class HomePage {
|
||||
dataDrives = null
|
||||
dataDrives = []
|
||||
selectedDrive: DataDrive = null
|
||||
console = console
|
||||
|
||||
constructor(
|
||||
private readonly apiService: ApiService,
|
||||
@@ -22,9 +23,6 @@ export class HomePage {
|
||||
) {}
|
||||
|
||||
async ngOnInit() {
|
||||
const loader = await this.loadingCtrl.create({
|
||||
message: 'Selecting data drive'
|
||||
})
|
||||
if(!this.stateService.dataDrive) {
|
||||
const loader = await this.loadingCtrl.create({
|
||||
message: 'Fetching data drives'
|
||||
@@ -47,7 +45,7 @@ export class HomePage {
|
||||
const alert = await this.alertController.create({
|
||||
cssClass: 'my-custom-class',
|
||||
header: 'Warning!',
|
||||
message: 'This drive will be entirely wiped of all memory.',
|
||||
message: 'This drive will be entirely wiped of all existing memory.',
|
||||
backdropDismiss: false,
|
||||
buttons: [
|
||||
{
|
||||
@@ -91,9 +89,11 @@ export class HomePage {
|
||||
cssClass: 'pw-modal',
|
||||
})
|
||||
modal.onDidDismiss().then(ret => {
|
||||
const pass = ret.data.password
|
||||
if (pass) {
|
||||
this.submitPassword(pass)
|
||||
if(ret.data) {
|
||||
const pass = ret.data.password
|
||||
if (pass) {
|
||||
this.submitPassword(pass)
|
||||
}
|
||||
}
|
||||
})
|
||||
await modal.present();
|
||||
@@ -107,6 +107,7 @@ export class HomePage {
|
||||
|
||||
try {
|
||||
await this.apiService.submitPassword(pw)
|
||||
console.log('reloading')
|
||||
location.reload()
|
||||
} catch (e) {
|
||||
} finally {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-toolbar color="light">
|
||||
<ion-title>
|
||||
<span *ngIf="needsVer">Enter Password</span>
|
||||
<span *ngIf="!needsVer">Create Password</span>
|
||||
@@ -13,13 +13,13 @@
|
||||
</div>
|
||||
|
||||
<div *ngIf="!needsVer">
|
||||
<ion-input style="color: #e6f4f1 !important;" (keyup)="error = ''" type="password" [(ngModel)]="password" placeholder="_________">Password:</ion-input>
|
||||
<ion-input style="color: #e6f4f1 !important;" (keyup)="error = ''" type="password" [(ngModel)]="passwordVer" placeholder="_________">Verify Password:</ion-input>
|
||||
<ion-input (click)="error = ''" (focusout)="validate()" style="color: #e6f4f1 !important;" (keyup)="error = ''" type="password" [(ngModel)]="password" placeholder="_________">Password:</ion-input>
|
||||
<ion-input (focusout)="checkMatch()" style="color: #e6f4f1 !important;" (keyup)="error = ''" type="password" [(ngModel)]="passwordVer" placeholder="_________">Verify Password:</ion-input>
|
||||
</div>
|
||||
<p style="color: #FF4961;">{{error}}</p>
|
||||
<div style="text-align: right; position: absolute; bottom: 10px; right: 24px;">
|
||||
<ion-button color="tertiary" item-end (click)="cancel()">Cancel</ion-button>
|
||||
<ion-button color="primary" item-end (click)="submitPassword()" [disabled]="!password">Submit</ion-button>
|
||||
<ion-button class="claim-button" item-end (click)="cancel()" style="margin-right: 10px;">Cancel</ion-button>
|
||||
<ion-button class="claim-button" item-end (click)="submitPassword()" [disabled]="!password">Submit</ion-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
.claim-button {
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0;
|
||||
margin-top: 24px;
|
||||
height: 48px;
|
||||
--background: linear-gradient(45deg, var(--ion-color-light) 16%, var(--ion-color-medium) 150%);
|
||||
}
|
||||
@@ -26,11 +26,13 @@ export class PasswordPage {
|
||||
|
||||
async submitPassword () {
|
||||
if(!this.needsVer) {
|
||||
if (this.password.length < 12) {
|
||||
this.error="*passwords must be 12 characters or greater"
|
||||
} else if (this.password !== this.passwordVer) {
|
||||
this.error="*passwords dont match"
|
||||
this.validate()
|
||||
if(!this.error) {
|
||||
this.checkMatch()
|
||||
}
|
||||
this.modalController.dismiss({
|
||||
password: this.password,
|
||||
})
|
||||
} else {
|
||||
this.modalController.dismiss({
|
||||
password: this.password,
|
||||
@@ -38,6 +40,20 @@ export class PasswordPage {
|
||||
}
|
||||
}
|
||||
|
||||
validate () {
|
||||
if (this.password.length < 12) {
|
||||
this.error="*passwords must be 12 characters or greater"
|
||||
}
|
||||
}
|
||||
|
||||
checkMatch () {
|
||||
if (this.password !== this.passwordVer) {
|
||||
this.error="*passwords dont match"
|
||||
} else {
|
||||
this.error = ''
|
||||
}
|
||||
}
|
||||
|
||||
cancel () {
|
||||
this.modalController.dismiss()
|
||||
}
|
||||
|
||||
@@ -1,53 +1,95 @@
|
||||
<ion-content>
|
||||
<div *ngIf="!stateService.polling && dataDrives?.length">
|
||||
<div *ngIf="!dataDrives.length">
|
||||
<h2 color="light">No recovery drives found</h2>
|
||||
<p color="light">Please connect a recovery drive to your embassy and refresh the page.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h2 style="text-align: center;" color="secondary">Select Recovery Drive</h2>
|
||||
<ion-card
|
||||
class="wiz-card"
|
||||
*ngFor="let drive of dataDrives"
|
||||
(click)="selectDrive(drive)"
|
||||
button="true"
|
||||
[class.selected]="selectedDrive?.logicalname === drive.logicalname"
|
||||
color="light"
|
||||
>
|
||||
<ion-card-header>
|
||||
<ion-card-title>{{drive.logicalname}}</ion-card-title>
|
||||
<ion-card-subtitle>{{drive.name}}</ion-card-subtitle>
|
||||
</ion-card-header>
|
||||
|
||||
<ion-card-content>
|
||||
Currently running {{drive.version}}
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
<div style="width: 100%; text-align: center;;">
|
||||
<ion-button
|
||||
(click)="presentPasswordModal()"
|
||||
color="primary"
|
||||
[disabled]="!selectedDrive"
|
||||
style="text-align:center"
|
||||
size="large"
|
||||
>
|
||||
Next
|
||||
</ion-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div *ngIf="stateService.polling" style="width: 100%; text-align: center;">
|
||||
<h2 style="padding-bottom: 30px; padding-top: 70px;">Recovery Progress: {{ 100 * stateService.dataProgress }}% </h2>
|
||||
<ion-progress-bar color="primary" style="max-width: 700px; margin: auto; padding-bottom: 20px; margin-bottom: 40px;" value="{{stateService.dataProgress}}"></ion-progress-bar>
|
||||
<ion-button
|
||||
(click)="navToEmbassy()"
|
||||
color="primary"
|
||||
[disabled]="stateService.dataProgress !== 1"
|
||||
style="text-align:center"
|
||||
size="large"
|
||||
>
|
||||
Go To Embassy
|
||||
</ion-button>
|
||||
</div>
|
||||
<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>
|
||||
<ion-card-header class="ion-text-center" style="padding-bottom: 8px;">
|
||||
<ion-card-title>{{ stateService.recoveryDrive && stateService.polling ? 'Recovery Progress: ' + (100 * stateService.dataProgress) + '%' : 'Select Recovery Drive'}}</ion-card-title>
|
||||
</ion-card-header>
|
||||
|
||||
<ion-card-content class="ion-margin">
|
||||
<div *ngIf="!loading && recoveryDrives && !recoveryDrives.length">
|
||||
<h2 color="light">No recovery drives found</h2>
|
||||
<p color="light">Please connect a recovery drive to your embassy and refresh the page.</p>
|
||||
</div>
|
||||
<div *ngIf="!stateService.polling && recoveryDrives?.length">
|
||||
<div>
|
||||
<ion-card
|
||||
class="wiz-card"
|
||||
*ngFor="let drive of recoveryDrives"
|
||||
(click)="selectDrive(drive)"
|
||||
button="true"
|
||||
[class.selected]="selectedDrive?.logicalname === drive.logicalname"
|
||||
color="light"
|
||||
>
|
||||
<ion-card-header>
|
||||
<ion-card-title>{{drive.logicalname}}</ion-card-title>
|
||||
<ion-card-subtitle>{{drive.name}}</ion-card-subtitle>
|
||||
</ion-card-header>
|
||||
|
||||
<ion-card-content>
|
||||
Currently running {{drive.version}}
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
<div style="width: 100%; text-align: center;;">
|
||||
<ion-button
|
||||
(click)="presentPasswordModal()"
|
||||
[disabled]="!selectedDrive"
|
||||
style="text-align:center"
|
||||
size="large"
|
||||
class="claim-button"
|
||||
>
|
||||
Next
|
||||
</ion-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div *ngIf="stateService.polling" style="width: 100%; text-align: center;">
|
||||
<ion-progress-bar color="primary" style="max-width: 700px; margin: auto; padding-bottom: 20px; margin-bottom: 40px;" value="{{stateService.dataProgress}}"></ion-progress-bar>
|
||||
<ion-button
|
||||
(click)="navToEmbassy()"
|
||||
[disabled]="stateService.dataProgress !== 1"
|
||||
style="text-align:center"
|
||||
class="claim-button"
|
||||
>
|
||||
Go To Embassy
|
||||
</ion-button>
|
||||
</div>
|
||||
</ion-card-content>
|
||||
|
||||
<ion-card-header class="card-footer">
|
||||
<ion-item lines="none">
|
||||
<ion-label class="ion-text-wrap">
|
||||
<p *ngIf="!stateService.recoveryDrive">
|
||||
Choose drive recover Embassy data from.
|
||||
</p>
|
||||
<p *ngIf="stateService.recoveryDrive && stateService.polling">
|
||||
Recovering old Embassy data.
|
||||
</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-card-header>
|
||||
</ion-card>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="footer">
|
||||
<p style="margin-bottom: 30px;">Contact/Community</p>
|
||||
<ion-icon name="logo-youtube"></ion-icon>
|
||||
<ion-icon name="paper-plane"></ion-icon>
|
||||
<ion-icon name="mail"></ion-icon>
|
||||
<ion-icon name="logo-github"></ion-icon>
|
||||
<ion-icon name="logo-twitter"></ion-icon>
|
||||
<ion-icon name="logo-mastodon"></ion-icon>
|
||||
<ion-icon name="logo-medium"></ion-icon>
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</ion-content>
|
||||
|
||||
@@ -1,3 +1,44 @@
|
||||
.selected {
|
||||
border: 1px solid white;
|
||||
border: 4px solid gray;
|
||||
}
|
||||
|
||||
ion-card-title {
|
||||
margin: 24px 0;
|
||||
font-family: 'Montserrat';
|
||||
font-size: x-large;
|
||||
--color: var(--ion-color-light);
|
||||
}
|
||||
|
||||
ion-item {
|
||||
--border-radius: 4px;
|
||||
--border-style: solid;
|
||||
--border-width: 1px;
|
||||
--border-color: var(--ion-color-light);
|
||||
}
|
||||
|
||||
.input-label {
|
||||
text-align: left;
|
||||
padding-bottom: 2px;
|
||||
font-size: small;
|
||||
color: var(--ion-color-light);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.claim-button {
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0;
|
||||
margin-top: 24px;
|
||||
height: 48px;
|
||||
--background: linear-gradient(45deg, var(--ion-color-light) 16%, var(--ion-color-medium) 150%);
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
text-align: left;
|
||||
--background: rgb(222, 222, 222);
|
||||
border-top: solid;
|
||||
border-width: 1px;
|
||||
border-color: var(--ion-color-medium);
|
||||
ion-item {
|
||||
--border-color: var(--ion-color-medium);
|
||||
}
|
||||
}
|
||||
@@ -10,8 +10,9 @@ import { PasswordPage } from '../password/password.page'
|
||||
styleUrls: ['recover.page.scss'],
|
||||
})
|
||||
export class RecoverPage {
|
||||
dataDrives = null
|
||||
recoveryDrives = []
|
||||
selectedDrive: RecoveryDrive = null
|
||||
loading = true
|
||||
|
||||
constructor(
|
||||
private readonly apiService: ApiService,
|
||||
@@ -27,10 +28,12 @@ export class RecoverPage {
|
||||
message: 'Fetching recovery drives'
|
||||
})
|
||||
await loader.present()
|
||||
this.dataDrives = await this.apiService.getRecoveryDrives()
|
||||
this.recoveryDrives = await this.apiService.getRecoveryDrives()
|
||||
|
||||
loader.dismiss()
|
||||
loader.dismiss()
|
||||
this.loading = false
|
||||
} else {
|
||||
this.loading = false
|
||||
this.stateService.pollDataTransferProgress()
|
||||
}
|
||||
}
|
||||
@@ -57,9 +60,11 @@ export class RecoverPage {
|
||||
}
|
||||
})
|
||||
modal.onDidDismiss().then(ret => {
|
||||
const pass = ret.data.password
|
||||
if(pass) {
|
||||
this.submitPWAndDrive(pass)
|
||||
if(ret.data) {
|
||||
const pass = ret.data.password
|
||||
if(pass) {
|
||||
this.submitPWAndDrive(pass)
|
||||
}
|
||||
}
|
||||
})
|
||||
await modal.present();
|
||||
|
||||
@@ -15,13 +15,13 @@ export class MockApiService extends ApiService {
|
||||
await pauseFor(2000)
|
||||
return {
|
||||
'data-drive':
|
||||
null,
|
||||
// {
|
||||
// logicalname: 'name1',
|
||||
// labels: ['label 1', 'label 2'],
|
||||
// capacity: 1600,
|
||||
// used: 200,
|
||||
// },
|
||||
// null,
|
||||
{
|
||||
logicalname: 'name1',
|
||||
labels: ['label 1', 'label 2'],
|
||||
capacity: 1600,
|
||||
used: 200,
|
||||
},
|
||||
'recovery-drive':
|
||||
null,
|
||||
// {
|
||||
@@ -44,13 +44,13 @@ export class MockApiService extends ApiService {
|
||||
await pauseFor(2000)
|
||||
return [
|
||||
{
|
||||
logicalname: 'name1',
|
||||
logicalname: 'Name1',
|
||||
labels: ['label 1', 'label 2'],
|
||||
capacity: 1600,
|
||||
used: 200,
|
||||
},
|
||||
{
|
||||
logicalname: 'name2',
|
||||
logicalname: 'Name2',
|
||||
labels: [],
|
||||
capacity: 1600,
|
||||
used: 0,
|
||||
|
||||
@@ -18,6 +18,7 @@ export class StateService {
|
||||
) {}
|
||||
|
||||
async getState() {
|
||||
this.loading = true
|
||||
const state = await this.apiService.getState()
|
||||
if(state) {
|
||||
this.dataDrive = state['data-drive']
|
||||
|
||||
Reference in New Issue
Block a user