mirror of
https://github.com/Start9Labs/start-os.git
synced 2026-03-26 18:31:52 +00:00
setup wizard style
This commit is contained in:
Drew Ansbacher
committed by
Matt Hill
Matt Hill
parent
6782aa7e1c
commit
1cc7cc439f
@@ -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']
|
||||
|
||||
BIN
setup-wizard/src/assets/fonts/Benton_Sans/BentonSans-Regular.otf
Normal file
BIN
setup-wizard/src/assets/fonts/Benton_Sans/BentonSans-Regular.otf
Normal file
Binary file not shown.
BIN
setup-wizard/src/assets/fonts/Montserrat/Montserrat-Regular.ttf
Normal file
BIN
setup-wizard/src/assets/fonts/Montserrat/Montserrat-Regular.ttf
Normal file
Binary file not shown.
BIN
setup-wizard/src/assets/png/logo.png
Normal file
BIN
setup-wizard/src/assets/png/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
@@ -25,19 +25,48 @@
|
||||
@import "~@ionic/angular/css/text-transformation.css";
|
||||
@import "~@ionic/angular/css/flex-utils.css";
|
||||
|
||||
.cancel-button {
|
||||
color: #FF4961 !important;
|
||||
|
||||
.alert-error .alert-title {
|
||||
color: var(--ion-color-danger) !important;
|
||||
}
|
||||
|
||||
.okay-button {
|
||||
color: #00AACC !important;
|
||||
.loader {
|
||||
--spinner-color: var(--ion-color-light) !important;
|
||||
}
|
||||
|
||||
.wiz-card {
|
||||
max-width: 800px; margin: auto; margin-bottom: 10px;
|
||||
ion-avatar {
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
}
|
||||
|
||||
.pw-modal .modal-wrapper{
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
ion-action-sheet {
|
||||
--backdrop-opacity: 0.75 !important;
|
||||
}
|
||||
|
||||
ion-alert {
|
||||
--backdrop-opacity: 0.75 !important;
|
||||
}
|
||||
|
||||
ion-loading {
|
||||
--backdrop-opacity: 0.75 !important;
|
||||
}
|
||||
|
||||
ion-item {
|
||||
--highlight-color-valid: transparent;
|
||||
--highlight-color-invalid: transparent;
|
||||
--highlight-color-focused: var(--ion-color-light);
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: 50px 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255, 255, 255, 0.31) 50%,rgba(255,255,255,0) 100%);
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-bottom: 24px;
|
||||
ion-icon {
|
||||
font-size: 28px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
@@ -3,234 +3,90 @@
|
||||
|
||||
/** Ionic CSS Variables **/
|
||||
:root {
|
||||
--ion-font-family: 'Benton Sans';
|
||||
/** primary **/
|
||||
--ion-color-primary: #007495;
|
||||
--ion-color-primary-rgb: 56, 128, 255;
|
||||
--ion-color-primary: #428cff;
|
||||
--ion-color-primary-rgb: 66,140,255;
|
||||
--ion-color-primary-contrast: #ffffff;
|
||||
--ion-color-primary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-primary-shade: #3171e0;
|
||||
--ion-color-primary-tint: #4c8dff;
|
||||
--ion-color-primary-contrast-rgb: 255,255,255;
|
||||
--ion-color-primary-shade: #3a7be0;
|
||||
--ion-color-primary-tint: #5598ff;
|
||||
|
||||
/** secondary **/
|
||||
--ion-color-secondary: #00AACC;
|
||||
--ion-color-secondary-rgb: 61, 194, 255;
|
||||
--ion-color-secondary: #50c8ff;
|
||||
--ion-color-secondary-rgb: 80,200,255;
|
||||
--ion-color-secondary-contrast: #ffffff;
|
||||
--ion-color-secondary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-secondary-shade: #36abe0;
|
||||
--ion-color-secondary-tint: #50c8ff;
|
||||
--ion-color-secondary-contrast-rgb: 255,255,255;
|
||||
--ion-color-secondary-shade: #46b0e0;
|
||||
--ion-color-secondary-tint: #62ceff;
|
||||
|
||||
/** tertiary **/
|
||||
--ion-color-tertiary: #FF4961;
|
||||
--ion-color-tertiary-rgb: 82, 96, 255;
|
||||
--ion-color-tertiary: #6a64ff;
|
||||
--ion-color-tertiary-rgb: 106,100,255;
|
||||
--ion-color-tertiary-contrast: #ffffff;
|
||||
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-tertiary-shade: #FF4961;
|
||||
--ion-color-tertiary-tint: #FF4961;
|
||||
--ion-color-tertiary-contrast-rgb: 255,255,255;
|
||||
--ion-color-tertiary-shade: #5d58e0;
|
||||
--ion-color-tertiary-tint: #7974ff;
|
||||
|
||||
/** success **/
|
||||
--ion-color-success: #a5e77f;
|
||||
--ion-color-success-rgb: 45, 211, 111;
|
||||
--ion-color-success-contrast: #ffffff;
|
||||
--ion-color-success-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-success-shade: #28ba62;
|
||||
--ion-color-success-tint: #42d77d;
|
||||
--ion-color-success: #2fdf75;
|
||||
--ion-color-success-rgb: 47,223,117;
|
||||
--ion-color-success-contrast: #000000;
|
||||
--ion-color-success-contrast-rgb: 0,0,0;
|
||||
--ion-color-success-shade: #29c467;
|
||||
--ion-color-success-tint: #44e283;
|
||||
|
||||
/** warning **/
|
||||
--ion-color-warning: #ffc409;
|
||||
--ion-color-warning-rgb: 255, 196, 9;
|
||||
--ion-color-warning: #ffd534;
|
||||
--ion-color-warning-rgb: 255,213,52;
|
||||
--ion-color-warning-contrast: #000000;
|
||||
--ion-color-warning-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-warning-shade: #e0ac08;
|
||||
--ion-color-warning-tint: #ffca22;
|
||||
--ion-color-warning-contrast-rgb: 0,0,0;
|
||||
--ion-color-warning-shade: #e0bb2e;
|
||||
--ion-color-warning-tint: #ffd948;
|
||||
|
||||
/** danger **/
|
||||
--ion-color-danger: #eb445a;
|
||||
--ion-color-danger-rgb: 235, 68, 90;
|
||||
--ion-color-danger: #ff4961;
|
||||
--ion-color-danger-rgb: 255,73,97;
|
||||
--ion-color-danger-contrast: #ffffff;
|
||||
--ion-color-danger-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-danger-shade: #cf3c4f;
|
||||
--ion-color-danger-tint: #ed576b;
|
||||
--ion-color-danger-contrast-rgb: 255,255,255;
|
||||
--ion-color-danger-shade: #e04055;
|
||||
--ion-color-danger-tint: #ff5b71;
|
||||
|
||||
/** dark **/
|
||||
--ion-color-dark: #222428;
|
||||
--ion-color-dark-rgb: 34, 36, 40;
|
||||
--ion-color-dark-contrast: #ffffff;
|
||||
--ion-color-dark-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-dark-shade: #1e2023;
|
||||
--ion-color-dark-tint: #383a3e;
|
||||
--ion-color-dark: #f4f5f8;
|
||||
--ion-color-dark-rgb: 244,245,248;
|
||||
--ion-color-dark-contrast: #000000;
|
||||
--ion-color-dark-contrast-rgb: 0,0,0;
|
||||
--ion-color-dark-shade: #d7d8da;
|
||||
--ion-color-dark-tint: #f5f6f9;
|
||||
|
||||
/** medium **/
|
||||
--ion-color-medium: #574141;
|
||||
--ion-color-medium-rgb: 146, 148, 156;
|
||||
--ion-color-medium-contrast: #ffffff;
|
||||
--ion-color-medium-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-medium-shade: #808289;
|
||||
--ion-color-medium-tint: #9d9fa6;
|
||||
--ion-color-medium: #989aa2;
|
||||
--ion-color-medium-rgb: 152,154,162;
|
||||
--ion-color-medium-contrast: #000000;
|
||||
--ion-color-medium-contrast-rgb: 0,0,0;
|
||||
--ion-color-medium-shade: #86888f;
|
||||
--ion-color-medium-tint: #a2a4ab;
|
||||
|
||||
/** light **/
|
||||
--ion-color-light: #f4f5f8;
|
||||
--ion-color-light-rgb: 244, 245, 248;
|
||||
--ion-color-light-contrast: #000000;
|
||||
--ion-color-light-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-light-shade: #d7d8da;
|
||||
--ion-color-light-tint: #f5f6f9;
|
||||
--ion-color-light: #25272b;
|
||||
--ion-color-light-rgb: 34,36,40;
|
||||
--ion-color-light-contrast: #ffffff;
|
||||
--ion-color-light-contrast-rgb: 255,255,255;
|
||||
--ion-color-light-shade: #1e2023;
|
||||
--ion-color-light-tint: #383a3e;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
/*
|
||||
* Dark Colors
|
||||
* -------------------------------------------
|
||||
*/
|
||||
|
||||
body {
|
||||
--ion-color-primary: #428cff;
|
||||
--ion-color-primary-rgb: 66,140,255;
|
||||
--ion-color-primary-contrast: #ffffff;
|
||||
--ion-color-primary-contrast-rgb: 255,255,255;
|
||||
--ion-color-primary-shade: #3a7be0;
|
||||
--ion-color-primary-tint: #5598ff;
|
||||
|
||||
--ion-color-secondary: #50c8ff;
|
||||
--ion-color-secondary-rgb: 80,200,255;
|
||||
--ion-color-secondary-contrast: #ffffff;
|
||||
--ion-color-secondary-contrast-rgb: 255,255,255;
|
||||
--ion-color-secondary-shade: #46b0e0;
|
||||
--ion-color-secondary-tint: #62ceff;
|
||||
|
||||
--ion-color-tertiary: #FF4961;
|
||||
--ion-color-tertiary-rgb: 106,100,255;
|
||||
--ion-color-tertiary-contrast: #ffffff;
|
||||
--ion-color-tertiary-contrast-rgb: 255,255,255;
|
||||
--ion-color-tertiary-shade: #FF4961;
|
||||
--ion-color-tertiary-tint: #FF4961;
|
||||
|
||||
--ion-color-success: #a5e77f;
|
||||
--ion-color-success-rgb: 47,223,117;
|
||||
--ion-color-success-contrast: #000000;
|
||||
--ion-color-success-contrast-rgb: 0,0,0;
|
||||
--ion-color-success-shade: #29c467;
|
||||
--ion-color-success-tint: #44e283;
|
||||
|
||||
--ion-color-warning: #ffd534;
|
||||
--ion-color-warning-rgb: 255,213,52;
|
||||
--ion-color-warning-contrast: #000000;
|
||||
--ion-color-warning-contrast-rgb: 0,0,0;
|
||||
--ion-color-warning-shade: #e0bb2e;
|
||||
--ion-color-warning-tint: #ffd948;
|
||||
|
||||
--ion-color-danger: #ff4961;
|
||||
--ion-color-danger-rgb: 255,73,97;
|
||||
--ion-color-danger-contrast: #ffffff;
|
||||
--ion-color-danger-contrast-rgb: 255,255,255;
|
||||
--ion-color-danger-shade: #e04055;
|
||||
--ion-color-danger-tint: #ff5b71;
|
||||
|
||||
--ion-color-dark: #f4f5f8;
|
||||
--ion-color-dark-rgb: 244,245,248;
|
||||
--ion-color-dark-contrast: #000000;
|
||||
--ion-color-dark-contrast-rgb: 0,0,0;
|
||||
--ion-color-dark-shade: #d7d8da;
|
||||
--ion-color-dark-tint: #f5f6f9;
|
||||
|
||||
--ion-color-medium: #574141;
|
||||
--ion-color-medium-rgb: 152,154,162;
|
||||
--ion-color-medium-contrast: #000000;
|
||||
--ion-color-medium-contrast-rgb: 0,0,0;
|
||||
--ion-color-medium-shade: #86888f;
|
||||
--ion-color-medium-tint: #a2a4ab;
|
||||
|
||||
--ion-color-light: #222428;
|
||||
--ion-color-light-rgb: 34,36,40;
|
||||
--ion-color-light-contrast: #ffffff;
|
||||
--ion-color-light-contrast-rgb: 255,255,255;
|
||||
--ion-color-light-shade: #1e2023;
|
||||
--ion-color-light-tint: #383a3e;
|
||||
}
|
||||
|
||||
/*
|
||||
* iOS Dark Theme
|
||||
* -------------------------------------------
|
||||
*/
|
||||
|
||||
.ios body {
|
||||
--ion-background-color: #000000;
|
||||
--ion-background-color-rgb: 0,0,0;
|
||||
|
||||
--ion-text-color: #ffffff;
|
||||
--ion-text-color-rgb: 255,255,255;
|
||||
|
||||
--ion-color-step-50: #0d0d0d;
|
||||
--ion-color-step-100: #1a1a1a;
|
||||
--ion-color-step-150: #262626;
|
||||
--ion-color-step-200: #333333;
|
||||
--ion-color-step-250: #404040;
|
||||
--ion-color-step-300: #4d4d4d;
|
||||
--ion-color-step-350: #595959;
|
||||
--ion-color-step-400: #666666;
|
||||
--ion-color-step-450: #737373;
|
||||
--ion-color-step-500: #808080;
|
||||
--ion-color-step-550: #8c8c8c;
|
||||
--ion-color-step-600: #999999;
|
||||
--ion-color-step-650: #a6a6a6;
|
||||
--ion-color-step-700: #b3b3b3;
|
||||
--ion-color-step-750: #bfbfbf;
|
||||
--ion-color-step-800: #cccccc;
|
||||
--ion-color-step-850: #d9d9d9;
|
||||
--ion-color-step-900: #e6e6e6;
|
||||
--ion-color-step-950: #f2f2f2;
|
||||
|
||||
--ion-item-background: #000000;
|
||||
|
||||
--ion-card-background: #1c1c1d;
|
||||
}
|
||||
|
||||
.ios ion-modal {
|
||||
--ion-background-color: var(--ion-color-step-100);
|
||||
--ion-toolbar-background: var(--ion-color-step-150);
|
||||
--ion-toolbar-border-color: var(--ion-color-step-250);
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Material Design Dark Theme
|
||||
* -------------------------------------------
|
||||
*/
|
||||
|
||||
.md body {
|
||||
--ion-background-color: #121212;
|
||||
--ion-background-color-rgb: 18,18,18;
|
||||
|
||||
--ion-text-color: #ffffff;
|
||||
--ion-text-color-rgb: 255,255,255;
|
||||
|
||||
--ion-border-color: #222222;
|
||||
|
||||
--ion-color-step-50: #1e1e1e;
|
||||
--ion-color-step-100: #2a2a2a;
|
||||
--ion-color-step-150: #363636;
|
||||
--ion-color-step-200: #414141;
|
||||
--ion-color-step-250: #4d4d4d;
|
||||
--ion-color-step-300: #595959;
|
||||
--ion-color-step-350: #656565;
|
||||
--ion-color-step-400: #717171;
|
||||
--ion-color-step-450: #7d7d7d;
|
||||
--ion-color-step-500: #898989;
|
||||
--ion-color-step-550: #949494;
|
||||
--ion-color-step-600: #a0a0a0;
|
||||
--ion-color-step-650: #acacac;
|
||||
--ion-color-step-700: #b8b8b8;
|
||||
--ion-color-step-750: #c4c4c4;
|
||||
--ion-color-step-800: #d0d0d0;
|
||||
--ion-color-step-850: #dbdbdb;
|
||||
--ion-color-step-900: #e7e7e7;
|
||||
--ion-color-step-950: #f3f3f3;
|
||||
|
||||
--ion-item-background: #1e1e1e;
|
||||
|
||||
--ion-toolbar-background: #1f1f1f;
|
||||
|
||||
--ion-tab-bar-background: #1f1f1f;
|
||||
|
||||
--ion-card-background: #1e1e1e;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
src: url('../assets/fonts/Montserrat/Montserrat-Regular.ttf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Benton Sans';
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
src: url('../assets/fonts/Benton_Sans/BentonSans-Regular.otf');
|
||||
}
|
||||
Reference in New Issue
Block a user