Skip to content

Commit

Permalink
feat(portal): refactor settings (#2536)
Browse files Browse the repository at this point in the history
* feat(portal): refactor settings

* chore: refactor

* small updates

---------

Co-authored-by: Matt Hill <[email protected]>
  • Loading branch information
waterplea and MattDHill authored Dec 8, 2023
1 parent 7324a49 commit ad13b5e
Show file tree
Hide file tree
Showing 54 changed files with 7,640 additions and 4,540 deletions.
8,686 changes: 4,228 additions & 4,458 deletions web/package-lock.json

Large diffs are not rendered by default.

16 changes: 8 additions & 8 deletions web/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -46,14 +46,14 @@
"@start9labs/argon2": "^0.1.0",
"@start9labs/emver": "^0.1.5",
"@start9labs/start-sdk": "0.4.0-rev0.lib0.rc8.beta2",
"@taiga-ui/addon-charts": "3.53.0",
"@taiga-ui/addon-mobile": "3.53.0",
"@taiga-ui/cdk": "3.53.0",
"@taiga-ui/core": "3.53.0",
"@taiga-ui/experimental": "3.53.0",
"@taiga-ui/icons": "3.53.0",
"@taiga-ui/kit": "3.53.0",
"@taiga-ui/styles": "3.53.0",
"@taiga-ui/addon-charts": "3.56.0",
"@taiga-ui/addon-mobile": "3.56.0",
"@taiga-ui/cdk": "3.56.0",
"@taiga-ui/core": "3.56.0",
"@taiga-ui/experimental": "3.56.0",
"@taiga-ui/icons": "3.56.0",
"@taiga-ui/kit": "3.56.0",
"@taiga-ui/styles": "3.56.0",
"@tinkoff/ng-dompurify": "4.0.0",
"@tinkoff/ng-event-plugins": "3.1.0",
"ansi-to-html": "^0.7.2",
Expand Down
26 changes: 9 additions & 17 deletions web/projects/shared/styles/taiga.scss
Original file line number Diff line number Diff line change
@@ -1,23 +1,10 @@
@import '@taiga-ui/core/styles/taiga-ui-local';

/* stylelint-disable order/order */
[tuiWrapper][data-appearance='secondary-warning'] {
[tuiAppearance][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);
}
Expand All @@ -27,18 +14,23 @@
}
}

