Start9/start-os
2
0
Fork 0
mirror of https://github.com/Start9Labs/start-os.git synced 2026-03-26 02:11:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

ui: modal direction

Browse Source
This commit is contained in:
Aaron Greenspan
2021-01-06 22:12:47 -07:00
committed by Aiden McClelland
parent a896f4c7a1
commit 54e1acc6b6
6 changed files with 164 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
ui/src/app/components/app-backup-confirmation/app-backup-confirmation.component.html Normal file
View File

@@ -0,0 +1,37 @@
<ion-header>
<ion-toolbar>
<ion-title>
Confirm Backup
</ion-title>
<ion-buttons slot="start">
<ion-button slot="start" (click)="cancel()">
<ion-icon name="close-outline"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<!-- <ion-label class="ion-text-wrap" style="margin: 20px">{{message}}</ion-label> -->
<form (submit)="submit()">
<ion-item-group>
<ion-item>
<ion-input [type]="unmasked ? 'text' : 'password'" name="password" placeholder="password" [(ngModel)]="password" (ionChange)="$error$.next('')"></ion-input>
<!-- <ion-button fill="clear" [color]="unmasked ? 'danger' : 'primary'" (click)="toggleMask()">
<ion-icon slot="icon-only" [name]="unmasked ? 'eye-off-outline' : 'eye-outline'" size="small"></ion-icon>
</ion-button> -->
</ion-item>
<ion-item *ngIf="$error$ | async as e" lines="none">
<ion-label class="ion-text-wrap" color="danger">{{ e }}</ion-label>
</ion-item>
<ion-item-divider></ion-item-divider>
<ion-item>
<ion-label>Eject drive when backup complete?</ion-label>
<ion-checkbox color="primary" checked slot="end" [(ngModel)]="eject"></ion-checkbox>
</ion-item>
</ion-item-group>
<ion-button type="submit" [disabled]="!password" style="margin-top: 30px" expand="block" fill="outline">
Backup
</ion-button>
</form>
</ion-content>

20
ui/src/app/components/app-backup-confirmation/app-backup-confirmation.component.module.ts Normal file
View File

@@ -0,0 +1,20 @@
import { NgModule } from '@angular/core'
import { CommonModule } from '@angular/common'
import { AppBackupConfirmationComponent } from './app-backup-confirmation.component'
import { IonicModule } from '@ionic/angular'
import { RouterModule } from '@angular/router'
import { SharingModule } from 'src/app/modules/sharing.module'
@NgModule({
declarations: [
AppBackupConfirmationComponent,
],
imports: [
CommonModule,
IonicModule,
RouterModule.forChild([]),
SharingModule,
],
exports: [AppBackupConfirmationComponent],
})
export class AppBackupConfirmationComponentModule { }

10
ui/src/app/components/app-backup-confirmation/app-backup-confirmation.component.scss Normal file
View File

@@ -0,0 +1,10 @@
.error-message {
--background: var(--ion-color-danger);
margin: 12px;
border-radius: 3px;
font-weight: bold;
}
.legacy-error-message {
margin: 5px;
}

43
ui/src/app/components/app-backup-confirmation/app-backup-confirmation.component.ts Normal file
View File

@@ -0,0 +1,43 @@
import { Component, Input, OnInit } from '@angular/core'
import { IonicSafeString, ModalController } from '@ionic/angular'
import { BehaviorSubject } from 'rxjs'
import { AppInstalledFull } from 'src/app/models/app-types'
import { DiskPartition } from 'src/app/models/server-model'
@Component({
selector: 'app-backup-confirmation',
templateUrl: './app-backup-confirmation.component.html',
styleUrls: ['./app-backup-confirmation.component.scss'],
})
export class AppBackupConfirmationComponent implements OnInit {
unmasked = false
password: string
$error$: BehaviorSubject<string> = new BehaviorSubject('')
eject = true
message: string
@Input() app: AppInstalledFull
@Input() partition: DiskPartition
constructor (private readonly modalCtrl: ModalController) { }
ngOnInit () {
this.message = `Enter your master password to create an encrypted backup of ${this.app.title} to "${this.partition.label || this.partition.logicalname}".`
}
toggleMask () {
this.unmasked = !this.unmasked
}
cancel() {
this.modalCtrl.dismiss({ cancel: true })
}
submit () {
if (!this.password || this.password.length < 12) {
this.$error$.next('Password must be at least 12 characters in length.')
return
}
const { password, eject } = this
this.modalCtrl.dismiss({ password, eject })
}
}

