mirror of
https://github.com/Start9Labs/start-os.git
synced 2026-03-26 02:11:53 +00:00
ui: modal direction
This commit is contained in:
Aaron Greenspan
committed by
Aiden McClelland
Aiden McClelland
parent
a896f4c7a1
commit
54e1acc6b6
@@ -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>
|
||||
@@ -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 { }
|
||||
@@ -0,0 +1,10 @@
|
||||
.error-message {
|
||||
--background: var(--ion-color-danger);
|
||||
margin: 12px;
|
||||
border-radius: 3px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.legacy-error-message {
|
||||
margin: 5px;
|
||||
}
|
||||
@@ -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,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],
|
||||
|
||||
@@ -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',
|
||||
},
|
||||
{
|
||||
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)
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
const m = await this.modalCtrl.create({
|
||||
componentProps: {
|
||||
app: this.app,
|
||||
partition,
|
||||
},
|
||||
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> {
|
||||
|
||||
Reference in New Issue
Block a user