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

cosmetics plus a slew of little frontend rendering bugs

Browse Source
This commit is contained in:
Matt Hill
2021-08-13 16:16:24 -06:00
committed by Aiden McClelland
parent c18a119c70
commit 7dc53a4e85
44 changed files with 518 additions and 618 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
ui/src/app/app.component.ts
View File

@@ -75,7 +75,6 @@ export class AppComponent {
async init () {
await this.storage.create()
await this.authService.init()
await this.emver.init()
await this.patch.init()
this.router.initialNavigation()

4
ui/src/app/components/config-header/config-header.component.html
View File

@@ -11,7 +11,7 @@
</ng-container>
<!-- description -->
<ion-item *ngIf="spec.description">
<ion-label class="ion-text-wrap">
<ion-label>
<p>
<ion-text color="dark">Description</ion-text>
</p>
@@ -20,7 +20,7 @@
</ion-item>
<!-- warning -->
<ion-item *ngIf="spec['change-warning']">
<ion-label class="ion-text-wrap">
<ion-label>
<p>
<ion-text color="warning">Warning!</ion-text>
</p>

4
ui/src/app/components/form-object/form-object.component.html
View File

@@ -15,13 +15,13 @@
<!-- primitive -->
<ng-container *ngIf="['string', 'number', 'boolean', 'enum'] | includes : spec.type">
<!-- label -->
<p class="input-label">
<h4 class="input-label">
<form-label [data]="{
spec: spec,
isNew: current && current[entry.key] === undefined,
isEdited: entry.value.dirty
}"></form-label>
</p>
</h4>
<!-- string -->
<ion-item color="dark" *ngIf="spec.type === 'string'">
<ion-input [type]="spec.masked && !unmasked[entry.key] ? 'password' : 'text'" [placeholder]="'Enter ' + spec.name" [formControlName]="entry.key" (ionChange)="presentAlertChangeWarning(entry.key, spec)"></ion-input>

14
ui/src/app/components/form-object/form-object.component.scss
View File

@@ -1,7 +1,8 @@
.help-icon {
display: inline-block;
vertical-align: middle;
padding-bottom: 2px;
padding-bottom: 1px;
padding-right: 6px;
font-size: 18px;
color: var(--ion-color-dark);
cursor: pointer;
@@ -18,17 +19,6 @@ ion-item-divider {
border-bottom: 1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))))
}
.input-label {
// padding-top: 10px;
margin-bottom: 5px;
font-size: medium;
font-weight: bold;
* {
display: inline-block;
vertical-align: middle;
}
}
.nested-wrapper {
padding: 0 0 30px 30px;
// border-bottom: 1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))))

16
ui/src/app/components/object-config/object-config-item.component.html
View File

@@ -1,16 +0,0 @@
<ion-item button (click)="handleClick()">
<ion-icon size="small" slot="start" *ngIf="anno | annotationStatus: 'Added'" style="margin-right: 15px; color: rgba(0,0,0,0); background: radial-gradient(#2a4e8970, #2a4e8970 35%, transparent 35%, transparent);" name="ellipse"></ion-icon>
<ion-icon size="small" slot="start" *ngIf="anno | annotationStatus: 'NoChange'" style="margin-right: 15px; color: rgba(0,0,0,0); background: radial-gradient(#2a4e8970, #2a4e8970 35%, transparent 35%, transparent);" name="ellipse"></ion-icon>
<ion-icon size="small" slot="start" *ngIf="anno | annotationStatus: 'Edited'" style="margin-right: 15px" color="primary" name="ellipse"></ion-icon>
<ion-icon size="small" slot="start" *ngIf="anno | annotationStatus: 'Invalid'" style="margin-right: 15px" color="danger" name="warning-outline"></ion-icon>
<div class="organizer">
<ion-label class="ion-text-wrap">
{{ spec.name }}
<ion-text class="new-tag" *ngIf="anno | annotationStatus: 'Added'">(new)</ion-text>
</ion-label>
</div>
<ion-note *ngIf="displayValue" style="font-size: small;" [class.bold]="anno | annotationStatus: 'Edited'" slot="end">{{ displayValue }}</ion-note>
</ion-item>

11
ui/src/app/components/object-config/object-config.component.html
View File

@@ -1,11 +0,0 @@
<ion-item-group>
<object-config-item
*ngFor="let keyval of (spec.type === 'object' ? spec.spec : spec.variants[value[spec.tag.id]]) | keyvalue: asIsOrder"
[key]="keyval.key"
[spec]="keyval.value"
[value]="value[keyval.key]"
[anno]="annotations.members[keyval.key]"
(onClick)="handleClick(keyval.key)"
[class.add-margin]="keyval.key === 'advanced'"
></object-config-item>
</ion-item-group>

24
ui/src/app/components/object-config/object-config.component.module.ts
View File

@@ -1,24 +0,0 @@
import { NgModule } from '@angular/core'
import { CommonModule } from '@angular/common'
import { FormsModule } from '@angular/forms'
import { ObjectConfigComponent, ObjectConfigItemComponent } from './object-config.component'
import { IonicModule } from '@ionic/angular'
import { SharingModule } from 'src/app/modules/sharing.module'
@NgModule({
declarations: [
ObjectConfigComponent,
ObjectConfigItemComponent,
],
imports: [
CommonModule,
FormsModule,
IonicModule,
SharingModule,
],
exports: [
ObjectConfigComponent,
ObjectConfigItemComponent,
],
})
export class ObjectConfigComponentModule { }

20
ui/src/app/components/object-config/object-config.component.scss
View File

@@ -1,20 +0,0 @@
.add-margin {
margin: 0 16px;
}
.new-tag {
padding: 0px 5px;
font-weight: bold;
font-size: smaller;
color: #cecece;
font-style: italic;
}
.bold {
font-weight: bold;
}
.organizer {
display: flex;
align-items: center;
}

95
ui/src/app/components/object-config/object-config.component.ts
View File

@@ -1,95 +0,0 @@
import { Component, EventEmitter, Input, Output } from '@angular/core'
import { Annotation, Annotations } from '../../pkg-config/config-utilities'
import { ConfigCursor } from 'src/app/pkg-config/config-cursor'
import { ValueSpecOf, ValueSpec } from 'src/app/pkg-config/config-types'
import { MaskPipe } from 'src/app/pipes/mask.pipe'
import { IonNav } from '@ionic/angular'
import { SubNavService } from 'src/app/services/sub-nav.service'
@Component({
selector: 'object-config',
templateUrl: './object-config.component.html',
styleUrls: ['./object-config.component.scss'],
})
export class ObjectConfigComponent {
@Input() cursor: ConfigCursor<'object' | 'union'>
@Output() onEdit = new EventEmitter<boolean>()
spec: ValueSpecOf<'object' | 'union'>
value: object
annotations: Annotations<'object' | 'union'>
constructor (
private readonly subNav: SubNavService,
private readonly nav: IonNav,
) { }
ngOnInit () {
this.spec = this.cursor.spec()
this.value = this.cursor.config()
this.annotations = this.cursor.getAnnotations()
}
async handleClick (key: string) {
const nextCursor = this.cursor.seekNext(key)
nextCursor.createFirstEntryForList()
this.subNav.push(key, nextCursor, this.nav)
}
asIsOrder () {
return 0
}
}
@Component({
selector: 'object-config-item',
templateUrl: './object-config-item.component.html',
styleUrls: ['./object-config.component.scss'],
})
export class ObjectConfigItemComponent {
@Input() key: string
@Input() spec: ValueSpec
@Input() value: string | number
@Input() anno: Annotation
@Output() onClick = new EventEmitter<boolean>()
maskPipe: MaskPipe = new MaskPipe()
displayValue?: string | number | boolean
ngOnChanges () {
switch (this.spec.type) {
case 'string':
if (this.value) {
if (this.spec.masked) {
this.displayValue = this.maskPipe.transform(this.value as string, 4)
} else {
this.displayValue = this.value
}
} else {
this.displayValue = '-'
}
break
case 'boolean':
this.displayValue = String(this.value)
break
case 'number':
this.displayValue = this.value || '-'
if (this.displayValue && this.spec.units) {
this.displayValue = `${this.displayValue} ${this.spec.units}`
}
break
case 'enum':
this.displayValue = this.spec['value-names'][this.value]
break
case 'pointer':
this.displayValue = 'System Defined'
break
default:
return
}
}
async handleClick (): Promise<void> {
if (this.spec.type === 'pointer') return
this.onClick.emit(true)
}
}

24
ui/src/app/components/skeleton-list/skeleton-list.component.html
View File

@@ -2,14 +2,14 @@
<ion-item-group>
<ng-container *ngFor="let g of groupsArr">
<ion-item-divider>
<ion-skeleton-text style="width: 15%"></ion-skeleton-text>
<ion-skeleton-text animated style="width: 120px; height: 16px;"></ion-skeleton-text>
</ion-item-divider>
<ion-item *ngFor="let r of rowsArr">
<ion-label>
<ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
<ion-skeleton-text animated style="width: 200px; height: 14px;"></ion-skeleton-text>
</ion-label>
<ion-note slot="end">
<ion-skeleton-text animated style="width: 100%"></ion-skeleton-text>
<ion-skeleton-text animated style="width: 80px; height: 14px;"></ion-skeleton-text>
</ion-note>
</ion-item>
</ng-container>
@@ -17,12 +17,14 @@
</ng-container>
<ng-container *ngIf="!groups">
<ion-item *ngFor="let r of rowsArr">
<ion-label>
<ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
</ion-label>
<ion-note slot="end">
<ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
</ion-note>
</ion-item>
<ion-item-group>
<ion-item *ngFor="let r of rowsArr">
<ion-label>
<ion-skeleton-text animated style="width: 200px; height: 14px;"></ion-skeleton-text>
</ion-label>
<ion-note slot="end">
<ion-skeleton-text animated style="width: 80px; height: 14px;"></ion-skeleton-text>
</ion-note>
</ion-item>
</ion-item-group>
</ng-container>

9
ui/src/app/modals/app-config/app-config.page.html
View File

@@ -1,8 +1,9 @@
<ion-header>
<ion-header style="min-height: unset;">
<ion-toolbar *ngIf="patch.data['package-data'][pkgId] as pkg">
<ion-title>Config</ion-title>
<ion-buttons slot="end" class="ion-padding-end">
<ion-button fill="clear" [disabled]="loadingText" (click)="resetDefaults()">
<ion-icon slot="start" name="refresh-outline"></ion-icon>
Reset Defaults
</ion-button>
</ion-buttons>
@@ -20,7 +21,7 @@
<ng-container *ngIf="patch.data['package-data'][pkgId] as pkg">
<ng-container *ngIf="pkg.manifest.config && !pkg.installed.status.configured && !edited">
<ion-item class="notifier-item">
<ion-label class="ion-text-wrap">
<ion-label>
<h2 style="display: flex; align-items: center; margin-bottom: 3px;">
<ion-icon size="small" style="margin-right: 5px" slot="start" color="dark" slot="start" name="alert-circle-outline"></ion-icon>
<ion-text style="font-size: smaller;">Initial Config</ion-text>
@@ -32,7 +33,7 @@
<ng-container *ngIf="rec && showRec">
<ion-item class="rec-item">
<ion-label class="ion-text-wrap">
<ion-label>
<h2 style="display: flex; align-items: center;">
<ion-icon size="small" style="margin: 4px" slot="start" color="primary" slot="start" name="ellipse"></ion-icon>
<ion-thumbnail style="width: 3vh; height: 3vh; margin: 0px 2px 0px 5px;" slot="start">
@@ -60,7 +61,7 @@
<!-- no config -->
<ion-item *ngIf="!hasConfig">
<ion-label class="ion-text-wrap">
<ion-label>
<p>No config options for {{ pkg.manifest.title }} {{ pkg.manifest.version }}.</p>
</ion-label>
</ion-item>

54
ui/src/app/modals/app-restore/app-restore.component.html
View File

@@ -18,43 +18,37 @@
<ion-content *ngIf="!loading && !submitting">
<ion-item class="ion-margin-bottom">
<ion-label class="ion-text-wrap">
<p class="ion-padding-bottom"><ion-text color="warning">Warning</ion-text></p>
<ion-label>
<h2>
Restoring from backup will overwrite all current data for {{ patch.data['package-data'][pkgId].manifest.title }} .
Select the drive containing the backup you would like to restore.
<br />
<br />
<ion-text color="warning">
Warning! All current data for {{ patch.data['package-data'][pkgId].manifest.title }} will be overwritten by the backup.
</ion-text>
</h2>
</ion-label>
</ion-item>
<ion-item-divider>Select Backup Drive</ion-item-divider>
<ion-item *ngIf="allPartitionsMounted">
<ion-text class="ion-text-wrap" color="warning">No partitions available. Insert the storage device containing the backup you intend to restore.</ion-text>
<ion-text class="ion-text-wrap" color="warning">No drives found containing a valid backup for {{ patch.data['package-data'][pkgId].manifest.title }}. Insert the storage device containing the backup you intend to restore.</ion-text>
</ion-item>
<ion-card *ngFor="let disk of disks | keyvalue">
<ion-card-header>
<ion-card-title>
{{ disk.value.size }}
</ion-card-title>
<ion-card-subtitle>
{{ disk.key }}
</ion-card-subtitle>
</ion-card-header>
<ion-card-content>
<ion-item-group>
<ion-item button *ngFor="let partition of disk.value.partitions | keyvalue" [disabled]="partition.value['is-mounted']" (click)="presentModal(partition.key)">
<ion-icon slot="start" name="save-outline"></ion-icon>
<ion-label>
<h2>{{ partition.value.label || partition.key }} ({{ partition.value.size || 'unknown size' }})</h2>
<p *ngIf="!partition.value['is-mounted']; else unavailable"><ion-text color="success">Available</ion-text></p>
<ng-template #unavailable>
<p><ion-text color="danger">Unavailable</ion-text></p>
</ng-template>
</ion-label>
</ion-item>
</ion-item-group>
</ion-card-content>
</ion-card>
<ion-item-group>
<div *ngFor="let disk of disks | keyvalue">
<ion-item-divider>{{ disk.key }} - {{ disk.value.size }}</ion-item-divider>
<ion-item button *ngFor="let partition of disk.value.partitions | keyvalue" [disabled]="partition.value['is-mounted']" (click)="presentModal(partition.key)">
<ion-icon slot="start" name="save-outline" size="large"></ion-icon>
<ion-label>
<h1>{{ partition.value.label || partition.key }}</h1>
<h2>{{ partition.value.size || 'unknown size' }}</h2>
<p *ngIf="!partition.value['is-mounted']; else unavailable"><ion-text color="success">Available</ion-text></p>
<ng-template #unavailable>
<p><ion-text color="danger">Unavailable</ion-text></p>
</ng-template>
</ion-label>
</ion-item>
</div>
</ion-item-group>
</ion-content>
</ion-content>

56
ui/src/app/modals/app-restore/app-restore.component.ts
View File

@@ -1,10 +1,9 @@
import { Component, Input } from '@angular/core'
import { LoadingController, ModalController } from '@ionic/angular'
import { ModalController } from '@ionic/angular'
import { ApiService } from 'src/app/services/api/embassy-api.service'
import { BackupConfirmationComponent } from 'src/app/modals/backup-confirmation/backup-confirmation.component'
import { DiskInfo } from 'src/app/services/api/api.types'
import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
import { Subscription } from 'rxjs'
import { ErrorToastService } from 'src/app/services/error-toast.service'
@Component({
@@ -15,29 +14,22 @@ import { ErrorToastService } from 'src/app/services/error-toast.service'
export class AppRestoreComponent {
@Input() pkgId: string
disks: DiskInfo
title: string
loading = true
submitting = false
allPartitionsMounted: boolean
subs: Subscription[] = []
modal: HTMLIonModalElement
constructor (
private readonly modalCtrl: ModalController,
private readonly embassyApi: ApiService,
private readonly loadingCtrl: LoadingController,
private readonly errToast: ErrorToastService,
public readonly patch: PatchDbService,
) { }
ngOnInit () {
async ngOnInit () {
this.getExternalDisks()
this.modal = await this.modalCtrl.getTop()
}
// ngAfterViewInit () {
// this.content.scrollToPoint(undefined, 1)
// }
async refresh () {
this.loading = true
await this.getExternalDisks()
@@ -55,42 +47,36 @@ export class AppRestoreComponent {
}
async presentModal (logicalname: string): Promise<void> {
const m = await this.modalCtrl.create({
const modal = await this.modalCtrl.create({
componentProps: {
type: 'restore',
title: 'Enter Password',
message: 'Backup encrypted. Enter the password that was originally used to encrypt this backup.',
label: 'Password',
useMask: true,
buttonText: 'Restore',
submitFn: async (value: string) => await this.restore(logicalname, value),
},
cssClass: 'alertlike-modal',
presentingElement: await this.modalCtrl.getTop(),
component: BackupConfirmationComponent,
backdropDismiss: false,
})
m.onWillDismiss().then(res => {
const data = res.data
if (data.cancel) return
this.restore(logicalname, data.password)
modal.onWillDismiss().then(res => {
if (res.role === 'success') this.modal.dismiss(undefined, 'success')
})
await m.present()
await modal.present()
}
dismiss () {
this.modalCtrl.dismiss({ })
this.modalCtrl.dismiss()
}
private async restore (logicalname: string, password: string): Promise<void> {
this.submitting = true
// await loader.present()
try {
await this.embassyApi.restorePackage({
id: this.pkgId,
logicalname,
password,
})
} catch (e) {
this.modalCtrl.dismiss({ error: e })
} finally {
this.modalCtrl.dismiss({ })
}
await this.embassyApi.restorePackage({
id: this.pkgId,
logicalname,
password,
})
}
}

58
ui/src/app/modals/backup-confirmation/backup-confirmation.component.html
View File

@@ -1,31 +1,37 @@
<ion-content>
<div style="height: 85%; margin: 24px; display: flex; flex-direction: column; justify-content: space-between;">
<div *ngIf="type === 'backup'">
<h4><ion-text color="dark">Encrypt Backup</ion-text></h4>
<p><ion-text>Enter your master password to create an encrypted backup.</ion-text></p>
</div>
<div *ngIf="type === 'restore'">
<h4><ion-text color="dark">Decrypt Backup</ion-text></h4>
<p><ion-text>Enter the password that was originally used to encrypt this backup.</ion-text></p>
</div>
<div style="margin: 24px 24px 12px 24px; display: flex; flex-direction: column;">
<div>
<ion-item lines="none" style="--background: var(--ion-background-color); --border-color: var(--ion-color-medium);">
<ion-label style="font-size: small" position="floating">Master Password</ion-label>
<ion-input style="border-style: solid; border-width: 0px 0px 1px 0px; border-color: var(--ion-color-dark);" [(ngModel)]="password" type="password" (ionChange)="error = ''"></ion-input>
</ion-item>
<ion-item *ngIf="error" lines="none" style="--background: var(--ion-background-color);">
<ion-label style="font-size: small" color="danger" class="ion-text-wrap">{{ error }}</ion-label>
</ion-item>
</div>
<ion-item style="padding-bottom: 8px;">
<ion-label>
<h1>{{ title }}</h1>
<br />
<p>{{ message }}</p>
</ion-label>
</ion-item>
<div style="display: flex; justify-content: flex-end; align-items: center;">
<ion-button fill="clear" (click)="cancel()">
Cancel
</ion-button>
<ion-button fill="clear" (click)="submit()" [disabled]="!password.length">
{{ type === 'backup' ? 'Create Backup' : 'Restore Backup' }}
</ion-button>
</div>
<form (ngSubmit)="submit()">
<div style="margin-left: 16px;">
<p class="input-label">{{ label }}</p>
<ion-item lines="none" color="dark">
<ion-input [type]="useMask && !unmasked ? 'password' : 'text'" [(ngModel)]="value" name="value" (ionChange)="error = ''"></ion-input>
<ion-button slot="end" *ngIf="useMask" fill="clear" color="light" (click)="toggleMask()">
<ion-icon slot="icon-only" [name]="unmasked ? 'eye-off-outline' : 'eye-outline'" size="small"></ion-icon>
</ion-button>
</ion-item>
<!-- error -->
<p>
<ion-text [color]="error ? 'danger' : 'medium'">{{ error || 'placeholder' }}</ion-text>
</p>
</div>
<div class="ion-text-right">
<ion-button fill="clear" (click)="cancel()">
Cancel
</ion-button>
<ion-button fill="clear" type="submit" [disabled]="!value">
{{ buttonText }}
</ion-button>
</div>
</form>
</div>
</ion-content>

37
ui/src/app/modals/backup-confirmation/backup-confirmation.component.ts
View File

@@ -1,5 +1,6 @@
import { Component, Input } from '@angular/core'
import { ModalController } from '@ionic/angular'
import { IonicSafeString, LoadingController, ModalController } from '@ionic/angular'
import { getErrorMessage } from 'src/app/services/error-toast.service'
@Component({
selector: 'backup-confirmation',
@@ -7,13 +8,19 @@ import { ModalController } from '@ionic/angular'
styleUrls: ['./backup-confirmation.component.scss'],
})
export class BackupConfirmationComponent {
@Input() type: 'backup' | 'restore'
@Input() title: string
@Input() message: string
@Input() label = 'Enter value'
@Input() buttonText = 'Submit'
@Input() useMask = false
@Input() value = ''
@Input() submitFn: (value: string) => Promise<any>
unmasked = false
password = ''
error = ''
error: string | IonicSafeString
constructor (
private readonly modalCtrl: ModalController,
private readonly loadingCtrl: LoadingController,
) { }
toggleMask () {
@@ -21,15 +28,23 @@ export class BackupConfirmationComponent {
}
cancel () {
this.modalCtrl.dismiss({ cancel: true })
this.modalCtrl.dismiss()
}
submit () {
if (!this.password || this.password.length < 12) {
this.error = 'Password must be at least 12 characters in length.'
return
async submit () {
const loader = await this.loadingCtrl.create({
spinner: 'lines',
cssClass: 'loader',
})
loader.present()
try {
await this.submitFn(this.value)
this.modalCtrl.dismiss(undefined, 'success')
} catch (e) {
this.error = getErrorMessage(e)
} finally {
loader.dismiss()
}
const { password } = this
this.modalCtrl.dismiss({ password })
}
}

6
ui/src/app/pages/apps-routes/app-actions/app-actions-item.component.html
View File

@@ -1,7 +1,7 @@
<ion-item button>
<ion-icon slot="start" [name]="action.icon"></ion-icon>
<ion-label class="ion-text-wrap">
<ion-icon slot="start" [name]="action.icon" size="large"></ion-icon>
<ion-label>
<h1>{{ action.name }}</h1>
<h2>{{ action.description }}</h2>
<p>{{ action.description }}</p>
</ion-label>
</ion-item>

6
ui/src/app/pages/apps-routes/app-actions/app-actions.page.ts
View File

@@ -110,15 +110,13 @@ export class AppActionsPage {
pkgId: this.pkgId,
},
component: AppRestoreComponent,
backdropDismiss: false,
})
modal.onWillDismiss().then(res => {
const data = res.data
if (data.error) this.errToast.present(data.error)
if (res.role === 'success') this.navCtrl.back()
})
return await modal.present()
await modal.present()
}
async uninstall (manifest: Manifest) {

14
ui/src/app/pages/apps-routes/app-interfaces/app-interfaces-item.component.html
View File

@@ -1,14 +1,14 @@
<ion-item>
<ion-icon slot="start" [name]="interface.def.ui ? 'desktop-outline' : 'terminal-outline'"></ion-icon>
<ion-label class="ion-text-wrap">
<ion-icon slot="start" size="large" [name]="interface.def.ui ? 'desktop-outline' : 'terminal-outline'"></ion-icon>
<ion-label>
<h1>{{ interface.def.name }}</h1>
<h2>{{ interface.def.description }}</h2>
</ion-label>
</ion-item>
<div style="padding-left: 54px;">
<div style="padding-left: 64px;">
<!-- has tor -->
<ion-item *ngIf="interface.addresses['tor-address'] as tor">
<ion-label class="ion-text-wrap">
<ion-label>
<h2>Tor Address</h2>
<p>{{ tor }}</p>
</ion-label>
@@ -23,7 +23,7 @@
</ion-item>
<!-- no tor -->
<ion-item *ngIf="!interface.addresses['tor-address']">
<ion-label class="ion-text-wrap">
<ion-label>
<h2>Tor Address</h2>
<p>Service does not use a Tor Address</p>
</ion-label>
@@ -31,7 +31,7 @@
<!-- lan -->
<ion-item *ngIf="interface.addresses['lan-address'] as lan">
<ion-label class="ion-text-wrap">
<ion-label>
<h2>LAN Address</h2>
<p>{{ lan }}</p>
</ion-label>
@@ -46,7 +46,7 @@
</ion-item>
<!-- no lan -->
<ion-item *ngIf="!interface.addresses['lan-address']">
<ion-label class="ion-text-wrap">
<ion-label>
<h2>LAN Address</h2>
<p>Service does not use a LAN Address</p>
</ion-label>

4
ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.scss
View File

@@ -1,4 +0,0 @@
.vertical-align {
display: inline-block;
vertical-align: middle;
}

4
ui/src/app/pages/apps-routes/app-list/app-list.page.html
View File

@@ -24,8 +24,8 @@
<ion-row>
<ion-col *ngFor="let pkg of pkgs | keyvalue : asIsOrder" sizeXs="4" sizeSm="3" sizeLg="3" sizeXl="2">
<ion-card class="installed-card" [routerLink]="['/services', pkg.value.entry.manifest.id]">
<div class="launch-container" *ngIf="pkg.value.entry | hasUi">
<div class="launch-button-triangle" (click)="launchUi(pkg.value.entry, $event)" [class.launch-disabled]="!(pkg.value.entry | isLaunchable)">
<div class="launch-container" *ngIf="pkg.value.entry.manifest.interfaces | hasUi">
<div class="launch-button-triangle" (click)="launchUi(pkg.value.entry, $event)" [class.launch-disabled]="!(pkg.value.entry.state | isLaunchable : pkg.value.entry.installed.status.main.status : pkg.value.entry.manifest.interfaces)">
<ion-icon name="open-outline"></ion-icon>
</div>
</div>

11
ui/src/app/pages/apps-routes/app-properties/app-properties.page.html
View File

@@ -6,7 +6,8 @@
<ion-title>Properties</ion-title>
<ion-buttons slot="end">
<ion-button (click)="refresh()">
<ion-icon slot="icon-only" name="refresh-outline"></ion-icon>
<ion-icon slot="start" name="refresh-outline"></ion-icon>
Refresh
</ion-button>
</ion-buttons>
</ion-toolbar>
@@ -18,14 +19,14 @@
<ng-template #loaded>
<!-- not running -->
<ion-item *ngIf="!running" class="ion-margin-bottom">
<ion-label class="ion-text-wrap">
<ion-label>
<p><ion-text color="warning">Service not running. Information on this page could be inaccurate.</ion-text></p>
</ion-label>
</ion-item>
<!-- no properties -->
<ion-item *ngIf="properties | empty">
<ion-label class="ion-text-wrap">
<ion-label>
<p>No properties.</p>
</ion-label>
</ion-item>
@@ -38,7 +39,7 @@
<ion-button *ngIf="prop.value.description" fill="clear" slot="start" (click)="presentDescription(prop, $event)">
<ion-icon slot="icon-only" name="help-circle-outline"></ion-icon>
</ion-button>
<ion-label class="ion-text-wrap">
<ion-label>
<h2>{{ prop.key }}</h2>
</ion-label>
</ion-item>
@@ -47,7 +48,7 @@
<ion-button *ngIf="prop.value.description" fill="clear" slot="start" (click)="presentDescription(prop, $event)">
<ion-icon slot="icon-only" name="help-circle-outline"></ion-icon>
</ion-button>
<ion-label class="ion-text-wrap">
<ion-label>
<h2>{{ prop.key }}</h2>
<p>{{ prop.value.masked && !unmasked[prop.key] ? (prop.value.value | mask ) : (prop.value.value | truncateEnd : 100) }}</p>
</ion-label>

101
ui/src/app/pages/apps-routes/app-show/app-show.page.html
View File

@@ -18,35 +18,35 @@
</ion-header>
<ion-content>
<ng-container *ngIf="pkg">
<ion-item-group>
<!-- ** always ** -->
<ion-item-divider>Status</ion-item-divider>
<ion-item>
<ion-label style="overflow: visible;">
<status size="x-large" weight="500" [rendering]="rendering"></status>
</ion-label>
<ion-button slot="end" class="action-button" *ngIf="pkg.state === PackageState.Installed && (pkg | hasUi)" [disabled]="!(pkg | isLaunchable)" (click)="launchUiTab()">
<ion-icon slot="start" name="open-outline"></ion-icon>
Open UI
</ion-button>
<ion-button slot="end" class="action-button" *ngIf="rendering.feStatus === FeStatus.NeedsConfig" [routerLink]="['config']">
Configure
</ion-button>
<ion-button slot="end" class="action-button" *ngIf="[FeStatus.Running, FeStatus.StartingUp, FeStatus.NeedsAttention] | includes : rendering.feStatus" color="danger" (click)="stop()">
Stop
</ion-button>
<ion-button slot="end" class="action-button" *ngIf="rendering.feStatus === FeStatus.DependencyIssue" (click)="scrollToRequirements()">
Fix
</ion-button>
<ion-button slot="end" class="action-button" *ngIf="rendering.feStatus === FeStatus.Stopped" color="success" (click)="tryStart()">
Start
</ion-button>
</ion-item>
<!-- ** iff installed ** -->
<ng-container *ngIf="pkg.state === PackageState.Installed">
<ion-item-group>
<!-- ** always ** -->
<ion-item-divider>Status</ion-item-divider>
<ion-item>
<ion-label style="overflow: visible;">
<status size="x-large" weight="500" [rendering]="rendering"></status>
</ion-label>
<ion-button slot="end" class="action-button" *ngIf="pkg.state === PackageState.Installed && (pkg.manifest.interfaces | hasUi)" [disabled]="!(pkg.state | isLaunchable : pkg.installed.status.main.status : pkg.manifest.interfaces)" (click)="launchUiTab()">
<ion-icon slot="start" name="open-outline"></ion-icon>
Open UI
</ion-button>
<ion-button slot="end" class="action-button" *ngIf="rendering.feStatus === FeStatus.NeedsConfig" [routerLink]="['config']">
Configure
</ion-button>
<ion-button slot="end" class="action-button" *ngIf="[FeStatus.Running, FeStatus.StartingUp, FeStatus.NeedsAttention] | includes : rendering.feStatus" color="danger" (click)="stop()">
Stop
</ion-button>
<ion-button slot="end" class="action-button" *ngIf="rendering.feStatus === FeStatus.DependencyIssue" (click)="scrollToRequirements()">
Fix
</ion-button>
<ion-button slot="end" class="action-button" *ngIf="rendering.feStatus === FeStatus.Stopped" color="success" (click)="tryStart()">
Start
</ion-button>
</ion-item>
<!-- ** iff && !restoring/backing-up ** -->
<ng-container *ngIf="pkg.state === PackageState.Installed">
<!-- ** iff !restoring/backing-up ** -->
<ng-container *ngIf="!([PackageMainStatus.BackingUp, PackageMainStatus.Restoring] | includes : mainStatus.status); else maintenance">
<!-- ** iff health checks ** -->
<ng-container *ngIf="!(mainStatus.health | empty)">
<ion-item-divider>Health Checks</ion-item-divider>
@@ -78,7 +78,7 @@
<ion-thumbnail slot="start">
<img [src]="pkg.installed['dependency-info'][dep.key].icon" />
</ion-thumbnail>
<ion-label class="ion-text-wrap">
<ion-label>
<h2 style="font-family: 'Montserrat'">{{ pkg.installed['dependency-info'][dep.key].manifest.title }}</h2>
<p>{{ pkg.manifest.dependencies[dep.key].version | displayEmver }}</p>
<p><ion-text [color]="pkg.installed.status['dependency-errors'][dep.key] ? 'warning' : 'success'">{{ pkg.installed.status['dependency-errors'][dep.key] ? pkg.installed.status['dependency-errors'][dep.key].type : 'satisfied' }}</ion-text></p>
@@ -112,27 +112,30 @@
</ion-item>
</ng-container>
</ng-container>
</ion-item-group>
<ng-template #maintenance>
App is undergoing maintenance.
</ng-template>
</ng-container>
</ion-item-group>
<!-- ** installed or updating ** -->
<div *ngIf="[PackageState.Installing, PackageState.Updating] | includes : pkg.state" style="padding: 16px;">
<p>Downloading: {{ (pkg['install-progress'] | installState).downloadProgress }}%</p>
<ion-progress-bar
[color]="pkg['install-progress']['download-complete'] ? 'success' : 'secondary'"
[value]="(pkg['install-progress'] | installState).downloadProgress / 100"
></ion-progress-bar>
<!-- ** installing or updating ** -->
<div *ngIf="[PackageState.Installing, PackageState.Updating] | includes : pkg.state" style="padding: 16px;">
<p>Downloading: {{ (pkg['install-progress'] | installState).downloadProgress }}%</p>
<ion-progress-bar
[color]="pkg['install-progress']['download-complete'] ? 'success' : 'secondary'"
[value]="(pkg['install-progress'] | installState).downloadProgress / 100"
></ion-progress-bar>
<p>Validating: {{ (pkg['install-progress'] | installState).validateProgress }}%</p>
<ion-progress-bar
[color]="pkg['install-progress']['validation-complete'] ? 'success' : 'secondary'"
[value]="(pkg['install-progress'] | installState).validateProgress / 100"
></ion-progress-bar>
<p>Validating: {{ (pkg['install-progress'] | installState).validateProgress }}%</p>
<ion-progress-bar
[color]="pkg['install-progress']['validation-complete'] ? 'success' : 'secondary'"
[value]="(pkg['install-progress'] | installState).validateProgress / 100"
></ion-progress-bar>
<p>Installing: {{ (pkg['install-progress'] | installState).unpackProgress }}%</p>
<ion-progress-bar
[color]="pkg['install-progress']['unpack-complete'] ? 'success' : 'secondary'"
[value]="(pkg['install-progress'] | installState).unpackProgress / 100"
></ion-progress-bar>
</div>
</ng-container>
<p>Installing: {{ (pkg['install-progress'] | installState).unpackProgress }}%</p>
<ion-progress-bar
[color]="pkg['install-progress']['unpack-complete'] ? 'success' : 'secondary'"
[value]="(pkg['install-progress'] | installState).unpackProgress / 100"
></ion-progress-bar>
</div>
</ion-content>

3
ui/src/app/pages/apps-routes/app-show/app-show.page.ts
View File

@@ -8,7 +8,7 @@ import { wizardModal } from 'src/app/components/install-wizard/install-wizard.co
import { WizardBaker } from 'src/app/components/install-wizard/prebaked-wizards'
import { ConfigService } from 'src/app/services/config.service'
import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
import { DependencyErrorConfigUnsatisfied, DependencyErrorNotInstalled, DependencyErrorType, MainStatus, PackageDataEntry, PackageState } from 'src/app/services/patch-db/data-model'
import { DependencyErrorConfigUnsatisfied, DependencyErrorNotInstalled, DependencyErrorType, MainStatus, PackageDataEntry, PackageMainStatus, PackageState } from 'src/app/services/patch-db/data-model'
import { FEStatus, PkgStatusRendering, renderPkgStatus } from 'src/app/services/pkg-status-rendering.service'
import { ConnectionService } from 'src/app/services/connection.service'
import { ErrorToastService } from 'src/app/services/error-toast.service'
@@ -31,6 +31,7 @@ export class AppShowPage {
rendering: PkgStatusRendering
Math = Math
mainStatus: MainStatus
PackageMainStatus = PackageMainStatus
@ViewChild(IonContent) content: IonContent
subs: Subscription[] = []

139
ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.html
View File

@@ -1,6 +1,5 @@
<ion-header>
<ion-toolbar *ngIf="!pageLoading">
<ion-searchbar color="dark" (ionChange)="search($event)" debounce="400"></ion-searchbar>
<ion-toolbar>
<ion-buttons slot="end">
<badge-menu-button></badge-menu-button>
</ion-buttons>
@@ -8,11 +7,23 @@
</ion-header>
<ion-content class="ion-padding">
<text-spinner *ngIf="pageLoading; else pageLoaded" text="Loading Marketplace"></text-spinner>
<h1 style="font-family: 'Montserrat'; font-weight: 100px; margin: 32px 0;" class="ion-text-center">Embassy Marketplace</h1>
<ion-searchbar color="dark" (ionChange)="search($event)" debounce="400" style="padding-bottom: 32px;"></ion-searchbar>
<!-- page loading -->
<ng-container *ngIf="pageLoading; else pageLoaded">
<div class="scrollable ion-text-center">
<ion-button *ngFor="let cat of ['', '', '', '', '', '', '']" fill="clear">
<ion-skeleton-text animated style="width: 80px; border-radius: 0;"></ion-skeleton-text>
</ion-button>
</div>
<div class="divider" style="margin: 24px 0;"></div>
</ng-container>
<!-- page loaded -->
<ng-template #pageLoaded>
<h1 style="font-family: 'Montserrat'; font-weight: 100px; margin: 0 0 32px 0;" class="ion-text-center">Embassy Marketplace</h1>
<div class="scrollable ion-text-center">
<ion-button
*ngFor="let cat of data.categories"
@@ -25,57 +36,75 @@
</div>
<div class="divider" style="margin: 24px;"></div>
<div *ngIf="pkgsLoading; else loaded" style="margin-top: 64px;" class="ion-text-center">
<text-spinner text="Loading Packages"></text-spinner>
</div>
<ng-template #loaded>
<ion-grid>
<ion-row>
<ion-col *ngIf="eos && category === 'featured'" sizeXs="12" sizeSm="12" sizeMd="6">
<ion-item button class="eos-item" (click)="updateEos()">
<ion-thumbnail slot="start">
<img src="assets/img/icon.png" />
</ion-thumbnail>
<ion-label>
<h3>Now Available...</h3>
<h2>Embassy OS {{ eos.version }}</h2>
<p>{{ eos.headline }}</p>
</ion-label>
</ion-item>
</ion-col>
<ion-col *ngFor="let pkg of pkgs" sizeXs="12" sizeSm="12" sizeMd="6">
<ion-item [routerLink]="['/marketplace', pkg.manifest.id]">
<ion-thumbnail slot="start">
<img [src]="pkg.icon" />
</ion-thumbnail>
<ion-label>
<h2 style="font-family: 'Montserrat'; font-weight: bold;">{{ pkg.manifest.title }}</h2>
<h3>{{ pkg.manifest.description.short }}</h3>
<ng-container *ngIf="localPkgs[pkg.manifest.id] as localPkg; else none">
<p *ngIf="localPkg.state === PackageState.Installed">
<ion-text *ngIf="(pkg.manifest.version | compareEmver : localPkg.manifest.version) === 0" color="success">Installed</ion-text>
<ion-text *ngIf="(pkg.manifest.version | compareEmver : localPkg.manifest.version) === 1" color="warning">Update Available</ion-text>
</p>
<p *ngIf="[PackageState.Installing, PackageState.Updating] | includes : localPkg.state">
<ion-text color="primary">{{ localPkg.state | titlecase }}...{{ (localPkg['install-progress'] | installState).totalProgress }}%</ion-text>
</p>
<p *ngIf="localPkg.state === PackageState.Removing">
<ion-text color="warning">{{ localPkg.state | Removing }}</ion-text>
<ion-spinner name="dots" color="warning"></ion-spinner>
</p>
</ng-container>
<ng-template #none>
<p>Not Installed</p>
</ng-template>
</ion-label>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</ng-template>
</ng-template>
<!-- packages loading -->
<ng-container *ngIf="pkgsLoading; else pkgsLoaded">
<ion-grid>
<ion-row>
<ion-col *ngFor="let pkg of ['', '', '', '']" sizeXs="12" sizeSm="12" sizeMd="6">
<ion-item>
<ion-thumbnail slot="start">
<ion-skeleton-text style="border-radius: 100%;" animated></ion-skeleton-text>
</ion-thumbnail>
<ion-label>
<ion-skeleton-text animated style="width: 150px; height: 18px; margin-bottom: 8px;"></ion-skeleton-text>
<ion-skeleton-text animated style="width: 400px;"></ion-skeleton-text>
<ion-skeleton-text animated style="width: 400px;"></ion-skeleton-text>
</ion-label>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</ng-container>
<!-- packages loaded -->
<ng-template #pkgsLoaded>
<ion-grid>
<ion-row>
<ion-col *ngIf="eos && category === 'featured'" sizeXs="12" sizeSm="12" sizeMd="6">
<ion-item button class="eos-item" (click)="updateEos()">
<ion-thumbnail slot="start">
<img src="assets/img/icon.png" />
</ion-thumbnail>
<ion-label>
<h3>Now Available...</h3>
<h2>Embassy OS {{ eos.version }}</h2>
<p>{{ eos.headline }}</p>
</ion-label>
</ion-item>
</ion-col>
<ion-col *ngFor="let pkg of pkgs" sizeXs="12" sizeSm="12" sizeMd="6">
<ion-item [routerLink]="['/marketplace', pkg.manifest.id]">
<ion-thumbnail slot="start">
<img [src]="pkg.icon" />
</ion-thumbnail>
<ion-label>
<h2 style="font-family: 'Montserrat'; font-weight: bold;">{{ pkg.manifest.title }}</h2>
<h3>{{ pkg.manifest.description.short }}</h3>
<ng-container *ngIf="localPkgs[pkg.manifest.id] as localPkg; else none">
<p *ngIf="localPkg.state === PackageState.Installed">
<ion-text *ngIf="(pkg.manifest.version | compareEmver : localPkg.manifest.version) === 0" color="success">Installed</ion-text>
<ion-text *ngIf="(pkg.manifest.version | compareEmver : localPkg.manifest.version) === 1" color="warning">Update Available</ion-text>
</p>
<p *ngIf="[PackageState.Installing, PackageState.Updating] | includes : localPkg.state">
<ion-text color="primary">{{ localPkg.state | titlecase }}...{{ (localPkg['install-progress'] | installState).totalProgress }}%</ion-text>
</p>
<p *ngIf="localPkg.state === PackageState.Removing">
<ion-text color="warning">{{ localPkg.state | Removing }}</ion-text>
<ion-spinner name="dots" color="warning"></ion-spinner>
</p>
</ng-container>
<ng-template #none>
<p>Not Installed</p>
</ng-template>
</ion-label>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</ng-template>
<ion-infinite-scroll [disabled]="!needInfinite" (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content loadingSpinner="lines"></ion-infinite-scroll-content>
</ion-infinite-scroll>

8
ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.html
View File

@@ -70,7 +70,7 @@
<!-- recommendation -->
<ion-item *ngIf="rec && showRec" class="rec-item">
<ion-label class="ion-text-wrap">
<ion-label>
<h2 style="display: flex; align-items: center;">
<ion-thumbnail style="height: 3vh; width: 3vh; margin: 5px" slot="start">
<img [src]="rec.dependentIcon" [alt]="rec.dependentTitle"/>
@@ -98,14 +98,14 @@
</ion-button>
</ion-item-divider>
<ion-item lines="none" color="transparent">
<ion-label class="ion-text-wrap" >
<ion-label>
<div id='release-notes' [innerHTML]="pkg.manifest['release-notes'] | markdown"></div>
</ion-label>
</ion-item>
<!-- description -->
<ion-item-divider>Description</ion-item-divider>
<ion-item lines="none" color="transparent">
<ion-label class="ion-text-wrap">
<ion-label>
<div id="release-notes" class="release-notes">{{ pkg.manifest.description.long }}</div>
</ion-label>
</ion-item>
@@ -119,7 +119,7 @@
<ion-thumbnail slot="start">
<img [src]="pkg['dependency-metadata'][dep.key].icon" />
</ion-thumbnail>
<ion-label class="ion-text-wrap">
<ion-label>
<h2>
{{ pkg['dependency-metadata'][dep.key].title }}
<span *ngIf="dep.value.recommended"> (recommended)</span>

32
ui/src/app/pages/notifications/notifications.page.html
View File

@@ -11,14 +11,30 @@
</ion-header>
<ion-content>
<ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
<ion-refresher-content pullingIcon="lines" refreshingSpinner="lines"></ion-refresher-content>
</ion-refresher>
<text-spinner *ngIf="loading" text="Loading Notifications"></text-spinner>
<!-- loading -->
<ion-item-group *ngIf="loading">
<ion-item-divider>
<ion-button slot="end" fill="clear">
<ion-skeleton-text style="width: 90px; height: 14px; border-radius: 0;" animated></ion-skeleton-text>
</ion-button>
</ion-item-divider>
<ion-item *ngFor="let entry of ['', '', '', '']">
<ion-label>
<ion-skeleton-text animated style="width: 15%; height: 20px; margin-bottom: 12px;"></ion-skeleton-text>
<ion-skeleton-text animated style="width: 50%; margin-bottom: 18px;"></ion-skeleton-text>
<ion-skeleton-text animated style="width: 20%;"></ion-skeleton-text>
</ion-label>
<ion-button slot="end" fill="clear">
<ion-skeleton-text animated style="width: 20px; height: 20px; border-radius: 0"></ion-skeleton-text>
</ion-button>
</ion-item>
</ion-item-group>
<!-- no notifications -->
<!-- not loading -->
<ng-container *ngIf="!loading">
<!-- no notifications -->
<ion-item-group *ngIf="!notifications.length">
<div
style="
@@ -28,8 +44,8 @@
left: 50%;
transform: translate(-50%, -50%);"
>
<ion-icon style="font-size: 84px; color: #2c3038" name="mail-outline"></ion-icon>
<h4 style="color: #2c3038; margin-top: 0px">Inbox Empty</h4>
<ion-icon style="font-size: 84px; color: #595959" name="mail-outline"></ion-icon>
<h4 style="color: #595959; margin-top: 0px">Inbox Empty</h4>
</div>
</ion-item-group>
@@ -42,7 +58,7 @@
</ion-button>
</ion-item-divider>
<ion-item *ngFor="let not of notifications; let i = index">
<ion-label class="ion-text-wrap">
<ion-label>
<h2>
<ion-text [color]="not | notificationColor"><b>{{ not.title }}</b></ion-text>
</h2>

2
ui/src/app/pages/notifications/notifications.page.scss
View File

@@ -1,3 +1,3 @@
.notification-message {
margin: 10px 0 12px 0;
margin: 6px 0 8px 0;
}

2
ui/src/app/pages/notifications/notifications.page.ts
View File

@@ -32,7 +32,7 @@ export class NotificationsPage {
this.loading = false
}
async doRefresh (e: any) {
async refresh (e: any) {
this.page = 1
this.notifications = await this.getNotifications(),
e.target.complete()

38
ui/src/app/pages/server-routes/lan/lan.page.html
View File

@@ -11,25 +11,27 @@
<ion-item-group>
<!-- about -->
<ion-item>
<ion-label class="ion-text-wrap">
<p class="ion-padding-bottom">About</p>
<h2>You can connect to your Embassy over your Local Area Network (LAN). This can be useful for achieving a faster experience, as well as a fallback in case the Tor network is experiencing issues.</h2>
<ion-item class="ion-padding-bottom">
<ion-label>
<h2>
Connecting to your Embassy over the Local Area Network (LAN) is great for achieving a faster experience, as well as a fallback in case Tor is experiencing issues.
<a [href]="docsUrl" target="_blank">View instructions</a>
</h2>
</ion-label>
</ion-item>
<ion-item [href]="docsUrl" target="_blank" detail="false">
<ion-icon slot="start" name="list-outline"></ion-icon>
<ion-label>View Instructions</ion-label>
</ion-item>
<ion-item button (click)="installCert()" [disabled]="lanDisabled">
<ion-icon slot="start" name="download-outline"></ion-icon>
<ion-label>Download Root Certificate Authority</ion-label>
<ion-icon slot="start" name="download-outline" size="large"></ion-icon>
<ion-label>
<h1>Download Root CA</h1>
<p>Download and trust your Embassy's Root Certificate Authority to achieve a secure connection on the LAN.</p>
</ion-label>
</ion-item>
<ng-container *ngIf="lanDisabled">
<ion-item-divider></ion-item-divider>
<ion-item>
<ion-label class="ion-text-wrap">
<ion-label>
<p class="ion-padding-bottom">Setup</p>
<ion-text color="warning" [innerHtml]="lanDisabledExplanation[lanDisabled]"></ion-text>
</ion-label>
@@ -37,16 +39,12 @@
</ng-container>
<!-- Refresh Network -->
<ion-item-divider></ion-item-divider>
<ion-item>
<ion-label class="ion-text-wrap">
<p style="padding-bottom: 6px;">Troubleshooting</p>
<h2>If you are having issues connecting to your Embassy over LAN, try refreshing your LAN services by clicking the button below.</h2>
</ion-label>
</ion-item>
<ion-item button (click)="refreshLAN()" detail="false">
<ion-icon slot="start" name="refresh-outline"></ion-icon>
<ion-label>Refresh LAN</ion-label>
<ion-icon slot="start" name="refresh-outline" size="large"></ion-icon>
<ion-label>
<h1>Refresh LAN</h1>
<p>If you are having issues connecting to your Embassy over LAN, try refreshing your LAN services by clicking the button below.</p>
</ion-label>
</ion-item>
</ion-item-group>

35
ui/src/app/pages/server-routes/security-routes/sessions/sessions.page.html
View File

@@ -8,14 +8,37 @@
</ion-header>
<ion-content class="ion-padding-top">
<text-spinner *ngIf="loading" text="Loading Sessions"></text-spinner>
<!-- loading -->
<ion-item-group *ngIf="loading">
<div *ngFor="let entry of ['first', 'second']">
<ion-item-divider>
<ion-skeleton-text animated style="width: 120px; height: 20px;"></ion-skeleton-text>
</ion-item-divider>
<ion-item style="padding-bottom: 6px;">
<ion-avatar slot="start" style="margin-right: 30px;">
<ion-skeleton-text animated style="width: 40px; height: 40px; border-radius: 0;"></ion-skeleton-text>
</ion-avatar>
<ion-label>
<ion-skeleton-text animated style="width: 150px; height: 20px; margin-bottom: 10px;"></ion-skeleton-text>
<ion-skeleton-text animated style="width: 250px; height: 14px; margin-bottom: 12px;"></ion-skeleton-text>
<ion-skeleton-text animated style="width: 350px;"></ion-skeleton-text>
</ion-label>
<ion-button *ngIf="entry === 'second'" slot="end" fill="clear">
<ion-skeleton-text animated style="width: 60px; border-radius: 0"></ion-skeleton-text>
</ion-button>
</ion-item>
</div>
</ion-item-group>
<!-- not loading -->
<ion-item-group *ngIf="!loading">
<ion-item-divider>Current Session</ion-item-divider>
<ion-item-divider>This Session</ion-item-divider>
<ion-item *ngIf="sessionInfo.sessions[sessionInfo.current] as current">
<ion-icon slot="start" [name]="getPlatformIcon(current.metadata.platforms)"></ion-icon>
<ion-label class="ion-text-wrap">
<ion-icon slot="start" size="large" [name]="getPlatformIcon(current.metadata.platforms)"></ion-icon>
<ion-label>
<h1>{{ getPlatformName(current.metadata.platforms) }}</h1>
<h2>Last Active: {{ current['last-active'] | date : 'medium' }}</h2>
<p>{{ current['user-agent'] }}</p>
@@ -28,8 +51,8 @@
[id]="session.key"
*ngIf="session.key !== sessionInfo.current"
>
<ion-icon slot="start" [name]="getPlatformIcon(session.value.metadata.platforms)"></ion-icon>
<ion-label class="ion-text-wrap">
<ion-icon slot="start" size="large" [name]="getPlatformIcon(session.value.metadata.platforms)"></ion-icon>
<ion-label>
<h1>{{ getPlatformName(session.value.metadata.platforms) }}</h1>
<h2>Last Active: {{ session.value['last-active'] | date : 'medium' }}</h2>
<p>{{ session.value['user-agent'] }}</p>

68
ui/src/app/pages/server-routes/security-routes/ssh-keys/ssh-keys.page.html
View File

@@ -4,38 +4,62 @@
<pwa-back-button></pwa-back-button>
</ion-buttons>
<ion-title>SSH Keys</ion-title>
<ion-buttons slot="end">
<ion-button (click)="serverConfig.presentAlert('ssh')">
<ion-icon slot="icon-only" name="add-outline"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding-top">
<text-spinner *ngIf="loading" text="Loading Keys"></text-spinner>
<ion-item-group *ngIf="!loading">
<!-- about -->
<!-- always -->
<ion-item-group>
<ion-item>
<ion-label class="ion-text-wrap">
<p class="ion-padding-bottom">About</p>
<h2>Adding an SSH key to your Embassy can be useful for advanced usage from the command line, as well as for debugging purposes.</h2>
<ion-label>
<h2>
Adding SSH keys to your Embassy is useful for command line access, as well as for debugging purposes.
<a [href]="docsUrl" target="_blank">View instructions</a>
</h2>
</ion-label>
</ion-item>
<ion-item [href]="docsUrl" target="_blank" detail="false">
<ion-icon slot="start" name="list-outline"></ion-icon>
<ion-label>View Instructions</ion-label>
</ion-item>
<ion-item-divider>Saved Keys</ion-item-divider>
<ion-item *ngFor="let ssh of sshKeys | keyvalue : asIsOrder">
<ion-label class="ion-text-wrap">
{{ ssh.value.alg }} {{ ssh.key }} {{ ssh.value.hostname }}
</ion-label>
<ion-button slot="end" fill="clear" (click)="presentAlertDelete(ssh.key)">
<ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button>
<ion-item button detail="false" (click)="serverConfig.presentInputModal('ssh')">
<ion-icon slot="start" name="add" size="large"></ion-icon>
<ion-label>Add new key</ion-label>
</ion-item>
<!-- loading -->
<ng-container *ngIf="loading">
<ion-item *ngFor="let entry of ['', '']">
<ion-button slot="start" fill="clear">
<ion-skeleton-text animated style="width: 30px; height: 30px; border-radius: 0;"></ion-skeleton-text>
</ion-button>
<ion-label>
<ion-skeleton-text animated style="width: 15%; height: 20px; margin-bottom: 12px;"></ion-skeleton-text>
<ion-skeleton-text animated style="width: 50%; margin-bottom: 18px;"></ion-skeleton-text>
<ion-skeleton-text animated style="width: 20%;"></ion-skeleton-text>
</ion-label>
<ion-button slot="end" fill="clear">
<ion-skeleton-text animated style="width: 80px; border-radius: 0"></ion-skeleton-text>
</ion-button>
</ion-item>
</ng-container>
<!-- not loading -->
<ng-container *ngIf="!loading">
<ion-item *ngFor="let ssh of sshKeys | keyvalue : asIsOrder">
<ion-icon slot="start" name="key-outline" size="large"></ion-icon>
<ion-label>
<h1>{{ ssh.value.hostname }}</h1>
<h2>{{ ssh.value['created-at'] | date: 'short' }}</h2>
<p>{{ ssh.value.alg }} {{ ssh.key }}</p>
</ion-label>
<ion-button slot="end" fill="clear" color="danger" (click)="presentAlertDelete(ssh.key)">
<ion-icon slot="start" name="close"></ion-icon>
Remove
</ion-button>
</ion-item>
</ng-container>
</ion-item-group>
</ion-content>

55
ui/src/app/pages/server-routes/server-backup/server-backup.page.html
View File

@@ -4,11 +4,6 @@
<pwa-back-button></pwa-back-button>
</ion-buttons>
<ion-title>Create Backup</ion-title>
<ion-buttons slot="end">
<ion-button (click)="doRefresh()">
<ion-icon slot="icon-only" name="refresh-outline"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
@@ -18,45 +13,33 @@
<ng-template #loaded>
<ion-item class="ion-margin-bottom">
<ion-label class="ion-text-wrap">
<p class="ion-padding-bottom">About</p>
<ion-label>
<h2>
Create frequent backups of your Embassy to avoid loss of data.
Select the drive where you want to create a backup of your Embassy, including all your installed services.
</h2>
</ion-label>
</ion-item>
<ion-item-divider>Select Backup Drive</ion-item-divider>
<ion-item *ngIf="allPartitionsMounted">
<ion-text *ngIf="type === 'create'" class="ion-text-wrap" color="warning">No partitions available. To begin a backup, insert a storage device into your Embassy.</ion-text>
<ion-text *ngIf="type === 'restore'" class="ion-text-wrap" color="warning">No partitions available. Insert the storage device containing the backup you wish to restore.</ion-text>
<ion-text class="ion-text-wrap" color="warning">No partitions available. To begin a backup, insert a storage device into your Embassy.</ion-text>
</ion-item>
<ion-card *ngFor="let disk of disks | keyvalue">
<ion-card-header>
<ion-card-title>
{{ disk.value.size }}
</ion-card-title>
<ion-card-subtitle>
{{ disk.key }}
</ion-card-subtitle>
</ion-card-header>
<ion-card-content>
<ion-item-group>
<ion-item button *ngFor="let partition of disk.value.partitions | keyvalue" [disabled]="partition.value['is-mounted']" (click)="presentModal(partition.key)">
<ion-icon slot="start" name="save-outline"></ion-icon>
<ion-label>
<h2>{{ partition.value.label || partition.key }} ({{ partition.value.size || 'unknown size' }})</h2>
<p *ngIf="!partition.value['is-mounted']; else unavailable"><ion-text color="success">Available</ion-text></p>
<ng-template #unavailable>
<p><ion-text color="danger">Unavailable</ion-text></p>
</ng-template>
</ion-label>
</ion-item>
</ion-item-group>
</ion-card-content>
</ion-card>
<ion-item-group>
<div *ngFor="let disk of disks | keyvalue">
<ion-item-divider>{{ disk.key }} - {{ disk.value.size }}</ion-item-divider>
<ion-item button *ngFor="let partition of disk.value.partitions | keyvalue" [disabled]="partition.value['is-mounted']" (click)="presentModal(partition.key)">
<ion-icon slot="start" name="save-outline" size="large"></ion-icon>
<ion-label>
<h1>{{ partition.value.label || partition.key }}</h1>
<h2>{{ partition.value.size || 'unknown size' }}</h2>
<p *ngIf="!partition.value['is-mounted']; else unavailable"><ion-text color="success">Available</ion-text></p>
<ng-template #unavailable>
<p><ion-text color="danger">Unavailable</ion-text></p>
</ng-template>
</ion-label>
</ion-item>
</div>
</ion-item-group>
</ng-template>
</ion-content>

32
ui/src/app/pages/server-routes/server-backup/server-backup.page.ts
View File

@@ -1,5 +1,5 @@
import { Component } from '@angular/core'
import { LoadingController, ModalController } from '@ionic/angular'
import { ModalController } from '@ionic/angular'
import { ApiService } from 'src/app/services/api/embassy-api.service'
import { BackupConfirmationComponent } from 'src/app/modals/backup-confirmation/backup-confirmation.component'
import { DiskInfo } from 'src/app/services/api/api.types'
@@ -19,7 +19,6 @@ export class ServerBackupPage {
private readonly modalCtrl: ModalController,
private readonly embassyApi: ApiService,
private readonly errToast: ErrorToastService,
private readonly loadingCtrl: LoadingController,
) { }
ngOnInit () {
@@ -45,36 +44,21 @@ export class ServerBackupPage {
async presentModal (logicalname: string): Promise<void> {
const m = await this.modalCtrl.create({
componentProps: {
type: 'backup',
title: 'Create Backup',
message: `Enter your master password to create an encrypted backup of your Embassy and all its installed services.`,
label: 'Password',
useMask: true,
buttonText: 'Create Backup',
submitFn: async (value: string) => await this.create(logicalname, value),
},
cssClass: 'alertlike-modal',
component: BackupConfirmationComponent,
backdropDismiss: false,
})
m.onWillDismiss().then(res => {
const data = res.data
if (data.cancel) return
this.create(logicalname, data.password)
})
return await m.present()
}
private async create (logicalname: string, password: string): Promise<void> {
const loader = await this.loadingCtrl.create({
spinner: 'lines',
message: 'Starting backup...',
cssClass: 'loader',
})
await loader.present()
try {
await this.embassyApi.createBackup({ logicalname, password })
} catch (e) {
this.errToast.present(e)
} finally {
loader.dismiss()
}
await this.embassyApi.createBackup({ logicalname, password })
}
}

2
ui/src/app/pages/server-routes/server-metrics/server-metrics.page.html
View File

@@ -8,7 +8,7 @@
</ion-header>
<ion-content class="ion-padding">
<skeleton-list *ngIf="loading; else loaded" groups="3"></skeleton-list>
<skeleton-list *ngIf="loading; else loaded" groups="2"></skeleton-list>
<ng-template #loaded>
<ion-item-group *ngFor="let metricGroup of metrics | keyvalue : asIsOrder">

2
ui/src/app/pages/server-routes/server-specs/server-specs.page.html
View File

@@ -40,7 +40,7 @@
</ion-button>
</ion-item>
<ion-item-divider>Specs</ion-item-divider>
<ion-item-divider>Hardware Specs</ion-item-divider>
<ion-item *ngFor="let spec of server.specs | keyvalue : asIsOrder">
<ion-label>

2
ui/src/app/pages/server-routes/wifi/wifi.page.html
View File

@@ -15,7 +15,7 @@
<ion-content class="ion-padding-top">
<ion-item-group>
<ion-item>
<ion-label class="ion-text-wrap">
<ion-label>
<p style="padding-bottom: 6px;">About</p>
<h2>Embassy will automatically connect to saved WiFi networks when they are available, allowing you to remove the Ethernet cable.</h2>
</ion-label>

9
ui/src/app/pipes/ui.pipe.ts
View File

@@ -1,5 +1,5 @@
import { Pipe, PipeTransform } from '@angular/core'
import { PackageDataEntry } from '../services/patch-db/data-model'
import { InterfaceDef, PackageMainStatus, PackageState } from '../services/patch-db/data-model'
import { ConfigService, hasUi } from '../services/config.service'
@Pipe({
@@ -7,8 +7,7 @@ import { ConfigService, hasUi } from '../services/config.service'
})
export class HasUiPipe implements PipeTransform {
transform (pkg: PackageDataEntry): boolean {
const interfaces = pkg.manifest.interfaces
transform (interfaces: { [id: string]: InterfaceDef }): boolean {
return hasUi(interfaces)
}
}
@@ -20,7 +19,7 @@ export class LaunchablePipe implements PipeTransform {
constructor (private configService: ConfigService) { }
transform (pkg: PackageDataEntry): boolean {
return this.configService.isLaunchable(pkg)
transform (state: PackageState, status: PackageMainStatus, interfaces: { [id: string]: InterfaceDef }): boolean {
return this.configService.isLaunchable(state, status, interfaces)
}
}

3
ui/src/app/services/api/api.fixures.ts
View File

@@ -832,11 +832,13 @@ export module Mock {
export const SshKeys: RR.GetSSHKeysRes = {
'28:d2:7e:78:61:b4:bf:g2:de:24:15:96:4e:d4:15:53': {
'created-at': new Date().toISOString(),
alg: 'ed25519',
hostname: 'Matt Key',
hash: 'VeryLongHashOfSSHKey1',
},
'12:f8:7e:78:61:b4:bf:e2:de:24:15:96:4e:d4:72:53': {
'created-at': new Date().toISOString(),
alg: 'ed25519',
hostname: 'Aiden Key',
hash: 'VeryLongHashOfSSHKey2',
@@ -845,6 +847,7 @@ export module Mock {
export const SshKey: RR.AddSSHKeyRes = {
'44:44:7e:78:61:b4:bf:g2:de:24:15:96:4e:d4:15:53': {
'created-at': new Date().toISOString(),
alg: 'ed25519',
hostname: 'Lucy Key',
hash: 'VeryLongHashOfSSHKey3',

1
ui/src/app/services/api/api.types.ts
View File

@@ -308,6 +308,7 @@ export interface SSHKeys {
}
export interface SSHKeyEntry {
'created-at': string
alg: string
hostname: string
hash: string

10
ui/src/app/services/config.service.ts
View File

@@ -49,15 +49,15 @@ export class ConfigService {
return this.isConsulate || (mocks.enabled && mocks.connection === 'poll')
}
isLaunchable (pkg: PackageDataEntry): boolean {
if (this.isConsulate || pkg.state !== PackageState.Installed) {
isLaunchable (state: PackageState, status: PackageMainStatus, interfaces: { [id: string]: InterfaceDef }): boolean {
if (this.isConsulate || state !== PackageState.Installed) {
return false
}
return pkg.installed.status.main.status === PackageMainStatus.Running &&
return status === PackageMainStatus.Running &&
(
(hasTorUi(pkg.manifest.interfaces) && this.isTor()) ||
(hasLanUi(pkg.manifest.interfaces) && !this.isTor())
(hasTorUi(interfaces) && this.isTor()) ||
(hasLanUi(interfaces) && !this.isTor())
)
}

13
ui/src/app/services/emver.service.ts
View File

@@ -1,24 +1,21 @@
import { Injectable } from '@angular/core'
import * as emver from '@start9labs/emver'
@Injectable({
providedIn: 'root',
})
export class Emver {
private e: typeof import('@start9labs/emver')
constructor () { }
async init () {
this.e = await import('@start9labs/emver')
}
compare (lhs: string, rhs: string): number {
console.log('EMVER', this.e)
const compare = this.e.compare(lhs, rhs)
console.log('EMVER', emver)
const compare = emver.compare(lhs, rhs)
console.log('COMPARE', compare)
return compare
}
satisfies (version: string, range: string): boolean {
return this.e.satisfies(version, range)
return emver.satisfies(version, range)
}
}

36
ui/src/app/services/error-toast.service.ts
View File

@@ -17,24 +17,9 @@ export class ErrorToastService {
if (this.toast) return
let message: string | IonicSafeString
if (e.code) message = String(e.code)
if (e.message) message = `${message ? message + ' ' : ''}${e.message}`
if (e.details) message = `${message ? message + ': ' : ''}${e.details}`
if (!message) {
message = 'Unknown Error.'
link = 'https://docs.start9.com'
}
if (link) {
message = new IonicSafeString(`${message}<br /><br /><a href=${link} target="_blank" style="color: white;">Get Help</a>`)
}
this.toast = await this.toastCtrl.create({
header: 'Error',
message,
message: getErrorMessage(e, link),
duration: 0,
position: 'top',
cssClass: 'error-toast',
@@ -57,4 +42,23 @@ export class ErrorToastService {
this.toast = undefined
}
}
}
export function getErrorMessage (e: RequestError, link?: string): string | IonicSafeString {
let message: string | IonicSafeString
if (e.code) message = String(e.code)
if (e.message) message = `${message ? message + ' ' : ''}${e.message}`
if (e.details) message = `${message ? message + ': ' : ''}${e.details}`
if (!message) {
message = 'Unknown Error.'
link = 'https://docs.start9.com'
}
if (link) {
message = new IonicSafeString(`${message}<br /><br /><a href=${link} target="_blank" style="color: white;">Get Help</a>`)
}
return message
}

41
ui/src/app/services/server-config.service.ts
View File

@@ -1,12 +1,12 @@
import { Injectable } from '@angular/core'
import { AlertInput, AlertButton } from '@ionic/core'
// import { AppConfigValuePage } from '../modals/app-config-value/app-config-value.page'
import { ApiService } from './api/embassy-api.service'
import { ConfigSpec } from '../pkg-config/config-types'
import { ConfigSpec, ValueSpecString } from '../pkg-config/config-types'
import { SSHService } from '../pages/server-routes/security-routes/ssh-keys/ssh.service'
import { AlertController, LoadingController } from '@ionic/angular'
import { ErrorToastService } from './error-toast.service'
// import { ModalController } from '@ionic/angular'
import { ModalController } from '@ionic/angular'
import { BackupConfirmationComponent } from '../modals/backup-confirmation/backup-confirmation.component'
@Injectable({
providedIn: 'root',
@@ -14,7 +14,7 @@ import { ErrorToastService } from './error-toast.service'
export class ServerConfigService {
constructor (
// private readonly modalCtrl: ModalController,
private readonly modalCtrl: ModalController,
private readonly loadingCtrl: LoadingController,
private readonly errToast: ErrorToastService,
private readonly alertCtrl: AlertController,
@@ -71,16 +71,8 @@ export class ServerConfigService {
},
]
break
case 'string':
inputs = [
{
name: key,
type: 'textarea',
placeholder: 'Enter SSH public key',
value: current,
},
]
break
default:
return
}
const alert = await this.alertCtrl.create({
@@ -92,6 +84,24 @@ export class ServerConfigService {
await alert.present()
}
async presentInputModal (key: string, current?: string) {
const { name, description, masked } = serverConfig[key] as ValueSpecString
const modal = await this.modalCtrl.create({
component: BackupConfirmationComponent,
componentProps: {
title: name,
message: description,
label: name,
useMask: masked,
value: current,
submitFn: this.saveFns[key],
},
cssClass: 'alertlike-modal',
})
await modal.present()
}
// async presentModalForm (key: string, current?: string) {
// const modal = await this.modalCtrl.create({
// component: AppConfigValuePage,
@@ -105,7 +115,6 @@ export class ServerConfigService {
saveFns: { [key: string]: (val: any) => Promise<any> } = {
'auto-check-updates': async (enabled: boolean) => {
console.log('SAVING auto check', enabled)
return this.embassyApi.setDbValue({ pointer: '/auto-check-updates', value: enabled })
},
ssh: async (pubkey: string) => {
@@ -136,7 +145,7 @@ export const serverConfig: ConfigSpec = {
ssh: {
type: 'string',
name: 'SSH Key',
description: 'Enter an SSH public key to authorize root access from the command line.',
description: 'Enter the SSH public key of you would like to authorize for root access to your Embassy.',
nullable: false,
// @TODO regex for SSH Key
// pattern: '',

30
ui/src/global.scss
View File

@@ -43,11 +43,18 @@ $subheader-height: 48px;
word-break: break-all;
}
.loader {
--spinner-color: var(--ion-color-warning) !important;
.input-label {
// padding-top: 10px;
margin-bottom: 6px;
font-size: medium;
font-weight: 500;
* {
display: inline-block;
vertical-align: middle;
}
}
.loader-ontop-of-all {
.loader {
--spinner-color: var(--ion-color-warning) !important;
z-index: 40000 !important;
}
@@ -142,13 +149,6 @@ ion-button {
--color: var(--ion-color-dark) !important;
}
* {
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
.text-ellipses {
overflow: hidden;
text-overflow: ellipsis;
@@ -183,7 +183,7 @@ ion-button {
.alertlike-modal {
.modal-wrapper {
height: 50% !important;
max-height: 380px !important;
top: 25% !important;
width: 90% !important;
left: 5% !important;
@@ -194,8 +194,8 @@ ion-button {
@media (min-width:1000px) {
.alertlike-modal {
.modal-wrapper {
width: 50% !important;
left: 25% !important;
width: 40% !important;
left: 30% !important;
}
}
}
@@ -241,6 +241,10 @@ ion-item {
border-radius: 4px;
}
ion-label {
white-space: normal !important;
}
ion-loading {
z-index: 100 !important;
}