user must click continue in kiosk on success page (#2001)

* user must click continue in kiosk on success page

* hide source disk when target list for transfer and shpw indeterminate bar when 100%

* minor copy

* also check for guid on disk

* reuse va
This commit is contained in:
Matt Hill
2022-11-30 14:42:30 -07:00
committed by GitHub
parent aafcce871e
commit af618f42bd
6 changed files with 60 additions and 25 deletions

View File

@@ -9,6 +9,7 @@ import {
ApiService, ApiService,
BackupRecoverySource, BackupRecoverySource,
DiskRecoverySource, DiskRecoverySource,
DiskMigrateSource,
} from 'src/app/services/api/api.service' } from 'src/app/services/api/api.service'
import { DiskInfo, ErrorToastService, GuidPipe } from '@start9labs/shared' import { DiskInfo, ErrorToastService, GuidPipe } from '@start9labs/shared'
import { StateService } from 'src/app/services/state.service' import { StateService } from 'src/app/services/state.service'
@@ -52,17 +53,24 @@ export class EmbassyPage {
this.loading = true this.loading = true
try { try {
const disks = await this.apiService.getDrives() const disks = await this.apiService.getDrives()
this.storageDrives = disks.filter( this.storageDrives = disks.filter(d => {
d => if (this.stateService.setupType === 'restore') {
!d.partitions return !d.partitions
.map(p => p.logicalname) .map(p => p.logicalname)
.includes( .includes(
( (
(this.stateService.recoverySource as BackupRecoverySource) (this.stateService.recoverySource as BackupRecoverySource)
?.target as DiskRecoverySource ?.target as DiskRecoverySource
)?.logicalname, )?.logicalname,
), )
) } else if (this.stateService.setupType === 'transfer') {
const guid = (this.stateService.recoverySource as DiskMigrateSource)
.guid
return (
d.guid !== guid && !d.partitions.map(p => p.guid).includes(guid)
)
}
})
} catch (e: any) { } catch (e: any) {
this.errorToastService.present(e) this.errorToastService.present(e)
} finally { } finally {

View File

@@ -24,7 +24,7 @@
padding-bottom: 20px; padding-bottom: 20px;
margin-bottom: 40px; margin-bottom: 40px;
" "
[type]="progress.decimal ? 'determinate' : 'indeterminate'" [type]="progress.decimal && progress.decimal < 1 ? 'determinate' : 'indeterminate'"
[value]="progress.decimal || 0" [value]="progress.decimal || 0"
></ion-progress-bar> ></ion-progress-bar>
<p>{{ progress.decimal | toMessage }}</p> <p>{{ progress.decimal | toMessage }}</p>

View File

@@ -1,6 +1,7 @@
import { Component } from '@angular/core' import { Component } from '@angular/core'
import { NavController } from '@ionic/angular' import { NavController } from '@ionic/angular'
import { StateService } from 'src/app/services/state.service' import { StateService } from 'src/app/services/state.service'
import { Pipe, PipeTransform } from '@angular/core'
@Component({ @Component({
selector: 'app-loading', selector: 'app-loading',
@@ -28,8 +29,6 @@ export class LoadingPage {
} }
} }
import { Pipe, PipeTransform } from '@angular/core'
@Pipe({ @Pipe({
name: 'toMessage', name: 'toMessage',
}) })
@@ -42,12 +41,20 @@ export class ToMessagePipe implements PipeTransform {
case 'attach': case 'attach':
return 'Setting up your Embassy' return 'Setting up your Embassy'
case 'restore': case 'restore':
return 'Restoring data. This can take a while.' if (!progress) {
return 'Initializing'
} else if (progress < 1) {
return 'Restoring data. This can take a while'
} else {
return 'Finalizing data restore'
}
case 'transfer': case 'transfer':
if (!progress) { if (!progress) {
return 'Preparing data. Depending on how much data you have, this could take up to 1 hour' return 'Preparing data. Depending on how much data you have, this could take up to 1 hour'
} else { } else if (progress < 1) {
return 'Transferring data' return 'Transferring data'
} else {
return 'Finalizing data transfer'
} }
default: default:
return '' return ''

View File

@@ -8,16 +8,23 @@
<ion-card> <ion-card>
<ion-row class="ion-align-items-center"> <ion-row class="ion-align-items-center">
<ion-col size-xs="12" class="ion-text-center"> <ion-col size-xs="12" class="ion-text-center">
<div class="inline"> <div class="inline" style="margin-bottom: 3rem">
<ion-icon <ion-icon
name="checkmark-circle-outline" name="checkmark-circle-outline"
color="success" color="success"
></ion-icon> ></ion-icon>
<h1>Setup Complete!</h1> <h1>Setup Complete!</h1>
</div> </div>
<h3 class="ion-padding-top"> <div class="card-container">
You will be redirected momentarily. <ion-card id="exit" (click)="exitKiosk()">
</h3> <div class="container">
<div class="inline">
<p>Continue to login</p>
<ion-icon name="log-in-outline"></ion-icon>
</div>
</div>
</ion-card>
</div>
</ion-col> </ion-col>
</ion-row> </ion-row>
</ion-card> </ion-card>

View File

@@ -106,6 +106,20 @@ ion-card {
align-items: center; align-items: center;
} }
#exit {
background: var(--color-accent);
height: 100%;
.container p {
font-size: 1.4rem !important;
font-weight: bold;
}
ion-icon {
font-size: 1.7rem;
}
}
#launch { #launch {
background: var(--alt-blue); background: var(--alt-blue);
height: 100%; height: 100%;

View File

@@ -8,11 +8,7 @@ import {
Output, Output,
ViewChild, ViewChild,
} from '@angular/core' } from '@angular/core'
import { import { DownloadHTMLService, ErrorToastService } from '@start9labs/shared'
DownloadHTMLService,
ErrorToastService,
pauseFor,
} from '@start9labs/shared'
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'
@@ -61,14 +57,13 @@ export class SuccessPage {
this.ngZone.runOutsideAngular(() => this.initMatrix()) this.ngZone.runOutsideAngular(() => this.initMatrix())
try { try {
const ret = await this.api.complete() const ret = await this.api.complete()
if (this.isKiosk) { if (!this.isKiosk) {
await pauseFor(4000)
} else {
this.torAddress = ret['tor-address'] this.torAddress = ret['tor-address']
this.lanAddress = ret['lan-address'] this.lanAddress = ret['lan-address']
this.cert = ret['root-ca'] this.cert = ret['root-ca']
await this.api.exit()
} }
await this.api.exit()
} catch (e: any) { } catch (e: any) {
await this.errCtrl.present(e) await this.errCtrl.present(e)
} }
@@ -94,6 +89,10 @@ export class SuccessPage {
}) })
} }
exitKiosk() {
this.api.exit()
}
private initMatrix() { private initMatrix() {
this.ctx = this.canvas.nativeElement.getContext('2d')! this.ctx = this.canvas.nativeElement.getContext('2d')!
this.canvas.nativeElement.width = window.innerWidth this.canvas.nativeElement.width = window.innerWidth
@@ -118,7 +117,7 @@ export class SuccessPage {
} }
} }
draw() { private draw() {
// draw a semi transparent black rectangle on top of the scene to slowly fade older characters // draw a semi transparent black rectangle on top of the scene to slowly fade older characters
this.ctx.fillStyle = 'rgba( 0 , 0 , 0 , ' + this.fadeFactor + ' )' this.ctx.fillStyle = 'rgba( 0 , 0 , 0 , ' + this.fadeFactor + ' )'
this.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height) this.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height)
@@ -143,7 +142,7 @@ export class SuccessPage {
} }
} }
tick() { private tick() {
this.draw() this.draw()
setTimeout(this.tick.bind(this), 50) setTimeout(this.tick.bind(this), 50)
} }