rebased and compiling again

2026-04-01 21:13:09 +00:00 · 2023-11-09 15:35:47 -07:00
parent c491dfdd3a d9cc21f761
commit 7a55c91349
333 changed files with 15121 additions and 18641 deletions
--- a/frontend/projects/setup-wizard/src/app/pages/home/home.page.html
+++ b/frontend/projects/setup-wizard/src/app/pages/home/home.page.html
@@ -4,13 +4,13 @@
      <ion-col class="ion-text-center">
        <div style="padding-bottom: 32px">
          <img
-            src="assets/img/logo.png"
+            src="assets/img/icon.png"
            class="pb-1"
-            style="max-width: 220px"
+            style="max-width: 100px"
          />
        </div>
        <ion-card color="dark">
-          <ion-card-header>
+          <ion-card-header style="padding-bottom: 0">
            <ion-button
              *ngIf="swiper?.activeIndex === 1"
              class="back-button"
--- a/frontend/projects/setup-wizard/src/app/pages/home/home.page.scss
+++ b/frontend/projects/setup-wizard/src/app/pages/home/home.page.scss
@@ -11,7 +11,3 @@
  text-align: center;
  justify-content: center;
 }
-
-ion-card-title {
-  font-variant-caps: all-small-caps;
-}
--- a/frontend/projects/setup-wizard/src/app/pages/success/download-doc/download-doc.component.html
+++ b/frontend/projects/setup-wizard/src/app/pages/success/download-doc/download-doc.component.html
@@ -37,7 +37,7 @@
          <p>
            Download your server's Root CA and
            <a
-              href="https://docs.start9.com/latest/user-manual/connecting/connecting-lan"
+              href="https://docs.start9.com/0.3.5.x/user-manual/connecting-lan"
              target="_blank"
              rel="noreferrer"
              style="color: #6866cc; font-weight: bold; text-decoration: none"
@@ -104,7 +104,7 @@
          <span style="font-weight: bold">Note:</span>
          This address will only work from a Tor-enabled browser.
          <a
-            href="https://docs.start9.com/latest/user-manual/connecting/connecting-tor"
+            href="https://docs.start9.com/0.3.5.x/user-manual/connecting-tor"
            target="_blank"
            rel="noreferrer"
            style="color: #6866cc; font-weight: bold; text-decoration: none"
--- a/frontend/projects/setup-wizard/src/app/pages/success/success.page.html
+++ b/frontend/projects/setup-wizard/src/app/pages/success/success.page.html
@@ -8,23 +8,21 @@
          <ion-card>
            <ion-row class="ion-align-items-center">
              <ion-col responsiveCol sizeXs="12" class="ion-text-center">
-                <div class="inline" style="margin-bottom: 3rem">
+                <div class="inline mb-12">
                  <ion-icon
                    name="checkmark-circle-outline"
                    color="success"
                  ></ion-icon>
                  <h1>Setup Complete!</h1>
                </div>
-                <div class="card-container">
-                  <ion-card id="exit" (click)="exitKiosk()">
-                    <div class="container">
-                      <div class="inline">
-                        <p>Continue to login</p>
-                        <ion-icon name="log-in-outline"></ion-icon>
-                      </div>
-                    </div>
-                  </ion-card>
-                </div>
+                <ion-button
+                  shape="round"
+                  class="login-button mb-12"
+                  (click)="exitKiosk()"
+                >
+                  Continue to Login
+                  <ion-icon name="log-in-outline" slot="end"></ion-icon>
+                </ion-button>
              </ion-col>
            </ion-row>
          </ion-card>
@@ -34,8 +32,8 @@
          <ion-card *ngIf="lanAddress">
            <ion-row class="ion-align-items-center">
              <ion-col responsiveCol sizeXs="12" class="ion-text-center">
-                <div style="margin-bottom: 4rem">
-                  <div class="inline">
+                <div class="mb-12">
+                  <div class="inline-container setup">
                    <ion-icon
                      name="checkmark-circle-outline"
                      color="success"
@@ -52,35 +50,40 @@
                <div class="card-container">
                  <ion-card id="information" (click)="download()">
                    <ion-card-content>
