+ {{ selected ? 'Install Type' : 'Select Disk' }}
+{{ error }}
+
+
+
+
+
+
-
-
-
-
- - {{ disk.vendor || 'Unknown Vendor' }} - {{ disk.model || - 'Unknown Model' }} -
-- {{ disk.logicalname }} - {{ disk.capacity | convertBytes - }} -
-
- Re-Install StartOS
-
- Will preserve existing StartOS data
-
-
- {{ (selectedDisk | guid) ? 'Factory Reset' : 'Install
- StartOS' }}
-
-
- Will delete existing data on disk
-
+
+
+
+
+
+
+
+ `,
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DocumentationComponent {
+ @Input({ required: true }) lanAddress!: string
+
+ get crtName(): string {
+ return `${new URL(this.lanAddress).hostname}.crt`
+ }
+}
diff --git a/web/projects/setup-wizard/src/app/components/matrix.component.ts b/web/projects/setup-wizard/src/app/components/matrix.component.ts
new file mode 100644
index 000000000..e2b04a6b3
--- /dev/null
+++ b/web/projects/setup-wizard/src/app/components/matrix.component.ts
@@ -0,0 +1,79 @@
+import {
+ Component,
+ Directive,
+ ElementRef,
+ inject,
+ NgZone,
+ OnInit,
+} from '@angular/core'
+import { WINDOW } from '@ng-web-apis/common'
+
+// a higher fade factor will make the characters fade quicker
+const FADE_FACTOR = 0.07
+
+@Component({
+ standalone: true,
+ selector: 'canvas[matrix]',
+ template: 'Your browser does not support the canvas element.',
+ styles: ':host { position: fixed; }',
+})
+export class MatrixComponent implements OnInit {
+ private readonly ngZone = inject(NgZone)
+ private readonly window = inject(WINDOW)
+ private readonly el: HTMLCanvasElement = inject(ElementRef).nativeElement
+ private readonly ctx = this.el.getContext('2d')!
+
+ private tileSize = 16
+ private columns: any[] = []
+ private maxStackHeight = 0
+
+ ngOnInit() {
+ this.ngZone.runOutsideAngular(() => {
+ this.setupMatrixGrid()
+ this.tick()
+ })
+ }
+
+ private setupMatrixGrid() {
+ this.el.width = Math.max(this.window.innerWidth, 1920)
+ this.el.height = Math.max(this.window.innerHeight, 1080)
+ this.maxStackHeight = Math.ceil(this.ctx.canvas.height / this.tileSize)
+ // divide the canvas into columns
+ for (let i = 0; i < this.ctx.canvas.width / this.tileSize; ++i) {
+ const column = {} as any
+ // save the x position of the column
+ column.x = i * this.tileSize
+ // create a random stack height for the column
+ column.stackHeight = 10 + Math.random() * this.maxStackHeight
+ // add a counter to count the stack height
+ column.stackCounter = 0
+ // add the column to the list
+ this.columns.push(column)
+ }
+ }
+
+ private draw() {
+ // draw a semi transparent black rectangle on top of the scene to slowly fade older characters
+ this.ctx.fillStyle = `rgba(0, 0, 0, ${FADE_FACTOR})`
+ this.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height)
+ // pick a font slightly smaller than the tile size
+ this.ctx.font = `${this.tileSize - 2}px monospace`
+ this.ctx.fillStyle = '#ff4961'
+ for (let i = 0; i < this.columns.length; ++i) {
+ // pick a random ascii character (change the 94 to a higher number to include more characters)
+ const { x, stackCounter } = this.columns[i]
+ const char = String.fromCharCode(33 + Math.floor(Math.random() * 94))
+ this.ctx.fillText(char, x, stackCounter * this.tileSize + this.tileSize)
+ // if the stack is at its height limit, pick a new random height and reset the counter
+ if (++this.columns[i].stackCounter >= this.columns[i].stackHeight) {
+ this.columns[i].stackHeight = 10 + Math.random() * this.maxStackHeight
+ this.columns[i].stackCounter = 0
+ }
+ }
+ }
+
+ private tick() {
+ this.draw()
+ setTimeout(this.tick.bind(this), 50)
+ }
+}
diff --git a/web/projects/setup-wizard/src/app/components/password.component.ts b/web/projects/setup-wizard/src/app/components/password.component.ts
new file mode 100644
index 000000000..2b41a4c0f
--- /dev/null
+++ b/web/projects/setup-wizard/src/app/components/password.component.ts
@@ -0,0 +1,128 @@
+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 {
+ POLYMORPHEUS_CONTEXT,
+ PolymorpheusComponent,
+} from '@tinkoff/ng-polymorpheus'
+import {
+ CifsBackupTarget,
+ DiskBackupTarget,
+} from 'src/app/services/api.service'
+
+interface DialogData {
+ target?: CifsBackupTarget | DiskBackupTarget
+ storageDrive?: boolean
+}
+
+@Component({
+ standalone: true,
+ template: `
+ @if (storageDrive) {
+ Choose a password for your server.
+ Make it good. Write it down.
+ } @else {
+ Enter the password that was used to encrypt this drive.
+ }
+
+
+ `,
+ styles: ['footer { display: flex; gap: 1rem; margin-top: 1rem }'],
+ imports: [
+ FormsModule,
+ ReactiveFormsModule,
+ TuiButtonModule,
+ TuiInputPasswordModule,
+ TuiErrorModule,
+ ],
+})
+export class PasswordComponent {
+ private readonly errorService = inject(ErrorService)
+ private readonly context =
+ inject+ StartOS Address Info +
+ +
+
+
+ Important!
++ Download your server's Root CA and + + follow the instructions + + to establish a secure connection with your server. +
++ Access from home (LAN) +
++ Visit the address below when you are connected to the same WiFi or + Local Area Network (LAN) as your server. +
+
+
+
+ Access on the go (Tor) +
+Visit the address below when you are away from home.
++ Note: + This address will only work from a Tor-enabled browser. + + Follow the instructions + + to get setup. +
+
+
+
- Enter the password that was used to encrypt this drive. -
-- Choose a password for your server. - Make it good. Write it down. -
-Select the physical drive containing your StartOS data
+
+ @if (loading) {
+
-
- Select the physical drive containing your StartOS data
-
-
- - No valid StartOS data drives found. Please make sure the drive - is a valid StartOS data drive (not a backup) and is firmly - connected, then refresh the page. -
- -{{ drive.logicalname }}
-- {{ drive.vendor || 'Unknown Vendor' }} - {{ drive.model || - 'Unknown Model' }} -
-Capacity: {{ drive.capacity | convertBytes }}
-
-
- This is the drive where your StartOS data will be stored.
-
-
-
-
- Please connect a storage drive to your server. Then click
- "Refresh".
-
-
- - {{ drive.vendor || 'Unknown Vendor' }} - {{ drive.model || - 'Unknown Model' }} -
-- {{ drive.logicalname }} - {{ drive.capacity | convertBytes - }} -
-
-
+ @if (!loading) {
+
+
+
+
-
-
-
- Start Fresh
- Get started with a brand new Start9 server
-Recover
- Recover, restore, or transfer StartOS data
-
- Use Existing Drive
-
- Attach an existing StartOS data drive (not a backup)
-
- Transfer
-
-
- Transfer data from an existing StartOS data drive (not a
- backup) to a new, preferred drive
-
-
-
- Restore From Backup (Disaster Recovery)
-
-
- Restore StartOS data from an encrypted backup
-Network Folder
+ Restore StartOS data from a folder on another computer that is connected + to the same network as your server. + + + +Physical Drive
+ Restore StartOS data from a physical drive that is plugged directly into + your server. + + Warning. Do not use this option if you are using a Raspberry Pi with + an external SSD as your main data drive. The Raspberry Pi cannot not + support more than one external drive without additional power and can + cause data corruption. + + + @for (d of drives; track d) { + + } + + + } +
-
-
-
-
-
-
-
-
-
diff --git a/web/projects/setup-wizard/src/app/pages/recover/recover-routing.module.ts b/web/projects/setup-wizard/src/app/pages/recover/recover-routing.module.ts
deleted file mode 100644
index 524458fa8..000000000
--- a/web/projects/setup-wizard/src/app/pages/recover/recover-routing.module.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core'
-import { RouterModule, Routes } from '@angular/router'
-import { RecoverPage } from './recover.page'
-
-const routes: Routes = [
- {
- path: '',
- component: RecoverPage,
- },
-]
-
-@NgModule({
- imports: [RouterModule.forChild(routes)],
- exports: [RouterModule],
-})
-export class RecoverPageRoutingModule { }
diff --git a/web/projects/setup-wizard/src/app/pages/recover/recover.module.ts b/web/projects/setup-wizard/src/app/pages/recover/recover.module.ts
deleted file mode 100644
index eaf04f506..000000000
--- a/web/projects/setup-wizard/src/app/pages/recover/recover.module.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { NgModule } from '@angular/core'
-import { CommonModule } from '@angular/common'
-import { IonicModule } from '@ionic/angular'
-import { FormsModule } from '@angular/forms'
-import { UnitConversionPipesModule } from '@start9labs/shared'
-import { DriveStatusComponent, RecoverPage } from './recover.page'
-import { PasswordPageModule } from '../../modals/password/password.module'
-import { RecoverPageRoutingModule } from './recover-routing.module'
-import { CifsModalModule } from 'src/app/modals/cifs-modal/cifs-modal.module'
-
-@NgModule({
- declarations: [RecoverPage, DriveStatusComponent],
- imports: [
- CommonModule,
- FormsModule,
- IonicModule,
- RecoverPageRoutingModule,
- PasswordPageModule,
- UnitConversionPipesModule,
- CifsModalModule,
- ],
-})
-export class RecoverPageModule {}
diff --git a/web/projects/setup-wizard/src/app/pages/recover/recover.page.html b/web/projects/setup-wizard/src/app/pages/recover/recover.page.html
deleted file mode 100644
index 32f71a3ad..000000000
--- a/web/projects/setup-wizard/src/app/pages/recover/recover.page.html
+++ /dev/null
@@ -1,97 +0,0 @@
-
-
-
-
-
- Network Folder
-- Restore StartOS data from a folder on another computer that is - connected to the same network as your server. -
- - --
- - -
Physical Drive
-
-
- - Warning. Do not use this option if you are using a Raspberry - Pi with an external SSD as your main data drive. The Raspberry - Pi cannot not support more than one external drive without - additional power and can cause data corruption. - -
-
- - Restore StartOS data from a physical drive that is plugged - directly into your server. -
-- - Warning. Do not use this option if you are using a Raspberry - Pi with an external SSD as your main data drive. The Raspberry - Pi cannot not support more than one external drive without - additional power and can cause data corruption. - -
{{ drive.label || drive.logicalname }}
-- {{ drive.vendor || 'Unknown Vendor' }} - {{ drive.model || - 'Unknown Model' }} -
-Capacity: {{ drive.capacity | convertBytes }}
-
+
+
+
+
+ @if (stateService.setupType === 'restore') {
+ You can now safely unplug your backup drive
+ } @else if (stateService.setupType === 'transfer') { +You can now safely unplug your old StartOS data drive
+ } + + + + + Trust your Root CA + + In the new tab, follow instructions to trust your server's Root CA + and log in. + + + Open +
-
-
-
-
-
-
-
diff --git a/web/projects/setup-wizard/src/app/pages/success/download-doc/download-doc.component.ts b/web/projects/setup-wizard/src/app/pages/success/download-doc/download-doc.component.ts
deleted file mode 100644
index 6d8fb54d1..000000000
--- a/web/projects/setup-wizard/src/app/pages/success/download-doc/download-doc.component.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Component, Input } from '@angular/core'
-
-@Component({
- selector: 'download-doc',
- templateUrl: 'download-doc.component.html',
-})
-export class DownloadDocComponent {
- @Input({ required: true }) lanAddress!: string
-
- get crtName(): string {
- const hostname = new URL(this.lanAddress).hostname
- return `${hostname}.crt`
- }
-}
diff --git a/web/projects/setup-wizard/src/app/pages/success/success-routing.module.ts b/web/projects/setup-wizard/src/app/pages/success/success-routing.module.ts
deleted file mode 100644
index 33c6de9be..000000000
--- a/web/projects/setup-wizard/src/app/pages/success/success-routing.module.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core'
-import { RouterModule, Routes } from '@angular/router'
-import { SuccessPage } from './success.page'
-
-const routes: Routes = [
- {
- path: '',
- component: SuccessPage,
- },
-]
-
-@NgModule({
- imports: [RouterModule.forChild(routes)],
- exports: [RouterModule],
-})
-export class SuccessPageRoutingModule {}
diff --git a/web/projects/setup-wizard/src/app/pages/success/success.module.ts b/web/projects/setup-wizard/src/app/pages/success/success.module.ts
deleted file mode 100644
index ef937ded7..000000000
--- a/web/projects/setup-wizard/src/app/pages/success/success.module.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { NgModule } from '@angular/core'
-import { CommonModule } from '@angular/common'
-import { IonicModule } from '@ionic/angular'
-import { FormsModule } from '@angular/forms'
-import { ResponsiveColDirective } from '@start9labs/shared'
-
-import { SuccessPage } from './success.page'
-import { PasswordPageModule } from '../../modals/password/password.module'
-import { SuccessPageRoutingModule } from './success-routing.module'
-import { DownloadDocComponent } from './download-doc/download-doc.component'
-
-@NgModule({
- imports: [
- CommonModule,
- FormsModule,
- IonicModule,
- PasswordPageModule,
- SuccessPageRoutingModule,
- ResponsiveColDirective,
- ],
- declarations: [SuccessPage, DownloadDocComponent],
- exports: [SuccessPage],
-})
-export class SuccessPageModule {}
diff --git a/web/projects/setup-wizard/src/app/pages/success/success.page.html b/web/projects/setup-wizard/src/app/pages/success/success.page.html
deleted file mode 100644
index dbce29073..000000000
--- a/web/projects/setup-wizard/src/app/pages/success/success.page.html
+++ /dev/null
@@ -1,102 +0,0 @@
-
-- StartOS Address Info -
- -
-
-
- Important!
-- Download your server's Root CA and - - follow the instructions - - to establish a secure connection with your server. -
-- Access from home (LAN) -
-- Visit the address below when you are connected to the same WiFi or - Local Area Network (LAN) as your server. -
-
-
-
- Access on the go (Tor) -
-Visit the address below when you are away from home.
-- Note: - This address will only work from a Tor-enabled browser. - - Follow the instructions - - to get setup. -
-
-
-
-
- Setup Complete!
-
-
-
-
- Setup Complete!
-- You can now safely unplug your backup drive -
-- You can now safely unplug your old StartOS data drive -
-
-
-
- Download address info
-
-
-
-
-
-
- Trust your Root CA
-
-
-
-
-
- - start.local was for setup purposes only. It will no - longer work. -
-
-
- Download
-- In the new tab, follow instructions to trust your - server's Root CA and log in. -
-
-
-
-
- Open
-
-
- Select the physical drive containing your StartOS data
-
-
- {{ drive.logicalname }}
-- {{ drive.vendor || 'Unknown Vendor' }} - {{ drive.model || - 'Unknown Model' }} -
-Capacity: {{ drive.capacity | convertBytes }}
-
-
-
-Initializing StartOS
-
- Progress: {{ (progress * 100).toFixed(0) }}%
-
-
-
- {{ getMessage(progress) }}
-+ Initializing StartOS +
+
+ Progress: {{ (progress * 100).toFixed(0) }}%
+
+
+
+ {{ getMessage(progress) }}
+{{ text }}
-
-
-
-
-
-
-
-
-
-
-
-
- Autoscroll
-${
- success ? 'Reconnected' : 'Disconnected'
- } at ${toLocalIsoString(new Date())}
`
- container?.append(elem)
- if (this.isOnBottom) {
- setTimeout(() => {
- this.scrollToBottom()
- }, 25)
- }
- }
-
- private processRes(res: FetchLogsRes) {
- const { entries, 'start-cursor': startCursor } = res
-
- if (!entries.length) return
-
- const container = document.getElementById('container')
- const newLogs = document.getElementById('template')?.cloneNode()
-
- if (!(newLogs instanceof HTMLElement)) return
-
- newLogs.innerHTML = this.convertToAnsi(entries)
-
- // if response contains a startCursor, it means we are scrolling backwards
- if (startCursor) {
- this.startCursor = startCursor
-
- const beforeContainerHeight = container?.scrollHeight || 0
- container?.prepend(newLogs)
- const afterContainerHeight = container?.scrollHeight || 0
-
- // maintain scroll height
- setTimeout(() => {
- this.content?.scrollToPoint(
- 0,
- afterContainerHeight - beforeContainerHeight,
- )
- }, 25)
-
- if (entries.length < this.limit) {
- this.infiniteStatus = 2
- }
- } else {
- container?.append(newLogs)
- if (this.autoScroll) {
- setTimeout(() => {
- this.scrollToBottom()
- }, 25)
- }
- }
- }
-
- private convertToAnsi(entries: Log[]) {
- return entries
- .map(
- entry =>
- `${toLocalIsoString(
- new Date(entry.timestamp),
- )} ${convert.toHtml(entry.message)}`,
- )
- .join('') - } -} diff --git a/web/projects/ui/src/app/common/widget-list/widget-list.component.module.ts b/web/projects/ui/src/app/common/widget-list/widget-list.component.module.ts index 0fdec7d01..b75bad20b 100644 --- a/web/projects/ui/src/app/common/widget-list/widget-list.component.module.ts +++ b/web/projects/ui/src/app/common/widget-list/widget-list.component.module.ts @@ -2,14 +2,13 @@ import { NgModule } from '@angular/core' import { CommonModule } from '@angular/common' import { IonicModule } from '@ionic/angular' import { RouterModule } from '@angular/router' -import { ResponsiveColDirective } from '@start9labs/shared' import { AnyLinkComponent } from './any-link/any-link.component' import { WidgetListComponent } from './widget-list.component' import { WidgetCardComponent } from './widget-card/widget-card.component' @NgModule({ declarations: [WidgetListComponent, WidgetCardComponent, AnyLinkComponent], - imports: [CommonModule, IonicModule, RouterModule, ResponsiveColDirective], + imports: [CommonModule, IonicModule, RouterModule], exports: [WidgetListComponent], }) export class WidgetListComponentModule {}