+
diff --git a/frontend/projects/marketplace/src/pages/release-notes/release-notes.module.ts b/frontend/projects/marketplace/src/pages/release-notes/release-notes.module.ts
index 583631dc4..59ec09c96 100644
--- a/frontend/projects/marketplace/src/pages/release-notes/release-notes.module.ts
+++ b/frontend/projects/marketplace/src/pages/release-notes/release-notes.module.ts
@@ -4,9 +4,11 @@ import { IonicModule } from '@ionic/angular'
import {
EmverPipesModule,
MarkdownPipeModule,
+ SafeLinksModule,
TextSpinnerComponentModule,
} from '@start9labs/shared'
import { TuiElementModule } from '@taiga-ui/cdk'
+import { NgDompurifyModule } from '@tinkoff/ng-dompurify'
import { ReleaseNotesComponent } from './release-notes.component'
@@ -18,6 +20,8 @@ import { ReleaseNotesComponent } from './release-notes.component'
EmverPipesModule,
MarkdownPipeModule,
TuiElementModule,
+ NgDompurifyModule,
+ SafeLinksModule,
],
declarations: [ReleaseNotesComponent],
exports: [ReleaseNotesComponent],
diff --git a/frontend/projects/marketplace/src/pages/show/about/about.component.html b/frontend/projects/marketplace/src/pages/show/about/about.component.html
index c1d76dd2c..bf8495095 100644
--- a/frontend/projects/marketplace/src/pages/show/about/about.component.html
+++ b/frontend/projects/marketplace/src/pages/show/about/about.component.html
@@ -4,7 +4,10 @@
-
+
diff --git a/frontend/projects/marketplace/src/pages/show/about/about.module.ts b/frontend/projects/marketplace/src/pages/show/about/about.module.ts
index b48bbcbaa..cc7d4f234 100644
--- a/frontend/projects/marketplace/src/pages/show/about/about.module.ts
+++ b/frontend/projects/marketplace/src/pages/show/about/about.module.ts
@@ -2,7 +2,12 @@ import { CommonModule } from '@angular/common'
import { NgModule } from '@angular/core'
import { RouterModule } from '@angular/router'
import { IonicModule } from '@ionic/angular'
-import { EmverPipesModule, MarkdownPipeModule } from '@start9labs/shared'
+import {
+ EmverPipesModule,
+ MarkdownPipeModule,
+ SafeLinksModule,
+} from '@start9labs/shared'
+import { NgDompurifyModule } from '@tinkoff/ng-dompurify'
import { AboutComponent } from './about.component'
@@ -13,6 +18,8 @@ import { AboutComponent } from './about.component'
IonicModule,
MarkdownPipeModule,
EmverPipesModule,
+ NgDompurifyModule,
+ SafeLinksModule,
],
declarations: [AboutComponent],
exports: [AboutComponent],
diff --git a/frontend/projects/marketplace/src/pages/show/additional/additional.component.html b/frontend/projects/marketplace/src/pages/show/additional/additional.component.html
index 8937e8c74..a639cb994 100644
--- a/frontend/projects/marketplace/src/pages/show/additional/additional.component.html
+++ b/frontend/projects/marketplace/src/pages/show/additional/additional.component.html
@@ -18,7 +18,7 @@
*ngIf="manifest['git-hash'] as gitHash; else noHash"
button
detail="false"
- (click)="copy(gitHash)"
+ (click)="copyService.copy(gitHash)"
>
-
+
+
-
+
{
- const success = await copyToClipboard(address)
- const message = success
- ? 'Copied to clipboard!'
- : 'Failed to copy to clipboard.'
-
- const toast = await this.toastCtrl.create({
- header: message,
- position: 'bottom',
- duration: 1000,
- })
- await toast.present()
+ presentAlertVersions(version: TemplateRef) {
+ this.dialogs
+ .open(version, {
+ label: 'Versions',
+ size: 's',
+ data: {
+ value: this.pkg.manifest.version,
+ items: this.pkg.versions.sort(
+ (a, b) => -1 * (this.emver.compare(a, b) || 0),
+ ),
+ },
+ })
+ .pipe(filter(Boolean))
+ .subscribe(version => this.version.emit(version))
}
- async presentAlertVersions() {
- const alert = await this.alertCtrl.create({
- header: 'Versions',
- inputs: this.pkg.versions
- .sort((a, b) => -1 * (this.emver.compare(a, b) || 0))
- .map(v => ({
- name: v, // for CSS
- type: 'radio',
- label: displayEmver(v), // appearance on screen
- value: v, // literal SEM version value
- checked: this.pkg.manifest.version === v,
- })),
- buttons: [
- {
- text: 'Cancel',
- role: 'cancel',
+ presentModalMd(label: string) {
+ this.dialogs
+ .open(new PolymorpheusComponent(MarkdownComponent), {
+ label,
+ size: 'l',
+ data: {
+ content: this.marketplaceService.fetchStatic$(
+ this.pkg.manifest.id,
+ label.toLowerCase(),
+ this.url,
+ ),
},
- {
- text: 'Ok',
- handler: (version: string) => this.version.emit(version),
- },
- ],
- })
-
- await alert.present()
- }
-
- async presentModalMd(title: string) {
- const content = this.marketplaceService.fetchStatic$(
- this.pkg.manifest.id,
- title,
- this.url,
- )
-
- const modal = await this.modalCtrl.create({
- componentProps: { title, content },
- component: MarkdownComponent,
- })
-
- await modal.present()
+ })
+ .subscribe()
}
}
diff --git a/frontend/projects/marketplace/src/pages/show/additional/additional.module.ts b/frontend/projects/marketplace/src/pages/show/additional/additional.module.ts
index 8d85c7b70..640d9e7d4 100644
--- a/frontend/projects/marketplace/src/pages/show/additional/additional.module.ts
+++ b/frontend/projects/marketplace/src/pages/show/additional/additional.module.ts
@@ -4,9 +4,24 @@ import { IonicModule } from '@ionic/angular'
import { MarkdownModule, ResponsiveColModule } from '@start9labs/shared'
import { AdditionalComponent } from './additional.component'
+import {
+ TuiRadioListModule,
+ TuiStringifyContentPipeModule,
+} from '@taiga-ui/kit'
+import { FormsModule } from '@angular/forms'
+import { TuiButtonModule } from '@taiga-ui/core'
@NgModule({
- imports: [CommonModule, IonicModule, MarkdownModule, ResponsiveColModule],
+ imports: [
+ CommonModule,
+ IonicModule,
+ MarkdownModule,
+ ResponsiveColModule,
+ TuiRadioListModule,
+ FormsModule,
+ TuiStringifyContentPipeModule,
+ TuiButtonModule,
+ ],
declarations: [AdditionalComponent],
exports: [AdditionalComponent],
})
diff --git a/frontend/projects/marketplace/src/public-api.ts b/frontend/projects/marketplace/src/public-api.ts
index fef451a3e..605b76ebe 100644
--- a/frontend/projects/marketplace/src/public-api.ts
+++ b/frontend/projects/marketplace/src/public-api.ts
@@ -24,6 +24,8 @@ export * from './pages/show/package/package.module'
export * from './pipes/filter-packages.pipe'
export * from './pipes/mime-type.pipe'
+export * from './components/store-icon/store-icon.component.module'
+
export * from './services/marketplace.service'
export * from './types'
diff --git a/frontend/projects/marketplace/src/types.ts b/frontend/projects/marketplace/src/types.ts
index d079985e5..7ea64c967 100644
--- a/frontend/projects/marketplace/src/types.ts
+++ b/frontend/projects/marketplace/src/types.ts
@@ -48,7 +48,7 @@ export interface Manifest {
long: string
}
assets: {
- icon: string // ie. icon.png
+ icon: Url // filename
}
replaces?: string[]
'release-notes': string
diff --git a/frontend/projects/marketplace/tsconfig.json b/frontend/projects/marketplace/tsconfig.json
index e3a6b521c..e1f4625bf 100644
--- a/frontend/projects/marketplace/tsconfig.json
+++ b/frontend/projects/marketplace/tsconfig.json
@@ -6,8 +6,7 @@
"outDir": "../../out-tsc/lib",
"declaration": true,
"declarationMap": true,
- "inlineSources": true,
- "types": []
+ "inlineSources": true
},
"exclude": ["src/test.ts", "**/*.spec.ts"]
}
diff --git a/frontend/projects/setup-wizard/src/app/app.component.html b/frontend/projects/setup-wizard/src/app/app.component.html
index cd28a7e80..2d86be205 100644
--- a/frontend/projects/setup-wizard/src/app/app.component.html
+++ b/frontend/projects/setup-wizard/src/app/app.component.html
@@ -1,4 +1,5 @@
-
+
diff --git a/frontend/projects/setup-wizard/src/app/app.component.ts b/frontend/projects/setup-wizard/src/app/app.component.ts
index b821e089d..aee925f41 100644
--- a/frontend/projects/setup-wizard/src/app/app.component.ts
+++ b/frontend/projects/setup-wizard/src/app/app.component.ts
@@ -1,7 +1,7 @@
import { Component } from '@angular/core'
import { NavController } from '@ionic/angular'
import { ApiService } from './services/api/api.service'
-import { ErrorToastService } from '@start9labs/shared'
+import { ErrorService } from '@start9labs/shared'
@Component({
selector: 'app-root',
@@ -11,7 +11,7 @@ import { ErrorToastService } from '@start9labs/shared'
export class AppComponent {
constructor(
private readonly apiService: ApiService,
- private readonly errorToastService: ErrorToastService,
+ private readonly errorService: ErrorService,
private readonly navCtrl: NavController,
) {}
@@ -26,7 +26,7 @@ export class AppComponent {
await this.navCtrl.navigateForward(route)
} catch (e: any) {
- this.errorToastService.present(e)
+ this.errorService.handleError(e)
}
}
}
diff --git a/frontend/projects/setup-wizard/src/app/app.module.ts b/frontend/projects/setup-wizard/src/app/app.module.ts
index 0f48d072d..b346a135c 100644
--- a/frontend/projects/setup-wizard/src/app/app.module.ts
+++ b/frontend/projects/setup-wizard/src/app/app.module.ts
@@ -2,7 +2,14 @@ import { NgModule } from '@angular/core'
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
import { RouteReuseStrategy } from '@angular/router'
import { HttpClientModule } from '@angular/common/http'
-import { TuiRootModule } from '@taiga-ui/core'
+import {
+ TuiAlertModule,
+ tuiButtonOptionsProvider,
+ TuiDialogModule,
+ TuiModeModule,
+ TuiRootModule,
+ TuiThemeNightModule,
+} from '@taiga-ui/core'
import { ApiService } from './services/api/api.service'
import { MockApiService } from './services/api/mock-api.service'
import { LiveApiService } from './services/api/live-api.service'
@@ -19,6 +26,7 @@ import { LoadingPageModule } from './pages/loading/loading.module'
import { RecoverPageModule } from './pages/recover/recover.module'
import { TransferPageModule } from './pages/transfer/transfer.module'
import {
+ LoadingModule,
provideSetupLogsService,
provideSetupService,
RELATIVE_URL,
@@ -46,10 +54,16 @@ const {
RecoverPageModule,
TransferPageModule,
TuiRootModule,
+ TuiDialogModule,
+ TuiAlertModule,
+ LoadingModule,
+ TuiModeModule,
+ TuiThemeNightModule,
],
providers: [
provideSetupService(ApiService),
provideSetupLogsService(ApiService),
+ tuiButtonOptionsProvider({ size: 'm' }),
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
{
provide: ApiService,
diff --git a/frontend/projects/setup-wizard/src/app/modals/cifs-modal/cifs-modal.module.ts b/frontend/projects/setup-wizard/src/app/modals/cifs-modal/cifs-modal.module.ts
index f10455e0c..3e26600bc 100644
--- a/frontend/projects/setup-wizard/src/app/modals/cifs-modal/cifs-modal.module.ts
+++ b/frontend/projects/setup-wizard/src/app/modals/cifs-modal/cifs-modal.module.ts
@@ -1,20 +1,26 @@
import { NgModule } from '@angular/core'
import { CommonModule } from '@angular/common'
-import { IonicModule } from '@ionic/angular'
-import { FormsModule } from '@angular/forms'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { TuiButtonModule, TuiErrorModule } from '@taiga-ui/core'
+import {
+ TuiFieldErrorPipeModule,
+ TuiInputModule,
+ TuiInputPasswordModule,
+} from '@taiga-ui/kit'
import { CifsModal } from './cifs-modal.page'
@NgModule({
- declarations: [
- CifsModal,
- ],
+ declarations: [CifsModal],
imports: [
CommonModule,
FormsModule,
- IonicModule,
- ],
- exports: [
- CifsModal,
+ TuiButtonModule,
+ TuiInputModule,
+ TuiErrorModule,
+ ReactiveFormsModule,
+ TuiFieldErrorPipeModule,
+ TuiInputPasswordModule,
],
+ exports: [CifsModal],
})
-export class CifsModalModule { }
+export class CifsModalModule {}
diff --git a/frontend/projects/setup-wizard/src/app/modals/cifs-modal/cifs-modal.page.html b/frontend/projects/setup-wizard/src/app/modals/cifs-modal/cifs-modal.page.html
index ebec1b21f..6250ad636 100644
--- a/frontend/projects/setup-wizard/src/app/modals/cifs-modal/cifs-modal.page.html
+++ b/frontend/projects/setup-wizard/src/app/modals/cifs-modal/cifs-modal.page.html
@@ -1,94 +1,39 @@
-
-
- Connect Network Folder
-
-
+
diff --git a/frontend/projects/setup-wizard/src/app/modals/cifs-modal/cifs-modal.page.scss b/frontend/projects/setup-wizard/src/app/modals/cifs-modal/cifs-modal.page.scss
index db8acb8f7..5638f9537 100644
--- a/frontend/projects/setup-wizard/src/app/modals/cifs-modal/cifs-modal.page.scss
+++ b/frontend/projects/setup-wizard/src/app/modals/cifs-modal/cifs-modal.page.scss
@@ -1,16 +1,3 @@
-.item-interactive {
- --highlight-background: var(--ion-color-dark) !important;
+.input {
+ margin-top: 16px;
}
-
-ion-item {
-
- &:hover {
- transition-property: transform;
- transform: none;
- }
-
-}
-
-.item-has-focus {
- --background: var(--ion-color-dark-tint) !important;
-}
\ No newline at end of file
diff --git a/frontend/projects/setup-wizard/src/app/modals/cifs-modal/cifs-modal.page.ts b/frontend/projects/setup-wizard/src/app/modals/cifs-modal/cifs-modal.page.ts
index 7f293f5e0..4335f8a0e 100644
--- a/frontend/projects/setup-wizard/src/app/modals/cifs-modal/cifs-modal.page.ts
+++ b/frontend/projects/setup-wizard/src/app/modals/cifs-modal/cifs-modal.page.ts
@@ -1,94 +1,117 @@
-import { Component } from '@angular/core'
+import { Component, Inject } from '@angular/core'
+import { FormControl, FormGroup, Validators } from '@angular/forms'
+import { TUI_VALIDATION_ERRORS } from '@taiga-ui/kit'
+import { LoadingService, StartOSDiskInfo } from '@start9labs/shared'
+import { TuiDialogContext, TuiDialogService } from '@taiga-ui/core'
+import { POLYMORPHEUS_CONTEXT } from '@tinkoff/ng-polymorpheus'
import {
- AlertController,
- LoadingController,
- ModalController,
-} from '@ionic/angular'
-import { ApiService, CifsBackupTarget } from 'src/app/services/api/api.service'
-import { StartOSDiskInfo } from '@start9labs/shared'
-import { PasswordPage } from '../password/password.page'
+ ApiService,
+ CifsBackupTarget,
+ CifsRecoverySource,
+} from 'src/app/services/api/api.service'
+import { PASSWORD } from '../password/password.page'
@Component({
selector: 'cifs-modal',
templateUrl: 'cifs-modal.page.html',
styleUrls: ['cifs-modal.page.scss'],
+ providers: [
+ {
+ provide: TUI_VALIDATION_ERRORS,
+ useValue: {
+ required: 'This field is required',
+ },
+ },
+ ],
})
export class CifsModal {
- cifs = {
- type: 'cifs' as 'cifs',
- hostname: '',
- path: '',
- username: '',
- password: '',
- }
+ readonly form = new FormGroup({
+ hostname: new FormControl('', {
+ validators: [
+ Validators.required,
+ Validators.pattern(/^[a-zA-Z0-9._-]+( [a-zA-Z0-9]+)*$/),
+ ],
+ nonNullable: true,
+ }),
+ path: new FormControl('', {
+ validators: [Validators.required],
+ nonNullable: true,
+ }),
+ username: new FormControl('', {
+ validators: [Validators.required],
+ nonNullable: true,
+ }),
+ password: new FormControl(),
+ })
constructor(
- private readonly modalController: ModalController,
+ @Inject(POLYMORPHEUS_CONTEXT)
+ private readonly context: TuiDialogContext<{
+ cifs: CifsRecoverySource
+ recoveryPassword: string
+ }>,
+ private readonly dialogs: TuiDialogService,
private readonly api: ApiService,
- private readonly loadingCtrl: LoadingController,
- private readonly alertCtrl: AlertController,
+ private readonly loader: LoadingService,
) {}
cancel() {
- this.modalController.dismiss()
+ this.context.$implicit.complete()
}
async submit(): Promise {
- const loader = await this.loadingCtrl.create({
- message: 'Connecting to shared folder...',
- cssClass: 'loader',
- })
- await loader.present()
+ const loader = this.loader
+ .open('Connecting to shared folder...')
+ .subscribe()
try {
const diskInfo = await this.api.verifyCifs({
- ...this.cifs,
- password: this.cifs.password
- ? await this.api.encrypt(this.cifs.password)
+ ...this.form.getRawValue(),
+ type: 'cifs',
+ password: this.form.value.password
+ ? await this.api.encrypt(String(this.form.value.password))
: null,
})
- await loader.dismiss()
+ loader.unsubscribe()
this.presentModalPassword(diskInfo)
} catch (e) {
- await loader.dismiss()
+ loader.unsubscribe()
this.presentAlertFailed()
}
}
- private async presentModalPassword(diskInfo: StartOSDiskInfo): Promise {
+ private presentModalPassword(diskInfo: StartOSDiskInfo) {
const target: CifsBackupTarget = {
- ...this.cifs,
+ ...this.form.getRawValue(),
mountable: true,
'embassy-os': diskInfo,
}
- const modal = await this.modalController.create({
- component: PasswordPage,
- componentProps: { target },
- })
- modal.onDidDismiss().then(res => {
- if (res.role === 'success') {
- this.modalController.dismiss(
- {
- cifs: this.cifs,
- recoveryPassword: res.data.password,
- },
- 'success',
- )
- }
- })
- await modal.present()
+ this.dialogs
+ .open(PASSWORD, {
+ label: 'Unlock Drive',
+ size: 's',
+ data: { target },
+ })
+ .subscribe(recoveryPassword => {
+ this.context.completeWith({
+ cifs: { ...this.form.getRawValue(), type: 'cifs' },
+ recoveryPassword,
+ })
+ })
}
- private async presentAlertFailed(): Promise {
- const alert = await this.alertCtrl.create({
- header: 'Connection Failed',
- message:
+ private presentAlertFailed() {
+ this.dialogs
+ .open(
'Unable to connect to shared folder. Ensure (1) target computer is connected to LAN, (2) target folder is being shared, and (3) hostname, path, and credentials are accurate.',
- buttons: ['OK'],
- })
- alert.present()
+ {
+ label: 'Connection Failed',
+ size: 's',
+ },
+ )
+ .subscribe()
}
}
diff --git a/frontend/projects/setup-wizard/src/app/modals/password/password.module.ts b/frontend/projects/setup-wizard/src/app/modals/password/password.module.ts
index 416c558f5..ce89d0709 100644
--- a/frontend/projects/setup-wizard/src/app/modals/password/password.module.ts
+++ b/frontend/projects/setup-wizard/src/app/modals/password/password.module.ts
@@ -1,20 +1,20 @@
import { NgModule } from '@angular/core'
import { CommonModule } from '@angular/common'
-import { IonicModule } from '@ionic/angular'
-import { FormsModule } from '@angular/forms'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { TuiButtonModule, TuiErrorModule } from '@taiga-ui/core'
+import { TuiInputPasswordModule } from '@taiga-ui/kit'
import { PasswordPage } from './password.page'
@NgModule({
- declarations: [
- PasswordPage,
- ],
+ declarations: [PasswordPage],
imports: [
CommonModule,
FormsModule,
- IonicModule,
- ],
- exports: [
- PasswordPage,
+ TuiButtonModule,
+ TuiInputPasswordModule,
+ TuiErrorModule,
+ ReactiveFormsModule,
],
+ exports: [PasswordPage],
})
-export class PasswordPageModule { }
+export class PasswordPageModule {}
diff --git a/frontend/projects/setup-wizard/src/app/modals/password/password.page.html b/frontend/projects/setup-wizard/src/app/modals/password/password.page.html
index d779077c6..10dae39cd 100644
--- a/frontend/projects/setup-wizard/src/app/modals/password/password.page.html
+++ b/frontend/projects/setup-wizard/src/app/modals/password/password.page.html
@@ -1,91 +1,35 @@
-
-
- {{ storageDrive ? 'Set Password' : 'Unlock Drive' }}
-
-
+
+
-
-
-
-
-
-
+
-
+
-
-
+
+
+
diff --git a/frontend/projects/setup-wizard/src/app/modals/password/password.page.scss b/frontend/projects/setup-wizard/src/app/modals/password/password.page.scss
deleted file mode 100644
index d3af3bcbd..000000000
--- a/frontend/projects/setup-wizard/src/app/modals/password/password.page.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.item-interactive {
- --highlight-background: var(--ion-color-dark) !important;
-}
-
-ion-item {
- &:hover {
- transition-property: transform;
- transform: none;
- }
-}
-
-.item-has-focus {
- --background: var(--ion-color-dark-tint) !important;
-}
-
-.error-message {
- color: var(--ion-color-danger) !important;
- font-size: .9rem !important;
- margin-left: 36px;
- margin-top: -16px;
-}
\ No newline at end of file
diff --git a/frontend/projects/setup-wizard/src/app/modals/password/password.page.ts b/frontend/projects/setup-wizard/src/app/modals/password/password.page.ts
index 98de93e1a..ec500c4ad 100644
--- a/frontend/projects/setup-wizard/src/app/modals/password/password.page.ts
+++ b/frontend/projects/setup-wizard/src/app/modals/password/password.page.ts
@@ -1,81 +1,77 @@
-import { Component, Input, ViewChild } from '@angular/core'
-import { IonInput, ModalController } from '@ionic/angular'
+import { Component, Inject } from '@angular/core'
+import { FormControl } from '@angular/forms'
+import * as argon2 from '@start9labs/argon2'
+import { ErrorService } from '@start9labs/shared'
+import { TuiDialogContext } from '@taiga-ui/core'
+import {
+ PolymorpheusComponent,
+ POLYMORPHEUS_CONTEXT,
+} from '@tinkoff/ng-polymorpheus'
import {
CifsBackupTarget,
DiskBackupTarget,
} from 'src/app/services/api/api.service'
-import * as argon2 from '@start9labs/argon2'
+
+interface DialogData {
+ target?: CifsBackupTarget | DiskBackupTarget
+ storageDrive?: boolean
+}
@Component({
selector: 'app-password',
templateUrl: 'password.page.html',
- styleUrls: ['password.page.scss'],
})
export class PasswordPage {
- @ViewChild('focusInput') elem?: IonInput
- @Input() target?: CifsBackupTarget | DiskBackupTarget
- @Input() storageDrive = false
+ readonly target = this.context.data.target
+ readonly storageDrive = this.context.data.storageDrive
+ readonly password = new FormControl('', { nonNullable: true })
+ readonly confirm = new FormControl('', { nonNullable: true })
- pwError = ''
- password = ''
- unmasked1 = false
+ constructor(
+ @Inject(POLYMORPHEUS_CONTEXT)
+ private readonly context: TuiDialogContext,
+ private readonly errorService: ErrorService,
+ ) {}
- verError = ''
- passwordVer = ''
- unmasked2 = false
+ get passwordError(): string | null {
+ if (!this.password.touched || this.target) return null
- constructor(private modalController: ModalController) {}
+ if (!this.storageDrive && !this.target?.['embassy-os'])
+ return 'No recovery target' // unreachable
- ngAfterViewInit() {
- setTimeout(() => this.elem?.setFocus(), 400)
+ if (this.password.value.length < 12)
+ return 'Must be 12 characters or greater'
+
+ if (this.password.value.length > 64)
+ return 'Must be less than 65 characters'
+
+ return null
}
- async verifyPw() {
- if (!this.target || !this.target['embassy-os'])
- this.pwError = 'No recovery target' // unreachable
+ get confirmError(): string | null {
+ return this.confirm.touched && this.password.value !== this.confirm.value
+ ? 'Passwords do not match'
+ : null
+ }
+ verifyPw() {
try {
const passwordHash = this.target!['embassy-os']?.['password-hash'] || ''
- argon2.verify(passwordHash, this.password)
- this.modalController.dismiss({ password: this.password }, 'success')
+ argon2.verify(passwordHash, this.password.value)
+ this.context.completeWith(this.password.value)
} catch (e) {
- this.pwError = 'Incorrect password provided'
+ this.errorService.handleError('Incorrect password provided')
}
}
- async submitPw() {
- this.validate()
- if (this.password !== this.passwordVer) {
- this.verError = '*passwords do not match'
- }
-
- if (this.pwError || this.verError) return
- this.modalController.dismiss({ password: this.password }, 'success')
- }
-
- validate() {
- if (!!this.target) return (this.pwError = '')
-
- if (this.passwordVer) {
- this.checkVer()
- }
-
- if (this.password.length < 12) {
- this.pwError = 'Must be 12 characters or greater'
- } else if (this.password.length > 64) {
- this.pwError = 'Must be less than 65 characters'
- } else {
- this.pwError = ''
- }
- }
-
- checkVer() {
- this.verError =
- this.password !== this.passwordVer ? 'Passwords do not match' : ''
+ submitPw() {
+ this.context.completeWith(this.password.value)
}
cancel() {
- this.modalController.dismiss()
+ this.context.$implicit.complete()
}
}
+
+export const PASSWORD = new PolymorpheusComponent(PasswordPage)
diff --git a/frontend/projects/setup-wizard/src/app/pages/attach/attach.page.ts b/frontend/projects/setup-wizard/src/app/pages/attach/attach.page.ts
index b4d6eb9f9..2662abc9d 100644
--- a/frontend/projects/setup-wizard/src/app/pages/attach/attach.page.ts
+++ b/frontend/projects/setup-wizard/src/app/pages/attach/attach.page.ts
@@ -1,13 +1,10 @@
import { Component } from '@angular/core'
-import {
- LoadingController,
- ModalController,
- NavController,
-} from '@ionic/angular'
+import { NavController } from '@ionic/angular'
+import { DiskInfo, ErrorService, LoadingService } from '@start9labs/shared'
+import { TuiDialogService } from '@taiga-ui/core'
import { ApiService } from 'src/app/services/api/api.service'
-import { DiskInfo, ErrorToastService } from '@start9labs/shared'
import { StateService } from 'src/app/services/state.service'
-import { PasswordPage } from 'src/app/modals/password/password.page'
+import { PASSWORD, PasswordPage } from 'src/app/modals/password/password.page'
@Component({
selector: 'app-attach',
@@ -21,10 +18,10 @@ export class AttachPage {
constructor(
private readonly apiService: ApiService,
private readonly navCtrl: NavController,
- private readonly errToastService: ErrorToastService,
+ private readonly errorService: ErrorService,
private readonly stateService: StateService,
- private readonly modalCtrl: ModalController,
- private readonly loadingCtrl: LoadingController,
+ private readonly dialogs: TuiDialogService,
+ private readonly loader: LoadingService,
) {}
async ngOnInit() {
@@ -41,38 +38,34 @@ export class AttachPage {
try {
this.drives = await this.apiService.getDrives()
} catch (e: any) {
- this.errToastService.present(e)
+ this.errorService.handleError(e)
} finally {
this.loading = false
}
}
- async select(guid: string) {
- const modal = await this.modalCtrl.create({
- component: PasswordPage,
- componentProps: { storageDrive: true },
- })
- modal.onDidDismiss().then(res => {
- if (res.data && res.data.password) {
- this.attachDrive(guid, res.data.password)
- }
- })
- await modal.present()
+ select(guid: string) {
+ this.dialogs
+ .open(PASSWORD, {
+ label: 'Set Password',
+ size: 's',
+ data: { storageDrive: true },
+ })
+ .subscribe(password => {
+ this.attachDrive(guid, password)
+ })
}
private async attachDrive(guid: string, password: string) {
- const loader = await this.loadingCtrl.create({
- message: 'Connecting to drive...',
- cssClass: 'loader',
- })
- await loader.present()
+ const loader = this.loader.open('Connecting to drive...').subscribe()
+
try {
await this.stateService.importDrive(guid, password)
await this.navCtrl.navigateForward(`/loading`)
} catch (e: any) {
- this.errToastService.present(e)
+ this.errorService.handleError(e)
} finally {
- loader.dismiss()
+ loader.unsubscribe()
}
}
}
diff --git a/frontend/projects/setup-wizard/src/app/pages/embassy/embassy.page.ts b/frontend/projects/setup-wizard/src/app/pages/embassy/embassy.page.ts
index 855051879..81a9faaba 100644
--- a/frontend/projects/setup-wizard/src/app/pages/embassy/embassy.page.ts
+++ b/frontend/projects/setup-wizard/src/app/pages/embassy/embassy.page.ts
@@ -1,19 +1,22 @@
import { Component } from '@angular/core'
+import { NavController } from '@ionic/angular'
import {
- AlertController,
- LoadingController,
- ModalController,
- NavController,
-} from '@ionic/angular'
+ DiskInfo,
+ ErrorService,
+ GuidPipe,
+ LoadingService,
+} from '@start9labs/shared'
+import { TuiDialogService } from '@taiga-ui/core'
import {
ApiService,
BackupRecoverySource,
DiskRecoverySource,
DiskMigrateSource,
} from 'src/app/services/api/api.service'
-import { DiskInfo, ErrorToastService, GuidPipe } from '@start9labs/shared'
import { StateService } from 'src/app/services/state.service'
-import { PasswordPage } from '../../modals/password/password.page'
+import { PASSWORD, PasswordPage } from '../../modals/password/password.page'
+import { TUI_PROMPT } from '@taiga-ui/kit'
+import { filter, of, switchMap } from 'rxjs'
@Component({
selector: 'app-embassy',
@@ -28,11 +31,10 @@ export class EmbassyPage {
constructor(
private readonly apiService: ApiService,
private readonly navCtrl: NavController,
- private readonly modalController: ModalController,
- private readonly alertCtrl: AlertController,
+ private readonly dialogs: TuiDialogService,
private readonly stateService: StateService,
- private readonly loadingCtrl: LoadingController,
- private readonly errorToastService: ErrorToastService,
+ private readonly loader: LoadingService,
+ private readonly errorService: ErrorService,
private readonly guidPipe: GuidPipe,
) {}
@@ -77,87 +79,71 @@ export class EmbassyPage {
})
}
} catch (e: any) {
- this.errorToastService.present(e)
+ this.errorService.handleError(e)
} finally {
this.loading = false
}
}
- async chooseDrive(drive: DiskInfo) {
- if (
- this.guidPipe.transform(drive) ||
- !!drive.partitions.find(p => p.used)
- ) {
- const alert = await this.alertCtrl.create({
- header: 'Warning',
- subHeader: 'Drive contains data!',
- message: 'All data stored on this drive will be permanently deleted.',
- buttons: [
- {
- role: 'cancel',
- text: 'Cancel',
- },
- {
- text: 'Continue',
- handler: () => {
- // for backup recoveries
- if (this.stateService.recoveryPassword) {
- this.setupEmbassy(
- drive.logicalname,
- this.stateService.recoveryPassword,
- )
- } else {
- // for migrations and fresh setups
- this.presentModalPassword(drive.logicalname)
- }
- },
- },
- ],
+ chooseDrive(drive: DiskInfo) {
+ of(!this.guidPipe.transform(drive) && !drive.partitions.some(p => p.used))
+ .pipe(
+ switchMap(unused =>
+ unused
+ ? of(true)
+ : this.dialogs.open(TUI_PROMPT, {
+ label: 'Warning',
+ size: 's',
+ data: {
+ content:
+ 'Drive contains data! {
- const modal = await this.modalController.create({
- component: PasswordPage,
- componentProps: {
- storageDrive: true,
- },
- })
- modal.onDidDismiss().then(async ret => {
- if (!ret.data || !ret.data.password) return
- this.setupEmbassy(logicalname, ret.data.password)
- })
- await modal.present()
+ private presentModalPassword(logicalname: string) {
+ this.dialogs
+ .open(PASSWORD, {
+ label: 'Set Password',
+ size: 's',
+ data: { storageDrive: true },
+ })
+ .subscribe(password => {
+ this.setupEmbassy(logicalname, password)
+ })
}
private async setupEmbassy(
logicalname: string,
password: string,
): Promise {
- const loader = await this.loadingCtrl.create({
- message: 'Connecting to drive...',
- cssClass: 'loader',
- })
- await loader.present()
+ const loader = this.loader.open('Connecting to drive...').subscribe()
try {
await this.stateService.setupEmbassy(logicalname, password)
await this.navCtrl.navigateForward(`/loading`)
} catch (e: any) {
- this.errorToastService.present(e)
+ this.errorService.handleError(e)
console.error(e)
} finally {
- loader.dismiss()
+ loader.unsubscribe()
}
}
}
diff --git a/frontend/projects/setup-wizard/src/app/pages/home/home.page.ts b/frontend/projects/setup-wizard/src/app/pages/home/home.page.ts
index c0e93d18a..88ab04160 100644
--- a/frontend/projects/setup-wizard/src/app/pages/home/home.page.ts
+++ b/frontend/projects/setup-wizard/src/app/pages/home/home.page.ts
@@ -2,7 +2,7 @@ import { Component } from '@angular/core'
import { IonicSlides } from '@ionic/angular'
import { ApiService } from 'src/app/services/api/api.service'
import SwiperCore, { Swiper } from 'swiper'
-import { ErrorToastService } from '@start9labs/shared'
+import { ErrorService } from '@start9labs/shared'
import { StateService } from 'src/app/services/state.service'
SwiperCore.use([IonicSlides])
@@ -19,7 +19,7 @@ export class HomePage {
constructor(
private readonly api: ApiService,
- private readonly errToastService: ErrorToastService,
+ private readonly errorService: ErrorService,
private readonly stateService: StateService,
) {}
@@ -33,7 +33,7 @@ export class HomePage {
await this.api.getPubKey()
} catch (e: any) {
this.error = true
- this.errToastService.present(e)
+ this.errorService.handleError(e)
} finally {
this.loading = false
}
diff --git a/frontend/projects/setup-wizard/src/app/pages/loading/loading.module.ts b/frontend/projects/setup-wizard/src/app/pages/loading/loading.module.ts
index 9c7ae1bc9..3de110846 100644
--- a/frontend/projects/setup-wizard/src/app/pages/loading/loading.module.ts
+++ b/frontend/projects/setup-wizard/src/app/pages/loading/loading.module.ts
@@ -1,6 +1,6 @@
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
-import { LoadingModule } from '@start9labs/shared'
+import { InitializingModule } from '@start9labs/shared'
import { LoadingPage } from './loading.page'
const routes: Routes = [
@@ -11,7 +11,7 @@ const routes: Routes = [
]
@NgModule({
- imports: [LoadingModule, RouterModule.forChild(routes)],
+ imports: [InitializingModule, RouterModule.forChild(routes)],
declarations: [LoadingPage],
})
export class LoadingPageModule {}
diff --git a/frontend/projects/setup-wizard/src/app/pages/loading/loading.page.html b/frontend/projects/setup-wizard/src/app/pages/loading/loading.page.html
index 559705a7f..54609eb9a 100644
--- a/frontend/projects/setup-wizard/src/app/pages/loading/loading.page.html
+++ b/frontend/projects/setup-wizard/src/app/pages/loading/loading.page.html
@@ -1,5 +1,5 @@
- {
- const modal = await this.modalCtrl.create({
- component: CifsModal,
- })
- modal.onDidDismiss().then(res => {
- if (res.role === 'success') {
- const { hostname, path, username, password } = res.data.cifs
+ presentModalCifs() {
+ this.dialogs
+ .open<{ cifs: CifsRecoverySource; recoveryPassword: string }>(
+ new PolymorpheusComponent(CifsModal),
+ {
+ label: 'Connect Network Folder',
+ },
+ )
+ .subscribe(({ cifs, recoveryPassword }) => {
this.stateService.recoverySource = {
type: 'backup',
- target: {
- type: 'cifs',
- hostname,
- path,
- username,
- password,
- },
+ target: cifs,
}
- this.stateService.recoveryPassword = res.data.recoveryPassword
+ this.stateService.recoveryPassword = recoveryPassword
this.navCtrl.navigateForward('/storage')
- }
- })
- await modal.present()
+ })
}
async select(target: DiskBackupTarget) {
@@ -97,17 +97,16 @@ export class RecoverPage {
if (!logicalname) return
- const modal = await this.modalController.create({
- component: PasswordPage,
- componentProps: { target },
- cssClass: 'alertlike-modal',
- })
- modal.onDidDismiss().then(res => {
- if (res.data?.password) {
- this.selectRecoverySource(logicalname, res.data.password)
- }
- })
- await modal.present()
+ this.dialogs
+ .open(PASSWORD, {
+ label: 'Unlock Drive',
+ size: 's',
+ data: { target },
+ })
+ .pipe(filter(Boolean))
+ .subscribe(password => {
+ this.selectRecoverySource(logicalname, password)
+ })
}
private async selectRecoverySource(logicalname: string, password?: string) {
diff --git a/frontend/projects/setup-wizard/src/app/pages/success/success.page.ts b/frontend/projects/setup-wizard/src/app/pages/success/success.page.ts
index 4ea73e619..17da17223 100644
--- a/frontend/projects/setup-wizard/src/app/pages/success/success.page.ts
+++ b/frontend/projects/setup-wizard/src/app/pages/success/success.page.ts
@@ -1,6 +1,6 @@
import { DOCUMENT } from '@angular/common'
import { Component, ElementRef, Inject, NgZone, ViewChild } from '@angular/core'
-import { DownloadHTMLService, ErrorToastService } from '@start9labs/shared'
+import { DownloadHTMLService, ErrorService } from '@start9labs/shared'
import { ApiService } from 'src/app/services/api/api.service'
import { StateService } from 'src/app/services/state.service'
@@ -12,7 +12,8 @@ import { StateService } from 'src/app/services/state.service'
})
export class SuccessPage {
@ViewChild('canvas', { static: true })
- private canvas: ElementRef = {} as ElementRef
+ private canvas: ElementRef =
+ {} as ElementRef
private ctx: CanvasRenderingContext2D = {} as CanvasRenderingContext2D
torAddress?: string
@@ -28,7 +29,7 @@ export class SuccessPage {
constructor(
@Inject(DOCUMENT) private readonly document: Document,
- private readonly errCtrl: ErrorToastService,
+ private readonly errorService: ErrorService,
private readonly stateService: StateService,
private readonly api: ApiService,
private readonly downloadHtml: DownloadHTMLService,
@@ -55,7 +56,7 @@ export class SuccessPage {
await this.api.exit()
}
} catch (e: any) {
- await this.errCtrl.present(e)
+ await this.errorService.handleError(e)
}
}
diff --git a/frontend/projects/setup-wizard/src/app/pages/transfer/transfer.page.ts b/frontend/projects/setup-wizard/src/app/pages/transfer/transfer.page.ts
index 5de21a289..8cf58d7fa 100644
--- a/frontend/projects/setup-wizard/src/app/pages/transfer/transfer.page.ts
+++ b/frontend/projects/setup-wizard/src/app/pages/transfer/transfer.page.ts
@@ -1,8 +1,11 @@
import { Component } from '@angular/core'
-import { AlertController, NavController } from '@ionic/angular'
+import { NavController } from '@ionic/angular'
import { ApiService } from 'src/app/services/api/api.service'
-import { DiskInfo, ErrorToastService } from '@start9labs/shared'
+import { DiskInfo, ErrorService } from '@start9labs/shared'
import { StateService } from 'src/app/services/state.service'
+import { TuiDialogService } from '@taiga-ui/core'
+import { TUI_PROMPT } from '@taiga-ui/kit'
+import { filter } from 'rxjs'
@Component({
selector: 'app-transfer',
@@ -16,8 +19,8 @@ export class TransferPage {
constructor(
private readonly apiService: ApiService,
private readonly navCtrl: NavController,
- private readonly alertCtrl: AlertController,
- private readonly errToastService: ErrorToastService,
+ private readonly dialogs: TuiDialogService,
+ private readonly errorService: ErrorService,
private readonly stateService: StateService,
) {}
@@ -35,34 +38,31 @@ export class TransferPage {
try {
this.drives = await this.apiService.getDrives()
} catch (e: any) {
- this.errToastService.present(e)
+ this.errorService.handleError(e)
} finally {
this.loading = false
}
}
- async select(guid: string) {
- const alert = await this.alertCtrl.create({
- header: 'Warning',
- message:
- 'After transferring data from this drive, do not attempt to boot into it again as a Start9 Server. This may result in services malfunctioning, data corruption, or loss of funds.',
- buttons: [
- {
- role: 'cancel',
- text: 'Cancel',
+ select(guid: string) {
+ this.dialogs
+ .open(TUI_PROMPT, {
+ label: 'Warning',
+ size: 's',
+ data: {
+ content:
+ 'After transferring data from this drive, do not attempt to boot into it again as a Start9 Server. This may result in services malfunctioning, data corruption, or loss of funds.',
+ yes: 'Continue',
+ no: 'Cancel',
},
- {
- text: 'Continue',
- handler: () => {
- this.stateService.recoverySource = {
- type: 'migrate',
- guid,
- }
- this.navCtrl.navigateForward(`/storage`)
- },
- },
- ],
- })
- await alert.present()
+ })
+ .pipe(filter(Boolean))
+ .subscribe(() => {
+ this.stateService.recoverySource = {
+ type: 'migrate',
+ guid,
+ }
+ this.navCtrl.navigateForward(`/storage`)
+ })
}
}
diff --git a/frontend/projects/shared/assets/fonts/Redacted/redacted.regular.ttf b/frontend/projects/shared/assets/fonts/Redacted/redacted.regular.ttf
deleted file mode 100644
index 3bc1fe32c..000000000
Binary files a/frontend/projects/shared/assets/fonts/Redacted/redacted.regular.ttf and /dev/null differ
diff --git a/frontend/projects/shared/package.json b/frontend/projects/shared/package.json
index a2bbec95f..64e244562 100644
--- a/frontend/projects/shared/package.json
+++ b/frontend/projects/shared/package.json
@@ -10,6 +10,8 @@
"@ng-web-apis/resize-observer": ">=2.0.0",
"@start9labs/emver": "^0.1.5",
"@taiga-ui/cdk": ">=3.0.0",
+ "@taiga-ui/core": ">=3.0.0",
+ "@tinkoff/ng-dompurify": ">=4.0.0",
"ansi-to-html": "^0.7.2"
},
"exports": {
diff --git a/frontend/projects/shared/src/components/alert/alert-button.directive.ts b/frontend/projects/shared/src/components/alert/alert-button.directive.ts
deleted file mode 100644
index fc5320edb..000000000
--- a/frontend/projects/shared/src/components/alert/alert-button.directive.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Directive, ElementRef, Input } from '@angular/core'
-import { AlertButton } from '@ionic/angular'
-
-@Directive({
- selector: `button[alertButton], a[alertButton]`,
-})
-export class AlertButtonDirective implements AlertButton {
- @Input()
- icon?: string
-
- @Input()
- role?: 'cancel' | 'destructive' | string
-
- handler = () => {
- this.elementRef.nativeElement.click()
-
- return false
- }
-
- constructor(private readonly elementRef: ElementRef) {}
-
- get text(): string {
- return this.elementRef.nativeElement.textContent?.trim() || ''
- }
-
- get cssClass(): string[] {
- return Array.from(this.elementRef.nativeElement.classList)
- }
-}
diff --git a/frontend/projects/shared/src/components/alert/alert-input.directive.ts b/frontend/projects/shared/src/components/alert/alert-input.directive.ts
deleted file mode 100644
index af7879e37..000000000
--- a/frontend/projects/shared/src/components/alert/alert-input.directive.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Directive, ElementRef, Input } from '@angular/core'
-import { AlertInput } from '@ionic/angular'
-
-@Directive({
- selector: `input[alertInput], textarea[alertInput]`,
-})
-export class AlertInputDirective implements AlertInput {
- @Input()
- value?: T
-
- @Input()
- label?: string
-
- constructor(private readonly elementRef: ElementRef) {}
-
- get checked(): boolean {
- return this.elementRef.nativeElement.checked
- }
-
- get name(): string {
- return this.elementRef.nativeElement.name
- }
-
- get type(): AlertInput['type'] {
- return this.elementRef.nativeElement.type as AlertInput['type']
- }
-}
diff --git a/frontend/projects/shared/src/components/alert/alert.component.ts b/frontend/projects/shared/src/components/alert/alert.component.ts
deleted file mode 100644
index 522ba93d3..000000000
--- a/frontend/projects/shared/src/components/alert/alert.component.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-import {
- AfterViewInit,
- ChangeDetectionStrategy,
- Component,
- ContentChildren,
- ElementRef,
- EventEmitter,
- Input,
- OnDestroy,
- Output,
- QueryList,
- ViewChild,
-} from '@angular/core'
-import { AlertController, AlertOptions, IonicSafeString } from '@ionic/angular'
-import { OverlayEventDetail } from '@ionic/core'
-import { AlertButtonDirective } from './alert-button.directive'
-import { AlertInputDirective } from './alert-input.directive'
-
-@Component({
- selector: 'alert',
- template: `
- implements AfterViewInit, OnDestroy {
- @Output()
- readonly dismiss = new EventEmitter>()
-
- @Input()
- header = ''
-
- @Input()
- subHeader = ''
-
- @Input()
- backdropDismiss = true
-
- @ViewChild('message', { static: true })
- private readonly content?: ElementRef
-
- @ContentChildren(AlertButtonDirective)
- private readonly buttons: QueryList = new QueryList()
-
- @ContentChildren(AlertInputDirective)
- private readonly inputs: QueryList> = new QueryList()
-
- private alert?: HTMLIonAlertElement
-
- constructor(
- private readonly elementRef: ElementRef,
- private readonly controller: AlertController,
- ) {}
-
- get cssClass(): string[] {
- return Array.from(this.elementRef.nativeElement.classList)
- }
-
- get message(): IonicSafeString {
- return new IonicSafeString(this.content?.nativeElement.innerHTML || '')
- }
-
- async ngAfterViewInit() {
- this.alert = await this.controller.create(this.getOptions())
- this.alert.onDidDismiss().then(event => {
- this.dismiss.emit(event)
- })
-
- await this.alert.present()
- }
-
- async ngOnDestroy() {
- await this.alert?.dismiss()
- }
-
- private getOptions(): AlertOptions {
- const {
- header,
- subHeader,
- message,
- cssClass,
- buttons,
- inputs,
- backdropDismiss,
- } = this
- return {
- header,
- subHeader,
- message,
- cssClass,
- backdropDismiss,
- buttons: buttons.toArray(),
- inputs: inputs.toArray(),
- }
- }
-}
diff --git a/frontend/projects/shared/src/components/alert/alert.module.ts b/frontend/projects/shared/src/components/alert/alert.module.ts
deleted file mode 100644
index 45fa01f55..000000000
--- a/frontend/projects/shared/src/components/alert/alert.module.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core'
-import { AlertComponent } from './alert.component'
-import { AlertButtonDirective } from './alert-button.directive'
-import { AlertInputDirective } from './alert-input.directive'
-
-@NgModule({
- declarations: [AlertComponent, AlertButtonDirective, AlertInputDirective],
- exports: [AlertComponent, AlertButtonDirective, AlertInputDirective],
-})
-export class AlertModule {}
diff --git a/frontend/projects/shared/src/components/loading/loading.component.html b/frontend/projects/shared/src/components/initializing/initializing.component.html
similarity index 100%
rename from frontend/projects/shared/src/components/loading/loading.component.html
rename to frontend/projects/shared/src/components/initializing/initializing.component.html
diff --git a/frontend/projects/shared/src/components/initializing/initializing.component.scss b/frontend/projects/shared/src/components/initializing/initializing.component.scss
new file mode 100644
index 000000000..f21705ce5
--- /dev/null
+++ b/frontend/projects/shared/src/components/initializing/initializing.component.scss
@@ -0,0 +1,18 @@
+ion-card-title {
+ font-size: 42px;
+}
+
+.progress {
+ max-width: 700px;
+ padding-bottom: 20px;
+ margin: auto auto 40px;
+}
+
+.logs-container {
+ margin-top: 24px;
+ height: 280px;
+ text-align: left;
+ overflow: hidden;
+ border-radius: 31px;
+ margin-inline: 10px;
+}
diff --git a/frontend/projects/shared/src/components/initializing/initializing.component.ts b/frontend/projects/shared/src/components/initializing/initializing.component.ts
new file mode 100644
index 000000000..e72cecb9e
--- /dev/null
+++ b/frontend/projects/shared/src/components/initializing/initializing.component.ts
@@ -0,0 +1,35 @@
+import { Component, inject, Input, Output } from '@angular/core'
+import { delay, filter } from 'rxjs'
+import { SetupService } from '../../services/setup.service'
+
+@Component({
+ selector: 'app-initializing',
+ templateUrl: 'initializing.component.html',
+ styleUrls: ['initializing.component.scss'],
+})
+export class InitializingComponent {
+ readonly progress$ = inject(SetupService)
+
+ @Input()
+ setupType?: 'fresh' | 'restore' | 'attach' | 'transfer'
+
+ @Output()
+ readonly finished = this.progress$.pipe(
+ filter(progress => progress === 1),
+ delay(500),
+ )
+
+ getMessage(progress: number | null): string {
+ if (['fresh', 'attach'].includes(this.setupType || '')) {
+ return 'Setting up your server'
+ }
+
+ if (!progress) {
+ return 'Preparing data. This can take a while'
+ } else if (progress < 1) {
+ return 'Copying data'
+ } else {
+ return 'Finalizing'
+ }
+ }
+}
diff --git a/frontend/projects/shared/src/components/initializing/initializing.module.ts b/frontend/projects/shared/src/components/initializing/initializing.module.ts
new file mode 100644
index 000000000..daa025aa3
--- /dev/null
+++ b/frontend/projects/shared/src/components/initializing/initializing.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { IonicModule } from '@ionic/angular'
+import { TuiLetModule } from '@taiga-ui/cdk'
+
+import { LogsWindowComponent } from './logs-window/logs-window.component'
+import { InitializingComponent } from './initializing.component'
+
+@NgModule({
+ imports: [CommonModule, IonicModule, TuiLetModule],
+ declarations: [InitializingComponent, LogsWindowComponent],
+ exports: [InitializingComponent],
+})
+export class InitializingModule {}
diff --git a/frontend/projects/shared/src/components/loading/logs-window/logs-window.component.html b/frontend/projects/shared/src/components/initializing/logs-window/logs-window.component.html
similarity index 100%
rename from frontend/projects/shared/src/components/loading/logs-window/logs-window.component.html
rename to frontend/projects/shared/src/components/initializing/logs-window/logs-window.component.html
diff --git a/frontend/projects/shared/src/components/loading/logs-window/logs-window.component.scss b/frontend/projects/shared/src/components/initializing/logs-window/logs-window.component.scss
similarity index 100%
rename from frontend/projects/shared/src/components/loading/logs-window/logs-window.component.scss
rename to frontend/projects/shared/src/components/initializing/logs-window/logs-window.component.scss
diff --git a/frontend/projects/shared/src/components/loading/logs-window/logs-window.component.ts b/frontend/projects/shared/src/components/initializing/logs-window/logs-window.component.ts
similarity index 96%
rename from frontend/projects/shared/src/components/loading/logs-window/logs-window.component.ts
rename to frontend/projects/shared/src/components/initializing/logs-window/logs-window.component.ts
index 4378be4af..6439ba062 100644
--- a/frontend/projects/shared/src/components/loading/logs-window/logs-window.component.ts
+++ b/frontend/projects/shared/src/components/initializing/logs-window/logs-window.component.ts
@@ -6,8 +6,8 @@ import { SetupLogsService } from '../../../services/setup-logs.service'
import { Log } from '../../../types/api'
import { toLocalIsoString } from '../../../util/to-local-iso-string'
-var Convert = require('ansi-to-html')
-var convert = new Convert({
+const Convert = require('ansi-to-html')
+const convert = new Convert({
bg: 'transparent',
})
diff --git a/frontend/projects/shared/src/components/loading/loading.component.scss b/frontend/projects/shared/src/components/loading/loading.component.scss
index f21705ce5..9a7d10100 100644
--- a/frontend/projects/shared/src/components/loading/loading.component.scss
+++ b/frontend/projects/shared/src/components/loading/loading.component.scss
@@ -1,18 +1,20 @@
-ion-card-title {
- font-size: 42px;
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
+:host {
+ @include shadow(3);
+
+ display: flex;
+ align-items: center;
+ max-width: 80%;
+ margin: auto;
+ padding: 1.5rem;
+ background: var(--tui-elevation-01);
+ border-radius: var(--tui-radius-m);
+
+ --tui-primary: var(--tui-warning-fill);
}
-.progress {
- max-width: 700px;
- padding-bottom: 20px;
- margin: auto auto 40px;
-}
-
-.logs-container {
- margin-top: 24px;
- height: 280px;
- text-align: left;
- overflow: hidden;
- border-radius: 31px;
- margin-inline: 10px;
+tui-loader {
+ flex-shrink: 0;
+ min-width: 2rem;
}
diff --git a/frontend/projects/shared/src/components/loading/loading.component.ts b/frontend/projects/shared/src/components/loading/loading.component.ts
index 3207aebb7..373f013a1 100644
--- a/frontend/projects/shared/src/components/loading/loading.component.ts
+++ b/frontend/projects/shared/src/components/loading/loading.component.ts
@@ -1,35 +1,17 @@
-import { Component, inject, Input, Output } from '@angular/core'
-import { delay, filter } from 'rxjs'
-import { SetupService } from '../../services/setup.service'
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
+import {
+ POLYMORPHEUS_CONTEXT,
+ PolymorpheusContent,
+} from '@tinkoff/ng-polymorpheus'
@Component({
- selector: 'app-loading',
- templateUrl: 'loading.component.html',
- styleUrls: ['loading.component.scss'],
+ template: `
+
-
- {{ title | titlecase }}
-
-
-
-
-
-
+
+
+ {{ error }}
+
+
-
-
-
- {{ error }}
-
-
+
-
-
-
-
-
+
+
diff --git a/frontend/projects/shared/src/components/markdown/markdown.component.module.ts b/frontend/projects/shared/src/components/markdown/markdown.component.module.ts
index 6da4673d1..8b8e3a6fe 100644
--- a/frontend/projects/shared/src/components/markdown/markdown.component.module.ts
+++ b/frontend/projects/shared/src/components/markdown/markdown.component.module.ts
@@ -1,6 +1,7 @@
import { NgModule } from '@angular/core'
import { CommonModule } from '@angular/common'
import { IonicModule } from '@ionic/angular'
+import { NgDompurifyModule } from '@tinkoff/ng-dompurify'
import { MarkdownPipeModule } from '../../pipes/markdown/markdown.module'
import { SafeLinksModule } from '../../directives/safe-links/safe-links.module'
@@ -15,6 +16,7 @@ import { MarkdownComponent } from './markdown.component'
MarkdownPipeModule,
TextSpinnerComponentModule,
SafeLinksModule,
+ NgDompurifyModule,
],
exports: [MarkdownComponent],
})
diff --git a/frontend/projects/shared/src/components/markdown/markdown.component.ts b/frontend/projects/shared/src/components/markdown/markdown.component.ts
index 7e47acc39..922ad645c 100644
--- a/frontend/projects/shared/src/components/markdown/markdown.component.ts
+++ b/frontend/projects/shared/src/components/markdown/markdown.component.ts
@@ -1,5 +1,6 @@
-import { Component, Input } from '@angular/core'
-import { ModalController } from '@ionic/angular'
+import { Component, Inject } from '@angular/core'
+import { TuiDialogContext } from '@taiga-ui/core'
+import { POLYMORPHEUS_CONTEXT } from '@tinkoff/ng-polymorpheus'
import {
catchError,
ignoreElements,
@@ -10,7 +11,7 @@ import {
of,
} from 'rxjs'
-import { getErrorMessage } from '../../services/error-toast.service'
+import { getErrorMessage } from '../../services/error.service'
@Component({
selector: 'markdown',
@@ -18,11 +19,10 @@ import { getErrorMessage } from '../../services/error-toast.service'
styleUrls: ['./markdown.component.scss'],
})
export class MarkdownComponent {
- @Input() content!: string | Observable
- @Input() title!: string
-
readonly content$ = defer(() =>
- isObservable(this.content) ? this.content : of(this.content),
+ isObservable(this.context.data.content)
+ ? this.context.data.content
+ : of(this.context.data.content),
).pipe(share())
readonly error$ = this.content$.pipe(
@@ -30,9 +30,15 @@ export class MarkdownComponent {
catchError(e => of(getErrorMessage(e))),
)
- constructor(private readonly modalCtrl: ModalController) {}
+ constructor(
+ @Inject(POLYMORPHEUS_CONTEXT)
+ private readonly context: TuiDialogContext<
+ void,
+ { content: string | Observable }
+ >,
+ ) {}
- async dismiss() {
- return this.modalCtrl.dismiss(true)
+ get title(): string {
+ return this.context.label || ''
}
}
diff --git a/frontend/projects/shared/src/components/toast/toast-button.directive.ts b/frontend/projects/shared/src/components/toast/toast-button.directive.ts
deleted file mode 100644
index 7c564961e..000000000
--- a/frontend/projects/shared/src/components/toast/toast-button.directive.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Directive, ElementRef, Input } from '@angular/core'
-import { ToastButton } from '@ionic/angular'
-
-@Directive({
- selector: `button[toastButton], a[toastButton]`,
-})
-export class ToastButtonDirective implements ToastButton {
- @Input()
- icon?: string
-
- @Input()
- side?: 'start' | 'end'
-
- @Input()
- role?: 'cancel' | string
-
- handler = () => {
- this.elementRef.nativeElement.click()
-
- return false
- }
-
- constructor(private readonly elementRef: ElementRef) {}
-
- get text(): string | undefined {
- return this.elementRef.nativeElement.textContent?.trim() || undefined
- }
-
- get cssClass(): string[] {
- return Array.from(this.elementRef.nativeElement.classList)
- }
-}
diff --git a/frontend/projects/shared/src/components/toast/toast.component.ts b/frontend/projects/shared/src/components/toast/toast.component.ts
deleted file mode 100644
index b6431c532..000000000
--- a/frontend/projects/shared/src/components/toast/toast.component.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import {
- AfterViewInit,
- ChangeDetectionStrategy,
- Component,
- ContentChildren,
- ElementRef,
- EventEmitter,
- Input,
- OnDestroy,
- Output,
- QueryList,
- ViewChild,
-} from '@angular/core'
-import { IonicSafeString, ToastController, ToastOptions } from '@ionic/angular'
-import { OverlayEventDetail } from '@ionic/core'
-import { ToastButtonDirective } from './toast-button.directive'
-
-@Component({
- selector: 'toast',
- template: `
- implements AfterViewInit, OnDestroy {
- @Output()
- readonly dismiss = new EventEmitter>()
-
- @Input()
- header = ''
-
- @Input()
- duration = 0
-
- @Input()
- position: 'top' | 'bottom' | 'middle' = 'bottom'
-
- @ViewChild('message', { static: true })
- private readonly content?: ElementRef
-
- @ContentChildren(ToastButtonDirective)
- private readonly buttons: QueryList = new QueryList()
-
- private toast?: HTMLIonToastElement
-
- constructor(
- private readonly elementRef: ElementRef,
- private readonly controller: ToastController,
- ) {}
-
- get cssClass(): string[] {
- return Array.from(this.elementRef.nativeElement.classList)
- }
-
- get message(): IonicSafeString {
- return new IonicSafeString(this.content?.nativeElement.innerHTML || '')
- }
-
- async ngAfterViewInit() {
- this.toast = await this.controller.create(this.getOptions())
- this.toast.onDidDismiss().then(event => {
- this.dismiss.emit(event)
- })
-
- await this.toast.present()
- }
-
- async ngOnDestroy() {
- await this.toast?.dismiss()
- }
-
- private getOptions(): ToastOptions {
- const { header, message, duration, position, cssClass, buttons } = this
- return {
- header,
- message,
- duration,
- position,
- cssClass,
- buttons: buttons.toArray(),
- }
- }
-}
diff --git a/frontend/projects/shared/src/components/toast/toast.module.ts b/frontend/projects/shared/src/components/toast/toast.module.ts
deleted file mode 100644
index 9f5304f5d..000000000
--- a/frontend/projects/shared/src/components/toast/toast.module.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { NgModule } from '@angular/core'
-import { ToastComponent } from './toast.component'
-import { ToastButtonDirective } from './toast-button.directive'
-
-@NgModule({
- declarations: [ToastComponent, ToastButtonDirective],
- exports: [ToastComponent, ToastButtonDirective],
-})
-export class ToastModule {}
diff --git a/frontend/projects/shared/src/directives/alert/alert.directive.ts b/frontend/projects/shared/src/directives/alert/alert.directive.ts
new file mode 100644
index 000000000..c9c7e3b4a
--- /dev/null
+++ b/frontend/projects/shared/src/directives/alert/alert.directive.ts
@@ -0,0 +1,22 @@
+import { Directive } from '@angular/core'
+import {
+ AbstractTuiDialogDirective,
+ AbstractTuiDialogService,
+} from '@taiga-ui/cdk'
+import { TuiAlertOptions, TuiAlertService } from '@taiga-ui/core'
+
+// TODO: Move to Taiga UI
+@Directive({
+ selector: 'ng-template[tuiAlert]',
+ providers: [
+ {
+ provide: AbstractTuiDialogService,
+ useExisting: TuiAlertService,
+ },
+ ],
+ inputs: ['options: tuiAlertOptions', 'open: tuiAlert'],
+ outputs: ['openChange: tuiAlertChange'],
+})
+export class TuiAlertDirective extends AbstractTuiDialogDirective<
+ TuiAlertOptions
+> {}
diff --git a/frontend/projects/shared/src/directives/alert/alert.module.ts b/frontend/projects/shared/src/directives/alert/alert.module.ts
new file mode 100644
index 000000000..75791bd29
--- /dev/null
+++ b/frontend/projects/shared/src/directives/alert/alert.module.ts
@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core'
+import { TuiAlertDirective } from './alert.directive'
+
+@NgModule({
+ declarations: [TuiAlertDirective],
+ exports: [TuiAlertDirective],
+})
+export class TuiAlertModule {}
diff --git a/frontend/projects/shared/src/pipes/markdown/markdown.pipe.ts b/frontend/projects/shared/src/pipes/markdown/markdown.pipe.ts
index f2c024670..bd6bb8630 100644
--- a/frontend/projects/shared/src/pipes/markdown/markdown.pipe.ts
+++ b/frontend/projects/shared/src/pipes/markdown/markdown.pipe.ts
@@ -1,28 +1,11 @@
import { Pipe, PipeTransform } from '@angular/core'
import { marked } from 'marked'
-import * as DOMPurify from 'dompurify'
@Pipe({
name: 'markdown',
})
export class MarkdownPipe implements PipeTransform {
transform(value: string): string {
- if (value && value.length > 0) {
- // convert markdown to html
- const html = marked(value)
- // sanitize html
- const sanitized = DOMPurify.sanitize(html)
- // parse html to find all links
- let parser = new DOMParser()
- const doc = parser.parseFromString(sanitized, 'text/html')
- const links = Array.from(doc.getElementsByTagName('a'))
- // add target="_blank" to every link
- links.forEach(link => {
- link.setAttribute('target', '_blank')
- })
- // return new html string
- return doc.documentElement.innerHTML
- }
- return value
+ return value?.length ? marked(value) : ''
}
}
diff --git a/frontend/projects/shared/src/public-api.ts b/frontend/projects/shared/src/public-api.ts
index da0632cc1..2f0dea166 100644
--- a/frontend/projects/shared/src/public-api.ts
+++ b/frontend/projects/shared/src/public-api.ts
@@ -5,23 +5,21 @@
export * from './classes/http-error'
export * from './classes/rpc-error'
-export * from './components/alert/alert.component'
-export * from './components/alert/alert.module'
-export * from './components/alert/alert-button.directive'
-export * from './components/alert/alert-input.directive'
-export * from './components/loading/logs-window/logs-window.component'
-export * from './components/loading/loading.module'
+export * from './components/initializing/logs-window/logs-window.component'
+export * from './components/initializing/initializing.module'
+export * from './components/initializing/initializing.component'
export * from './components/loading/loading.component'
+export * from './components/loading/loading.module'
+export * from './components/loading/loading.service'
export * from './components/markdown/markdown.component'
export * from './components/markdown/markdown.component.module'
export * from './components/text-spinner/text-spinner.component'
export * from './components/text-spinner/text-spinner.component.module'
export * from './components/ticker/ticker.component'
export * from './components/ticker/ticker.module'
-export * from './components/toast/toast.component'
-export * from './components/toast/toast.module'
-export * from './components/toast/toast-button.directive'
+export * from './directives/alert/alert.directive'
+export * from './directives/alert/alert.module'
export * from './directives/responsive-col/responsive-col.directive'
export * from './directives/responsive-col/responsive-col.module'
export * from './directives/responsive-col/responsive-col-viewport.directive'
@@ -43,10 +41,10 @@ export * from './pipes/shared/trust.pipe'
export * from './pipes/unit-conversion/unit-conversion.module'
export * from './pipes/unit-conversion/unit-conversion.pipe'
+export * from './services/copy.service'
export * from './services/download-html.service'
export * from './services/emver.service'
export * from './services/error.service'
-export * from './services/error-toast.service'
export * from './services/http.service'
export * from './services/setup.service'
export * from './services/setup-logs.service'
diff --git a/frontend/projects/shared/src/services/copy.service.ts b/frontend/projects/shared/src/services/copy.service.ts
new file mode 100644
index 000000000..39bf3d733
--- /dev/null
+++ b/frontend/projects/shared/src/services/copy.service.ts
@@ -0,0 +1,16 @@
+import { inject, Injectable } from '@angular/core'
+import { TuiAlertService } from '@taiga-ui/core'
+import { copyToClipboard } from '../util/copy-to-clipboard'
+
+@Injectable({ providedIn: 'root' })
+export class CopyService {
+ private readonly alerts = inject(TuiAlertService)
+
+ async copy(text: string) {
+ const success = await copyToClipboard(text)
+
+ this.alerts
+ .open(success ? 'Copied to clipboard!' : 'Failed to copy to clipboard.')
+ .subscribe()
+ }
+}
diff --git a/frontend/projects/shared/src/services/error-toast.service.ts b/frontend/projects/shared/src/services/error-toast.service.ts
deleted file mode 100644
index 2ac1314f7..000000000
--- a/frontend/projects/shared/src/services/error-toast.service.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { Injectable } from '@angular/core'
-import { IonicSafeString, ToastController } from '@ionic/angular'
-import { HttpError } from '../classes/http-error'
-
-@Injectable({
- providedIn: 'root',
-})
-export class ErrorToastService {
- private toast?: HTMLIonToastElement
-
- constructor(private readonly toastCtrl: ToastController) {}
-
- async present(e: HttpError | string, link?: string): Promise {
- console.error(e)
-
- if (this.toast) return
-
- this.toast = await this.toastCtrl.create({
- header: 'Error',
- message: getErrorMessage(e, link),
- duration: 0,
- position: 'top',
- cssClass: 'error-toast',
- buttons: [
- {
- side: 'end',
- icon: 'close',
- handler: () => {
- this.dismiss()
- },
- },
- ],
- })
- await this.toast.present()
- }
-
- async dismiss(): Promise {
- if (this.toast) {
- await this.toast.dismiss()
- this.toast = undefined
- }
- }
-}
-
-export function getErrorMessage(
- e: HttpError | string,
- link?: string,
-): string | IonicSafeString {
- let message = ''
-
- if (typeof e === 'string') {
- message = e
- } else if (e.code === 0) {
- message =
- 'Request Error. Your browser blocked the request. This is usually caused by a corrupt browser cache or an overly aggressive ad blocker. Please clear your browser cache and/or adjust your ad blocker and try again'
- } else if (!e.message) {
- message = 'Unknown Error'
- link = 'https://docs.start9.com/latest/support/faq'
- } else {
- message = e.message
- }
-
- if (link) {
- return new IonicSafeString(
- `${message}
Get Help`, - ) - } - - return message -} diff --git a/frontend/projects/shared/src/services/error.service.ts b/frontend/projects/shared/src/services/error.service.ts index bb0221ce2..45891e0f4 100644 --- a/frontend/projects/shared/src/services/error.service.ts +++ b/frontend/projects/shared/src/services/error.service.ts @@ -22,7 +22,7 @@ export class ErrorService extends ErrorHandler { } } -function getErrorMessage(e: HttpError | string, link?: string): string { +export function getErrorMessage(e: HttpError | string, link?: string): string { let message = '' if (typeof e === 'string') { diff --git a/frontend/projects/shared/src/services/setup.service.ts b/frontend/projects/shared/src/services/setup.service.ts index f05007869..118cf35fe 100644 --- a/frontend/projects/shared/src/services/setup.service.ts +++ b/frontend/projects/shared/src/services/setup.service.ts @@ -1,4 +1,4 @@ -import { inject, StaticClassProvider, Type } from '@angular/core' +import { inject, StaticClassProvider } from '@angular/core' import { catchError, EMPTY, @@ -12,8 +12,8 @@ import { takeWhile, } from 'rxjs' import { SetupStatus } from '../types/api' -import { ErrorToastService } from './error-toast.service' import { Constructor } from '../types/constructor' +import { ErrorService } from './error.service' export function provideSetupService( api: Constructor[0]>,
@@ -26,12 +26,12 @@ export function provideSetupService(
}
export class SetupService extends Observable {
- private readonly errorToastService = inject(ErrorToastService)
+ private readonly errorService = inject(ErrorService)
private readonly progress$ = interval(500).pipe(
exhaustMap(() =>
from(this.api.getSetupStatus()).pipe(
catchError(e => {
- this.errorToastService.present(e)
+ this.errorService.handleError(e)
return EMPTY
}),
diff --git a/frontend/projects/shared/src/types/workspace-config.ts b/frontend/projects/shared/src/types/workspace-config.ts
index 997ded733..2da7d3f8d 100644
--- a/frontend/projects/shared/src/types/workspace-config.ts
+++ b/frontend/projects/shared/src/types/workspace-config.ts
@@ -4,19 +4,21 @@ export type WorkspaceConfig = {
gitHash: string
useMocks: boolean
enableWidgets: boolean
- // each key corresponds to a project and values adjust settings for that project, eg: ui, install-wizard, setup-wizard, diagnostic-ui
+ // each key corresponds to a project and values adjust settings for that project, eg: ui, install-wizard, setup-wizard
ui: {
api: {
url: string
version: string
}
- marketplace: {
- start9: 'https://registry.start9.com/'
- community: 'https://community-registry.start9.com/'
- }
+ marketplace: MarketplaceConfig
mocks: {
maskAs: 'tor' | 'lan'
skipStartupAlerts: boolean
}
}
}
+
+export interface MarketplaceConfig {
+ start9: 'https://registry.start9.com/'
+ community: 'https://community-registry.start9.com/'
+}
diff --git a/frontend/projects/shared/styles/shared.scss b/frontend/projects/shared/styles/shared.scss
index 725d7d985..4bcedd0f4 100644
--- a/frontend/projects/shared/styles/shared.scss
+++ b/frontend/projects/shared/styles/shared.scss
@@ -160,3 +160,10 @@ a {
color: aqua;
text-decoration: none;
}
+
+.modal-buttons {
+ display: flex;
+ justify-content: flex-end;
+ gap: 16px;
+ margin-top: 24px;
+}
diff --git a/frontend/projects/shared/styles/taiga.scss b/frontend/projects/shared/styles/taiga.scss
new file mode 100644
index 000000000..8bd35d622
--- /dev/null
+++ b/frontend/projects/shared/styles/taiga.scss
@@ -0,0 +1,49 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
+/* stylelint-disable order/order */
+[tuiWrapper][data-appearance='secondary-warning'] {
+ background: var(--tui-warning-bg);
+ color: var(--tui-warning-fill);
+
+ &[data-mode='onDark'] {
+ background: var(--tui-warning-bg-night);
+ color: var(--tui-warning-fill-night);
+
+ @include wrapper-hover {
+ background: var(--tui-warning-bg-night-hover);
+ }
+
+ @include wrapper-active {
+ background: var(--tui-warning-bg-night-hover);
+ }
+ }
+
+ @include wrapper-hover {
+ background: var(--tui-warning-bg-hover);
+ }
+
+ @include wrapper-active {
+ background: var(--tui-warning-bg-hover);
+ }
+}
+
+tui-dialog {
+ transform: translate3d(0, 0, 0);
+}
+
+tui-opt-group[data-label^='⚠️']:before {
+ color: var(--tui-warning-fill);
+}
+
+tui-hint[data-appearance='onDark'] {
+ background: white !important;
+ color: #222 !important;
+}
+
+[tuiLink] {
+ color: var(--tui-link) !important;
+
+ &:hover {
+ color: var(--tui-link-hover) !important;
+ }
+}
diff --git a/frontend/projects/ui/src/app/app.component.html b/frontend/projects/ui/src/app/app.component.html
index 29c7e11a3..dcc65b8c6 100644
--- a/frontend/projects/ui/src/app/app.component.html
+++ b/frontend/projects/ui/src/app/app.component.html
@@ -7,7 +7,7 @@
@@ -84,3 +84,7 @@
+
+
diff --git a/frontend/projects/ui/src/app/app.component.ts b/frontend/projects/ui/src/app/app.component.ts
index af049e130..68e77ffee 100644
--- a/frontend/projects/ui/src/app/app.component.ts
+++ b/frontend/projects/ui/src/app/app.component.ts
@@ -1,5 +1,6 @@
import { Component, inject, OnDestroy } from '@angular/core'
-import { merge } from 'rxjs'
+import { Router } from '@angular/router'
+import { combineLatest, map, merge } from 'rxjs'
import { AuthService } from './services/auth.service'
import { SplitPaneTracker } from './services/split-pane.service'
import { PatchDataService } from './services/patch-data.service'
@@ -15,6 +16,10 @@ import { THEME } from '@start9labs/shared'
import { PatchDB } from 'patch-db-client'
import { DataModel } from './services/patch-db/data-model'
+function hasNavigation(url: string): boolean {
+ return !url.startsWith('/loading') && !url.startsWith('/diagnostic')
+}
+
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
@@ -25,8 +30,13 @@ export class AppComponent implements OnDestroy {
readonly sidebarOpen$ = this.splitPane.sidebarOpen$
readonly widgetDrawer$ = this.clientStorageService.widgetDrawer$
readonly theme$ = inject(THEME)
+ readonly navigation$ = combineLatest([
+ this.authService.isVerified$,
+ this.router.events.pipe(map(() => hasNavigation(this.router.url))),
+ ]).pipe(map(([isVerified, hasNavigation]) => isVerified && hasNavigation))
constructor(
+ private readonly router: Router,
private readonly titleService: Title,
private readonly patchData: PatchDataService,
private readonly patchMonitor: PatchMonitorService,
diff --git a/frontend/projects/ui/src/app/app.module.ts b/frontend/projects/ui/src/app/app.module.ts
index 215c97e83..c3f9c6fb1 100644
--- a/frontend/projects/ui/src/app/app.module.ts
+++ b/frontend/projects/ui/src/app/app.module.ts
@@ -16,6 +16,7 @@ import {
ResponsiveColModule,
SharedPipesModule,
LightThemeModule,
+ LoadingModule,
} from '@start9labs/shared'
import { AppComponent } from './app.component'
@@ -32,7 +33,6 @@ import { ConnectionBarComponentModule } from './app/connection-bar/connection-ba
import { WidgetsPageModule } from 'src/app/apps/ui/pages/widgets/widgets.module'
import { ServiceWorkerModule } from '@angular/service-worker'
import { environment } from '../environments/environment'
-import { LoadingModule } from './common/loading/loading.module'
@NgModule({
declarations: [AppComponent],
diff --git a/frontend/projects/ui/src/app/app/menu/menu.component.html b/frontend/projects/ui/src/app/app/menu/menu.component.html
index bd9a2ce2c..a6305090d 100644
--- a/frontend/projects/ui/src/app/app/menu/menu.component.html
+++ b/frontend/projects/ui/src/app/app/menu/menu.component.html
@@ -54,9 +54,9 @@
-
@@ -83,5 +82,4 @@
diff --git a/frontend/projects/ui/src/app/app/preloader/preloader.component.ts b/frontend/projects/ui/src/app/app/preloader/preloader.component.ts
index df0ae29b7..bb08430b1 100644
--- a/frontend/projects/ui/src/app/app/preloader/preloader.component.ts
+++ b/frontend/projects/ui/src/app/app/preloader/preloader.component.ts
@@ -82,9 +82,11 @@ const ICONS = [
'settings-outline',
'shield-checkmark-outline',
'stop-outline',
+ 'stopwatch-outline',
'storefront-outline',
'swap-vertical',
'terminal-outline',
+ 'trail-sign-outline',
'trash',
'trash-outline',
'warning-outline',
diff --git a/frontend/projects/ui/src/app/app/snek/snake.page.html b/frontend/projects/ui/src/app/app/snek/snake.page.html
index 9e037ce8d..1fc48c47c 100644
--- a/frontend/projects/ui/src/app/app/snek/snake.page.html
+++ b/frontend/projects/ui/src/app/app/snek/snake.page.html
@@ -1,28 +1,8 @@
-Git Hash
@@ -34,14 +34,39 @@Other Versions
Click to view other versions
License
{{ manifest.license }}
@@ -51,7 +76,7 @@Instructions
diff --git a/frontend/projects/marketplace/src/pages/show/additional/additional.component.scss b/frontend/projects/marketplace/src/pages/show/additional/additional.component.scss new file mode 100644 index 000000000..8508da686 --- /dev/null +++ b/frontend/projects/marketplace/src/pages/show/additional/additional.component.scss @@ -0,0 +1,10 @@ +.radio { + display: block; + margin: 1rem 0; +} + +.buttons { + display: flex; + justify-content: flex-end; + gap: 1rem; +} diff --git a/frontend/projects/marketplace/src/pages/show/additional/additional.component.ts b/frontend/projects/marketplace/src/pages/show/additional/additional.component.ts index 778ea6c54..8ac6164ae 100644 --- a/frontend/projects/marketplace/src/pages/show/additional/additional.component.ts +++ b/frontend/projects/marketplace/src/pages/show/additional/additional.component.ts @@ -4,25 +4,30 @@ import { EventEmitter, Input, Output, + TemplateRef, } from '@angular/core' +import { ActivatedRoute } from '@angular/router' import { - AlertController, - ModalController, - ToastController, -} from '@ionic/angular' + TuiAlertService, + TuiDialogContext, + TuiDialogService, +} from '@taiga-ui/core' +import { PolymorpheusComponent } from '@tinkoff/ng-polymorpheus' import { + CopyService, copyToClipboard, displayEmver, Emver, MarkdownComponent, } from '@start9labs/shared' +import { filter } from 'rxjs' import { MarketplacePkg } from '../../../types' import { AbstractMarketplaceService } from '../../../services/marketplace.service' -import { ActivatedRoute } from '@angular/router' @Component({ selector: 'marketplace-additional', templateUrl: 'additional.component.html', + styleUrls: ['additional.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) export class AdditionalComponent { @@ -34,68 +39,46 @@ export class AdditionalComponent { readonly url = this.route.snapshot.queryParamMap.get('url') || undefined + readonly displayEmver = displayEmver + constructor( - private readonly alertCtrl: AlertController, - private readonly modalCtrl: ModalController, + readonly copyService: CopyService, + private readonly alerts: TuiAlertService, + private readonly dialogs: TuiDialogService, private readonly emver: Emver, private readonly marketplaceService: AbstractMarketplaceService, - private readonly toastCtrl: ToastController, private readonly route: ActivatedRoute, ) {} - async copy(address: string): Promise+ Enter the password that was used to encrypt this drive. +
++ Choose a password for your server. + Make it good. Write it down. +
+
-
-
-
-
-
-- Enter the password that was used to encrypt this drive. -
-- Choose a password for your server. - Make it good. Write it down. -
-All data stored on this drive will be permanently deleted.
', + yes: 'Continue', + no: 'Cancel', + }, + }), + ), + ) + .pipe(filter(Boolean)) + .subscribe(() => { + // for backup recoveries + if (this.stateService.recoveryPassword) { + this.setupEmbassy( + drive.logicalname, + this.stateService.recoveryPassword, + ) + } else { + // for migrations and fresh setups + this.presentModalPassword(drive.logicalname) + } }) - await alert.present() - } else { - // for backup recoveries - if (this.stateService.recoveryPassword) { - this.setupEmbassy(drive.logicalname, this.stateService.recoveryPassword) - } else { - // for migrations and fresh setups - this.presentModalPassword(drive.logicalname) - } - } } - private async presentModalPassword(logicalname: string): PromiseGet Help`, - ) - } - - return message -} diff --git a/frontend/projects/shared/src/services/error.service.ts b/frontend/projects/shared/src/services/error.service.ts index bb0221ce2..45891e0f4 100644 --- a/frontend/projects/shared/src/services/error.service.ts +++ b/frontend/projects/shared/src/services/error.service.ts @@ -22,7 +22,7 @@ export class ErrorService extends ErrorHandler { } } -function getErrorMessage(e: HttpError | string, link?: string): string { +export function getErrorMessage(e: HttpError | string, link?: string): string { let message = '' if (typeof e === 'string') { diff --git a/frontend/projects/shared/src/services/setup.service.ts b/frontend/projects/shared/src/services/setup.service.ts index f05007869..118cf35fe 100644 --- a/frontend/projects/shared/src/services/setup.service.ts +++ b/frontend/projects/shared/src/services/setup.service.ts @@ -1,4 +1,4 @@ -import { inject, StaticClassProvider, Type } from '@angular/core' +import { inject, StaticClassProvider } from '@angular/core' import { catchError, EMPTY, @@ -12,8 +12,8 @@ import { takeWhile, } from 'rxjs' import { SetupStatus } from '../types/api' -import { ErrorToastService } from './error-toast.service' import { Constructor } from '../types/constructor' +import { ErrorService } from './error.service' export function provideSetupService( api: Constructor
-
@@ -83,5 +82,4 @@
a
a
a
-a
-
-
-
+
+
+
diff --git a/frontend/projects/ui/src/app/app/snek/snake.page.scss b/frontend/projects/ui/src/app/app/snek/snake.page.scss
index c07d3a2b7..50605f1dc 100644
--- a/frontend/projects/ui/src/app/app/snek/snake.page.scss
+++ b/frontend/projects/ui/src/app/app/snek/snake.page.scss
@@ -1,6 +1,14 @@
.canvas-center {
+ min-height: 50vh;
padding-top: 20px;
display: flex;
align-items: center;
justify-content: center;
-}
\ No newline at end of file
+}
+
+.footer {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding-top: 32px;
+}
diff --git a/frontend/projects/ui/src/app/app/snek/snake.page.ts b/frontend/projects/ui/src/app/app/snek/snake.page.ts
index 6c671201d..eeadb9df0 100644
--- a/frontend/projects/ui/src/app/app/snek/snake.page.ts
+++ b/frontend/projects/ui/src/app/app/snek/snake.page.ts
@@ -1,15 +1,22 @@
-import { Component, HostListener, Input } from '@angular/core'
-import { ModalController } from '@ionic/angular'
-import { pauseFor } from '../../../../../shared/src/public-api'
+import {
+ AfterViewInit,
+ Component,
+ HostListener,
+ Inject,
+ OnDestroy,
+} from '@angular/core'
+import { pauseFor } from '@start9labs/shared'
+import { POLYMORPHEUS_CONTEXT } from '@tinkoff/ng-polymorpheus'
+import { TuiDialogContext } from '@taiga-ui/core'
+import { DOCUMENT } from '@angular/common'
@Component({
selector: 'snake',
templateUrl: './snake.page.html',
styleUrls: ['./snake.page.scss'],
})
-export class SnakePage {
- @Input()
- highScore = 0
+export class SnakePage implements AfterViewInit, OnDestroy {
+ highScore = this.dialog.data.highScore
score = 0
@@ -30,11 +37,16 @@ export class SnakePage {
private bitcoin: { x: number; y: number } = { x: NaN, y: NaN }
private moveQueue: String[] = []
+ private destroyed = false
- constructor(private readonly modalCtrl: ModalController) {}
+ constructor(
+ @Inject(DOCUMENT) private readonly document: Document,
+ @Inject(POLYMORPHEUS_CONTEXT)
+ private readonly dialog: TuiDialogContextStartOS - Diagnostic Mode
+ +StartOS launch error:
+
+ {{ error.problem }}
+ {{ error.details }}
+
+
+ View Logs
+
+ Possible solutions:
+{{ error.solution }}
Server is restarting
++ Wait for the server to restart, then refresh this page. +
+ +This action will tear down all service containers and rebuild them from scratch. No data will be deleted.
A system rebuild can be useful if your system gets into a bad state, and it should only be performed if you are experiencing general performance or reliability issues.
It may take up to an hour to complete. During this time, you will lose all connectivity to your Start9 server.
', - buttons: [ - { - text: 'Cancel', - role: 'cancel', + this.dialogs + .open(TUI_PROMPT, { + label: 'Warning', + size: 's', + data: { + no: 'Cancel', + yes: 'Rebuild', + content: + 'This action will tear down all service containers and rebuild them from scratch. No data will be deleted.
A system rebuild can be useful if your system gets into a bad state, and it should only be performed if you are experiencing general performance or reliability issues.
It may take up to an hour to complete. During this time, you will lose all connectivity to your Start9 server.
', }, - { - text: 'Rebuild', - handler: () => { - try { - this.systemRebuild() - } catch (e) { - console.error(e) - } - }, - }, - ], - cssClass: 'alert-warning-message', - }) - await alert.present() + }) + .pipe(filter(Boolean)) + .subscribe(() => { + try { + this.systemRebuild() + } catch (e) { + console.error(e) + } + }) } async presentAlertRepairDisk() { - const alert = await this.alertCtrl.create({ - header: 'Warning', - message: - 'This action should only be executed if directed by a Start9 support specialist.
If anything happens to the device during the reboot, such as losing power or unplugging the drive, the filesystem will be in an unrecoverable state. Please proceed with caution.
', - buttons: [ - { - text: 'Cancel', - role: 'cancel', + this.dialogs + .open(TUI_PROMPT, { + label: 'Warning', + size: 's', + data: { + no: 'Cancel', + yes: 'Repair', + content: + 'This action should only be executed if directed by a Start9 support specialist.
If anything happens to the device during the reboot, such as losing power or unplugging the drive, the filesystem will be in an unrecoverable state. Please proceed with caution.
', }, - { - text: 'Repair', - handler: () => { - try { - this.repairDisk() - } catch (e) { - console.error(e) - } - }, - }, - ], - cssClass: 'alert-error-message', - }) - await alert.present() + }) + .pipe(filter(Boolean)) + .subscribe(() => { + try { + this.repairDisk() + } catch (e) { + console.error(e) + } + }) } refreshPage(): void { - window.location.reload() + this.window.location.reload() } private async systemRebuild(): PromiseSystem data
+
+
{{ pkg.key }}
+
+
System data
-{{ pkg.key }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-{{ options.title }}
--
{{ options.message }}
--
-
{{ options.message }}
+{{ options.warning }}
+ + +
+
+
+
-
+ ![]()
+ {{ pkg.title }}
+
+ {{ pkg.title }}
-No services installed!
-No services installed!
+
+
+
+
-
+ {{ option.title }}
+
+ Version {{ option.version }}
+ Backup made: {{ option.timestamp | date : 'medium' }}
+
+ Ready to restore
+
+
+ Unavailable. {{ option.title }} is already installed.
+
+
+ Unavailable. Backup was made on a newer version of StartOS.
+
+ {{ option.title }}
-Version {{ option.version }}
-Backup made: {{ option.timestamp | date : 'medium' }}
-
-
-
-
{{ displayInfo.name }}
-{{ displayInfo.description }}
-{{ displayInfo.path }}
-{{ displayInfo.name }}
+{{ displayInfo.description }}
+{{ displayInfo.path }}
+
- Go to Targets
-
- No saved targets
-
+
+
+No saved targets
+ +- Scheduling automatic backups is an excellent way to ensure your - Embassy data is safely backed up. Your Embassy will issue a - notification whenever one of your scheduled backups succeeds or fails. - - View instructions - -
-
+
+ Scheduling automatic backups is an excellent way to ensure your Embassy
+ data is safely backed up. Your Embassy will issue a notification whenever
+ one of your scheduled backups succeeds or fails.
+ View instructions
+
+
+
-
-
-
-
-Job Name
-Target
-Packages
-
-
-
-
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/backups/pages/backup-jobs/job-options/job-options.component.scss b/frontend/projects/ui/src/app/apps/ui/pages/backups/pages/backup-jobs/job-options/job-options.component.scss
deleted file mode 100644
index dbb2f1b60..000000000
--- a/frontend/projects/ui/src/app/apps/ui/pages/backups/pages/backup-jobs/job-options/job-options.component.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-h2 {
- font-weight: bold;
-}
-
-.input-label {
- margin-bottom: 6px;
- font-size: medium;
- font-weight: bold;
-}
\ No newline at end of file
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/backups/pages/backup-jobs/job-options/job-options.component.ts b/frontend/projects/ui/src/app/apps/ui/pages/backups/pages/backup-jobs/job-options/job-options.component.ts
deleted file mode 100644
index fef1920fb..000000000
--- a/frontend/projects/ui/src/app/apps/ui/pages/backups/pages/backup-jobs/job-options/job-options.component.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import { Component, Input } from '@angular/core'
-import { ModalController } from '@ionic/angular'
-import { BackupJob, BackupTarget, RR } from 'src/app/services/api/api.types'
-import { BackupSelectPage } from '../../../modals/backup-select/backup-select.page'
-import { TargetSelectPage } from '../../../modals/target-select/target-select.page'
-
-@Component({
- selector: 'job-options',
- templateUrl: './job-options.component.html',
- styleUrls: ['./job-options.component.scss'],
-})
-export class JobOptionsComponent {
- @Input() job!: BackupJobBuilder
-
- constructor(private readonly modalCtrl: ModalController) {}
-
- async presentModalTarget() {
- const modal = await this.modalCtrl.create({
- presentingElement: await this.modalCtrl.getTop(),
- component: TargetSelectPage,
- componentProps: { type: 'create' },
- })
-
- modal.onWillDismissSchedule
-
-
Also Execute Now
-- Backup targets are physical or virtual locations for storing encrypted - backups. They can be physical drives plugged into your server, shared - folders on your Local Area Network (LAN), or third party clouds such - as Dropbox or Google Drive. - - View instructions - -
-
+
+ Backup targets are physical or virtual locations for storing encrypted
+ backups. They can be physical drives plugged into your server, shared
+ folders on your Local Area Network (LAN), or third party clouds such as
+ Dropbox or Google Drive.
+ View instructions
+
+
+ {{ details.name }}
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/marketplace/marketplace-list/marketplace-list.page.ts b/frontend/projects/ui/src/app/apps/ui/pages/marketplace/marketplace-list/marketplace-list.page.ts index fe9281485..813e9109b 100644 --- a/frontend/projects/ui/src/app/apps/ui/pages/marketplace/marketplace-list/marketplace-list.page.ts +++ b/frontend/projects/ui/src/app/apps/ui/pages/marketplace/marketplace-list/marketplace-list.page.ts @@ -41,7 +41,7 @@ export class MarketplaceListPage { if (url === start9) { color = 'success' description = - 'Services from this registry are packaged and maintained by the Start9 team. If you experience an issue or have a question related to a service from this registry, one of our dedicated support staff will be happy to assist you.' + 'Services from this registry are packaged and maintained by the Start9 team. If you experience an issue or have questions related to a service from this registry, one of our dedicated support staff will be happy to assist you.' } else if (url === community) { color = 'tertiary' description = @@ -75,7 +75,7 @@ export class MarketplaceListPage { @Inject(AbstractMarketplaceService) private readonly marketplaceService: MarketplaceService, private readonly dialogs: TuiDialogService, - private readonly config: ConfigService, + readonly config: ConfigService, private readonly route: ActivatedRoute, ) {} diff --git a/frontend/projects/ui/src/app/apps/ui/pages/marketplace/marketplace-list/marketplace-settings/marketplace-settings.module.ts b/frontend/projects/ui/src/app/apps/ui/pages/marketplace/marketplace-list/marketplace-settings/marketplace-settings.module.ts index 9eaebbd34..0304046c2 100644 --- a/frontend/projects/ui/src/app/apps/ui/pages/marketplace/marketplace-list/marketplace-settings/marketplace-settings.module.ts +++ b/frontend/projects/ui/src/app/apps/ui/pages/marketplace/marketplace-list/marketplace-settings/marketplace-settings.module.ts @@ -7,9 +7,9 @@ import { TuiHostedDropdownModule, TuiSvgModule, } from '@taiga-ui/core' -import { StoreIconComponentModule } from 'src/app/common/store-icon/store-icon.component.module' import { FormPageModule } from 'src/app/apps/ui/modals/form/form.module' import { MarketplaceSettingsPage } from './marketplace-settings.page' +import { StoreIconComponentModule } from '@start9labs/marketplace' @NgModule({ imports: [ diff --git a/frontend/projects/ui/src/app/apps/ui/pages/marketplace/marketplace-list/marketplace-settings/marketplace-settings.page.html b/frontend/projects/ui/src/app/apps/ui/pages/marketplace/marketplace-list/marketplace-settings/marketplace-settings.page.html index 8d0da271a..77dde15e7 100644 --- a/frontend/projects/ui/src/app/apps/ui/pages/marketplace/marketplace-list/marketplace-settings/marketplace-settings.page.html +++ b/frontend/projects/ui/src/app/apps/ui/pages/marketplace/marketplace-list/marketplace-settings/marketplace-settings.page.html @@ -8,7 +8,10 @@ (click)="s.selected ? '' : connect(s.url)" >{{ s.name }}
@@ -42,7 +45,11 @@ >{{ a.name }}
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/marketplace/marketplace-list/marketplace-settings/marketplace-settings.page.ts b/frontend/projects/ui/src/app/apps/ui/pages/marketplace/marketplace-list/marketplace-settings/marketplace-settings.page.ts index 09d30780e..a5fee0e90 100644 --- a/frontend/projects/ui/src/app/apps/ui/pages/marketplace/marketplace-list/marketplace-settings/marketplace-settings.page.ts +++ b/frontend/projects/ui/src/app/apps/ui/pages/marketplace/marketplace-list/marketplace-settings/marketplace-settings.page.ts @@ -1,5 +1,10 @@ import { ChangeDetectionStrategy, Component, Inject } from '@angular/core' -import { ErrorService, sameUrl, toUrl } from '@start9labs/shared' +import { + ErrorService, + LoadingService, + sameUrl, + toUrl, +} from '@start9labs/shared' import { AbstractMarketplaceService } from '@start9labs/marketplace' import { ValueSpecObject } from '@start9labs/start-sdk/lib/config/configTypes' import { TuiDialogService } from '@taiga-ui/core' @@ -11,7 +16,7 @@ import { DataModel, UIStore } from 'src/app/services/patch-db/data-model' import { MarketplaceService } from 'src/app/services/marketplace.service' import { FormDialogService } from 'src/app/services/form-dialog.service' import { FormPage } from 'src/app/apps/ui/modals/form/form.page' -import { LoadingService } from 'src/app/common/loading/loading.service' +import { ConfigService } from 'src/app/services/config.service' @Component({ selector: 'marketplace-settings', @@ -47,6 +52,7 @@ export class MarketplaceSettingsPage { private readonly marketplaceService: MarketplaceService, private readonly patch: PatchDB- '
const localPkgs = await getAllPackages(this.patch)
const bullets = Object.keys(breakages).map(id => {
const title = localPkgs[id].manifest.title
return `
- ${title} ` }) - message = `${message}${bullets.join('')}
{{ actionRes.message }}
-{{ actionRes.message }}
- -
- ,
+ readonly copyService: CopyService,
) {}
- async copy(address: string) {
- let message = ''
- await copyToClipboard(address || '').then(success => {
- message = success
- ? 'Copied to clipboard!'
- : 'Failed to copy to clipboard.'
- })
-
- const toast = await this.toastCtrl.create({
- header: message,
- position: 'bottom',
- duration: 1000,
- })
- await toast.present()
- }
-
- async dismiss() {
- return this.modalCtrl.dismiss()
+ get actionRes(): ActionResponse {
+ return this.context.data
}
}
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/services/app-actions/app-actions.page.ts b/frontend/projects/ui/src/app/apps/ui/pages/services/app-actions/app-actions.page.ts
index e8eaa1010..42e354d06 100644
--- a/frontend/projects/ui/src/app/apps/ui/pages/services/app-actions/app-actions.page.ts
+++ b/frontend/projects/ui/src/app/apps/ui/pages/services/app-actions/app-actions.page.ts
@@ -6,27 +6,30 @@ import {
PipeTransform,
} from '@angular/core'
import { ActivatedRoute } from '@angular/router'
-import { ApiService } from 'src/app/services/api/embassy-api.service'
-import { AlertController, ModalController, NavController } from '@ionic/angular'
+import { NavController } from '@ionic/angular'
+import {
+ isEmptyObject,
+ getPkgId,
+ WithId,
+ ErrorService,
+ LoadingService,
+} from '@start9labs/shared'
+import { TuiDialogService } from '@taiga-ui/core'
import { PatchDB } from 'patch-db-client'
+import { filter, switchMap, timer } from 'rxjs'
+import { ApiService } from 'src/app/services/api/embassy-api.service'
import {
Action,
DataModel,
PackageDataEntry,
PackageState,
} from 'src/app/services/patch-db/data-model'
-import {
- isEmptyObject,
- getPkgId,
- WithId,
- ErrorService,
-} from '@start9labs/shared'
import { ActionSuccessPage } from './action-success/action-success.page'
import { hasCurrentDeps } from 'src/app/util/has-deps'
-import { filter } from 'rxjs'
import { FormDialogService } from 'src/app/services/form-dialog.service'
import { FormPage } from 'src/app/apps/ui/modals/form/form.page'
-import { LoadingService } from 'src/app/common/loading/loading.service'
+import { PolymorpheusComponent } from '@tinkoff/ng-polymorpheus'
+import { TUI_PROMPT } from '@taiga-ui/kit'
@Component({
selector: 'app-actions',
@@ -43,8 +46,7 @@ export class AppActionsPage {
constructor(
private readonly route: ActivatedRoute,
private readonly embassyApi: ApiService,
- private readonly modalCtrl: ModalController,
- private readonly alertCtrl: AlertController,
+ private readonly dialogs: TuiDialogService,
private readonly errorService: ErrorService,
private readonly loader: LoadingService,
private readonly navCtrl: NavController,
@@ -54,13 +56,12 @@ export class AppActionsPage {
async handleAction(action: WithId) {
if (action.disabled) {
- const alert = await this.alertCtrl.create({
- header: 'Forbidden',
- message: action.disabled,
- buttons: ['OK'],
- cssClass: 'alert-error-message enter-click',
- })
- await alert.present()
+ this.dialogs
+ .open(action.disabled, {
+ label: 'Forbidden',
+ size: 's',
+ })
+ .subscribe()
} else {
if (action['input-spec'] && !isEmptyObject(action['input-spec'])) {
this.formDialog.open(FormPage, {
@@ -77,24 +78,20 @@ export class AppActionsPage {
},
})
} else {
- const alert = await this.alertCtrl.create({
- header: 'Confirm',
- message: `Are you sure you want to execute action "${action.name}"? ${
- action.warning || ''
- }`,
- buttons: [
- {
- text: 'Cancel',
- role: 'cancel',
+ this.dialogs
+ .open(TUI_PROMPT, {
+ label: 'Confirm',
+ size: 's',
+ data: {
+ content: `Are you sure you want to execute action "${
+ action.name
+ }"? ${action.warning || ''}`,
+ yes: 'Execute',
+ no: 'Cancel',
},
- {
- text: 'Execute',
- handler: async () => this.executeAction(action.id),
- cssClass: 'enter-click',
- },
- ],
- })
- await alert.present()
+ })
+ .pipe(filter(Boolean))
+ .subscribe(() => this.executeAction(action.id))
}
}
}
@@ -102,34 +99,26 @@ export class AppActionsPage {
async tryUninstall(pkg: PackageDataEntry): Promise {
const { title, alerts, id } = pkg.manifest
- let message =
+ let content =
alerts.uninstall ||
`Uninstalling ${title} will permanently delete its data`
if (await hasCurrentDeps(this.patch, id)) {
- message = `${message}. Services that depend on ${title} will no longer work properly and may crash`
+ content = `${content}. Services that depend on ${title} will no longer work properly and may crash`
}
- const alert = await this.alertCtrl.create({
- header: 'Warning',
- message,
- buttons: [
- {
- text: 'Cancel',
- role: 'cancel',
+ this.dialogs
+ .open(TUI_PROMPT, {
+ label: 'Warning',
+ size: 's',
+ data: {
+ content,
+ yes: 'Uninstall',
+ no: 'Cancel',
},
- {
- text: 'Uninstall',
- handler: () => {
- this.uninstall()
- },
- cssClass: 'enter-click',
- },
- ],
- cssClass: 'alert-warning-message',
- })
-
- await alert.present()
+ })
+ .pipe(filter(Boolean))
+ .subscribe(() => this.uninstall())
}
private async uninstall() {
@@ -155,20 +144,23 @@ export class AppActionsPage {
const loader = this.loader.open('Executing action...').subscribe()
try {
- const res = await this.embassyApi.executePackageAction({
+ const data = await this.embassyApi.executePackageAction({
id: this.pkgId,
'action-id': actionId,
input,
})
- const successModal = await this.modalCtrl.create({
- component: ActionSuccessPage,
- componentProps: {
- actionRes: res,
- },
- })
+ timer(500)
+ .pipe(
+ switchMap(() =>
+ this.dialogs.open(new PolymorpheusComponent(ActionSuccessPage), {
+ label: 'Execution Complete',
+ data,
+ }),
+ ),
+ )
+ .subscribe()
- setTimeout(() => successModal.present(), 500)
return true
} catch (e: any) {
this.errorService.handleError(e)
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/services/app-credentials/app-credentials.page.html b/frontend/projects/ui/src/app/apps/ui/pages/services/app-credentials/app-credentials.page.html
index 4c9a8b41f..f2f9ecb18 100644
--- a/frontend/projects/ui/src/app/apps/ui/pages/services/app-credentials/app-credentials.page.html
+++ b/frontend/projects/ui/src/app/apps/ui/pages/services/app-credentials/app-credentials.page.html
@@ -43,7 +43,7 @@
size="small"
>
-
+
{
- const success = await copyToClipboard(text)
- const message = success
- ? 'Copied. Clearing clipboard in 20 seconds'
- : 'Failed to copy.'
-
- const toast = await this.toastCtrl.create({
- header: message,
- position: 'bottom',
- duration: 2000,
- })
- await toast.present()
- }
-
mask(value: string) {
return mask(value, 64)
}
@@ -64,7 +45,7 @@ export class AppCredentialsPage {
id: this.pkgId,
})
} catch (e: any) {
- this.errToast.present(e)
+ this.errorService.handleError(e)
} finally {
this.loading = false
}
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/services/app-interfaces/app-interfaces-item.component.html b/frontend/projects/ui/src/app/apps/ui/pages/services/app-interfaces/app-interfaces-item.component.html
index 0e5942b6a..c04293e09 100644
--- a/frontend/projects/ui/src/app/apps/ui/pages/services/app-interfaces/app-interfaces-item.component.html
+++ b/frontend/projects/ui/src/app/apps/ui/pages/services/app-interfaces/app-interfaces-item.component.html
@@ -26,7 +26,7 @@
name="qr-code-outline"
>
-
+
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/services/app-interfaces/app-interfaces.page.ts b/frontend/projects/ui/src/app/apps/ui/pages/services/app-interfaces/app-interfaces.page.ts
index 86650d044..52537ac0e 100644
--- a/frontend/projects/ui/src/app/apps/ui/pages/services/app-interfaces/app-interfaces.page.ts
+++ b/frontend/projects/ui/src/app/apps/ui/pages/services/app-interfaces/app-interfaces.page.ts
@@ -1,11 +1,12 @@
import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
import { ActivatedRoute } from '@angular/router'
-import { ModalController, ToastController } from '@ionic/angular'
-import { getPkgId, copyToClipboard } from '@start9labs/shared'
+import { getPkgId, CopyService } from '@start9labs/shared'
import { AddressInfo, DataModel } from 'src/app/services/patch-db/data-model'
import { PatchDB } from 'patch-db-client'
import { map } from 'rxjs'
import { QRComponent } from './qr.component'
+import { TuiDialogService } from '@taiga-ui/core'
+import { PolymorpheusComponent } from '@tinkoff/ng-polymorpheus'
@Component({
selector: 'app-interfaces',
@@ -39,38 +40,20 @@ export class AppInterfacesItemComponent {
addressInfo!: AddressInfo
constructor(
- private readonly toastCtrl: ToastController,
- private readonly modalCtrl: ModalController,
+ private readonly dialogs: TuiDialogService,
+ readonly copyService: CopyService,
) {}
launch(url: string): void {
window.open(url, '_blank', 'noreferrer')
}
- async showQR(text: string): Promise {
- const modal = await this.modalCtrl.create({
- component: QRComponent,
- componentProps: {
- text,
- },
- cssClass: 'qr-modal',
- })
- await modal.present()
- }
-
- async copy(address: string): Promise {
- let message = ''
- await copyToClipboard(address || '').then(success => {
- message = success
- ? 'Copied to clipboard!'
- : 'Failed to copy to clipboard.'
- })
-
- const toast = await this.toastCtrl.create({
- header: message,
- position: 'bottom',
- duration: 1000,
- })
- await toast.present()
+ showQR(data: string) {
+ this.dialogs
+ .open(new PolymorpheusComponent(QRComponent), {
+ size: 'auto',
+ data,
+ })
+ .subscribe()
}
}
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/services/app-interfaces/qr.component.ts b/frontend/projects/ui/src/app/apps/ui/pages/services/app-interfaces/qr.component.ts
index 8f34aa01d..a87e43863 100644
--- a/frontend/projects/ui/src/app/apps/ui/pages/services/app-interfaces/qr.component.ts
+++ b/frontend/projects/ui/src/app/apps/ui/pages/services/app-interfaces/qr.component.ts
@@ -1,9 +1,14 @@
-import { Component, Input } from '@angular/core'
+import { Component, Inject } from '@angular/core'
+import { POLYMORPHEUS_CONTEXT } from '@tinkoff/ng-polymorpheus'
+import { TuiDialogContext } from '@taiga-ui/core'
@Component({
selector: 'qr',
- template: ',
+ ) {}
}
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/services/app-show/components/app-show-additional/app-show-additional.component.html b/frontend/projects/ui/src/app/apps/ui/pages/services/app-show/components/app-show-additional/app-show-additional.component.html
index 4fc0eea32..e337dd202 100644
--- a/frontend/projects/ui/src/app/apps/ui/pages/services/app-show/components/app-show-additional/app-show-additional.component.html
+++ b/frontend/projects/ui/src/app/apps/ui/pages/services/app-show/components/app-show-additional/app-show-additional.component.html
@@ -13,7 +13,7 @@
*ngIf="manifest['git-hash'] as gitHash; else noHash"
button
detail="false"
- (click)="copy(gitHash)"
+ (click)="copyService.copy(gitHash)"
>
{
- const success = await copyToClipboard(address)
- const message = success
- ? 'Copied to clipboard!'
- : 'Failed to copy to clipboard.'
-
- const toast = await this.toastCtrl.create({
- header: message,
- position: 'bottom',
- duration: 1000,
- })
- await toast.present()
- }
-
- async presentModalLicense() {
+ presentModalLicense() {
const { id, version } = this.pkg.manifest
- const modal = await this.modalCtrl.create({
- componentProps: {
- title: 'License',
- content: from(
- this.api.getStatic(
- `/public/package-data/${id}/${version}/LICENSE.md`,
+ this.dialogs
+ .open(new PolymorpheusComponent(MarkdownComponent), {
+ label: 'License',
+ size: 'l',
+ data: {
+ content: from(
+ this.api.getStatic(
+ `/public/package-data/${id}/${version}/LICENSE.md`,
+ ),
),
- ),
- },
- component: MarkdownComponent,
- })
-
- await modal.present()
+ },
+ })
+ .subscribe()
}
}
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/services/app-show/components/app-show-status/app-show-status.component.ts b/frontend/projects/ui/src/app/apps/ui/pages/services/app-show/components/app-show-status/app-show-status.component.ts
index c3ad71beb..91eb1f7f0 100644
--- a/frontend/projects/ui/src/app/apps/ui/pages/services/app-show/components/app-show-status/app-show-status.component.ts
+++ b/frontend/projects/ui/src/app/apps/ui/pages/services/app-show/components/app-show-status/app-show-status.component.ts
@@ -4,6 +4,11 @@ import {
Input,
ViewChild,
} from '@angular/core'
+import { ErrorService, LoadingService } from '@start9labs/shared'
+import { TuiDialogService } from '@taiga-ui/core'
+import { TUI_PROMPT } from '@taiga-ui/kit'
+import { PatchDB } from 'patch-db-client'
+import { filter } from 'rxjs'
import {
PackageStatus,
PrimaryRendering,
@@ -16,8 +21,6 @@ import {
PackageDataEntry,
PackageState,
} from 'src/app/services/patch-db/data-model'
-import { ErrorToastService } from '@start9labs/shared'
-import { AlertController, LoadingController } from '@ionic/angular'
import { ApiService } from 'src/app/services/api/embassy-api.service'
import { FormDialogService } from 'src/app/services/form-dialog.service'
import {
@@ -27,7 +30,6 @@ import {
import { DependencyInfo } from '../../pipes/to-dependencies.pipe'
import { hasCurrentDeps } from 'src/app/util/has-deps'
import { ConnectionService } from 'src/app/services/connection.service'
-import { PatchDB } from 'patch-db-client'
import { LaunchMenuComponent } from '../../../launch-menu/launch-menu.component'
@Component({
@@ -51,9 +53,9 @@ export class AppShowStatusComponent {
readonly connected$ = this.connectionService.connected$
constructor(
- private readonly alertCtrl: AlertController,
- private readonly errToast: ErrorToastService,
- private readonly loadingCtrl: LoadingController,
+ private readonly dialogs: TuiDialogService,
+ private readonly errorService: ErrorService,
+ private readonly loader: LoadingService,
private readonly embassyApi: ApiService,
private readonly formDialog: FormDialogService,
private readonly connectionService: ConnectionService,
@@ -122,33 +124,25 @@ export class AppShowStatusComponent {
async tryStop(): Promise {
const { title, alerts, id } = this.pkg.manifest
- let message = alerts.stop || ''
+ let content = alerts.stop || ''
if (await hasCurrentDeps(this.patch, id)) {
const depMessage = `Services that depend on ${title} will no longer work properly and may crash`
- message = message ? `${message}.\n\n${depMessage}` : depMessage
+ content = content ? `${content}.\n\n${depMessage}` : depMessage
}
- if (message) {
- const alert = await this.alertCtrl.create({
- header: 'Warning',
- message,
- buttons: [
- {
- text: 'Cancel',
- role: 'cancel',
+ if (content) {
+ this.dialogs
+ .open(TUI_PROMPT, {
+ label: 'Warning',
+ size: 's',
+ data: {
+ content,
+ yes: 'Stop',
+ no: 'Cancel',
},
- {
- text: 'Stop',
- handler: () => {
- this.stop()
- },
- cssClass: 'enter-click',
- },
- ],
- cssClass: 'alert-warning-message',
- })
-
- await alert.present()
+ })
+ .pipe(filter(Boolean))
+ .subscribe(() => this.stop())
} else {
this.stop()
}
@@ -158,99 +152,71 @@ export class AppShowStatusComponent {
const { id, title } = this.pkg.manifest
if (await hasCurrentDeps(this.patch, id)) {
- const alert = await this.alertCtrl.create({
- header: 'Warning',
- message: `Services that depend on ${title} may temporarily experiences issues`,
- buttons: [
- {
- text: 'Cancel',
- role: 'cancel',
+ this.dialogs
+ .open(TUI_PROMPT, {
+ label: 'Warning',
+ size: 's',
+ data: {
+ content: `Services that depend on ${title} may temporarily experiences issues`,
+ yes: 'Restart',
+ no: 'Cancel',
},
- {
- text: 'Restart',
- handler: () => {
- this.restart()
- },
- cssClass: 'enter-click',
- },
- ],
- cssClass: 'alert-warning-message',
- })
-
- await alert.present()
+ })
+ .pipe(filter(Boolean))
+ .subscribe(() => this.restart())
} else {
this.restart()
}
}
private async start(): Promise {
- const loader = await this.loadingCtrl.create({
- message: `Starting...`,
- })
- await loader.present()
+ const loader = this.loader.open(`Starting...`).subscribe()
try {
await this.embassyApi.startPackage({ id: this.id })
} catch (e: any) {
- this.errToast.present(e)
+ this.errorService.handleError(e)
} finally {
- loader.dismiss()
+ loader.unsubscribe()
}
}
private async stop(): Promise {
- const loader = await this.loadingCtrl.create({
- message: 'Stopping...',
- })
- await loader.present()
+ const loader = this.loader.open(`Stopping...`).subscribe()
try {
await this.embassyApi.stopPackage({ id: this.id })
} catch (e: any) {
- this.errToast.present(e)
+ this.errorService.handleError(e)
} finally {
- loader.dismiss()
+ loader.unsubscribe()
}
}
private async restart(): Promise {
- const loader = await this.loadingCtrl.create({
- message: `Restarting...`,
- })
- await loader.present()
+ const loader = this.loader.open(`Restarting...`).subscribe()
try {
await this.embassyApi.restartPackage({ id: this.id })
} catch (e: any) {
- this.errToast.present(e)
+ this.errorService.handleError(e)
} finally {
- loader.dismiss()
+ loader.unsubscribe()
}
}
- private async presentAlertStart(message: string): Promise {
+ private async presentAlertStart(content: string): Promise {
return new Promise(async resolve => {
- const alert = await this.alertCtrl.create({
- header: 'Alert',
- message,
- buttons: [
- {
- text: 'Cancel',
- role: 'cancel',
- handler: () => {
- resolve(false)
- },
+ this.dialogs
+ .open(TUI_PROMPT, {
+ label: 'Warning',
+ size: 's',
+ data: {
+ content,
+ yes: 'Continue',
+ no: 'Cancel',
},
- {
- text: 'Continue',
- handler: () => {
- resolve(true)
- },
- cssClass: 'enter-click',
- },
- ],
- })
-
- await alert.present()
+ })
+ .subscribe(response => resolve(response))
})
}
}
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/services/app-show/modals/app-config/app-config.page.ts b/frontend/projects/ui/src/app/apps/ui/pages/services/app-show/modals/app-config/app-config.page.ts
index f606d067e..14596b7b8 100644
--- a/frontend/projects/ui/src/app/apps/ui/pages/services/app-show/modals/app-config/app-config.page.ts
+++ b/frontend/projects/ui/src/app/apps/ui/pages/services/app-show/modals/app-config/app-config.page.ts
@@ -1,16 +1,15 @@
import { Component, Inject } from '@angular/core'
import { endWith, firstValueFrom, Subscription } from 'rxjs'
-import { tuiIsString } from '@taiga-ui/cdk'
-import {
- TuiAlertService,
- TuiDialogContext,
- TuiDialogService,
- TuiNotification,
-} from '@taiga-ui/core'
+import { TuiDialogContext, TuiDialogService } from '@taiga-ui/core'
import { TUI_PROMPT, TuiPromptData } from '@taiga-ui/kit'
import { POLYMORPHEUS_CONTEXT } from '@tinkoff/ng-polymorpheus'
import { ApiService } from 'src/app/services/api/embassy-api.service'
-import { getErrorMessage, isEmptyObject } from '@start9labs/shared'
+import {
+ ErrorService,
+ getErrorMessage,
+ isEmptyObject,
+ LoadingService,
+} from '@start9labs/shared'
import { InputSpec } from '@start9labs/start-sdk/lib/config/configTypes'
import {
DataModel,
@@ -22,7 +21,6 @@ import { hasCurrentDeps } from 'src/app/util/has-deps'
import { getAllPackages, getPackage } from 'src/app/util/get-package-data'
import { Breakages } from 'src/app/services/api/api.types'
import { InvalidService } from 'src/app/common/form/invalid.service'
-import { LoadingService } from 'src/app/common/loading/loading.service'
import { DependentInfo } from 'src/app/types/dependent-info'
import { ActionButton } from 'src/app/apps/ui/modals/form/form.page'
@@ -63,7 +61,7 @@ export class AppConfigPage {
@Inject(POLYMORPHEUS_CONTEXT)
private readonly context: TuiDialogContext,
private readonly dialogs: TuiDialogService,
- private readonly alerts: TuiAlertService,
+ private readonly errorService: ErrorService,
private readonly loader: LoadingService,
private readonly embassyApi: ApiService,
private readonly patchDb: PatchDB,
@@ -99,9 +97,7 @@ export class AppConfigPage {
this.spec = spec
}
} catch (e: any) {
- const message = getErrorMessage(e)
-
- this.loadingError = tuiIsString(message) ? message : message.value
+ this.loadingError = getErrorMessage(e)
} finally {
this.loadingText = ''
}
@@ -119,7 +115,7 @@ export class AppConfigPage {
await this.configure(config, loader)
}
} catch (e: any) {
- this.showError(e)
+ this.errorService.handleError(e)
} finally {
loader.unsubscribe()
}
@@ -186,16 +182,4 @@ export class AppConfigPage {
this.dialogs.open(TUI_PROMPT, { data }).pipe(endWith(false)),
)
}
-
- private showError(e: any) {
- const message = getErrorMessage(e)
-
- this.alerts
- .open(tuiIsString(message) ? message : message.value, {
- status: TuiNotification.Error,
- autoClose: false,
- label: 'Error',
- })
- .subscribe()
- }
}
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/services/app-show/pipes/to-buttons.pipe.ts b/frontend/projects/ui/src/app/apps/ui/pages/services/app-show/pipes/to-buttons.pipe.ts
index 02113250d..cf8252b75 100644
--- a/frontend/projects/ui/src/app/apps/ui/pages/services/app-show/pipes/to-buttons.pipe.ts
+++ b/frontend/projects/ui/src/app/apps/ui/pages/services/app-show/pipes/to-buttons.pipe.ts
@@ -1,7 +1,8 @@
import { Pipe, PipeTransform } from '@angular/core'
import { ActivatedRoute } from '@angular/router'
-import { ModalController, NavController } from '@ionic/angular'
+import { NavController } from '@ionic/angular'
import { MarkdownComponent } from '@start9labs/shared'
+import { PolymorpheusComponent } from '@tinkoff/ng-polymorpheus'
import {
DataModel,
PackageDataEntry,
@@ -14,6 +15,7 @@ import {
import { ApiService } from 'src/app/services/api/embassy-api.service'
import { from, map, Observable } from 'rxjs'
import { PatchDB } from 'patch-db-client'
+import { TuiDialogService } from '@taiga-ui/core'
export interface Button {
title: string
@@ -31,7 +33,7 @@ export class ToButtonsPipe implements PipeTransform {
constructor(
private readonly route: ActivatedRoute,
private readonly navCtrl: NavController,
- private readonly modalCtrl: ModalController,
+ private readonly dialogs: TuiDialogService,
private readonly formDialog: FormDialogService,
private readonly apiService: ApiService,
private readonly patch: PatchDB,
@@ -110,19 +112,19 @@ export class ToButtonsPipe implements PipeTransform {
.setDbValue(['ack-instructions', id], true)
.catch(e => console.error('Failed to mark instructions as seen', e))
- const modal = await this.modalCtrl.create({
- componentProps: {
- title: 'Instructions',
- content: from(
- this.apiService.getStatic(
- `/public/package-data/${id}/${version}/INSTRUCTIONS.md`,
+ this.dialogs
+ .open(new PolymorpheusComponent(MarkdownComponent), {
+ label: 'Instructions',
+ size: 'l',
+ data: {
+ content: from(
+ this.apiService.getStatic(
+ `/public/package-data/${id}/${version}/INSTRUCTIONS.md`,
+ ),
),
- ),
- },
- component: MarkdownComponent,
- })
-
- await modal.present()
+ },
+ })
+ .subscribe()
}
private viewInMarketplaceButton(pkg: PackageDataEntry): Button {
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/system/domains/domain.const.ts b/frontend/projects/ui/src/app/apps/ui/pages/system/domains/domain.const.ts
new file mode 100644
index 000000000..1670fde80
--- /dev/null
+++ b/frontend/projects/ui/src/app/apps/ui/pages/system/domains/domain.const.ts
@@ -0,0 +1,34 @@
+import { Config } from '@start9labs/start-sdk/lib/config/builder/config'
+import { Value } from '@start9labs/start-sdk/lib/config/builder/value'
+
+export const domainSpec = Config.of({
+ provider: Value.select({
+ name: 'Provider',
+ required: { default: null },
+ values: {
+ namecheap: 'Namecheap',
+ googledomains: 'Google Domains',
+ duckdns: 'Duck DNS',
+ changeip: 'ChangeIP',
+ easydns: 'easyDNS',
+ zoneedit: 'Zoneedit',
+ dyn: 'DynDNS',
+ },
+ }),
+ domain: Value.text({
+ name: 'Domain Name',
+ required: { default: null },
+ placeholder: 'yourdomain.com',
+ }),
+ username: Value.text({
+ name: 'Username',
+ required: { default: null },
+ }),
+ password: Value.text({
+ name: 'Password',
+ required: { default: null },
+ masked: true,
+ }),
+})
+
+export type DomainSpec = typeof domainSpec.validator._TYPE
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/system/lan/lan.module.ts b/frontend/projects/ui/src/app/apps/ui/pages/system/domains/domains.module.ts
similarity index 57%
rename from frontend/projects/ui/src/app/apps/ui/pages/system/lan/lan.module.ts
rename to frontend/projects/ui/src/app/apps/ui/pages/system/domains/domains.module.ts
index dc0216ce2..39af70e92 100644
--- a/frontend/projects/ui/src/app/apps/ui/pages/system/lan/lan.module.ts
+++ b/frontend/projects/ui/src/app/apps/ui/pages/system/domains/domains.module.ts
@@ -1,14 +1,15 @@
import { NgModule } from '@angular/core'
import { CommonModule } from '@angular/common'
-import { Routes, RouterModule } from '@angular/router'
import { IonicModule } from '@ionic/angular'
-import { LANPage } from './lan.page'
+import { RouterModule, Routes } from '@angular/router'
+import { DomainsPage } from './domains.page'
+import { TuiNotificationModule } from '@taiga-ui/core'
import { SharedPipesModule } from '@start9labs/shared'
const routes: Routes = [
{
path: '',
- component: LANPage,
+ component: DomainsPage,
},
]
@@ -16,9 +17,10 @@ const routes: Routes = [
imports: [
CommonModule,
IonicModule,
+ TuiNotificationModule,
RouterModule.forChild(routes),
SharedPipesModule,
],
- declarations: [LANPage],
+ declarations: [DomainsPage],
})
-export class LANPageModule {}
+export class DomainsPageModule {}
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/system/domains/domains.page.html b/frontend/projects/ui/src/app/apps/ui/pages/system/domains/domains.page.html
new file mode 100644
index 000000000..9ce477592
--- /dev/null
+++ b/frontend/projects/ui/src/app/apps/ui/pages/system/domains/domains.page.html
@@ -0,0 +1,126 @@
+
+
+
+
+ Domains
+
+
+
+
+
+
+ Start9.me
+
+
+
+
+
+ Custom Domains
+
+
+
+
+
+
diff --git a/frontend/projects/diagnostic-ui/src/app/pages/logs/logs.page.scss b/frontend/projects/ui/src/app/apps/ui/pages/system/domains/domains.page.scss
similarity index 100%
rename from frontend/projects/diagnostic-ui/src/app/pages/logs/logs.page.scss
rename to frontend/projects/ui/src/app/apps/ui/pages/system/domains/domains.page.scss
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/system/domains/domains.page.ts b/frontend/projects/ui/src/app/apps/ui/pages/system/domains/domains.page.ts
new file mode 100644
index 000000000..4ccaed895
--- /dev/null
+++ b/frontend/projects/ui/src/app/apps/ui/pages/system/domains/domains.page.ts
@@ -0,0 +1,215 @@
+import { Component } from '@angular/core'
+import { ErrorService, LoadingService } from '@start9labs/shared'
+import { TuiDialogOptions, TuiDialogService } from '@taiga-ui/core'
+import { TUI_PROMPT } from '@taiga-ui/kit'
+import { combineLatest, filter, first, map, switchMap } from 'rxjs'
+import { PatchDB } from 'patch-db-client'
+import { ApiService } from 'src/app/services/api/embassy-api.service'
+import { DataModel } from 'src/app/services/patch-db/data-model'
+import { FormDialogService } from 'src/app/services/form-dialog.service'
+import { DomainSpec, domainSpec } from './domain.const'
+import { ConnectionService } from 'src/app/services/connection.service'
+import { FormContext, FormPage } from '../../../modals/form/form.page'
+import { getClearnetAddress } from 'src/app/util/clearnetAddress'
+
+@Component({
+ selector: 'domains',
+ templateUrl: 'domains.page.html',
+ styleUrls: ['domains.page.scss'],
+})
+export class DomainsPage {
+ readonly docsUrl = 'https://docs.start9.com/latest/user-manual/domains'
+
+ readonly server$ = this.patch.watch$('server-info')
+ readonly pkgs$ = this.patch.watch$('package-data').pipe(first())
+
+ readonly domains$ = this.connectionService.connected$.pipe(
+ filter(Boolean),
+ switchMap(() =>
+ combineLatest([this.server$, this.pkgs$]).pipe(
+ map(([{ ui, network }, packageData]) => {
+ const start9MeSubdomain = network.start9MeSubdomain
+ const start9Me = !start9MeSubdomain
+ ? null
+ : {
+ value: `${start9MeSubdomain.value}.start9.me`,
+ createdAt: start9MeSubdomain.createdAt,
+ provider: 'Start9',
+ usedBy: usedBy(
+ start9MeSubdomain.value,
+ getClearnetAddress('https', ui.domainInfo),
+ packageData,
+ ),
+ }
+ const custom = network.domains.map(domain => ({
+ value: domain.value,
+ createdAt: domain.createdAt,
+ provider: domain.provider,
+ usedBy: usedBy(
+ domain.value,
+ getClearnetAddress('https', ui.domainInfo),
+ packageData,
+ ),
+ }))
+
+ return { start9Me, custom }
+ }),
+ ),
+ ),
+ )
+
+ constructor(
+ private readonly errorService: ErrorService,
+ private readonly dialogs: TuiDialogService,
+ private readonly api: ApiService,
+ private readonly loader: LoadingService,
+ private readonly formDialog: FormDialogService,
+ private readonly connectionService: ConnectionService,
+ private readonly patch: PatchDB,
+ ) {}
+
+ async presentModalAdd() {
+ const options: Partial>> = {
+ label: 'Custom Domain',
+ data: {
+ spec: await domainSpec.build({} as any),
+ buttons: [
+ {
+ text: 'Save',
+ handler: async value => this.save(value),
+ },
+ ],
+ },
+ }
+ this.formDialog.open(FormPage, options)
+ }
+
+ presentAlertClaimStart9MeDomain() {
+ this.dialogs
+ .open(TUI_PROMPT, {
+ label: 'Confirm',
+ size: 's',
+ data: {
+ content: 'Claim your start9.me domain?',
+ yes: 'Claim',
+ no: 'Cancel',
+ },
+ })
+ .pipe(filter(Boolean))
+ .subscribe(() => this.claimStart9MeDomain())
+ }
+
+ presentAlertDelete(hostname: string) {
+ this.dialogs
+ .open(TUI_PROMPT, {
+ label: 'Confirm',
+ size: 's',
+ data: {
+ content: 'Delete domain?',
+ yes: 'Delete',
+ no: 'Cancel',
+ },
+ })
+ .pipe(filter(Boolean))
+ .subscribe(() => this.delete(hostname))
+ }
+
+ presentAlertDeleteStart9Me() {
+ this.dialogs
+ .open(TUI_PROMPT, {
+ label: 'Confirm',
+ size: 's',
+ data: {
+ content: 'Delete start9.me domain?',
+ yes: 'Delete',
+ no: 'Cancel',
+ },
+ })
+ .pipe(filter(Boolean))
+ .subscribe(() => this.deleteStart9MeDomain())
+ }
+
+ presentAlertUsedBy(domain: string, usedBy: string[]) {
+ this.dialogs
+ .open(
+ `${domain} is currently being used by: {
+ const loader = this.loader.open('Saving...').subscribe()
+
+ try {
+ await this.api.claimStart9MeDomain({})
+ return true
+ } catch (e: any) {
+ this.errorService.handleError(e)
+ return false
+ } finally {
+ loader.unsubscribe()
+ }
+ }
+
+ private async save(value: DomainSpec): Promise {
+ const loader = this.loader.open('Saving...').subscribe()
+
+ try {
+ await this.api.addDomain(value)
+ return true
+ } catch (e: any) {
+ this.errorService.handleError(e)
+ return false
+ } finally {
+ loader.unsubscribe()
+ }
+ }
+
+ private async delete(hostname: string): Promise {
+ const loader = this.loader.open('Deleting...').subscribe()
+
+ try {
+ await this.api.deleteDomain({ hostname })
+ } catch (e: any) {
+ this.errorService.handleError(e)
+ } finally {
+ loader.unsubscribe()
+ }
+ }
+
+ private async deleteStart9MeDomain(): Promise {
+ const loader = this.loader.open('Deleting...').subscribe()
+
+ try {
+ await this.api.deleteStart9MeDomain({})
+ } catch (e: any) {
+ this.errorService.handleError(e)
+ } finally {
+ loader.unsubscribe()
+ }
+ }
+}
+
+function usedBy(
+ domain: string,
+ serverUi: string | null,
+ pkgs: DataModel['package-data'],
+): string[] {
+ const list = []
+ if (serverUi && serverUi.includes(domain)) list.push('StartOS Web Interface')
+ return list.concat(
+ Object.values(pkgs)
+ .filter(pkg =>
+ Object.values(pkg.installed?.['address-info'] || {}).some(ai =>
+ ai.addresses.some(a => a.includes(domain)),
+ ),
+ )
+ .map(pkg => pkg.manifest.title),
+ )
+}
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/system/email/email.page.ts b/frontend/projects/ui/src/app/apps/ui/pages/system/email/email.page.ts
index a7ea7a233..fb8ae298e 100644
--- a/frontend/projects/ui/src/app/apps/ui/pages/system/email/email.page.ts
+++ b/frontend/projects/ui/src/app/apps/ui/pages/system/email/email.page.ts
@@ -1,6 +1,6 @@
import { Component } from '@angular/core'
import { UntypedFormGroup } from '@angular/forms'
-import { ErrorService } from '@start9labs/shared'
+import { ErrorService, LoadingService } from '@start9labs/shared'
import { InputSpec } from '@start9labs/start-sdk/lib/config/configTypes'
import { customSmtp } from '@start9labs/start-sdk/lib/config/configConstants'
import { TuiDialogService } from '@taiga-ui/core'
@@ -9,7 +9,6 @@ import { switchMap } from 'rxjs'
import { ApiService } from 'src/app/services/api/embassy-api.service'
import { DataModel } from 'src/app/services/patch-db/data-model'
import { FormService } from 'src/app/services/form.service'
-import { LoadingService } from 'src/app/common/loading/loading.service'
import { configBuilderToSpec } from 'src/app/util/configBuilderToSpec'
@Component({
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/system/experimental-features/experimental-features.module.ts b/frontend/projects/ui/src/app/apps/ui/pages/system/experimental-features/experimental-features.module.ts
index 86e374b17..436a9ed06 100644
--- a/frontend/projects/ui/src/app/apps/ui/pages/system/experimental-features/experimental-features.module.ts
+++ b/frontend/projects/ui/src/app/apps/ui/pages/system/experimental-features/experimental-features.module.ts
@@ -2,8 +2,10 @@ import { NgModule } from '@angular/core'
import { CommonModule } from '@angular/common'
import { Routes, RouterModule } from '@angular/router'
import { IonicModule } from '@ionic/angular'
-import { ExperimentalFeaturesPage } from './experimental-features.page'
import { EmverPipesModule } from '@start9labs/shared'
+import { TuiCheckboxLabeledModule, TuiPromptModule } from '@taiga-ui/kit'
+import { ExperimentalFeaturesPage } from './experimental-features.page'
+import { FormsModule } from '@angular/forms'
const routes: Routes = [
{
@@ -16,8 +18,11 @@ const routes: Routes = [
imports: [
CommonModule,
IonicModule,
+ TuiPromptModule,
RouterModule.forChild(routes),
EmverPipesModule,
+ TuiCheckboxLabeledModule,
+ FormsModule,
],
declarations: [ExperimentalFeaturesPage],
})
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/system/experimental-features/experimental-features.page.html b/frontend/projects/ui/src/app/apps/ui/pages/system/experimental-features/experimental-features.page.html
index 69f82ff43..fefb783c7 100644
--- a/frontend/projects/ui/src/app/apps/ui/pages/system/experimental-features/experimental-features.page.html
+++ b/frontend/projects/ui/src/app/apps/ui/pages/system/experimental-features/experimental-features.page.html
@@ -34,3 +34,18 @@
+
+
+
+ Wipe state
+
+
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/system/experimental-features/experimental-features.page.ts b/frontend/projects/ui/src/app/apps/ui/pages/system/experimental-features/experimental-features.page.ts
index ae0025204..c45646993 100644
--- a/frontend/projects/ui/src/app/apps/ui/pages/system/experimental-features/experimental-features.page.ts
+++ b/frontend/projects/ui/src/app/apps/ui/pages/system/experimental-features/experimental-features.page.ts
@@ -1,14 +1,17 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core'
import {
- AlertController,
- LoadingController,
- ToastController,
-} from '@ionic/angular'
+ ChangeDetectionStrategy,
+ Component,
+ TemplateRef,
+ ViewChild,
+} from '@angular/core'
import { PatchDB } from 'patch-db-client'
import { ApiService } from 'src/app/services/api/embassy-api.service'
import { ConfigService } from 'src/app/services/config.service'
import { DataModel } from 'src/app/services/patch-db/data-model'
-import { ErrorToastService } from '@start9labs/shared'
+import { ErrorService, LoadingService } from '@start9labs/shared'
+import { TuiAlertService, TuiDialogService } from '@taiga-ui/core'
+import { TUI_PROMPT } from '@taiga-ui/kit'
+import { filter } from 'rxjs'
@Component({
selector: 'experimental-features',
@@ -19,138 +22,84 @@ import { ErrorToastService } from '@start9labs/shared'
export class ExperimentalFeaturesPage {
readonly server$ = this.patch.watch$('server-info')
+ @ViewChild('tor')
+ template?: TemplateRef
+
+ wipe = false
+
constructor(
- private readonly toastCtrl: ToastController,
+ private readonly alerts: TuiAlertService,
private readonly patch: PatchDB,
private readonly config: ConfigService,
- private readonly alertCtrl: AlertController,
- private readonly loadingCtrl: LoadingController,
+ private readonly dialogs: TuiDialogService,
+ private readonly loader: LoadingService,
private readonly api: ApiService,
- private readonly errToast: ErrorToastService,
+ private readonly errorService: ErrorService,
) {}
- async presentAlertResetTor() {
- const isTor = this.config.isTor()
- const shared =
- 'Optionally wipe state to forcibly acquire new guard nodes. It is recommended to try without wiping state first.'
- const alert = await this.alertCtrl.create({
- header: isTor ? 'Warning' : 'Confirm',
- message: isTor
- ? `You are currently connected over Tor. If you reset the Tor daemon, you will loose connectivity until it comes back online.
${shared}` - : `Reset Tor?
${shared}`, - inputs: [ - { - label: 'Wipe state', - type: 'checkbox', - value: 'wipe', - handler: val => { - console.error(val) - }, - }, - ], - buttons: [ - { - text: 'Cancel', - role: 'cancel', - }, - { - text: 'Reset', - handler: (value: string[]) => { - console.error(value) - this.resetTor(value.some(v => 'wipe')) - }, - cssClass: 'enter-click', - }, - ], - cssClass: isTor ? 'alert-warning-message' : '', - }) - await alert.present() + get isTor(): boolean { + return this.config.isTor() } - async presentAlertZram(enabled: boolean) { - const alert = await this.alertCtrl.create({ - header: enabled ? 'Confirm' : 'Warning', - message: enabled - ? 'Are you sure you want to disable zram?' - : 'zram on StartOS is experimental. It may increase performance of you server, especially if it is a low RAM device.', - buttons: [ - { - text: 'Cancel', - role: 'cancel', + async presentAlertResetTor() { + this.wipe = false + this.dialogs + .open(TUI_PROMPT, { + label: this.isTor ? 'Warning' : 'Confirm', + data: { + content: this.template, + yes: 'Reset', + no: 'Cancel', }, - { - text: enabled ? 'Disable' : 'Enable', - handler: () => { - this.toggleZram(enabled) - }, - cssClass: 'enter-click', + }) + .pipe(filter(Boolean)) + .subscribe(() => this.resetTor(this.wipe)) + } + + presentAlertZram(enabled: boolean) { + this.dialogs + .open(TUI_PROMPT, { + label: enabled ? 'Confirm' : 'Warning', + data: { + content: enabled + ? 'Are you sure you want to disable zram?' + : 'zram on StartOS is experimental. It may increase performance of you server, especially if it is a low RAM device.', + yes: enabled ? 'Disable' : 'Enable', + no: 'Cancel', }, - ], - cssClass: enabled ? '' : 'alert-warning-message', - }) - await alert.present() + }) + .pipe(filter(Boolean)) + .subscribe(() => this.toggleZram(enabled)) } private async resetTor(wipeState: boolean) { - const loader = await this.loadingCtrl.create({ - message: 'Resetting Tor...', - }) - await loader.present() + const loader = this.loader.open('Resetting Tor...').subscribe() try { await this.api.resetTor({ 'wipe-state': wipeState, reason: 'User triggered', }) - const toast = await this.toastCtrl.create({ - header: 'Tor reset in progress', - position: 'bottom', - duration: 4000, - buttons: [ - { - side: 'start', - icon: 'close', - handler: () => { - return true - }, - }, - ], - }) - await toast.present() + this.alerts.open('Tor reset in progress').subscribe() } catch (e: any) { - this.errToast.present(e) + this.errorService.handleError(e) } finally { - loader.dismiss() + loader.unsubscribe() } } private async toggleZram(enabled: boolean) { - const loader = await this.loadingCtrl.create({ - message: enabled ? 'Disabling zram...' : 'Enabling zram', - }) - await loader.present() + const loader = this.loader + .open(enabled ? 'Disabling zram...' : 'Enabling zram') + .subscribe() try { await this.api.toggleZram({ enable: !enabled }) - const toast = await this.toastCtrl.create({ - header: `Zram ${enabled ? 'disabled' : 'enabled'}`, - position: 'bottom', - duration: 4000, - buttons: [ - { - side: 'start', - icon: 'close', - handler: () => { - return true - }, - }, - ], - }) - await toast.present() + this.alerts.open(`Zram ${enabled ? 'disabled' : 'enabled'}`).subscribe() } catch (e: any) { - this.errToast.present(e) + this.errorService.handleError(e) } finally { - loader.dismiss() + loader.unsubscribe() } } } diff --git a/frontend/projects/ui/src/app/apps/ui/pages/system/lan/lan.page.html b/frontend/projects/ui/src/app/apps/ui/pages/system/lan/lan.page.html deleted file mode 100644 index 5c11fea02..000000000 --- a/frontend/projects/ui/src/app/apps/ui/pages/system/lan/lan.page.html +++ /dev/null @@ -1,43 +0,0 @@ -
-
- Secure LAN
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/system/lan/lan.page.scss b/frontend/projects/ui/src/app/apps/ui/pages/system/lan/lan.page.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/system/lan/lan.page.ts b/frontend/projects/ui/src/app/apps/ui/pages/system/lan/lan.page.ts
deleted file mode 100644
index b07b3f2f1..000000000
--- a/frontend/projects/ui/src/app/apps/ui/pages/system/lan/lan.page.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core'
-import { PatchDB } from 'patch-db-client'
-import { map } from 'rxjs'
-import { DataModel } from 'src/app/services/patch-db/data-model'
-
-@Component({
- selector: 'lan',
- templateUrl: './lan.page.html',
- styleUrls: ['./lan.page.scss'],
- changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class LANPage {
- readonly crtName$ = this.patch
- .watch$('server-info', 'lan-address')
- .pipe(map(addr => `${new URL(addr).hostname}.crt`))
-
- constructor(private readonly patch: PatchDB) {}
-
- installCert(): void {
- document.getElementById('install-cert')?.click()
- }
-}
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/system/os-addresses/os-addresses.module.ts b/frontend/projects/ui/src/app/apps/ui/pages/system/os-addresses/os-addresses.module.ts
new file mode 100644
index 000000000..5eb444af1
--- /dev/null
+++ b/frontend/projects/ui/src/app/apps/ui/pages/system/os-addresses/os-addresses.module.ts
@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { Routes, RouterModule } from '@angular/router'
+import { IonicModule } from '@ionic/angular'
+import { OSAddressesPage, OsClearnetPipe } from './os-addresses.page'
+
+const routes: Routes = [
+ {
+ path: '',
+ component: OSAddressesPage,
+ },
+]
+
+@NgModule({
+ imports: [CommonModule, IonicModule, RouterModule.forChild(routes)],
+ declarations: [OSAddressesPage, OsClearnetPipe],
+})
+export class OSAddressesPageModule {}
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/system/os-addresses/os-addresses.page.html b/frontend/projects/ui/src/app/apps/ui/pages/system/os-addresses/os-addresses.page.html
new file mode 100644
index 000000000..1f24cbd57
--- /dev/null
+++ b/frontend/projects/ui/src/app/apps/ui/pages/system/os-addresses/os-addresses.page.html
@@ -0,0 +1,228 @@
+
+
+
+
+ StartOS Web Interface
+
+
+
+
+
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/system/os-addresses/os-addresses.page.scss b/frontend/projects/ui/src/app/apps/ui/pages/system/os-addresses/os-addresses.page.scss
new file mode 100644
index 000000000..fab7b4db2
--- /dev/null
+++ b/frontend/projects/ui/src/app/apps/ui/pages/system/os-addresses/os-addresses.page.scss
@@ -0,0 +1,15 @@
+ion-item-divider {
+ text-transform: unset;
+ padding-bottom: 12px;
+ padding-left: 0;
+}
+
+ion-item-group {
+ background-color: #1e2024;
+ border: 1px solid #717171;
+ border-radius: 6px;
+}
+
+ion-item {
+ --background: #1e2024;
+}
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/system/os-addresses/os-addresses.page.ts b/frontend/projects/ui/src/app/apps/ui/pages/system/os-addresses/os-addresses.page.ts
new file mode 100644
index 000000000..36c5c16b3
--- /dev/null
+++ b/frontend/projects/ui/src/app/apps/ui/pages/system/os-addresses/os-addresses.page.ts
@@ -0,0 +1,168 @@
+import { ChangeDetectionStrategy, Component, Inject } from '@angular/core'
+import { LoadingService, CopyService, ErrorService } from '@start9labs/shared'
+import { Config } from '@start9labs/start-sdk/lib/config/builder/config'
+import { Value } from '@start9labs/start-sdk/lib/config/builder/value'
+import { InputSpec } from '@start9labs/start-sdk/lib/config/configTypes'
+import { TuiDialogOptions, TuiDialogService } from '@taiga-ui/core'
+import { PatchDB } from 'patch-db-client'
+import { filter, map } from 'rxjs'
+import {
+ DomainInfo,
+ DataModel,
+ NetworkInfo,
+ ServerInfo,
+} from 'src/app/services/patch-db/data-model'
+import { FormDialogService } from 'src/app/services/form-dialog.service'
+import { configBuilderToSpec } from 'src/app/util/configBuilderToSpec'
+import { ApiService } from 'src/app/services/api/embassy-api.service'
+import { FormContext, FormPage } from '../../../modals/form/form.page'
+import { TUI_PROMPT } from '@taiga-ui/kit'
+import { DOCUMENT } from '@angular/common'
+import { Pipe, PipeTransform } from '@angular/core'
+import { getClearnetAddress } from 'src/app/util/clearnetAddress'
+
+export type ClearnetForm = {
+ domain: string
+ subdomain: string | null
+}
+
+@Component({
+ selector: 'os-addresses',
+ templateUrl: './os-addresses.page.html',
+ styleUrls: ['./os-addresses.page.scss'],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class OSAddressesPage {
+ readonly server$ = this.patch.watch$('server-info')
+
+ readonly crtName$ = this.server$.pipe(
+ map(server => `${server.ui.lanHostname}.crt`),
+ )
+
+ constructor(
+ readonly copyService: CopyService,
+ private readonly loader: LoadingService,
+ private readonly formDialog: FormDialogService,
+ private readonly patch: PatchDB,
+ private readonly errorService: ErrorService,
+ private readonly api: ApiService,
+ private readonly dialogs: TuiDialogService,
+ @Inject(DOCUMENT) private readonly document: Document,
+ ) {}
+
+ launch(url: string): void {
+ this.document.defaultView?.open(url, '_blank', 'noreferrer')
+ }
+
+ installCert(): void {
+ this.document.getElementById('install-cert')?.click()
+ }
+
+ async presentModalAddClearnet(server: ServerInfo) {
+ const domainInfo = server.ui.domainInfo
+ const options: Partial>> = {
+ label: 'Select Domain/Subdomain',
+ data: {
+ value: {
+ domain: domainInfo?.domain || '',
+ subdomain: domainInfo?.subdomain || '',
+ },
+ spec: await this.getClearnetSpec(server.network),
+ buttons: [
+ {
+ text: 'Manage domains',
+ link: '/system/domains',
+ },
+ {
+ text: 'Save',
+ handler: async value => this.saveClearnet(value),
+ },
+ ],
+ },
+ }
+ this.formDialog.open(FormPage, options)
+ }
+
+ presentAlertRemoveClearnet() {
+ this.dialogs
+ .open(TUI_PROMPT, {
+ label: 'Confirm',
+ size: 's',
+ data: {
+ content: 'Remove clearnet address?',
+ yes: 'Remove',
+ no: 'Cancel',
+ },
+ })
+ .pipe(filter(Boolean))
+ .subscribe(() => this.removeClearnet())
+ }
+
+ private async saveClearnet(domainInfo: ClearnetForm): Promise {
+ const loader = this.loader.open('Saving...').subscribe()
+
+ try {
+ await this.api.setServerClearnetAddress({ domainInfo })
+ return true
+ } catch (e: any) {
+ this.errorService.handleError(e)
+ return false
+ } finally {
+ loader.unsubscribe()
+ }
+ }
+
+ private async removeClearnet(): Promise {
+ const loader = this.loader.open('Removing...').subscribe()
+
+ try {
+ await this.api.setServerClearnetAddress({ domainInfo: null })
+ } catch (e: any) {
+ this.errorService.handleError(e)
+ } finally {
+ loader.unsubscribe()
+ }
+ }
+
+ private async getClearnetSpec({
+ domains,
+ start9MeSubdomain,
+ }: NetworkInfo): Promise {
+ const start9MeDomain = `${start9MeSubdomain?.value}.start9.me`
+ const base = start9MeSubdomain ? { [start9MeDomain]: start9MeDomain } : {}
+
+ return configBuilderToSpec(
+ Config.of({
+ domain: Value.dynamicSelect(() => {
+ return {
+ name: 'Domain',
+ required: { default: null },
+ values: domains.reduce((prev, curr) => {
+ return {
+ [curr.value]: curr.value,
+ ...prev,
+ }
+ }, base),
+ }
+ }),
+ subdomain: Value.text({
+ name: 'Subdomain',
+ required: false,
+ }),
+ }),
+ )
+ }
+
+ asIsOrder(a: any, b: any) {
+ return 0
+ }
+}
+
+@Pipe({
+ name: 'osClearnetPipe',
+})
+export class OsClearnetPipe implements PipeTransform {
+ transform(clearnet: DomainInfo): string {
+ return getClearnetAddress('https', clearnet)
+ }
+}
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/system/port-forwards/port-forwards.module.ts b/frontend/projects/ui/src/app/apps/ui/pages/system/port-forwards/port-forwards.module.ts
new file mode 100644
index 000000000..b81c53fc3
--- /dev/null
+++ b/frontend/projects/ui/src/app/apps/ui/pages/system/port-forwards/port-forwards.module.ts
@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { Routes, RouterModule } from '@angular/router'
+import { IonicModule } from '@ionic/angular'
+import { PortForwardsPage } from './port-forwards.page'
+import { PrimaryIpPipeModule } from 'src/app/common/primary-ip/primary-ip.module'
+import { FormsModule } from '@angular/forms'
+
+const routes: Routes = [
+ {
+ path: '',
+ component: PortForwardsPage,
+ },
+]
+
+@NgModule({
+ imports: [
+ CommonModule,
+ IonicModule,
+ RouterModule.forChild(routes),
+ PrimaryIpPipeModule,
+ FormsModule,
+ ],
+ declarations: [PortForwardsPage],
+})
+export class PortForwardsPageModule {}
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/system/port-forwards/port-forwards.page.html b/frontend/projects/ui/src/app/apps/ui/pages/system/port-forwards/port-forwards.page.html
new file mode 100644
index 000000000..a25127a9a
--- /dev/null
+++ b/frontend/projects/ui/src/app/apps/ui/pages/system/port-forwards/port-forwards.page.html
@@ -0,0 +1,153 @@
+
+
+
+
+ Port Forwards
+
+
+
+
+
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/system/port-forwards/port-forwards.page.scss b/frontend/projects/ui/src/app/apps/ui/pages/system/port-forwards/port-forwards.page.scss
new file mode 100644
index 000000000..50f21298d
--- /dev/null
+++ b/frontend/projects/ui/src/app/apps/ui/pages/system/port-forwards/port-forwards.page.scss
@@ -0,0 +1,26 @@
+ion-item-divider {
+ padding-bottom: 8px;
+ padding-left: 0px;
+}
+
+ion-item-group {
+ background-color: #1e2024;
+ border: 1px solid #717171;
+ border-radius: 6px;
+}
+
+ion-item {
+ --inner-padding-end: 0;
+}
+
+ion-buttons {
+ margin-left: 0;
+ margin-right: 8px;
+ ion-button::part(native) {
+ padding: 0 2px;
+ }
+}
+
+.larger-icon {
+ font-size: 20px;
+}
\ No newline at end of file
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/system/port-forwards/port-forwards.page.ts b/frontend/projects/ui/src/app/apps/ui/pages/system/port-forwards/port-forwards.page.ts
new file mode 100644
index 000000000..fcb977bba
--- /dev/null
+++ b/frontend/projects/ui/src/app/apps/ui/pages/system/port-forwards/port-forwards.page.ts
@@ -0,0 +1,46 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { PatchDB } from 'patch-db-client'
+import { DataModel, PortForward } from 'src/app/services/patch-db/data-model'
+import { LoadingService, CopyService, ErrorService } from '@start9labs/shared'
+import { ApiService } from 'src/app/services/api/embassy-api.service'
+
+@Component({
+ selector: 'port-forwards',
+ templateUrl: './port-forwards.page.html',
+ styleUrls: ['./port-forwards.page.scss'],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PortForwardsPage {
+ readonly server$ = this.patch.watch$('server-info')
+ editing: Record = {}
+ overrides: Record = {}
+
+ constructor(
+ readonly copyService: CopyService,
+ private readonly patch: PatchDB,
+ private readonly loader: LoadingService,
+ private readonly errorService: ErrorService,
+ private readonly api: ApiService,
+ ) {}
+
+ async editPort(pf: PortForward) {
+ this.editing[pf.target] = !this.editing[pf.target]
+ this.overrides[pf.target] = pf.override || pf.assigned
+ }
+
+ async saveOverride(pf: PortForward) {
+ const loader = this.loader.open('Saving...').subscribe()
+
+ try {
+ await this.api.overridePortForward({
+ target: pf.target,
+ port: this.overrides[pf.target],
+ })
+ delete this.editing[pf.target]
+ } catch (e: any) {
+ this.errorService.handleError(e)
+ } finally {
+ loader.unsubscribe()
+ }
+ }
+}
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/system/server-show/os-update/os-update.page.html b/frontend/projects/ui/src/app/apps/ui/pages/system/server-show/os-update/os-update.page.html
index 011a5cc51..e2eaebcfb 100644
--- a/frontend/projects/ui/src/app/apps/ui/pages/system/server-show/os-update/os-update.page.html
+++ b/frontend/projects/ui/src/app/apps/ui/pages/system/server-show/os-update/os-update.page.html
@@ -1,43 +1,13 @@
-
-
-
-
-
-
-
-
+
-
+
+
+
+
-
-
-
-
- Begin Update
-
-
-
-
+
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/system/server-show/os-update/os-update.page.module.ts b/frontend/projects/ui/src/app/apps/ui/pages/system/server-show/os-update/os-update.page.module.ts
index 2d3e0176a..426dc846d 100644
--- a/frontend/projects/ui/src/app/apps/ui/pages/system/server-show/os-update/os-update.page.module.ts
+++ b/frontend/projects/ui/src/app/apps/ui/pages/system/server-show/os-update/os-update.page.module.ts
@@ -1,12 +1,22 @@
import { NgModule } from '@angular/core'
import { CommonModule } from '@angular/common'
-import { IonicModule } from '@ionic/angular'
+import { MarkdownPipeModule, SafeLinksModule } from '@start9labs/shared'
+import { TuiButtonModule, TuiScrollbarModule } from '@taiga-ui/core'
+import { TuiAutoFocusModule } from '@taiga-ui/cdk'
+import { NgDompurifyModule } from '@tinkoff/ng-dompurify'
import { OSUpdatePage } from './os-update.page'
-import { MarkdownPipeModule } from '@start9labs/shared'
@NgModule({
declarations: [OSUpdatePage],
- imports: [CommonModule, IonicModule, MarkdownPipeModule],
+ imports: [
+ CommonModule,
+ MarkdownPipeModule,
+ TuiButtonModule,
+ TuiAutoFocusModule,
+ TuiScrollbarModule,
+ SafeLinksModule,
+ NgDompurifyModule,
+ ],
exports: [OSUpdatePage],
})
export class OSUpdatePageModule {}
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/system/server-show/os-update/os-update.page.scss b/frontend/projects/ui/src/app/apps/ui/pages/system/server-show/os-update/os-update.page.scss
index 586a54126..d2f78caf7 100644
--- a/frontend/projects/ui/src/app/apps/ui/pages/system/server-show/os-update/os-update.page.scss
+++ b/frontend/projects/ui/src/app/apps/ui/pages/system/server-show/os-update/os-update.page.scss
@@ -1,6 +1,24 @@
-.underline {
- margin: 6px 0 8px 16px;
- border-style: solid;
- border-width: 0px 0px 1px 0px;
- border-color: #404040;
- }
\ No newline at end of file
+.title {
+ margin-top: 0;
+ font-weight: bold;
+}
+
+.subtitle {
+ color: var(--tui-text-02);
+ font-weight: normal;
+}
+
+.scrollbar {
+ margin: 24px 0;
+ max-height: 50vh;
+}
+
+.version {
+ box-shadow: 0 1px var(--tui-base-02);
+ margin: 0 24px 0 0;
+ padding: 6px 0;
+}
+
+.button {
+ float: right;
+}
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/system/server-show/os-update/os-update.page.ts b/frontend/projects/ui/src/app/apps/ui/pages/system/server-show/os-update/os-update.page.ts
index ffc544459..d87a3856e 100644
--- a/frontend/projects/ui/src/app/apps/ui/pages/system/server-show/os-update/os-update.page.ts
+++ b/frontend/projects/ui/src/app/apps/ui/pages/system/server-show/os-update/os-update.page.ts
@@ -1,6 +1,7 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core'
-import { LoadingController, ModalController } from '@ionic/angular'
-import { ErrorToastService } from '@start9labs/shared'
+import { ChangeDetectionStrategy, Component, Inject } from '@angular/core'
+import { ErrorService, LoadingService } from '@start9labs/shared'
+import { POLYMORPHEUS_CONTEXT } from '@tinkoff/ng-polymorpheus'
+import { TuiDialogContext } from '@taiga-ui/core'
import { ApiService } from 'src/app/services/api/embassy-api.service'
import { EOSService } from 'src/app/services/eos.service'
@@ -14,9 +15,9 @@ export class OSUpdatePage {
versions: { version: string; notes: string }[] = []
constructor(
- private readonly modalCtrl: ModalController,
- private readonly loadingCtrl: LoadingController,
- private readonly errToast: ErrorToastService,
+ @Inject(POLYMORPHEUS_CONTEXT) private readonly context: TuiDialogContext,
+ private readonly loader: LoadingService,
+ private readonly errorService: ErrorService,
private readonly embassyApi: ApiService,
private readonly eosService: EOSService,
) {}
@@ -27,35 +28,22 @@ export class OSUpdatePage {
this.versions = Object.keys(releaseNotes)
.sort()
.reverse()
- .map(version => {
- return {
- version,
- notes: releaseNotes[version],
- }
- })
- }
-
- dismiss() {
- this.modalCtrl.dismiss()
+ .map(version => ({
+ version,
+ notes: releaseNotes[version],
+ }))
}
async updateEOS() {
- const loader = await this.loadingCtrl.create({
- message: 'Beginning update...',
- })
- await loader.present()
+ const loader = this.loader.open('Beginning update...').subscribe()
try {
await this.embassyApi.updateServer()
- this.dismiss()
+ this.context.$implicit.complete()
} catch (e: any) {
- this.errToast.present(e)
+ this.errorService.handleError(e)
} finally {
- loader.dismiss()
+ loader.unsubscribe()
}
}
-
- asIsOrder() {
- return 0
- }
}
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/system/server-show/server-show.module.ts b/frontend/projects/ui/src/app/apps/ui/pages/system/server-show/server-show.module.ts
index f12152c8a..18799d6b5 100644
--- a/frontend/projects/ui/src/app/apps/ui/pages/system/server-show/server-show.module.ts
+++ b/frontend/projects/ui/src/app/apps/ui/pages/system/server-show/server-show.module.ts
@@ -8,7 +8,7 @@ import { TextSpinnerComponentModule } from '@start9labs/shared'
import { BadgeMenuComponentModule } from 'src/app/common/badge-menu-button/badge-menu.component.module'
import { InsecureWarningComponentModule } from 'src/app/common/insecure-warning/insecure-warning.module'
import { OSUpdatePageModule } from './os-update/os-update.page.module'
-import { GenericInputComponentModule } from 'src/app/apps/ui/modals/generic-input/generic-input.component.module'
+import { PromptModule } from 'src/app/apps/ui/modals/prompt/prompt.module'
import { ThemeSwitcherModule } from '../theme-switcher/theme-switcher.module'
import { BackupColorPipe } from './backup-color.pipe'
@@ -29,7 +29,7 @@ const routes: Routes = [
OSUpdatePageModule,
ThemeSwitcherModule,
InsecureWarningComponentModule,
- GenericInputComponentModule,
+ PromptModule,
RouterModule.forChild(routes),
],
declarations: [ServerShowPage, BackupColorPipe],
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/system/server-show/server-show.page.html b/frontend/projects/ui/src/app/apps/ui/pages/system/server-show/server-show.page.html
index cc0d96c74..9c9dc22fb 100644
--- a/frontend/projects/ui/src/app/apps/ui/pages/system/server-show/server-show.page.html
+++ b/frontend/projects/ui/src/app/apps/ui/pages/system/server-show/server-show.page.html
@@ -7,14 +7,18 @@
-
+
-
+
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/system/server-show/server-show.page.scss b/frontend/projects/ui/src/app/apps/ui/pages/system/server-show/server-show.page.scss
index e69de29bb..84f709c07 100644
--- a/frontend/projects/ui/src/app/apps/ui/pages/system/server-show/server-show.page.scss
+++ b/frontend/projects/ui/src/app/apps/ui/pages/system/server-show/server-show.page.scss
@@ -0,0 +1,15 @@
+ion-item-divider {
+ text-transform: unset;
+ padding-bottom: 12px;
+ padding-left: 0;
+}
+
+ion-item-group {
+ background-color: #1e2024;
+ border: 1px solid #717171;
+ border-radius: 6px;
+}
+
+ion-item {
+ --background: #1e2024;
+}
\ No newline at end of file
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/system/server-show/server-show.page.ts b/frontend/projects/ui/src/app/apps/ui/pages/system/server-show/server-show.page.ts
index 7dd200e63..d7915d551 100644
--- a/frontend/projects/ui/src/app/apps/ui/pages/system/server-show/server-show.page.ts
+++ b/frontend/projects/ui/src/app/apps/ui/pages/system/server-show/server-show.page.ts
@@ -1,28 +1,22 @@
import { DOCUMENT } from '@angular/common'
import { Component, Inject } from '@angular/core'
-import {
- AlertController,
- LoadingController,
- NavController,
- ModalController,
- ToastController,
-} from '@ionic/angular'
+import { NavController } from '@ionic/angular'
import { ApiService } from 'src/app/services/api/embassy-api.service'
import { ActivatedRoute } from '@angular/router'
import { PatchDB } from 'patch-db-client'
-import { firstValueFrom, Observable, of } from 'rxjs'
-import { ErrorToastService } from '@start9labs/shared'
+import { filter, Observable, of, switchMap, take } from 'rxjs'
+import { ErrorService, LoadingService } from '@start9labs/shared'
import { EOSService } from 'src/app/services/eos.service'
import { ClientStorageService } from 'src/app/services/client-storage.service'
import { OSUpdatePage } from './os-update/os-update.page'
import { getAllPackages } from 'src/app/util/get-package-data'
import { AuthService } from 'src/app/services/auth.service'
import { DataModel } from 'src/app/services/patch-db/data-model'
-import {
- GenericInputComponent,
- GenericInputOptions,
-} from 'src/app/apps/ui/modals/generic-input/generic-input.component'
import { ConfigService } from 'src/app/services/config.service'
+import { TuiAlertService, TuiDialogService } from '@taiga-ui/core'
+import { PROMPT } from 'src/app/apps/ui/modals/prompt/prompt.component'
+import { PolymorpheusComponent } from '@tinkoff/ng-polymorpheus'
+import { TUI_PROMPT } from '@taiga-ui/kit'
@Component({
selector: 'server-show',
@@ -35,31 +29,30 @@ export class ServerShowPage {
readonly server$ = this.patch.watch$('server-info')
readonly showUpdate$ = this.eosService.showUpdate$
- readonly showDiskRepair$ = this.ClientStorageService.showDiskRepair$
+ readonly showDiskRepair$ = this.clientStorageService.showDiskRepair$
readonly secure = this.config.isSecure()
constructor(
- private readonly alertCtrl: AlertController,
- private readonly modalCtrl: ModalController,
- private readonly loadingCtrl: LoadingController,
- private readonly errToast: ErrorToastService,
+ private readonly dialogs: TuiDialogService,
+ private readonly loader: LoadingService,
+ private readonly errorService: ErrorService,
private readonly embassyApi: ApiService,
private readonly navCtrl: NavController,
private readonly route: ActivatedRoute,
private readonly patch: PatchDB,
private readonly eosService: EOSService,
- private readonly ClientStorageService: ClientStorageService,
+ private readonly clientStorageService: ClientStorageService,
private readonly authService: AuthService,
- private readonly toastCtrl: ToastController,
+ private readonly alerts: TuiAlertService,
private readonly config: ConfigService,
@Inject(DOCUMENT) private readonly document: Document,
) {}
addClick(title: string) {
switch (title) {
- case 'Manage':
- this.addManageClick()
+ case 'Security':
+ this.addSecurityClick()
break
case 'Power':
this.addPowerClick()
@@ -70,164 +63,118 @@ export class ServerShowPage {
}
private async setBrowserTab(): Promise {
- const chosenName = await firstValueFrom(this.patch.watch$('ui', 'name'))
-
- const options: GenericInputOptions = {
- title: 'Browser Tab Title',
- message: `This value will be displayed as the title of your browser tab.`,
- label: 'Device Name',
- useMask: false,
- placeholder: 'StartOS',
- required: false,
- initialValue: chosenName,
- buttonText: 'Save',
- submitFn: (name: string) => this.setName(name || null),
- }
-
- const modal = await this.modalCtrl.create({
- componentProps: { options },
- cssClass: 'alertlike-modal',
- presentingElement: await this.modalCtrl.getTop(),
- component: GenericInputComponent,
- })
-
- await modal.present()
+ this.patch
+ .watch$('ui', 'name')
+ .pipe(
+ switchMap(initialValue =>
+ this.dialogs.open(PROMPT, {
+ label: 'Browser Tab Title',
+ data: {
+ message: `This value will be displayed as the title of your browser tab.`,
+ label: 'Device Name',
+ placeholder: 'StartOS',
+ required: false,
+ buttonText: 'Save',
+ initialValue,
+ },
+ }),
+ ),
+ take(1),
+ )
+ .subscribe(name => this.setName(name || null))
}
- private async updateEos(): Promise {
- const modal = await this.modalCtrl.create({
- component: OSUpdatePage,
- })
- modal.present()
+ private updateEos() {
+ this.dialogs.open(new PolymorpheusComponent(OSUpdatePage)).subscribe()
}
- private async presentAlertLogout() {
- const alert = await this.alertCtrl.create({
- header: 'Confirm',
- message: 'Are you sure you want to log out?',
- buttons: [
- {
- text: 'Cancel',
- role: 'cancel',
+ private presentAlertLogout() {
+ this.dialogs
+ .open(TUI_PROMPT, {
+ label: 'Confirm',
+ size: 's',
+ data: {
+ content: 'Are you sure you want to log out?',
+ yes: 'Logout',
+ no: 'Cancel',
},
- {
- text: 'Logout',
- handler: () => this.logout(),
- cssClass: 'enter-click',
- },
- ],
- })
-
- await alert.present()
+ })
+ .pipe(filter(Boolean))
+ .subscribe(() => this.logout())
}
- private async presentAlertRestart() {
- const alert = await this.alertCtrl.create({
- header: 'Restart',
- message:
- 'Are you sure you want to restart your server? It can take several minutes to come back online.',
- buttons: [
- {
- text: 'Cancel',
- role: 'cancel',
+ private presentAlertRestart() {
+ this.dialogs
+ .open(TUI_PROMPT, {
+ label: 'Restart',
+ size: 's',
+ data: {
+ content:
+ 'Are you sure you want to restart your server? It can take several minutes to come back online.',
+ yes: 'Restart',
+ no: 'Cancel',
},
- {
- text: 'Restart',
- handler: () => {
- this.restart()
- },
- cssClass: 'enter-click',
- },
- ],
- })
- await alert.present()
+ })
+ .pipe(filter(Boolean))
+ .subscribe(() => this.restart())
}
- private async presentAlertShutdown() {
- const alert = await this.alertCtrl.create({
- header: 'Warning',
- message:
- 'Are you sure you want to power down your server? This can take several minutes, and your server will not come back online automatically. To power on again, you will need to physically unplug your server and plug it back in.',
- buttons: [
- {
- text: 'Cancel',
- role: 'cancel',
+ private presentAlertShutdown() {
+ this.dialogs
+ .open(TUI_PROMPT, {
+ label: 'Warning',
+ size: 's',
+ data: {
+ content:
+ 'Are you sure you want to power down your server? This can take several minutes, and your server will not come back online automatically. To power on again, You will need to physically unplug your server and plug it back in',
+ yes: 'Shutdown',
+ no: 'Cancel',
},
- {
- text: 'Shutdown',
- handler: () => {
- this.shutdown()
- },
- cssClass: 'enter-click',
- },
- ],
- cssClass: 'alert-warning-message',
- })
- await alert.present()
+ })
+ .pipe(filter(Boolean))
+ .subscribe(() => this.shutdown())
}
private async presentAlertSystemRebuild() {
const localPkgs = await getAllPackages(this.patch)
const minutes = Object.keys(localPkgs).length * 2
- const alert = await this.alertCtrl.create({
- header: 'Warning',
- message: `This action will tear down all service containers and rebuild them from scratch. No data will be deleted. This action is useful if your system gets into a bad state, and it should only be performed if you are experiencing general performance or reliability issues. It may take up to ${minutes} minutes to complete. During this time, you will lose all connectivity to your server.`,
- buttons: [
- {
- text: 'Cancel',
- role: 'cancel',
+
+ this.dialogs
+ .open(TUI_PROMPT, {
+ label: 'Warning',
+ size: 's',
+ data: {
+ content: `This action will tear down all service containers and rebuild them from scratch. No data will be deleted. This action is useful if your system gets into a bad state, and it should only be performed if you are experiencing general performance or reliability issues. It may take up to ${minutes} minutes to complete. During this time, you will lose all connectivity to your server.`,
+ yes: 'Rebuild',
+ no: 'Cancel',
},
- {
- text: 'Rebuild',
- handler: () => {
- this.systemRebuild()
- },
- cssClass: 'enter-click',
- },
- ],
- cssClass: 'alert-warning-message',
- })
- await alert.present()
+ })
+ .pipe(filter(Boolean))
+ .subscribe(() => this.systemRebuild())
}
- private async presentAlertRepairDisk() {
- const alert = await this.alertCtrl.create({
- header: 'Warning',
- message: ` {
- const loader = await this.loadingCtrl.create({
- message: 'Saving...',
- })
- await loader.present()
+ const loader = this.loader.open('Saving...').subscribe()
try {
await this.embassyApi.setDbValue(['name'], value)
} finally {
- loader.dismiss()
+ loader.unsubscribe()
}
}
@@ -239,29 +186,21 @@ export class ServerShowPage {
private async restart() {
const action = 'Restart'
-
- const loader = await this.loadingCtrl.create({
- message: `Beginning ${action}...`,
- })
- await loader.present()
+ const loader = this.loader.open(`Beginning ${action}...`).subscribe()
try {
await this.embassyApi.restartServer({})
this.presentAlertInProgress(action, ` until ${action} completes.`)
} catch (e: any) {
- this.errToast.present(e)
+ this.errorService.handleError(e)
} finally {
- loader.dismiss()
+ loader.unsubscribe()
}
}
private async shutdown() {
const action = 'Shutdown'
-
- const loader = await this.loadingCtrl.create({
- message: `Beginning ${action}...`,
- })
- await loader.present()
+ const loader = this.loader.open(`Beginning ${action}...`).subscribe()
try {
await this.embassyApi.shutdownServer({})
@@ -270,40 +209,33 @@ export class ServerShowPage {
'.
You will need to physically power cycle the device to regain connectivity.', ) } catch (e: any) { - this.errToast.present(e) + this.errorService.handleError(e) } finally { - loader.dismiss() + loader.unsubscribe() } } private async systemRebuild() { const action = 'System Rebuild' - - const loader = await this.loadingCtrl.create({ - message: `Beginning ${action}...`, - }) - await loader.present() + const loader = this.loader.open(`Beginning ${action}...`).subscribe() try { await this.embassyApi.systemRebuild({}) this.presentAlertInProgress(action, ` until ${action} completes.`) } catch (e: any) { - this.errToast.present(e) + this.errorService.handleError(e) } finally { - loader.dismiss() + loader.unsubscribe() } } private async checkForEosUpdate(): Promise {
- const loader = await this.loadingCtrl.create({
- message: 'Checking for updates',
- })
- await loader.present()
+ const loader = this.loader.open('Checking for updates').subscribe()
try {
await this.eosService.loadEos()
- await loader.dismiss()
+ loader.unsubscribe()
if (this.eosService.updateAvailable$.value) {
this.updateEos()
@@ -311,44 +243,43 @@ export class ServerShowPage {
this.presentAlertLatest()
}
} catch (e: any) {
- await loader.dismiss()
- this.errToast.present(e)
+ loader.unsubscribe()
+ this.errorService.handleError(e)
}
}
- private async presentAlertLatest() {
- const alert = await this.alertCtrl.create({
- header: 'Up to date!',
- message: 'You are on the latest version of StartOS.',
- buttons: [
- {
- text: 'OK',
- role: 'cancel',
- cssClass: 'enter-click',
- },
- ],
- cssClass: 'alert-success-message',
- })
- alert.present()
+ private presentAlertLatest() {
+ this.dialogs
+ .open('You are on the latest version of StartOS.', {
+ label: 'Up to date!',
+ size: 's',
+ })
+ .subscribe()
}
- private async presentAlertInProgress(verb: string, message: string) {
- const alert = await this.alertCtrl.create({
- header: `${verb} In Progress...`,
- message: `Stopping all services gracefully. This can take a while.
If you have a speaker, your server will ♫ play a melody ♫ before shutting down. Your server will then become unreachable${message}`, - buttons: [ + private presentAlertInProgress(verb: string, message: string) { + this.dialogs + .open( + `Stopping all services gracefully. This can take a while.
If you have a speaker, your server will ♫ play a melody ♫ before shutting down. Your server will then become unreachable${message}`, { - text: 'OK', - role: 'cancel', - cssClass: 'enter-click', + label: `${verb} In Progress...`, + size: 's', }, - ], - }) - alert.present() + ) + .subscribe() } settings: ServerSettings = { - Manage: [ + General: [ + { + title: 'About', + description: 'Basic information about your server', + icon: 'information-circle-outline', + action: () => + this.navCtrl.navigateForward(['specs'], { relativeTo: this.route }), + detail: true, + disabled$: of(false), + }, { title: 'Software Update', description: 'Get the latest version of StartOS', @@ -368,43 +299,16 @@ export class ServerShowPage { detail: false, disabled$: of(false), }, - { - title: 'LAN', - description: `Download and trust your server's certificate for a secure local connection`, - icon: 'home-outline', - action: () => - this.navCtrl.navigateForward(['lan'], { relativeTo: this.route }), - detail: true, - disabled$: of(false), - }, - { - title: 'SSH', - description: - 'Manage your SSH keys to access your server from the command line', - icon: 'terminal-outline', - action: () => - this.navCtrl.navigateForward(['ssh'], { relativeTo: this.route }), - detail: true, - disabled$: of(false), - }, { title: 'Email', - description: 'Provide an external SMTP server for sending emails', + description: + 'Connect to an external SMTP server to send yourself emails', icon: 'mail-outline', action: () => this.navCtrl.navigateForward(['email'], { relativeTo: this.route }), detail: true, disabled$: of(false), }, - { - title: 'WiFi', - description: 'Add or remove WiFi networks', - icon: 'wifi', - action: () => - this.navCtrl.navigateForward(['wifi'], { relativeTo: this.route }), - detail: true, - disabled$: of(false), - }, { title: 'Sideload a Service', description: `Manually install a service`, @@ -428,29 +332,65 @@ export class ServerShowPage { disabled$: of(false), }, ], - Insights: [ + Network: [ { - title: 'About', - description: 'Basic information about your server', - icon: 'information-circle-outline', + title: 'StartOS Web Interface', + description: 'Addresses for accessing this StartOS web interface', + icon: 'desktop-outline', action: () => - this.navCtrl.navigateForward(['specs'], { relativeTo: this.route }), + this.navCtrl.navigateForward(['addresses'], { + relativeTo: this.route, + }), detail: true, disabled$: of(false), }, { - title: 'Monitor', - description: 'CPU, disk, memory, and other useful metrics', - icon: 'pulse', + title: 'Domains', + description: + 'Add domains to your server to enable clearnet connections', + icon: 'globe-outline', action: () => - this.navCtrl.navigateForward(['metrics'], { relativeTo: this.route }), + this.navCtrl.navigateForward(['domains'], { relativeTo: this.route }), + detail: true, + disabled$: of(false), + }, + { + title: 'Port Forwards', + description: + 'A list of ports that should be forwarded through your router', + icon: 'trail-sign-outline', + action: () => + this.navCtrl.navigateForward(['port-forwards'], { + relativeTo: this.route, + }), + detail: true, + disabled$: of(false), + }, + { + title: 'WiFi', + description: 'Add or remove WiFi networks', + icon: 'wifi', + action: () => + this.navCtrl.navigateForward(['wifi'], { relativeTo: this.route }), + detail: true, + disabled$: of(false), + }, + ], + Security: [ + { + title: 'SSH', + description: + 'Manage your SSH keys to access your server from the command line', + icon: 'terminal-outline', + action: () => + this.navCtrl.navigateForward(['ssh'], { relativeTo: this.route }), detail: true, disabled$: of(false), }, { title: 'Active Sessions', description: 'View and manage device access', - icon: 'desktop-outline', + icon: 'stopwatch-outline', action: () => this.navCtrl.navigateForward(['sessions'], { relativeTo: this.route, @@ -458,6 +398,17 @@ export class ServerShowPage { detail: true, disabled$: of(false), }, + ], + Logs: [ + { + title: 'System Resources', + description: 'CPU, disk, memory, and other useful metrics', + icon: 'pulse', + action: () => + this.navCtrl.navigateForward(['metrics'], { relativeTo: this.route }), + detail: true, + disabled$: of(false), + }, { title: 'OS Logs', description: 'Raw, unfiltered operating system logs', @@ -510,11 +461,7 @@ export class ServerShowPage { description: 'Get help from the Start9 team and community', icon: 'chatbubbles-outline', action: () => - window.open( - 'https://start9.com/contact', - '_blank', - 'noreferrer', - ), + window.open('https://start9.com/contact', '_blank', 'noreferrer'), detail: true, disabled$: of(false), }, @@ -576,18 +523,18 @@ export class ServerShowPage { ], } - private async addManageClick() { + private addSecurityClick() { this.manageClicks++ + if (this.manageClicks === 5) { this.manageClicks = 0 - const newVal = this.ClientStorageService.toggleShowDevTools() - const toast = await this.toastCtrl.create({ - header: newVal ? 'Dev tools unlocked' : 'Dev tools hidden', - position: 'bottom', - duration: 1000, - }) - - await toast.present() + this.alerts + .open( + this.clientStorageService.toggleShowDevTools() + ? 'Dev tools unlocked' + : 'Dev tools hidden', + ) + .subscribe() } } @@ -595,7 +542,7 @@ export class ServerShowPage { this.powerClicks++ if (this.powerClicks === 5) { this.powerClicks = 0 - this.ClientStorageService.toggleShowDiskRepair() + this.clientStorageService.toggleShowDiskRepair() } } diff --git a/frontend/projects/ui/src/app/apps/ui/pages/system/server-specs/server-specs.page.html b/frontend/projects/ui/src/app/apps/ui/pages/system/server-specs/server-specs.page.html index 2cebf019e..0c3b24f92 100644 --- a/frontend/projects/ui/src/app/apps/ui/pages/system/server-specs/server-specs.page.html +++ b/frontend/projects/ui/src/app/apps/ui/pages/system/server-specs/server-specs.page.html @@ -21,68 +21,18 @@
-
+
- Web Addresses
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Device Credentials
@@ -94,7 +44,7 @@
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/system/server-specs/server-specs.page.ts b/frontend/projects/ui/src/app/apps/ui/pages/system/server-specs/server-specs.page.ts
index d4efca83d..7e09f38f8 100644
--- a/frontend/projects/ui/src/app/apps/ui/pages/system/server-specs/server-specs.page.ts
+++ b/frontend/projects/ui/src/app/apps/ui/pages/system/server-specs/server-specs.page.ts
@@ -1,8 +1,7 @@
import { ChangeDetectionStrategy, Component } from '@angular/core'
-import { ToastController } from '@ionic/angular'
import { PatchDB } from 'patch-db-client'
import { ConfigService } from 'src/app/services/config.service'
-import { copyToClipboard } from '@start9labs/shared'
+import { CopyService } from '@start9labs/shared'
import { DataModel } from 'src/app/services/patch-db/data-model'
@Component({
@@ -15,7 +14,7 @@ export class ServerSpecsPage {
readonly server$ = this.patch.watch$('server-info')
constructor(
- private readonly toastCtrl: ToastController,
+ readonly copyService: CopyService,
private readonly patch: PatchDB,
private readonly config: ConfigService,
) {}
@@ -28,22 +27,6 @@ export class ServerSpecsPage {
window.open(url, '_blank', 'noreferrer')
}
- async copy(address: string) {
- let message = ''
- await copyToClipboard(address || '').then(success => {
- message = success
- ? 'Copied to clipboard!'
- : 'Failed to copy to clipboard.'
- })
-
- const toast = await this.toastCtrl.create({
- header: message,
- position: 'bottom',
- duration: 1000,
- })
- await toast.present()
- }
-
asIsOrder(a: any, b: any) {
return 0
}
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/system/sessions/sessions.module.ts b/frontend/projects/ui/src/app/apps/ui/pages/system/sessions/sessions.module.ts
index be0905775..444321c36 100644
--- a/frontend/projects/ui/src/app/apps/ui/pages/system/sessions/sessions.module.ts
+++ b/frontend/projects/ui/src/app/apps/ui/pages/system/sessions/sessions.module.ts
@@ -4,6 +4,7 @@ import { IonicModule } from '@ionic/angular'
import { RouterModule, Routes } from '@angular/router'
import { PlatformInfoPipe, SessionsPage } from './sessions.page'
import { SharedPipesModule } from '@start9labs/shared'
+import { TuiLetModule } from '@taiga-ui/cdk'
const routes: Routes = [
{
@@ -18,6 +19,7 @@ const routes: Routes = [
IonicModule,
RouterModule.forChild(routes),
SharedPipesModule,
+ TuiLetModule,
],
declarations: [SessionsPage, PlatformInfoPipe],
})
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/system/sessions/sessions.page.html b/frontend/projects/ui/src/app/apps/ui/pages/system/sessions/sessions.page.html
index 631d9aaee..d8579c6fa 100644
--- a/frontend/projects/ui/src/app/apps/ui/pages/system/sessions/sessions.page.html
+++ b/frontend/projects/ui/src/app/apps/ui/pages/system/sessions/sessions.page.html
@@ -18,16 +18,10 @@
Platform
Last Active
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
-
-
-
- {{ actionRes.value }}
- - {{ actionRes.value }} - -Git Hash
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/services/app-show/components/app-show-additional/app-show-additional.component.ts b/frontend/projects/ui/src/app/apps/ui/pages/services/app-show/components/app-show-additional/app-show-additional.component.ts index 3b4e84787..a61101cd0 100644 --- a/frontend/projects/ui/src/app/apps/ui/pages/services/app-show/components/app-show-additional/app-show-additional.component.ts +++ b/frontend/projects/ui/src/app/apps/ui/pages/services/app-show/components/app-show-additional/app-show-additional.component.ts @@ -1,6 +1,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core' -import { ModalController, ToastController } from '@ionic/angular' -import { copyToClipboard, MarkdownComponent } from '@start9labs/shared' +import { CopyService, MarkdownComponent } from '@start9labs/shared' +import { TuiDialogService } from '@taiga-ui/core' +import { PolymorpheusComponent } from '@tinkoff/ng-polymorpheus' import { from } from 'rxjs' import { ApiService } from 'src/app/services/api/embassy-api.service' import { PackageDataEntry } from 'src/app/services/patch-db/data-model' @@ -15,40 +16,26 @@ export class AppShowAdditionalComponent { pkg!: PackageDataEntry constructor( - private readonly modalCtrl: ModalController, - private readonly toastCtrl: ToastController, + readonly copyService: CopyService, + private readonly dialogs: TuiDialogService, private readonly api: ApiService, ) {} - async copy(address: string): Promise
+
+ Adding domains to StartOS enables you to access your server and service
+ interfaces over clearnet.
+ View instructions
+
+
+
+
+
+
+ Domain
+ Added
+ Provider
+ In Use
+
+
+ {{ start9Me.value }}
+ {{ start9Me.createdAt| date: 'medium' }}
+ Start9
+
+
+ {{ qty }} Interfaces
+
+
+ N/A
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Domain
+ Added
+ Provider
+ In Use
+
+
+ {{ domain.value }}
+ {{ domain.createdAt| date: 'medium' }}
+ {{ domain.provider }}
+
+
+ {{ qty }} Interfaces
+
+
+ N/A
+
+
+
+
+
+
+
+
+
+
+
+ - ${usedBy.map(
+ u => `
- ${u} `, + )}
+ You are currently connected over Tor. If you reset the Tor daemon, you will + lose connectivity until it comes back online. +
+Reset Tor?
++ Optionally wipe state to forcibly acquire new guard nodes. It is recommended + to try without wiping state first. +
+${shared}` - : `Reset Tor?
${shared}`, - inputs: [ - { - label: 'Wipe state', - type: 'checkbox', - value: 'wipe', - handler: val => { - console.error(val) - }, - }, - ], - buttons: [ - { - text: 'Cancel', - role: 'cancel', - }, - { - text: 'Reset', - handler: (value: string[]) => { - console.error(value) - this.resetTor(value.some(v => 'wipe')) - }, - cssClass: 'enter-click', - }, - ], - cssClass: isTor ? 'alert-warning-message' : '', - }) - await alert.present() + get isTor(): boolean { + return this.config.isTor() } - async presentAlertZram(enabled: boolean) { - const alert = await this.alertCtrl.create({ - header: enabled ? 'Confirm' : 'Warning', - message: enabled - ? 'Are you sure you want to disable zram?' - : 'zram on StartOS is experimental. It may increase performance of you server, especially if it is a low RAM device.', - buttons: [ - { - text: 'Cancel', - role: 'cancel', + async presentAlertResetTor() { + this.wipe = false + this.dialogs + .open(TUI_PROMPT, { + label: this.isTor ? 'Warning' : 'Confirm', + data: { + content: this.template, + yes: 'Reset', + no: 'Cancel', }, - { - text: enabled ? 'Disable' : 'Enable', - handler: () => { - this.toggleZram(enabled) - }, - cssClass: 'enter-click', + }) + .pipe(filter(Boolean)) + .subscribe(() => this.resetTor(this.wipe)) + } + + presentAlertZram(enabled: boolean) { + this.dialogs + .open(TUI_PROMPT, { + label: enabled ? 'Confirm' : 'Warning', + data: { + content: enabled + ? 'Are you sure you want to disable zram?' + : 'zram on StartOS is experimental. It may increase performance of you server, especially if it is a low RAM device.', + yes: enabled ? 'Disable' : 'Enable', + no: 'Cancel', }, - ], - cssClass: enabled ? '' : 'alert-warning-message', - }) - await alert.present() + }) + .pipe(filter(Boolean)) + .subscribe(() => this.toggleZram(enabled)) } private async resetTor(wipeState: boolean) { - const loader = await this.loadingCtrl.create({ - message: 'Resetting Tor...', - }) - await loader.present() + const loader = this.loader.open('Resetting Tor...').subscribe() try { await this.api.resetTor({ 'wipe-state': wipeState, reason: 'User triggered', }) - const toast = await this.toastCtrl.create({ - header: 'Tor reset in progress', - position: 'bottom', - duration: 4000, - buttons: [ - { - side: 'start', - icon: 'close', - handler: () => { - return true - }, - }, - ], - }) - await toast.present() + this.alerts.open('Tor reset in progress').subscribe() } catch (e: any) { - this.errToast.present(e) + this.errorService.handleError(e) } finally { - loader.dismiss() + loader.unsubscribe() } } private async toggleZram(enabled: boolean) { - const loader = await this.loadingCtrl.create({ - message: enabled ? 'Disabling zram...' : 'Enabling zram', - }) - await loader.present() + const loader = this.loader + .open(enabled ? 'Disabling zram...' : 'Enabling zram') + .subscribe() try { await this.api.toggleZram({ enable: !enabled }) - const toast = await this.toastCtrl.create({ - header: `Zram ${enabled ? 'disabled' : 'enabled'}`, - position: 'bottom', - duration: 4000, - buttons: [ - { - side: 'start', - icon: 'close', - handler: () => { - return true - }, - }, - ], - }) - await toast.present() + this.alerts.open(`Zram ${enabled ? 'disabled' : 'enabled'}`).subscribe() } catch (e: any) { - this.errToast.present(e) + this.errorService.handleError(e) } finally { - loader.dismiss() + loader.unsubscribe() } } } diff --git a/frontend/projects/ui/src/app/apps/ui/pages/system/lan/lan.page.html b/frontend/projects/ui/src/app/apps/ui/pages/system/lan/lan.page.html deleted file mode 100644 index 5c11fea02..000000000 --- a/frontend/projects/ui/src/app/apps/ui/pages/system/lan/lan.page.html +++ /dev/null @@ -1,43 +0,0 @@ -
- For a secure local connection, - - follow instructions - - to download and trust your server's Root Certificate Authority -
-Download Certificate
-
+
+ Clearnet
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Tor
+
+
+
+
+
+
+
+
+
+
+
+
+ LAN
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
++ Clearnet provides a fast and convenient experience. It not not + provide anonymity, and the addresses can be discovered and accessed + by anyone. + + View instructions + +
+Clearnet
+{{ clearnetAddress }}
+
+
+ Update
+
+
+ Remove
+
+
+
+
+
+
+
+
+
+
+
+
+ + Tor offers privacy and anonymity at the expense of speed and + reliability. A Tor-enabled browser is required to use a Tor address. + + View instructions + +
+Tor
+{{ torHostname }}
+
+
+
+
+
+
+ + LAN offers a fast and private experience. These addresses can only + be accessed from a device connected to the same LAN as your server, + either directly or using a VPN. + + View instructions + +
+
+
+
+
+ Local
+{{ lanHostname }}
+
+
+
+
+
+
+ {{ iface.key }} (IPv4)
+{{ ipv4 }}
+
+
+
+
+
+
+ {{ iface.key }} (IPv6)
+{{ ipv6 }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Below are a list of ports that must be
+ manually
+ forwarded in your router in order to enable clearnet access.
+
+
+
+
+
+
+
+ The ports below have been
+ automatically
+ forwarded in your router.
+
+
+
+
+
+
+
+ Port
+
+
+ Target
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ UPnP Disabled
+
+
+ Below are a list of ports that must be
+ manually
+ forwarded in your router in order to enable clearnet access.
+
+
+ Alternatively, you can enable UPnP in your router for automatic
+ configuration.
+
+ View instructions
+
+
+
+ UPnP Enabled!
+
+
+ The ports below have been
+ automatically
+ forwarded in your router.
+
+
+ If you are running multiple servers, you may want to override
+ specific ports to suite your needs.
+
+ View instructions
+
+
+ {{ ip }}:{{ pf.target }}
+
-
- StartOS {{ versions[0].version }}
-
-
-
- Release Notes
-
-
- StartOS {{ versions[0].version }}
+Release Notes
-
-
-
-
-{{ v.version }}
- - -{{ v.version }}
+ +
@@ -23,46 +27,48 @@
{{ cat.key }}
-
-
-
-
+
+
+
+
-
+
+
+
+
-
+ {{ button.title }}
-{{ button.description }}
+{{ button.title }}
+{{ button.description }}
- -
-
+
This action should only be executed if directed by a Start9 support specialist. We recommend backing up your device before preforming this action.
If anything happens to the device during the reboot, such as losing power or unplugging the drive, the filesystem will be in an unrecoverable state. Please proceed with caution.
`, - buttons: [ - { - text: 'Cancel', - role: 'cancel', + private presentAlertRepairDisk() { + this.dialogs + .open(TUI_PROMPT, { + label: 'Warning', + size: 's', + data: { + content: `This action should only be executed if directed by a Start9 support specialist. We recommend backing up your device before preforming this action.If anything happens to the device during the reboot, such as losing power or unplugging the drive, the filesystem will be in an unrecoverable state. Please proceed with caution.
`, + yes: 'Rebuild', + no: 'Cancel', }, - { - text: 'Repair', - handler: () => { - try { - this.embassyApi.repairDisk({}).then(_ => { - this.restart() - }) - } catch (e: any) { - this.errToast.present(e) - } - }, - cssClass: 'enter-click', - }, - ], - cssClass: 'alert-warning-message', - }) - await alert.present() + }) + .pipe(filter(Boolean)) + .subscribe(() => this.systemRebuild()) } private async setName(value: string | null): PromiseYou will need to physically power cycle the device to regain connectivity.', ) } catch (e: any) { - this.errToast.present(e) + this.errorService.handleError(e) } finally { - loader.dismiss() + loader.unsubscribe() } } private async systemRebuild() { const action = 'System Rebuild' - - const loader = await this.loadingCtrl.create({ - message: `Beginning ${action}...`, - }) - await loader.present() + const loader = this.loader.open(`Beginning ${action}...`).subscribe() try { await this.embassyApi.systemRebuild({}) this.presentAlertInProgress(action, ` until ${action} completes.`) } catch (e: any) { - this.errToast.present(e) + this.errorService.handleError(e) } finally { - loader.dismiss() + loader.unsubscribe() } } private async checkForEosUpdate(): Promise
If you have a speaker, your server will ♫ play a melody ♫ before shutting down. Your server will then become unreachable${message}`, - buttons: [ + private presentAlertInProgress(verb: string, message: string) { + this.dialogs + .open( + `Stopping all services gracefully. This can take a while.
If you have a speaker, your server will ♫ play a melody ♫ before shutting down. Your server will then become unreachable${message}`, { - text: 'OK', - role: 'cancel', - cssClass: 'enter-click', + label: `${verb} In Progress...`, + size: 's', }, - ], - }) - alert.present() + ) + .subscribe() } settings: ServerSettings = { - Manage: [ + General: [ + { + title: 'About', + description: 'Basic information about your server', + icon: 'information-circle-outline', + action: () => + this.navCtrl.navigateForward(['specs'], { relativeTo: this.route }), + detail: true, + disabled$: of(false), + }, { title: 'Software Update', description: 'Get the latest version of StartOS', @@ -368,43 +299,16 @@ export class ServerShowPage { detail: false, disabled$: of(false), }, - { - title: 'LAN', - description: `Download and trust your server's certificate for a secure local connection`, - icon: 'home-outline', - action: () => - this.navCtrl.navigateForward(['lan'], { relativeTo: this.route }), - detail: true, - disabled$: of(false), - }, - { - title: 'SSH', - description: - 'Manage your SSH keys to access your server from the command line', - icon: 'terminal-outline', - action: () => - this.navCtrl.navigateForward(['ssh'], { relativeTo: this.route }), - detail: true, - disabled$: of(false), - }, { title: 'Email', - description: 'Provide an external SMTP server for sending emails', + description: + 'Connect to an external SMTP server to send yourself emails', icon: 'mail-outline', action: () => this.navCtrl.navigateForward(['email'], { relativeTo: this.route }), detail: true, disabled$: of(false), }, - { - title: 'WiFi', - description: 'Add or remove WiFi networks', - icon: 'wifi', - action: () => - this.navCtrl.navigateForward(['wifi'], { relativeTo: this.route }), - detail: true, - disabled$: of(false), - }, { title: 'Sideload a Service', description: `Manually install a service`, @@ -428,29 +332,65 @@ export class ServerShowPage { disabled$: of(false), }, ], - Insights: [ + Network: [ { - title: 'About', - description: 'Basic information about your server', - icon: 'information-circle-outline', + title: 'StartOS Web Interface', + description: 'Addresses for accessing this StartOS web interface', + icon: 'desktop-outline', action: () => - this.navCtrl.navigateForward(['specs'], { relativeTo: this.route }), + this.navCtrl.navigateForward(['addresses'], { + relativeTo: this.route, + }), detail: true, disabled$: of(false), }, { - title: 'Monitor', - description: 'CPU, disk, memory, and other useful metrics', - icon: 'pulse', + title: 'Domains', + description: + 'Add domains to your server to enable clearnet connections', + icon: 'globe-outline', action: () => - this.navCtrl.navigateForward(['metrics'], { relativeTo: this.route }), + this.navCtrl.navigateForward(['domains'], { relativeTo: this.route }), + detail: true, + disabled$: of(false), + }, + { + title: 'Port Forwards', + description: + 'A list of ports that should be forwarded through your router', + icon: 'trail-sign-outline', + action: () => + this.navCtrl.navigateForward(['port-forwards'], { + relativeTo: this.route, + }), + detail: true, + disabled$: of(false), + }, + { + title: 'WiFi', + description: 'Add or remove WiFi networks', + icon: 'wifi', + action: () => + this.navCtrl.navigateForward(['wifi'], { relativeTo: this.route }), + detail: true, + disabled$: of(false), + }, + ], + Security: [ + { + title: 'SSH', + description: + 'Manage your SSH keys to access your server from the command line', + icon: 'terminal-outline', + action: () => + this.navCtrl.navigateForward(['ssh'], { relativeTo: this.route }), detail: true, disabled$: of(false), }, { title: 'Active Sessions', description: 'View and manage device access', - icon: 'desktop-outline', + icon: 'stopwatch-outline', action: () => this.navCtrl.navigateForward(['sessions'], { relativeTo: this.route, @@ -458,6 +398,17 @@ export class ServerShowPage { detail: true, disabled$: of(false), }, + ], + Logs: [ + { + title: 'System Resources', + description: 'CPU, disk, memory, and other useful metrics', + icon: 'pulse', + action: () => + this.navCtrl.navigateForward(['metrics'], { relativeTo: this.route }), + detail: true, + disabled$: of(false), + }, { title: 'OS Logs', description: 'Raw, unfiltered operating system logs', @@ -510,11 +461,7 @@ export class ServerShowPage { description: 'Get help from the Start9 team and community', icon: 'chatbubbles-outline', action: () => - window.open( - 'https://start9.com/contact', - '_blank', - 'noreferrer', - ), + window.open('https://start9.com/contact', '_blank', 'noreferrer'), detail: true, disabled$: of(false), }, @@ -576,18 +523,18 @@ export class ServerShowPage { ], } - private async addManageClick() { + private addSecurityClick() { this.manageClicks++ + if (this.manageClicks === 5) { this.manageClicks = 0 - const newVal = this.ClientStorageService.toggleShowDevTools() - const toast = await this.toastCtrl.create({ - header: newVal ? 'Dev tools unlocked' : 'Dev tools hidden', - position: 'bottom', - duration: 1000, - }) - - await toast.present() + this.alerts + .open( + this.clientStorageService.toggleShowDevTools() + ? 'Dev tools unlocked' + : 'Dev tools hidden', + ) + .subscribe() } } @@ -595,7 +542,7 @@ export class ServerShowPage { this.powerClicks++ if (this.powerClicks === 5) { this.powerClicks = 0 - this.ClientStorageService.toggleShowDiskRepair() + this.clientStorageService.toggleShowDiskRepair() } } diff --git a/frontend/projects/ui/src/app/apps/ui/pages/system/server-specs/server-specs.page.html b/frontend/projects/ui/src/app/apps/ui/pages/system/server-specs/server-specs.page.html index 2cebf019e..0c3b24f92 100644 --- a/frontend/projects/ui/src/app/apps/ui/pages/system/server-specs/server-specs.page.html +++ b/frontend/projects/ui/src/app/apps/ui/pages/system/server-specs/server-specs.page.html @@ -21,68 +21,18 @@
Git Hash
{{ gitHash }}
Tor
-{{ torAddress }}
-
-
-
-
-
-
- LAN
-{{ lanAddress }}
-
-
-
-
-
-
- {{ iface.key }} (IPv4)
-{{ ipv4 || 'n/a' }}
-{{ iface.key }} (IPv6)
-{{ ipv6 || 'n/a' }}
-
-
-
-
-
- Platform
- Last Active
-
-
-
-
-
-
-
-
-
-
-
+ ()
+ private readonly remoteOther$: Observable =
+ this.sessions$.pipe(
+ map(s =>
+ Object.entries(s.sessions)
+ .filter(([id, _]) => id !== s.current)
+ .map(([id, session]) => ({
+ id,
+ ...session,
+ }))
+ .sort(
+ (a, b) =>
+ new Date(b['last-active']).valueOf() -
+ new Date(a['last-active']).valueOf(),
+ ),
+ ),
+ )
+
+ readonly currentSession$ = this.sessions$.pipe(
+ map(s => s.sessions[s.current]),
+ shareReplay(),
+ )
+
+ readonly otherSessions$ = merge(this.localOther$, this.remoteOther$)
+
selected: Record = {}
- loading$ = new BehaviorSubject(true)
constructor(
- private readonly loadingCtrl: LoadingController,
- private readonly errToast: ErrorToastService,
+ private readonly loader: LoadingService,
+ private readonly errorService: ErrorService,
private readonly api: ApiService,
) {}
@@ -31,31 +53,6 @@ export class SessionsPage {
return Object.keys(this.selected).length
}
- async ngOnInit() {
- try {
- const sessionInfo = await this.api.getSessions({})
- this.currentSession = sessionInfo.sessions[sessionInfo.current]
- delete sessionInfo.sessions[sessionInfo.current]
- this.otherSessions = Object.entries(sessionInfo.sessions)
- .map(([id, session]) => {
- return {
- id,
- ...session,
- }
- })
- .sort((a, b) => {
- return (
- new Date(b['last-active']).valueOf() -
- new Date(a['last-active']).valueOf()
- )
- })
- } catch (e: any) {
- this.errToast.present(e)
- } finally {
- this.loading$.next(false)
- }
- }
-
async toggleChecked(id: string) {
if (this.selected[id]) {
delete this.selected[id]
@@ -64,30 +61,29 @@ export class SessionsPage {
}
}
- async toggleAll() {
+ async toggleAll(otherSessions: SessionWithId[]) {
if (this.empty) {
- this.otherSessions.forEach(s => (this.selected[s.id] = true))
+ otherSessions.forEach(s => (this.selected[s.id] = true))
} else {
this.selected = {}
}
}
- async kill(): Promise {
+ async kill(otherSessions: SessionWithId[]): Promise {
const ids = Object.keys(this.selected)
- const loader = await this.loadingCtrl.create({
- message: `Terminating session${ids.length > 1 ? 's' : ''}...`,
- })
- await loader.present()
+ const loader = this.loader
+ .open(`Terminating session${ids.length > 1 ? 's' : ''}...`)
+ .subscribe()
try {
await this.api.killSessions({ ids })
this.selected = {}
- this.otherSessions = this.otherSessions.filter(s => !ids.includes(s.id))
+ this.localOther$.next(otherSessions.filter(s => !ids.includes(s.id)))
} catch (e: any) {
- this.errToast.present(e)
+ this.errorService.handleError(e)
} finally {
- loader.dismiss()
+ loader.unsubscribe()
}
}
}
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/system/sideload/sideload.page.ts b/frontend/projects/ui/src/app/apps/ui/pages/system/sideload/sideload.page.ts
index 4674b7bb2..f60b62ca9 100644
--- a/frontend/projects/ui/src/app/apps/ui/pages/system/sideload/sideload.page.ts
+++ b/frontend/projects/ui/src/app/apps/ui/pages/system/sideload/sideload.page.ts
@@ -1,9 +1,9 @@
import { Component } from '@angular/core'
-import { isPlatform, LoadingController, NavController } from '@ionic/angular'
+import { isPlatform, NavController } from '@ionic/angular'
import { ApiService } from 'src/app/services/api/embassy-api.service'
import { Manifest, MarketplacePkg } from '@start9labs/marketplace'
import { ConfigService } from 'src/app/services/config.service'
-import { ErrorToastService } from '@start9labs/shared'
+import { ErrorService, LoadingService } from '@start9labs/shared'
import cbor from 'cbor'
interface Positions {
@@ -28,10 +28,10 @@ export class SideloadPage {
invalid = false
constructor(
- private readonly loadingCtrl: LoadingController,
+ private readonly loader: LoadingService,
private readonly api: ApiService,
private readonly navCtrl: NavController,
- private readonly errToast: ErrorToastService,
+ private readonly errorService: ErrorService,
private readonly config: ConfigService,
) {}
@@ -52,12 +52,7 @@ export class SideloadPage {
async handleUpload() {
if (!this.pkgData) return
- const loader = await this.loadingCtrl.create({
- message: 'Uploading package',
- cssClass: 'loader',
- })
- await loader.present()
-
+ const loader = this.loader.open('Uploading package').subscribe()
const { pkg, file } = this.pkgData
try {
@@ -66,13 +61,13 @@ export class SideloadPage {
icon: pkg.icon,
size: file.size,
})
- this.api.uploadPackage(guid, file).catch(e => console.error(e))
+ this.api.uploadPackage(guid, file!).catch(e => console.error(e))
this.navCtrl.navigateRoot('/services')
} catch (e: any) {
- this.errToast.present(e)
+ this.errorService.handleError(e)
} finally {
- loader.dismiss()
+ loader.unsubscribe()
this.clear()
}
}
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/system/ssh-keys/ssh-keys.module.ts b/frontend/projects/ui/src/app/apps/ui/pages/system/ssh-keys/ssh-keys.module.ts
index 6192f8f11..84114149a 100644
--- a/frontend/projects/ui/src/app/apps/ui/pages/system/ssh-keys/ssh-keys.module.ts
+++ b/frontend/projects/ui/src/app/apps/ui/pages/system/ssh-keys/ssh-keys.module.ts
@@ -3,8 +3,9 @@ import { CommonModule } from '@angular/common'
import { IonicModule } from '@ionic/angular'
import { RouterModule, Routes } from '@angular/router'
import { SharedPipesModule } from '@start9labs/shared'
-import { GenericInputComponentModule } from 'src/app/apps/ui/modals/generic-input/generic-input.component.module'
+import { PromptModule } from 'src/app/apps/ui/modals/prompt/prompt.module'
import { SSHKeysPage } from './ssh-keys.page'
+import { TuiNotificationModule } from '@taiga-ui/core'
const routes: Routes = [
{
@@ -18,7 +19,8 @@ const routes: Routes = [
CommonModule,
IonicModule,
SharedPipesModule,
- GenericInputComponentModule,
+ PromptModule,
+ TuiNotificationModule,
RouterModule.forChild(routes),
],
declarations: [SSHKeysPage],
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/system/ssh-keys/ssh-keys.page.html b/frontend/projects/ui/src/app/apps/ui/pages/system/ssh-keys/ssh-keys.page.html
index ce2c35b62..ff61301a0 100644
--- a/frontend/projects/ui/src/app/apps/ui/pages/system/ssh-keys/ssh-keys.page.html
+++ b/frontend/projects/ui/src/app/apps/ui/pages/system/ssh-keys/ssh-keys.page.html
@@ -8,20 +8,15 @@
-
-
-
-
-
-
+
Saved Keys
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/system/ssh-keys/ssh-keys.page.ts b/frontend/projects/ui/src/app/apps/ui/pages/system/ssh-keys/ssh-keys.page.ts
index 794e5dd47..68383b86b 100644
--- a/frontend/projects/ui/src/app/apps/ui/pages/system/ssh-keys/ssh-keys.page.ts
+++ b/frontend/projects/ui/src/app/apps/ui/pages/system/ssh-keys/ssh-keys.page.ts
@@ -1,17 +1,11 @@
import { Component } from '@angular/core'
-import {
- AlertController,
- LoadingController,
- ModalController,
-} from '@ionic/angular'
-import { ErrorToastService } from '@start9labs/shared'
-import { BehaviorSubject } from 'rxjs'
+import { ErrorService, LoadingService } from '@start9labs/shared'
+import { TuiDialogService } from '@taiga-ui/core'
+import { BehaviorSubject, filter, take } from 'rxjs'
import { SSHKey } from 'src/app/services/api/api.types'
import { ApiService } from 'src/app/services/api/embassy-api.service'
-import {
- GenericInputComponent,
- GenericInputOptions,
-} from 'src/app/apps/ui/modals/generic-input/generic-input.component'
+import { PROMPT } from 'src/app/apps/ui/modals/prompt/prompt.component'
+import { TUI_PROMPT } from '@taiga-ui/kit'
@Component({
selector: 'ssh-keys',
@@ -24,10 +18,9 @@ export class SSHKeysPage {
loading$ = new BehaviorSubject(true)
constructor(
- private readonly loadingCtrl: LoadingController,
- private readonly modalCtrl: ModalController,
- private readonly errToast: ErrorToastService,
- private readonly alertCtrl: AlertController,
+ private readonly loader: LoadingService,
+ private readonly dialogs: TuiDialogService,
+ private readonly errorService: ErrorService,
private readonly embassyApi: ApiService,
) {}
@@ -39,77 +32,61 @@ export class SSHKeysPage {
try {
this.sshKeys = await this.embassyApi.getSshKeys({})
} catch (e: any) {
- this.errToast.present(e)
+ this.errorService.handleError(e)
} finally {
this.loading$.next(false)
}
}
async presentModalAdd() {
- const options: GenericInputOptions = {
- title: 'SSH Key',
- message:
- 'Enter the SSH public key you would like to authorize for root access to your Embassy.',
- label: '',
- submitFn: (pk: string) => this.add(pk),
- }
-
- const modal = await this.modalCtrl.create({
- component: GenericInputComponent,
- componentProps: { options },
- cssClass: 'alertlike-modal',
- })
- await modal.present()
+ this.dialogs
+ .open(PROMPT, {
+ label: 'SSH Key',
+ data: {
+ message:
+ 'Enter the SSH public key you would like to authorize for root access to your Embassy.',
+ },
+ })
+ .pipe(take(1))
+ .subscribe(pk => this.add(pk))
}
- async add(pubkey: string): Promise {
- const loader = await this.loadingCtrl.create({
- message: 'Saving...',
- })
- await loader.present()
+ presentAlertDelete(key: SSHKey, i: number) {
+ this.dialogs
+ .open(TUI_PROMPT, {
+ label: 'Confirm',
+ size: 's',
+ data: {
+ content: 'Delete key? This action cannot be undone.',
+ yes: 'Delete',
+ no: 'Cancel',
+ },
+ })
+ .pipe(filter(Boolean))
+ .subscribe(() => this.delete(key, i))
+ }
+
+ private async add(pubkey: string): Promise {
+ const loader = this.loader.open('Saving...').subscribe()
try {
const key = await this.embassyApi.addSshKey({ key: pubkey })
this.sshKeys.push(key)
} finally {
- loader.dismiss()
+ loader.unsubscribe()
}
}
- async presentAlertDelete(key: SSHKey, i: number) {
- const alert = await this.alertCtrl.create({
- header: 'Confirm',
- message: 'Delete key? This action cannot be undone.',
- buttons: [
- {
- text: 'Cancel',
- role: 'cancel',
- },
- {
- text: 'Delete',
- handler: () => {
- this.delete(key, i)
- },
- cssClass: 'enter-click',
- },
- ],
- })
- await alert.present()
- }
-
- async delete(key: SSHKey, i: number): Promise {
- const loader = await this.loadingCtrl.create({
- message: 'Deleting...',
- })
- await loader.present()
+ private async delete(key: SSHKey, i: number): Promise {
+ const loader = this.loader.open('Deleting...').subscribe()
try {
await this.embassyApi.deleteSshKey({ fingerprint: key.fingerprint })
this.sshKeys.splice(i, 1)
} catch (e: any) {
- this.errToast.present(e)
+ this.errorService.handleError(e)
} finally {
- loader.dismiss()
+ loader.unsubscribe()
}
}
}
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/system/system.module.ts b/frontend/projects/ui/src/app/apps/ui/pages/system/system.module.ts
index ff4093f02..77bb24b69 100644
--- a/frontend/projects/ui/src/app/apps/ui/pages/system/system.module.ts
+++ b/frontend/projects/ui/src/app/apps/ui/pages/system/system.module.ts
@@ -10,8 +10,18 @@ const routes: Routes = [
),
},
{
- path: 'lan',
- loadChildren: () => import('./lan/lan.module').then(m => m.LANPageModule),
+ path: 'addresses',
+ loadChildren: () =>
+ import('./os-addresses/os-addresses.module').then(
+ m => m.OSAddressesPageModule,
+ ),
+ },
+ {
+ path: 'port-forwards',
+ loadChildren: () =>
+ import('./port-forwards/port-forwards.module').then(
+ m => m.PortForwardsPageModule,
+ ),
},
{
path: 'logs',
@@ -56,6 +66,11 @@ const routes: Routes = [
m => m.ServerSpecsPageModule,
),
},
+ {
+ path: 'domains',
+ loadChildren: () =>
+ import('./domains/domains.module').then(m => m.DomainsPageModule),
+ },
{
path: 'ssh',
loadChildren: () =>
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/system/wifi/wifi.page.ts b/frontend/projects/ui/src/app/apps/ui/pages/system/wifi/wifi.page.ts
index 71f1e285d..842853177 100644
--- a/frontend/projects/ui/src/app/apps/ui/pages/system/wifi/wifi.page.ts
+++ b/frontend/projects/ui/src/app/apps/ui/pages/system/wifi/wifi.page.ts
@@ -1,17 +1,18 @@
-import { Component } from '@angular/core'
-import { ToastController } from '@ionic/angular'
-import { TuiDialogOptions } from '@taiga-ui/core'
+import { Component, Pipe, PipeTransform } from '@angular/core'
+import {
+ TuiAlertService,
+ TuiDialogOptions,
+ TuiNotification,
+} from '@taiga-ui/core'
import { ToggleCustomEvent } from '@ionic/core'
import { ApiService } from 'src/app/services/api/embassy-api.service'
import { AvailableWifi, RR } from 'src/app/services/api/api.types'
-import { pauseFor, ErrorToastService } from '@start9labs/shared'
+import { ErrorService, LoadingService, pauseFor } from '@start9labs/shared'
import { FormDialogService } from 'src/app/services/form-dialog.service'
import { FormContext, FormPage } from 'src/app/apps/ui/modals/form/form.page'
-import { LoadingService } from 'src/app/common/loading/loading.service'
import { PatchDB } from 'patch-db-client'
import { DataModel } from 'src/app/services/patch-db/data-model'
import { ConnectionService } from 'src/app/services/connection.service'
-import { Pipe, PipeTransform } from '@angular/core'
import {
BehaviorSubject,
catchError,
@@ -38,12 +39,14 @@ interface WiFiForm {
})
export class WifiPage {
readonly connected$ = this.connectionService.connected$.pipe(filter(Boolean))
- readonly enabled$ = this.patch.watch$('server-info', 'wifi-enabled').pipe(
- distinctUntilChanged(),
- tap(enabled => {
- if (enabled) this.trigger$.next('')
- }),
- )
+ readonly enabled$ = this.patch
+ .watch$('server-info', 'network', 'wifi', 'enabled')
+ .pipe(
+ distinctUntilChanged(),
+ tap(enabled => {
+ if (enabled) this.trigger$.next('')
+ }),
+ )
readonly trigger$ = new BehaviorSubject('')
readonly localChanges$ = new Subject()
readonly wifi$ = merge(
@@ -53,10 +56,10 @@ export class WifiPage {
constructor(
private readonly api: ApiService,
- private readonly toastCtrl: ToastController,
+ private readonly alerts: TuiAlertService,
private readonly loader: LoadingService,
private readonly formDialog: FormDialogService,
- private readonly errToast: ErrorToastService,
+ private readonly errorService: ErrorService,
private readonly patch: PatchDB,
private readonly connectionService: ConnectionService,
) {}
@@ -70,7 +73,7 @@ export class WifiPage {
try {
await this.api.enableWifi({ enable })
} catch (e: any) {
- this.errToast.present(e)
+ this.errorService.handleError(e)
} finally {
loader.unsubscribe()
}
@@ -85,7 +88,7 @@ export class WifiPage {
await this.api.connectWifi({ ssid })
await this.confirmWifi(ssid)
} catch (e: any) {
- this.errToast.present(e)
+ this.errorService.handleError(e)
} finally {
loader.unsubscribe()
}
@@ -100,7 +103,7 @@ export class WifiPage {
this.localChanges$.next(wifi)
this.trigger$.next('')
} catch (e: any) {
- this.errToast.present(e)
+ this.errorService.handleError(e)
} finally {
loader.unsubscribe()
}
@@ -152,51 +155,27 @@ export class WifiPage {
private getWifi$(): Observable {
return from(this.api.getWifi({}, 10000)).pipe(
catchError((e: any) => {
- this.errToast.present(e)
+ this.errorService.handleError(e)
return []
}),
)
}
- private async presentToastSuccess(): Promise {
- const toast = await this.toastCtrl.create({
- header: 'Connection successful!',
- position: 'bottom',
- duration: 4000,
- buttons: [
- {
- side: 'start',
- icon: 'close',
- handler: () => {
- return true
- },
- },
- ],
- cssClass: 'success-toast',
- })
-
- await toast.present()
+ private presentToastSuccess() {
+ this.alerts
+ .open('Connection successful!', {
+ status: TuiNotification.Success,
+ })
+ .subscribe()
}
private async presentToastFail(): Promise {
- const toast = await this.toastCtrl.create({
- header: 'Failed to connect:',
- message: `Check credentials and try again`,
- position: 'bottom',
- duration: 4000,
- buttons: [
- {
- side: 'start',
- icon: 'close',
- handler: () => {
- return true
- },
- },
- ],
- cssClass: 'warning-toast',
- })
-
- await toast.present()
+ this.alerts
+ .open('Check credentials and try again', {
+ label: 'Failed to connect',
+ status: TuiNotification.Warning,
+ })
+ .subscribe()
}
private async save(
@@ -218,7 +197,7 @@ export class WifiPage {
this.trigger$.next('')
return true
} catch (e: any) {
- this.errToast.present(e)
+ this.errorService.handleError(e)
return false
} finally {
loader.unsubscribe()
@@ -243,7 +222,7 @@ export class WifiPage {
await this.confirmWifi(ssid)
return true
} catch (e: any) {
- this.errToast.present(e)
+ this.errorService.handleError(e)
return false
} finally {
loader.unsubscribe()
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/updates/updates.module.ts b/frontend/projects/ui/src/app/apps/ui/pages/updates/updates.module.ts
index 8fc07fd36..d557ae7bb 100644
--- a/frontend/projects/ui/src/app/apps/ui/pages/updates/updates.module.ts
+++ b/frontend/projects/ui/src/app/apps/ui/pages/updates/updates.module.ts
@@ -2,16 +2,20 @@ import { NgModule } from '@angular/core'
import { CommonModule } from '@angular/common'
import { IonicModule } from '@ionic/angular'
import { RouterModule, Routes } from '@angular/router'
-import { MimeTypePipeModule } from '@start9labs/marketplace'
+import {
+ MimeTypePipeModule,
+ StoreIconComponentModule,
+} from '@start9labs/marketplace'
import {
EmverPipesModule,
MarkdownPipeModule,
+ SafeLinksModule,
SharedPipesModule,
} from '@start9labs/shared'
+import { NgDompurifyModule } from '@tinkoff/ng-dompurify'
import { RoundProgressModule } from 'angular-svg-round-progressbar'
import { BadgeMenuComponentModule } from 'src/app/common/badge-menu-button/badge-menu.component.module'
import { SkeletonListComponentModule } from 'src/app/common/skeleton-list/skeleton-list.component.module'
-import { StoreIconComponentModule } from 'src/app/common/store-icon/store-icon.component.module'
import { UpdatesPage } from './updates.page'
import { InstallProgressPipe } from './install-progress.pipe'
import { FilterUpdatesPipe } from './filter-updates.pipe'
@@ -37,6 +41,8 @@ const routes: Routes = [
StoreIconComponentModule,
EmverPipesModule,
MimeTypePipeModule,
+ SafeLinksModule,
+ NgDompurifyModule,
],
})
export class UpdatesPageModule {}
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/updates/updates.page.html b/frontend/projects/ui/src/app/apps/ui/pages/updates/updates.page.html
index a4c4cc8f0..e0daac362 100644
--- a/frontend/projects/ui/src/app/apps/ui/pages/updates/updates.page.html
+++ b/frontend/projects/ui/src/app/apps/ui/pages/updates/updates.page.html
@@ -11,7 +11,11 @@
- ,
private readonly navCtrl: NavController,
- private readonly loadingCtrl: LoadingController,
- private readonly alertCtrl: AlertController,
+ private readonly loader: LoadingService,
+ private readonly dialogs: TuiDialogService,
+ readonly config: ConfigService,
) {}
viewInMarketplace(event: Event, url: string, id: string) {
@@ -82,11 +82,9 @@ export class UpdatesPage {
}
private async dryUpdate(manifest: Manifest, url: string) {
- const loader = await this.loadingCtrl.create({
- message: 'Checking dependent services...',
- })
- await loader.present()
-
+ const loader = this.loader
+ .open('Checking dependent services...')
+ .subscribe()
const { id, version } = manifest
try {
@@ -94,7 +92,7 @@ export class UpdatesPage {
id,
version: `${version}`,
})
- await loader.dismiss()
+ loader.unsubscribe()
if (isEmptyObject(breakages)) {
this.update(id, version, url)
@@ -112,6 +110,7 @@ export class UpdatesPage {
} catch (e: any) {
delete this.marketplaceService.updateQueue[id]
this.marketplaceService.updateErrors[id] = e.message
+ loader.unsubscribe()
}
}
@@ -119,38 +118,26 @@ export class UpdatesPage {
title: string,
breakages: Breakages,
): Promise {
- let message: string = `As a result of updating ${title}, the following services will no longer work properly and may crash:(TUI_PROMPT, {
+ label: 'Warning',
+ size: 's',
+ data: {
+ content,
+ yes: 'Continue',
+ no: 'Cancel',
},
- {
- text: 'Continue',
- handler: () => {
- resolve(true)
- },
- cssClass: 'enter-click',
- },
- ],
- cssClass: 'alert-warning-message',
- })
-
- await alert.present()
+ })
+ .subscribe(response => resolve(response))
})
}
diff --git a/frontend/projects/ui/src/app/common/form/form-select/form-select.component.ts b/frontend/projects/ui/src/app/common/form/form-select/form-select.component.ts
index b36b1c417..1c4525f86 100644
--- a/frontend/projects/ui/src/app/common/form/form-select/form-select.component.ts
+++ b/frontend/projects/ui/src/app/common/form/form-select/form-select.component.ts
@@ -21,7 +21,7 @@ export class FormSelectComponent extends Control {
}
get selected(): string | null {
- return this.value && this.spec.values[this.value]
+ return (this.value && this.spec.values[this.value]) || null
}
set selected(value: string | null) {
diff --git a/frontend/projects/ui/src/app/common/form/form-text/form-text.component.html b/frontend/projects/ui/src/app/common/form/form-text/form-text.component.html
index 55acd437f..e466d16aa 100644
--- a/frontend/projects/ui/src/app/common/form/form-text/form-text.component.html
+++ b/frontend/projects/ui/src/app/common/form/form-text/form-text.component.html
@@ -1,5 +1,5 @@
-
- User Agent
-
+
+
-
+
+
+
+
+
+
+
+ {{ session['last-active']| date: 'medium' }}
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/projects/ui/src/app/apps/ui/pages/system/sessions/sessions.page.ts b/frontend/projects/ui/src/app/apps/ui/pages/system/sessions/sessions.page.ts
index 6a4a565a5..607d4ce29 100644
--- a/frontend/projects/ui/src/app/apps/ui/pages/system/sessions/sessions.page.ts
+++ b/frontend/projects/ui/src/app/apps/ui/pages/system/sessions/sessions.page.ts
@@ -1,10 +1,9 @@
import { Component } from '@angular/core'
import { Pipe, PipeTransform } from '@angular/core'
-import { LoadingController } from '@ionic/angular'
-import { ErrorToastService } from '@start9labs/shared'
+import { ErrorService, LoadingService } from '@start9labs/shared'
import { ApiService } from 'src/app/services/api/embassy-api.service'
import { PlatformType, Session } from 'src/app/services/api/api.types'
-import { BehaviorSubject } from 'rxjs'
+import { Observable, Subject, from, map, merge, shareReplay } from 'rxjs'
@Component({
selector: 'sessions',
@@ -12,14 +11,37 @@ import { BehaviorSubject } from 'rxjs'
styleUrls: ['sessions.page.scss'],
})
export class SessionsPage {
- currentSession?: Session
- otherSessions: SessionWithId[] = []
+ private readonly sessions$ = from(this.api.getSessions({}))
+ private readonly localOther$ = new Subject
+
-
-
-
- {{ session['last-active']| date: 'medium' }}
+ User Agent
+ Platform
+ Last Active
-
+
+ - You are not logged in anywhere else -
- - -
+
+ {{ session['user-agent'] }}
+ + You are not logged in anywhere else +
+- Adding SSH keys to StartOS is useful for command line access, as well - as for debugging purposes. - - View instructions - -
-
+
+ Adding domains to StartOS enables you to access your server and service
+ interfaces over clearnet.
+ View instructions
+
+
+ What's new
- `
+ let content: string = `As a result of updating ${title}, the following services will no longer work properly and may crash:
- ${title} ` }) - message = `${message}${bullets.join('')}
- `
const localPkgs = await getAllPackages(this.patch)
const bullets = Object.keys(breakages).map(id => {
const title = localPkgs[id].manifest.title
return `