-                      <ion-card-title>
-                        Download permanent address info
-                      </ion-card-title>
+                      <ion-card-title>Download address info</ion-card-title>
                      <p>
                        start.local was for setup purposes only. It will no
                        longer work.
                      </p>
                    </ion-card-content>
                    <ion-footer>
-                      <div class="container">
-                        <div class="inline">
-                          <p>Download</p>
-                          <ion-icon name="download-outline"></ion-icon>
-                        </div>
+                      <div class="inline-container">
+                        <p class="action-text">Download</p>
+                        <ion-icon slot="end" name="download-outline"></ion-icon>
                      </div>
                    </ion-footer>
                  </ion-card>
                  <ion-card
-                    [disabled]="disableLogin"
                    id="launch"
+                    [disabled]="disableLogin"
                    href="{{ lanAddress }}"
                    target="_blank"
                  >
-                    <div class="container">
-                      <div class="inline">
-                        <p>Login to StartOS</p>
-                        <ion-icon name="open-outline"></ion-icon>
+                    <ion-card-content>
+                      <ion-card-title>Trust your Root CA</ion-card-title>
+                      <p>
+                        In the new tab, follow instructions to trust your
+                        server's Root CA and log in.
+                      </p>
+                    </ion-card-content>
+                    <ion-footer>
+                      <div class="container">
+                        <div class="inline-container">
+                          <p class="action-text">Open</p>
+                          <ion-icon slot="end" name="open-outline"></ion-icon>
+                        </div>
                      </div>
-                    </div>
+                    </ion-footer>
                  </ion-card>
                </div>
              </ion-col>
