From 1dad7965d256455522f0d9edb5f9cb11649c96de Mon Sep 17 00:00:00 2001 From: Matt Hill Date: Wed, 1 Nov 2023 13:36:56 -0600 Subject: [PATCH] rework ca-wiz and add icons to menu for warnings (#2486) * rework ca-wiz and add icons to menu for warnings * remove root CA button from home page * load fonts before calling complete in setup wiz --- .../src/app/pages/success/success.page.ts | 28 +-- .../ui/src/app/app/menu/menu.component.html | 8 +- .../ui/src/app/app/menu/menu.component.ts | 9 + .../widget-card/widget-card.component.scss | 17 +- .../widget-list/widget-list.component.html | 9 +- .../widget-list/widget-list.component.scss | 10 +- .../widget-list/widget-list.component.ts | 34 ++-- .../login/ca-wizard/ca-wizard.component.html | 168 ++++++++---------- .../login/ca-wizard/ca-wizard.component.scss | 63 ++++--- .../login/ca-wizard/ca-wizard.component.ts | 31 +--- 10 files changed, 172 insertions(+), 205 deletions(-) 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 d9bdedd46..53bc9afab 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 @@ -45,18 +45,7 @@ export class SuccessPage { async ngAfterViewInit() { this.ngZone.runOutsideAngular(() => this.initMatrix()) - try { - const ret = await this.api.complete() - if (!this.isKiosk) { - this.torAddress = ret['tor-address'] - this.lanAddress = ret['lan-address'].replace(/^https:/, 'http:') - this.cert = ret['root-ca'] - - await this.api.exit() - } - } catch (e: any) { - await this.errCtrl.present(e) - } + setTimeout(() => this.complete(), 1000) } download() { @@ -83,6 +72,21 @@ export class SuccessPage { this.api.exit() } + private async complete() { + try { + const ret = await this.api.complete() + if (!this.isKiosk) { + this.torAddress = ret['tor-address'] + this.lanAddress = ret['lan-address'].replace(/^https:/, 'http:') + this.cert = ret['root-ca'] + + await this.api.exit() + } + } catch (e: any) { + await this.errCtrl.present(e) + } + } + private initMatrix() { this.ctx = this.canvas.nativeElement.getContext('2d')! this.canvas.nativeElement.width = window.innerWidth 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 a82ff4d7a..a54033b67 100644 --- a/frontend/projects/ui/src/app/app/menu/menu.component.html +++ b/frontend/projects/ui/src/app/app/menu/menu.component.html @@ -22,11 +22,17 @@ {{ page.title }} + !synced)), + ) + constructor( private readonly patch: PatchDB, private readonly eosService: EOSService, @@ -119,5 +127,6 @@ export class MenuComponent { private readonly splitPane: SplitPaneTracker, private readonly emver: Emver, private readonly connectionService: ConnectionService, + private readonly config: ConfigService, ) {} } diff --git a/frontend/projects/ui/src/app/components/widget-card/widget-card.component.scss b/frontend/projects/ui/src/app/components/widget-card/widget-card.component.scss index 8b9dd2124..7e8b4e7cd 100644 --- a/frontend/projects/ui/src/app/components/widget-card/widget-card.component.scss +++ b/frontend/projects/ui/src/app/components/widget-card/widget-card.component.scss @@ -19,33 +19,35 @@ ion-card { font-family: 'Open Sans'; padding: 0.6rem; font-weight: 600; - font-size: calc(12px + 0.5vw); - height: 3rem; + height: 2.4rem; } ion-card-content { - min-height: 9rem; + min-height: 8rem; display: flex; flex-direction: column; justify-content: center; align-items: center; ion-icon { - font-size: calc(90px + 0.5vw); + font-size: calc(90px + 0.4vw); --ionicon-stroke-width: 1rem; } } ion-footer { - padding: 1rem; + padding: 0 1rem; font-family: 'Open Sans'; font-size: clamp(1rem, calc(12px + 0.5vw), 1.3rem); - height: 9rem; + height: 4.5rem; width: clamp(13rem, 80%, 18rem); margin: 0 auto; * { max-width: 100%; } + p { + margin-top: 0; + } } .footer-md::before { @@ -54,9 +56,6 @@ ion-card { } @media (max-width: 900px) { - ion-card-title, ion-footer { - height: auto !important; - } ion-footer { width: 10rem; } diff --git a/frontend/projects/ui/src/app/components/widget-list/widget-list.component.html b/frontend/projects/ui/src/app/components/widget-list/widget-list.component.html index 09de70b81..2c013d1c3 100644 --- a/frontend/projects/ui/src/app/components/widget-list/widget-list.component.html +++ b/frontend/projects/ui/src/app/components/widget-list/widget-list.component.html @@ -1,14 +1,7 @@
- + - StartOS - - - - - - - -

Trust your Root Certificate Authority (CA)

-

- Download and trust your server's Root CA to establish secure, encrypted - ( - HTTPS - ) connections with your server -

- - - - -
- - 1 - - -
-

Download Root CA

-

Download your server's Root CA

-
- - + + + +

Trust Your Root CA

+

+ Download and trust your server's Root Certificate Authority to establish a + secure ( + HTTPS + ) connection. You will need to repeat this on every device you use to + connect to your server. +

+
    +
  1. + Download your server's Root CA + . Your server uses its Root CA to generate SSL/TLS certificates for + itself and installed services. These certificates are then used to + encrypt network traffic with your client devices. +
    + Download + -
- - -
- - 2 - - -
-

Trust Root CA

-

Follow instructions for your OS

-
- - View Docs + +
  • + Trust your server's Root CA + . Follow instructions for your OS. By trusting your server's Root CA, + your device can verify the authenticity of encrypted communications with + your server. +
    + + View Instructions -
    • -     - -
    - 3 -
    -

    Go To Login

    -

    - - - - -  {{ caTrusted ? 'Root CA trusted!' : 'Waiting for trust...' }} -

    - - -


    -     -
    - - Open - + +
  • + Test + . If refreshing the page does not work, you may need to quit the browser + and re-open. + Tip: before quitting, bookmark this page or copy the URL. +
    + + Refresh + -
    • -     -     - - - - Skip - - - - -     + + + + Skip + + + + + + +

    Root CA Trusted!

    +

    + You have successfully trusted your server's Root CA and may now log in + securely. +

    + + Go to login + + +     + + - console.warn('Failed Https connection attempt'), - ) - } + await this.testHttps().catch(e => + console.warn('Failed Https connection attempt'), + ) } download() { - this.downloadClicked = true this.document.getElementById('install-cert')?.click() } @@ -43,21 +37,10 @@ export class CAWizardComponent { '_blank', 'noreferrer', ) - this.instructionsClicked = true - this.startDaemon() } - private async startDaemon(): Promise { - this.polling = true - while (this.polling) { - try { - await this.testHttps() - this.polling = false - } catch (e) { - console.warn('Failed Https connection attempt') - await pauseFor(2000) - } - } + refresh() { + this.document.location.reload() } launchHttps() { @@ -68,8 +51,6 @@ export class CAWizardComponent { private async testHttps() { const url = `https://${this.document.location.host}${this.relativeUrl}` await this.api.echo({ message: 'ping' }, url).then(() => { - this.downloadClicked = true - this.instructionsClicked = true this.caTrusted = true }) }