[tuiWrapper][data-appearance='success'] {
[tuiAppearance][data-appearance='icon-success'] {
color: var(--tui-success-fill);
}

[tuiWrapper][data-appearance='warning'] {
[tuiAppearance][data-appearance='icon-warning'] {
color: var(--tui-warning-fill);
}

[tuiWrapper][data-appearance='error'] {
[tuiAppearance][data-appearance='icon-error'] {
color: var(--tui-error-fill);
}

[tuiAppearance][data-appearance='flat'],
[tuiAppearance][data-appearance='outline'] {
color: var(--tui-text-01);
}

[tuiWrapper][data-appearance='input-file'] {
&:hover,
&:active {
Expand Down
1 change: 1 addition & 0 deletions web/projects/ui/src/app/app.component.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<tui-root
*ngIf="widgetDrawer$ | async as drawer"
tuiTheme="night"
[tuiMode]="(theme$ | async) === 'Dark' ? 'onDark' : null"
[style.--widgets-width.px]="drawer.open ? drawer.width : 0"
>
Expand Down
6 changes: 1 addition & 5 deletions web/projects/ui/src/app/app.providers.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { APP_INITIALIZER, Provider } from '@angular/core'
import { UntypedFormBuilder } from '@angular/forms'
import { Router, RouteReuseStrategy } from '@angular/router'
import { IonicRouteStrategy, IonNav } from '@ionic/angular'
import { IonNav } from '@ionic/angular'
import { TUI_DATE_FORMAT, TUI_DATE_SEPARATOR } from '@taiga-ui/cdk'
import {
tuiNumberFormatProvider,
Expand Down Expand Up @@ -54,10 +54,6 @@ export const APP_PROVIDERS: Provider[] = [
provide: TUI_DATE_TIME_VALUE_TRANSFORMER,
useClass: DatetimeTransformerService,
},
{
provide: RouteReuseStrategy,
useClass: IonicRouteStrategy,
},
{
provide: ApiService,
useClass: useMocks ? MockApiService : LiveApiService,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import { CommonModule } from '@angular/common'
import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
import { CopyService, EmverPipesModule } from '@start9labs/shared'
import {
TuiButtonModule,
TuiCellModule,
TuiTitleModule,
} from '@taiga-ui/experimental'
import { PolymorpheusComponent } from '@tinkoff/ng-polymorpheus'
import { PatchDB } from 'patch-db-client'
import { DataModel } from 'src/app/services/patch-db/data-model'
import { ConfigService } from 'src/app/services/config.service'

@Component({
template: `
<ng-container *ngIf="server$ | async as server">
<div tuiCell>
<div tuiTitle>
<strong>Version</strong>
<div tuiSubtitle>{{ server.version | displayEmver }}</div>
</div>
</div>
<div tuiCell>
<div tuiTitle>
<strong>Git Hash</strong>
<div tuiSubtitle>{{ gitHash }}</div>
</div>
<button
tuiIconButton
appearance="icon"
iconLeft="tuiIconCopy"
(click)="copyService.copy(gitHash)"
>
Copy
</button>
</div>
<div tuiCell>
<div tuiTitle>
<strong>CA fingerprint</strong>
<div tuiSubtitle>{{ server['ca-fingerprint'] }}</div>
</div>
<button
tuiIconButton
appearance="icon"
iconLeft="tuiIconCopy"
(click)="copyService.copy(server['ca-fingerprint'])"
>
Copy
</button>
</div>
</ng-container>
`,
styles: ['[tuiCell] { padding-inline: 0 }'],
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [
CommonModule,
EmverPipesModule,
TuiTitleModule,
TuiButtonModule,
TuiCellModule,
],
})
export class AboutComponent {
readonly server$ = inject(PatchDB<DataModel>).watch$('server-info')
readonly copyService = inject(CopyService)
readonly gitHash = inject(ConfigService).gitHash
}

export const ABOUT = new PolymorpheusComponent(AboutComponent)
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
import {
TuiDataListModule,
TuiDialogService,
TuiHostedDropdownModule,
TuiSvgModule,
} from '@taiga-ui/core'
import { TuiButtonModule } from '@taiga-ui/experimental'
import { ApiService } from 'src/app/services/api/embassy-api.service'
import { AuthService } from 'src/app/services/auth.service'
import { ABOUT } from './about.component'

@Component({
selector: 'header-menu',
Expand All @@ -23,7 +25,7 @@ import { AuthService } from 'src/app/services/auth.service'
<ng-template #content>
<tui-data-list>
<h3 class="title">StartOS</h3>
<button tuiOption class="item" (click)="({})">
<button tuiOption class="item" (click)="about()">
<tui-svg src="tuiIconInfo"></tui-svg>
About this server
</button>
Expand Down Expand Up @@ -101,6 +103,11 @@ import { AuthService } from 'src/app/services/auth.service'
export class HeaderMenuComponent {
private readonly api = inject(ApiService)
private readonly auth = inject(AuthService)
private readonly dialogs = inject(TuiDialogService)

about() {
this.dialogs.open(ABOUT, { label: 'About this server' }).subscribe()
}

logout() {
this.api.logout({}).catch(e => console.error('Failed to log out', e))
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ import { NotificationService } from '../../services/notification.service'
<button
tuiIconButton
iconLeft="tuiIconCloudLarge"
appearance="success"
appearance="icon-success"
[style.margin-left]="'auto'"
>
Connection
Expand All @@ -48,7 +48,7 @@ import { NotificationService } from '../../services/notification.service'
<button
tuiIconButton
iconLeft="tuiIconBellLarge"
appearance="warning"
appearance="icon-warning"
(click)="handleNotificationsClick(unread || 0)"
>
Notifications
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@ export const SYSTEM_UTILITIES: Record<string, { icon: string; title: string }> =
icon: 'tuiIconUploadLarge',
title: 'Sideload',
},
'/portal/system/settings': {
icon: 'tuiIconToolLarge',
title: 'Settings',
},
'/portal/system/snek': {
icon: 'assets/img/icon_transparent.png',
title: 'Snek',
Expand Down
4 changes: 2 additions & 2 deletions web/projects/ui/src/app/apps/portal/portal.component.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<header appHeader>My server</header>
<nav appNavigation></nav>
<main>
<router-outlet></router-outlet>
<router-outlet />
</main>
<app-drawer></app-drawer>
<app-drawer />
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { CommonModule } from '@angular/common'
import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
import { ActivatedRoute, Router, RouterModule } from '@angular/router'
import { TuiSvgModule } from '@taiga-ui/core'
import { TuiIconModule } from '@taiga-ui/experimental'
import { PatchDB } from 'patch-db-client'
import { distinctUntilChanged, filter, map, switchMap, tap } from 'rxjs'
import {
Expand All @@ -20,10 +20,10 @@ import { NavigationService } from '../../../services/navigation.service'
[routerLink]="getLink(service.manifest.id)"
(isActiveChange)="onActive(service, $event)"
>
<tui-svg src="tuiIconChevronLeftLarge" />
<tui-icon icon="tuiIconChevronLeft" />
{{ service.manifest.title }}
</a>
<router-outlet></router-outlet>
<router-outlet />
`,
styles: [
`
Expand All @@ -44,7 +44,7 @@ import { NavigationService } from '../../../services/navigation.service'
host: { class: 'g-page' },
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [CommonModule, RouterModule, TuiSvgModule],
imports: [CommonModule, RouterModule, TuiIconModule],
})
export class ServiceOutletComponent {
private readonly patch = inject(PatchDB<DataModel>)
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import { CommonModule } from '@angular/common'
import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
import { RouterLink } from '@angular/router'
import { TuiIconModule, TuiTitleModule } from '@taiga-ui/experimental'
import { SettingBtn } from '../settings.types'

@Component({
selector: 'settings-button',
template: `
<button *ngIf="button.action" class="g-action" (click)="button.action()">
<ng-container *ngTemplateOutlet="template" />
</button>
<a
*ngIf="button.href"
class="g-action"
target="_blank"
rel="noreferrer"
[href]="button.href"
>
<ng-container *ngTemplateOutlet="template" />
</a>
<a
*ngIf="button.routerLink"
class="g-action"
[routerLink]="button.routerLink"
>
<ng-container *ngTemplateOutlet="template" />
</a>
<ng-template #template>
<tui-icon [icon]="button.icon" />
<div tuiTitle [style.flex]="1">
<strong>{{ button.title }}</strong>
<div tuiSubtitle>{{ button.description }}</div>
<ng-content />
</div>
<tui-icon *ngIf="button.routerLink" icon="tuiIconChevronRight" />
<tui-icon *ngIf="button.href" icon="tuiIconExternalLink" />
</ng-template>
`,
styles: [
':host:not(:last-child) { display: block; box-shadow: 0 1px var(--tui-clear); }',
],
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [CommonModule, TuiIconModule, TuiTitleModule, RouterLink],
})
export class SettingsButtonComponent {
@Input({ required: true })
button!: SettingBtn
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import { ChangeDetectionStrategy, Component } from '@angular/core'
import { TuiNotificationModule } from '@taiga-ui/core'
import {
TuiButtonModule,
TuiCellModule,
TuiTitleModule,
} from '@taiga-ui/experimental'

@Component({
selector: 'settings-http',
template: `
<tui-notification status="warning">
<div tuiCell [style.padding]="0">
<div tuiTitle>
Http detected
<div tuiSubtitle>
<div>
Tor is faster over https.
<a
href="https://docs.start9.com/0.3.5.x/user-manual/trust-ca"
target="_blank"
rel="noreferrer"
>
Download and trust your server's Root CA
</a>
, then switch to https.
</div>
</div>
</div>
<ng-content />
</div>
</tui-notification>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [
TuiButtonModule,
TuiCellModule,
TuiNotificationModule,
TuiTitleModule,
],
})
export class SettingsHttpsComponent {}
Loading

0 comments on commit ad13b5e

Please sign in to comment.