--- a/frontend/projects/setup-wizard/src/app/pages/success/success.page.scss
+++ b/frontend/projects/setup-wizard/src/app/pages/success/success.page.scss
@@ -18,19 +18,24 @@ ion-content {

 ion-grid {
  max-width: 760px;
-  height: 100%;
 }

-.grid-center-wrapper {
-  height: 100%;
-  width: 100%;
+.inline-container {
  display: flex;
  justify-content: center;
  align-items: center;
 }

+.card-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+}
+
 ion-card {
-  padding: 3rem;
+  padding: 2.4rem;

  h1 {
    color: var(--ion-color-success);
@@ -44,14 +49,14 @@ ion-card {
    margin-bottom: 2rem;
  }

+  // download info card
  ion-card {
-    max-width: 91%;
-    min-width: 91%;
+    min-height: 260px;
+    width: 80%;
    background: #615F5F;
    color: var(--ion-text-color);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 44px;
-    margin: auto;
    text-align: left;
    cursor: pointer;
    position: relative;
@@ -70,14 +75,6 @@ ion-card {
      font-size: 1.3rem;
    }

-    ion-card-content {
-      padding-bottom: 4rem;
-
-      p {
-        padding: 1rem 0;
-      }
-    }
-
    ion-footer {
      position: absolute;
      bottom: 10px;
@@ -100,19 +97,24 @@ ion-card {
    }
  }

-  .container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  #exit {
-    background: var(--color-accent);
-    height: 100%;
-
-    .container p {
-      font-size: 1.4rem !important;
-      font-weight: bold;
+  .login-button {
+    --background: var(--color-accent);
+    --padding-bottom: 2.5rem;
+    --padding-top: 2.5rem;
+    --padding-start: 2.5rem;
+    --padding-end: 2.5rem;
+    --border-radius: 44px;
+    font-size: 1.4rem !important;
+    font-weight: bold;
+    text-transform: none;
+    letter-spacing: normal;
+    transition: all 350ms ease;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  
+    &:hover {
+      transition-property: transform;
+      transform: scale(1.05);
+      transition-delay: 40ms;
    }

    ion-icon {
@@ -120,40 +122,62 @@ ion-card {
    }
  }

-  #launch {
-    background: var(--alt-blue);
-    height: 100%;
-    
-    .container p {
-      font-size: 1.4rem !important;
-      font-weight: bold;
-    }
-
-    ion-icon {
-      font-size: 1.7rem;
-    }
+  .launch-button {
+    --background: var(--alt-blue);
  }
  
-  #information:after {
+  #information:after, #launch:after {
    content: '';
    position: absolute;
    left: 0;
-    top: 80%;
+    top: 79%;
    width: 100%;
    height: 100%;
    background: var(--color-accent);
  }
+
+  #launch:after {
+    background: var(--alt-blue);
+  }
+
 }

-.card-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 2rem;
+.mb-12 {
+  margin-bottom: 3rem;
 }

-.emphasis-warn {
-  font-weight: 600;
-  color: var(--ion-color-warning);
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
+.pt-1 {
+  padding-top: 0.25rem;
+}
+
+
+.action-text {
+  font-variant-caps: all-small-caps;
+  padding-right: 0.5rem;
+  font-size: 1.5rem !important;
+  letter-spacing: 0.03rem;
+  padding-bottom: 0.1rem;
+}
+
+@media (max-width: 700px) {
+  .setup {
+    flex-direction: column;
+  }
+
+  ion-card {
+    ion-card {
+      width: 100%;
+      padding-bottom: unset;
+    }
+    #information:after {
+      top: 84%;
+    }
+    #launch:after {
+      top: 85%;
+    }
+  }
 }
--- a/frontend/projects/setup-wizard/src/app/pages/success/success.page.ts
+++ b/frontend/projects/setup-wizard/src/app/pages/success/success.page.ts
@@ -46,18 +46,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.errorService.handleError(e)
-    }
+    setTimeout(() => this.complete(), 1000)
  }

  download() {
@@ -84,6 +73,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'].replace(/^https:/, 'http:')
+        this.lanAddress = ret['lan-address'].replace(/^https:/, 'http:')
+        this.cert = ret['root-ca']
+
+        await this.api.exit()
+      }
+    } catch (e: any) {
+      this.errorService.handleError(e)
+    }
+  }
+
  private initMatrix() {
    this.ctx = this.canvas.nativeElement.getContext('2d')!
    this.canvas.nativeElement.width = window.innerWidth
--- a/frontend/projects/setup-wizard/src/app/services/api/mock-api.service.ts
+++ b/frontend/projects/setup-wizard/src/app/services/api/mock-api.service.ts
@@ -44,14 +44,14 @@ export class MockApiService extends ApiService {
    await pauseFor(1000)
    return [
      {
-        logicalname: 'abcd',
-        vendor: 'Samsung',
-        model: 'T5',
+        logicalname: '/dev/nvme0n1p3',
+        vendor: 'Unknown Vendor',
+        model: 'Samsung SSD - 970 EVO Plus 2TB',
        partitions: [
          {
            logicalname: 'pabcd',
            label: null,
-            capacity: 73264762332,
+            capacity: 1979120929996,
            used: null,
            'embassy-os': {
              version: '0.2.17',
@@ -63,13 +63,13 @@ export class MockApiService extends ApiService {
            guid: null,
          },
        ],
-        capacity: 123456789123,
+        capacity: 1979120929996,
        guid: 'uuid-uuid-uuid-uuid',
      },
      {
        logicalname: 'dcba',
-        vendor: 'Crucial',
-        model: 'MX500',
+        vendor: 'CT1000MX',
+        model: '500SSD1',
        partitions: [
          {
            logicalname: 'pbcba',
@@ -86,13 +86,13 @@ export class MockApiService extends ApiService {
            guid: null,
          },
        ],
-        capacity: 124456789123,
+        capacity: 1000190509056,
        guid: null,
      },
      {
-        logicalname: 'wxyz',
-        vendor: 'SanDisk',
-        model: 'Specialness',
+        logicalname: '/dev/sda',
+        vendor: 'ASMT',
+        model: '2115',
        partitions: [
          {
            logicalname: 'pbcba',
@@ -109,7 +109,7 @@ export class MockApiService extends ApiService {
            guid: 'guid-guid-guid-guid',
          },
        ],
-        capacity: 123459789123,
+        capacity: 1000190509056,
        guid: null,
      },
    ]
--- a/frontend/projects/setup-wizard/src/styles.scss
+++ b/frontend/projects/setup-wizard/src/styles.scss
@@ -218,7 +218,7 @@ ion-toast {
  * {
    display: inline-block;
    vertical-align: middle;
-    padding: 0.3rem;
+    padding-left: 0px 0.3rem;
  }
 }