Start9/start-os
2
0
Fork 0
mirror of https://github.com/Start9Labs/start-os.git synced 2026-03-30 04:01:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: update Taiga UI to 4 release candidate

Browse Source
This commit is contained in:
waterplea
2024-07-15 11:16:19 +05:00
parent a2b1968d6e
commit c7a2e7ada1
219 changed files with 1977 additions and 2176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web/projects/setup-wizard/src/app/app.component.ts
View File

@@ -5,10 +5,7 @@ import { ApiService } from 'src/app/services/api.service'
@Component({
selector: 'app-root',
template: `
<tui-theme-night></tui-theme-night>
<tui-root tuiMode="onDark"><router-outlet /></tui-root>
`,
template: '<tui-root tuiTheme="dark"><router-outlet /></tui-root>',
})
export class AppComponent {
private readonly api = inject(ApiService)

19
web/projects/setup-wizard/src/app/app.module.ts
View File

@@ -3,20 +3,13 @@ import { NgModule } from '@angular/core'
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
import { PreloadAllModules, RouterModule } from '@angular/router'
import {
LoadingModule,
provideSetupLogsService,
provideSetupService,
RELATIVE_URL,
WorkspaceConfig,
} from '@start9labs/shared'
import {
TuiAlertModule,
TuiDialogModule,
TuiModeModule,
TuiRootModule,
TuiThemeNightModule,
} from '@taiga-ui/core'
import { tuiButtonOptionsProvider } from '@taiga-ui/experimental'
import { tuiButtonOptionsProvider, TuiRoot } from '@taiga-ui/core'
import { NG_EVENT_PLUGINS } from '@taiga-ui/event-plugins'
import { ApiService } from 'src/app/services/api.service'
import { LiveApiService } from 'src/app/services/live-api.service'
import { MockApiService } from 'src/app/services/mock-api.service'
@@ -37,14 +30,10 @@ const {
preloadingStrategy: PreloadAllModules,
initialNavigation: 'disabled',
}),
LoadingModule,
TuiRootModule,
TuiDialogModule,
TuiAlertModule,
TuiModeModule,
TuiThemeNightModule,
TuiRoot,
],
providers: [
NG_EVENT_PLUGINS,
provideSetupService(ApiService),
provideSetupLogsService(ApiService),
tuiButtonOptionsProvider({ size: 'm' }),

26
web/projects/setup-wizard/src/app/components/cifs.component.ts
View File

@@ -1,3 +1,4 @@
import { TuiInputModule, TuiInputPasswordModule } from '@taiga-ui/legacy'
import { CommonModule } from '@angular/common'
import { Component, inject, Inject } from '@angular/core'
import {
@@ -9,18 +10,13 @@ import {
} from '@angular/forms'
import { LoadingService, StartOSDiskInfo } from '@start9labs/shared'
import {
TuiButtonModule,
TuiDialogContext,
TuiDialogService,
TuiErrorModule,
TuiError,
TuiButton,
} from '@taiga-ui/core'
import {
TUI_VALIDATION_ERRORS,
TuiFieldErrorPipeModule,
TuiInputModule,
TuiInputPasswordModule,
} from '@taiga-ui/kit'
import { POLYMORPHEUS_CONTEXT } from '@tinkoff/ng-polymorpheus'
import { TUI_VALIDATION_ERRORS, TuiFieldErrorPipe } from '@taiga-ui/kit'
import { POLYMORPHEUS_CONTEXT } from '@taiga-ui/polymorpheus'
import { PASSWORD } from 'src/app/components/password.component'
import {
ApiService,
@@ -40,7 +36,7 @@ interface Context {
<tui-input formControlName="hostname">
Hostname
<input
tuiTextfield
tuiTextfieldLegacy
placeholder="'My Computer' OR 'my-computer.local'"
/>
</tui-input>
@@ -51,7 +47,7 @@ interface Context {
<tui-input formControlName="path" class="input">
Path
<input tuiTextfield placeholder="/Desktop/my-folder'" />
<input tuiTextfieldLegacy placeholder="/Desktop/my-folder'" />
</tui-input>
<tui-error
formControlName="path"
@@ -60,7 +56,7 @@ interface Context {
<tui-input formControlName="username" class="input">
Username
<input tuiTextfield placeholder="Enter username" />
<input tuiTextfieldLegacy placeholder="Enter username" />
</tui-input>
<tui-error
formControlName="username"
@@ -92,11 +88,11 @@ interface Context {
CommonModule,
FormsModule,
ReactiveFormsModule,
TuiButtonModule,
TuiButton,
TuiInputModule,
TuiInputPasswordModule,
TuiErrorModule,
TuiFieldErrorPipeModule,
TuiError,
TuiFieldErrorPipe,
],
providers: [
{

18
web/projects/setup-wizard/src/app/components/password.component.ts
View File

@@ -1,17 +1,13 @@
import { TuiInputPasswordModule } from '@taiga-ui/legacy'
import { Component, inject } from '@angular/core'
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms'
import * as argon2 from '@start9labs/argon2'
import { ErrorService } from '@start9labs/shared'
import {
TuiButtonModule,
TuiDialogContext,
TuiErrorModule,
} from '@taiga-ui/core'
import { TuiInputPasswordModule } from '@taiga-ui/kit'
import { TuiDialogContext, TuiError, TuiButton } from '@taiga-ui/core'
import {
POLYMORPHEUS_CONTEXT,
PolymorpheusComponent,
} from '@tinkoff/ng-polymorpheus'
} from '@taiga-ui/polymorpheus'
import {
CifsBackupTarget,
DiskBackupTarget,
@@ -35,13 +31,13 @@ interface DialogData {
<form [style.margin-top.rem]="1" (ngSubmit)="submit()">
<tui-input-password [formControl]="password">
Enter Password
<input tuiTextfield maxlength="64" />
<input tuiTextfieldLegacy maxlength="64" />
</tui-input-password>
<tui-error [error]="passwordError"></tui-error>
@if (storageDrive) {
<tui-input-password [style.margin-top.rem]="1" [formControl]="confirm">
Retype Password
<input tuiTextfield maxlength="64" />
<input tuiTextfieldLegacy maxlength="64" />
</tui-input-password>
<tui-error [error]="confirmError"></tui-error>
}
@@ -67,9 +63,9 @@ interface DialogData {
imports: [
FormsModule,
ReactiveFormsModule,
TuiButtonModule,
TuiButton,
TuiInputPasswordModule,
TuiErrorModule,
TuiError,
],
})
export class PasswordComponent {

15
web/projects/setup-wizard/src/app/components/recover.component.ts
View File

@@ -1,17 +1,14 @@
import { TuiCell } from '@taiga-ui/layout'
import { TuiIcon, TuiTitle } from '@taiga-ui/core'
import { Component, Input } from '@angular/core'
import { RouterModule } from '@angular/router'
import {
TuiCellModule,
TuiIconModule,
TuiTitleModule,
} from '@taiga-ui/experimental'
@Component({
standalone: true,
selector: 'app-recover',
template: `
<a tuiCell [routerLink]="disabled ? null : '/attach'">
<tui-icon icon="tuiIconBoxLarge" />
<tui-icon icon="@tui.box" />
<span tuiTitle>
<span class="g-success">Use Existing Drive</span>
<span tuiSubtitle>
@@ -20,7 +17,7 @@ import {
</span>
</a>
<a tuiCell [routerLink]="disabled ? null : '/transfer'">
<tui-icon icon="tuiIconShareLarge" />
<tui-icon icon="@tui.share" />
<span tuiTitle>
<span class="g-info">Transfer</span>
<span tuiSubtitle>
@@ -30,14 +27,14 @@ import {
</span>
</a>
<a tuiCell [routerLink]="disabled ? null : '/recover'">
<tui-icon icon="tuiIconSave" />
<tui-icon icon="@tui.save" />
<span tuiTitle>
<span class="g-warning">Restore From Backup (Disaster Recovery)</span>
<span tuiSubtitle>Restore StartOS data from an encrypted backup</span>
</span>
</a>
`,
imports: [RouterModule, TuiIconModule, TuiCellModule, TuiTitleModule],
imports: [RouterModule, TuiIcon, TuiCell, TuiTitle],
})
export class RecoverComponent {
@Input() disabled = false

18
web/projects/setup-wizard/src/app/pages/attach.page.ts
View File

@@ -7,12 +7,8 @@ import {
LoadingService,
toGuid,
} from '@start9labs/shared'
import { TuiDialogService, TuiLoaderModule } from '@taiga-ui/core'
import {
TuiButtonModule,
TuiCardModule,
TuiCellModule,
} from '@taiga-ui/experimental'
import { TuiButton, TuiDialogService, TuiLoader } from '@taiga-ui/core'
import { TuiCardLarge, TuiCell } from '@taiga-ui/layout'
import { PASSWORD } from 'src/app/components/password.component'
import { ApiService } from 'src/app/services/api.service'
import { StateService } from 'src/app/services/state.service'
@@ -34,19 +30,13 @@ import { StateService } from 'src/app/services/state.service'
valid StartOS data drive (not a backup) and is firmly connected, then
refresh the page.
}
<button tuiButton iconLeft="tuiIconRotateCwLarge" (click)="refresh()">
<button tuiButton iconStart="@tui.rotate-cw" (click)="refresh()">
Refresh
</button>
}
</section>
`,
imports: [
TuiButtonModule,
TuiCardModule,
TuiCellModule,
TuiLoaderModule,
DriveComponent,
],
imports: [TuiButton, TuiCardLarge, TuiCell, TuiLoader, DriveComponent],
})
export default class AttachPage {
private readonly apiService = inject(ApiService)

27
web/projects/setup-wizard/src/app/pages/home.page.ts
View File

@@ -2,14 +2,8 @@ import { CommonModule } from '@angular/common'
import { Component, inject, OnInit } from '@angular/core'
import { RouterModule } from '@angular/router'
import { ErrorService } from '@start9labs/shared'
import {
TuiButtonModule,
TuiCardModule,
TuiCellModule,
TuiIconModule,
TuiIconsModule,
TuiTitleModule,
} from '@taiga-ui/experimental'
import { TuiButton, TuiIcon, TuiTitle } from '@taiga-ui/core'
import { TuiCardLarge, TuiCell } from '@taiga-ui/layout'
import { RecoverComponent } from 'src/app/components/recover.component'
import { ApiService } from 'src/app/services/api.service'
import { StateService } from 'src/app/services/state.service'
@@ -26,7 +20,7 @@ import { StateService } from 'src/app/services/state.service'
tuiIconButton
appearance="flat"
class="back"
iconLeft="tuiIconChevronLeft"
iconStart="@tui.chevron-left"
(click)="recover = false"
>
Back
@@ -37,7 +31,7 @@ import { StateService } from 'src/app/services/state.service'
<div class="pages">
<div class="options" [class.options_recover]="recover">
<a tuiCell [routerLink]="error || recover ? null : '/storage'">
<tui-icon icon="tuiIconPlus" />
<tui-icon icon="@tui.plus" />
<span tuiTitle>
<span class="g-success">Start Fresh</span>
<span tuiSubtitle>
@@ -50,7 +44,7 @@ import { StateService } from 'src/app/services/state.service'
[disabled]="error || recover"
(click)="recover = true"
>
<tui-icon icon="tuiIconRotateCw" />
<tui-icon icon="@tui.rotate-cw" />
<span tuiTitle>
<span class="g-warning">Recover</span>
<span tuiSubtitle>
@@ -111,12 +105,11 @@ import { StateService } from 'src/app/services/state.service'
imports: [
CommonModule,
RouterModule,
TuiCardModule,
TuiButtonModule,
TuiIconsModule,
TuiCellModule,
TuiIconModule,
TuiTitleModule,
TuiCardLarge,
TuiButton,
TuiCell,
TuiIcon,
TuiTitle,
RecoverComponent,
],
})

36
web/projects/setup-wizard/src/app/pages/recover.page.ts
View File

@@ -1,15 +1,15 @@
import { Component, inject } from '@angular/core'
import { Router } from '@angular/router'
import { DriveComponent, ErrorService } from '@start9labs/shared'
import { TuiDialogService, TuiLoaderModule } from '@taiga-ui/core'
import {
TuiButtonModule,
TuiCardModule,
TuiCellModule,
TuiIconModule,
TuiTitleModule,
} from '@taiga-ui/experimental'
import { PolymorpheusComponent } from '@tinkoff/ng-polymorpheus'
TuiButton,
TuiDialogService,
TuiIcon,
TuiLoader,
TuiTitle,
} from '@taiga-ui/core'
import { TuiCardLarge, TuiCell } from '@taiga-ui/layout'
import { PolymorpheusComponent } from '@taiga-ui/polymorpheus'
import { filter } from 'rxjs'
import { CifsComponent } from 'src/app/components/cifs.component'
import { PASSWORD } from 'src/app/components/password.component'
@@ -33,7 +33,7 @@ import { StateService } from 'src/app/services/state.service'
to the same network as your server.
<button tuiCell (click)="onCifs()">
<tui-icon icon="tuiIconFolder" />
<tui-icon icon="@tui.folder" />
<span tuiTitle>Open</span>
</button>
@@ -51,29 +51,29 @@ import { StateService } from 'src/app/services/state.service'
<button tuiCell [drive]="d" [disabled]="empty(d)" (click)="select(d)">
<span tuiSubtitle>
@if (empty(d)) {
<tui-icon icon="tuiIconCloudOff" class="g-error" />
<tui-icon icon="@tui.cloud-off" class="g-error" />
<strong>No StartOS backup</strong>
} @else {
<tui-icon icon="tuiIconCloud" class="g-success" />
<tui-icon icon="@tui.cloud" class="g-success" />
<strong>StartOS backup detected</strong>
}
</span>
</button>
}
<button tuiButton iconLeft="tuiIconRotateCwLarge" (click)="refresh()">
<button tuiButton iconStart="@tui.rotate-cw" (click)="refresh()">
Refresh
</button>
}
</section>
`,
imports: [
TuiCardModule,
TuiLoaderModule,
TuiButtonModule,
TuiCellModule,
TuiIconModule,
TuiTitleModule,
TuiCardLarge,
TuiLoader,
TuiButton,
TuiCell,
TuiIcon,
TuiTitle,
DriveComponent,
],
})

22
web/projects/setup-wizard/src/app/pages/storage.page.ts
View File

@@ -7,13 +7,9 @@ import {
LoadingService,
toGuid,
} from '@start9labs/shared'
import { TuiDialogService, TuiLoaderModule } from '@taiga-ui/core'
import {
TuiButtonModule,
TuiCardModule,
TuiCellModule,
} from '@taiga-ui/experimental'
import { TUI_PROMPT } from '@taiga-ui/kit'
import { TuiButton, TuiDialogService, TuiLoader } from '@taiga-ui/core'
import { TUI_CONFIRM } from '@taiga-ui/kit'
import { TuiCardLarge, TuiCell } from '@taiga-ui/layout'
import { filter, of, switchMap } from 'rxjs'
import { PASSWORD } from 'src/app/components/password.component'
import {
@@ -48,18 +44,12 @@ import { StateService } from 'src/app/services/state.service'
</button>
}
<button tuiButton iconLeft="tuiIconRotateCwLarge" (click)="getDrives()">
<button tuiButton iconStart="@tui.rotate-cw" (click)="getDrives()">
Refresh
</button>
</section>
`,
imports: [
TuiCardModule,
TuiLoaderModule,
TuiCellModule,
TuiButtonModule,
DriveComponent,
],
imports: [TuiCardLarge, TuiLoader, TuiCell, TuiButton, DriveComponent],
})
export default class StoragePage {
private readonly api = inject(ApiService)
@@ -125,7 +115,7 @@ export default class StoragePage {
switchMap(unused =>
unused
? of(true)
: this.dialogs.open(TUI_PROMPT, {
: this.dialogs.open(TUI_CONFIRM, {
label: 'Warning',
size: 's',
data: {

28
web/projects/setup-wizard/src/app/pages/success.page.ts
View File

@@ -7,12 +7,8 @@ import {
ViewChild,
} from '@angular/core'
import { DownloadHTMLService, ErrorService } from '@start9labs/shared'
import {
TuiButtonModule,
TuiCardModule,
TuiIconModule,
TuiSurfaceModule,
} from '@taiga-ui/experimental'
import { TuiButton, TuiIcon, TuiSurface } from '@taiga-ui/core'
import { TuiCardLarge } from '@taiga-ui/layout'
import { DocumentationComponent } from 'src/app/components/documentation.component'
import { MatrixComponent } from 'src/app/components/matrix.component'
import { ApiService } from 'src/app/services/api.service'
@@ -25,17 +21,17 @@ import { StateService } from 'src/app/services/state.service'
@if (isKiosk) {
<section tuiCardLarge>
<h1 class="heading">
<tui-icon icon="tuiIconCheckSquare" class="g-success" />
<tui-icon icon="@tui.check-square" class="g-success" />
Setup Complete!
</h1>
<button tuiButton (click)="exitKiosk()" iconRight="tuiIconLogInLarge">
<button tuiButton (click)="exitKiosk()" iconEnd="@tui.log-in">
Continue to Login
</button>
</section>
} @else if (lanAddress) {
<section tuiCardLarge>
<h1 class="heading">
<tui-icon icon="tuiIconCheckSquare" class="g-success" />
<tui-icon icon="@tui.check-square" class="g-success" />
Setup Complete!
</h1>
@if (stateService.setupType === 'restore') {
@@ -51,7 +47,7 @@ import { StateService } from 'src/app/services/state.service'
</span>
<strong class="caps">
Download
<tui-icon icon="tuiIconDownload" />
<tui-icon icon="@tui.download" />
</strong>
</button>
@@ -68,7 +64,7 @@ import { StateService } from 'src/app/services/state.service'
</span>
<strong class="caps">
Open
<tui-icon icon="tuiIconExternalLink" />
<tui-icon icon="@tui.external-link" />
</strong>
</a>
<app-documentation hidden [lanAddress]="lanAddress" />
@@ -93,7 +89,7 @@ import { StateService } from 'src/app/services/state.service'
}
[tuiCardLarge] {
color: var(--tui-text-01);
color: var(--tui-text-primary);
text-decoration: none;
text-align: center;
}
@@ -104,10 +100,10 @@ import { StateService } from 'src/app/services/state.service'
}
`,
imports: [
TuiCardModule,
TuiIconModule,
TuiButtonModule,
TuiSurfaceModule,
TuiCardLarge,
TuiIcon,
TuiButton,
TuiSurface,
MatrixComponent,
DocumentationComponent,
],

25
web/projects/setup-wizard/src/app/pages/transfer.page.ts
View File

@@ -7,16 +7,13 @@ import {
toGuid,
} from '@start9labs/shared'
import {
TuiButton,
TuiDialogOptions,
TuiDialogService,
TuiLoaderModule,
TuiLoader,
} from '@taiga-ui/core'
import {
TuiButtonModule,
TuiCardModule,
TuiCellModule,
} from '@taiga-ui/experimental'
import { TUI_PROMPT, TuiPromptData } from '@taiga-ui/kit'
import { TUI_CONFIRM, TuiConfirmData } from '@taiga-ui/kit'
import { TuiCardLarge, TuiCell } from '@taiga-ui/layout'
import { filter } from 'rxjs'
import { ApiService } from 'src/app/services/api.service'
import { StateService } from 'src/app/services/state.service'
@@ -33,18 +30,12 @@ import { StateService } from 'src/app/services/state.service'
@for (drive of drives; track drive) {
<button tuiCell [drive]="drive" (click)="select(drive)"></button>
}
<button tuiButton iconLeft="tuiIconRotateCwLarge" (click)="refresh()">
<button tuiButton iconStart="@tui.rotate-cw" (click)="refresh()">
Refresh
</button>
</section>
`,
imports: [
TuiCardModule,
TuiCellModule,
TuiButtonModule,
TuiLoaderModule,
DriveComponent,
],
imports: [TuiCardLarge, TuiCell, TuiButton, TuiLoader, DriveComponent],
})
export default class TransferPage {
private readonly apiService = inject(ApiService)
@@ -81,7 +72,7 @@ export default class TransferPage {
select(drive: DiskInfo) {
this.dialogs
.open(TUI_PROMPT, OPTIONS)
.open(TUI_CONFIRM, OPTIONS)
.pipe(filter(Boolean))
.subscribe(() => {
this.stateService.recoverySource = {
@@ -93,7 +84,7 @@ export default class TransferPage {
}
}
const OPTIONS: Partial<TuiDialogOptions<TuiPromptData>> = {
const OPTIONS: Partial<TuiDialogOptions<TuiConfirmData>> = {
label: 'Warning',
size: 's',
data: {

12
web/projects/setup-wizard/src/styles.scss
View File

@@ -24,7 +24,7 @@ router-outlet + * {
[tuiCardLarge] {
width: 100%;
background: var(--tui-base-02);
background: var(--tui-background-base-alt);
margin: auto;
}
}
@@ -43,7 +43,7 @@ header {
p {
font: var(--tui-font-text-m);
color: var(--tui-text-02);
color: var(--tui-text-secondary);
}
}
@@ -53,17 +53,17 @@ h2 {
}
.g-success {
color: var(--tui-success-fill);
color: var(--tui-status-positive);
}
.g-warning {
color: var(--tui-warning-fill);
color: var(--tui-status-warning);
}
.g-error {
color: var(--tui-error-fill);
color: var(--tui-status-negative);
}
.g-info {
color: var(--tui-info-fill);
color: var(--tui-status-info);
}