2
ui/src/app/modals/app-backup/app-backup.module.ts
View File

@@ -2,12 +2,14 @@ import { NgModule } from '@angular/core'
import { CommonModule } from '@angular/common'
import { IonicModule } from '@ionic/angular'
import { AppBackupPage } from './app-backup.page'
import { AppBackupConfirmationComponentModule } from 'src/app/components/app-backup-confirmation/app-backup-confirmation.component.module'
@NgModule({
declarations: [AppBackupPage],
imports: [
CommonModule,
IonicModule,
AppBackupConfirmationComponentModule,
],
entryComponents: [AppBackupPage],
exports: [AppBackupPage],

86
ui/src/app/modals/app-backup/app-backup.page.ts
View File

@@ -6,6 +6,7 @@ import { ApiService } from 'src/app/services/api/api.service'
import { DiskInfo, DiskPartition } from 'src/app/models/server-model'
import { pauseFor } from 'src/app/util/misc.util'
import { concatMap } from 'rxjs/operators'
import { AppBackupConfirmationComponent } from 'src/app/components/app-backup-confirmation/app-backup-confirmation.component'
@Component({
selector: 'app-backup',
@@ -84,43 +85,58 @@ export class AppBackupPage {
}
private async presentAlertCreateEncrypted (disk: DiskInfo, partition: DiskPartition): Promise<void> {
const alert = await this.alertCtrl.create({
backdropDismiss: false,
header: `Ready to Backup`,
message: `Enter your master password to create an encrypted backup of ${this.app.title} to "${partition.label || partition.logicalname}".`,
inputs: [
{
name: 'password',
label: 'Password',
type: 'password',
placeholder: 'Master Password',
const m = await this.modalCtrl.create({
componentProps: {
app: this.app,
partition,
},
{
name: 'eject',
label: 'Eject drive when finished',
placeholder: 'Eject drive when finished',
type: 'checkbox',
},
],
buttons: [
{
text: 'Cancel',
role: 'cancel',
},
{
text: 'Create Backup',
handler: async (data) => {
if (!data.password || data.password.length < 12) {
alert.message = new IonicSafeString(alert.message + '<br /><br /><ion-text color="danger">Password must be at least 12 characters in length.</ion-text>')
return false
} else {
return this.create(disk, partition, data.password, data.eject)
}
},
},
],
component: AppBackupConfirmationComponent,
})
await alert.present()
m.onWillDismiss().then(res => {
const data = res.data
if (data.cancel) return
return this.create(disk, partition, data.password, data.eject)
})
return await m.present()
// const alert = await this.alertCtrl.create({
// backdropDismiss: false,
// header: `Ready to Backup`,
// message: `Enter your master password to create an encrypted backup of ${this.app.title} to "${partition.label || partition.logicalname}".`,
// inputs: [
// {
// name: 'password',
// label: 'Password',
// type: 'password',
// placeholder: 'Master Password',
// },
// {
// name: 'eject',
// label: 'Eject drive when finished',
// placeholder: 'Eject drive when',
// type: 'checkbox',
// },
// ],
// buttons: [
// {
// text: 'Cancel',
// role: 'cancel',
// },
// {
// text: 'Create Backup',
// handler: async (data) => {
// if (!data.password || data.password.length < 12) {
// alert.message = new IonicSafeString(alert.message + '<br /><br /><ion-text color="danger">Password must be at least 12 characters in length.</ion-text>')
// return false
// } else {
// return this.create(disk, partition, data.password, data.eject)
// }
// },
// },
// ],
// })
// await alert.present()
}
private async presentAlertWarn (partition: DiskPartition): Promise<void> {