Fix/setup (#2495)

* move enter-click directive to shared

* allow enter click to continue to login in kiosk mode; adjust styling

* cleanup

* add styling to ca wizard

* rebase new changes

* mobile fixes

* cleanup

* cleanup

* update styling

* cleanup import

* minor css changes

---------

Co-authored-by: Matt Hill <mattnine@protonmail.com>

frontend/projects/setup-wizard/src/app/pages/success/success.page.html

@@ -8,7 +8,7 @@
           <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"
@@ -16,12 +16,12 @@
                   <h1>Setup Complete!</h1>
                 </div>
                 <ion-button
+                  shape="round"
+                  class="login-button mb-12"
                   (click)="exitKiosk()"
-                  size="large"
-                  class="login-btn"
                 >
                   Continue to Login
-                  <ion-icon slot="end" name="log-in-outline"></ion-icon>
+                  <ion-icon name="log-in-outline" slot="end"></ion-icon>
                 </ion-button>
               </ion-col>
             </ion-row>
@@ -32,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="mb-12">
-                  <div class="inline">
+                  <div class="inline-container setup">
                     <ion-icon
                       name="checkmark-circle-outline"
                       color="success"
@@ -50,24 +50,19 @@
                 <div class="card-container">
                   <ion-card id="information" (click)="download()">
                     <ion-card-content>
-                      <ion-card-title>
+                      <ion-card-title>Download address info</ion-card-title>
-                        Download permanent 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-container">
-                        <div class="inline">
+                        <p class="action-text">Download</p>
-                          <p>DOWNLOAD</p>
+                        <ion-icon slot="end" name="download-outline"></ion-icon>
-                          <ion-icon name="download-outline"></ion-icon>
-                        </div>
                       </div>
                     </ion-footer>
                   </ion-card>
-
                   <ion-card
                     id="launch"
                     [disabled]="disableLogin"
@@ -83,9 +78,9 @@
                     </ion-card-content>
                     <ion-footer>
                       <div class="container">
-                        <div class="inline">
+                        <div class="inline-container">
-                          <p>OPEN</p>
+                          <p class="action-text">Open</p>
-                          <ion-icon name="open-outline"></ion-icon>
+                          <ion-icon slot="end" name="open-outline"></ion-icon>
                         </div>
                       </div>
                     </ion-footer>

frontend/projects/setup-wizard/src/app/pages/success/success.page.scss

@@ -18,28 +18,24 @@ ion-content {
 
 ion-grid {
   max-width: 760px;
-  height: 100%;
 }
 
-.login-btn {
+.inline-container {
-  --background: var(--color-accent);
-  --border-radius: 44px;
-  --box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  --padding-start: 36px;
-  --padding-end: 36px;
-  height: 76px;
-}
-
-.grid-center-wrapper {
-  height: 100%;
-  width: 100%;
   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);
@@ -53,14 +49,14 @@ ion-card {
     margin-bottom: 2rem;
   }
 
+  // download info card
   ion-card {
-    max-width: 91%;
+    min-height: 260px;
-    min-width: 91%;
+    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;
@@ -79,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;
@@ -109,42 +97,87 @@ ion-card {
     }
   }
 
-  .container {
+  .login-button {
-    display: flex;
+    --background: var(--color-accent);
-    justify-content: center;
+    --padding-bottom: 2.5rem;
-    align-items: center;
+    --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 {
+      font-size: 1.7rem;
+    }
   }
 
-  #information:after {
+  .launch-button {
+    --background: var(--alt-blue);
+  }
+  
+  #information:after, #launch:after {
     content: '';
     position: absolute;
     left: 0;
-    top: 80%;
+    top: 79%;
     width: 100%;
     height: 100%;
     background: var(--color-accent);
   }
 
   #launch:after {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 80%;
-    width: 100%;
-    height: 100%;
     background: var(--alt-blue);
   }
+
 }
 
-.card-container {
+.mb-12 {
-  display: flex;
+  margin-bottom: 3rem;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 2rem;
 }
 
-.emphasis-warn {
+.pb-2 {
-  font-weight: 600;
+  padding-bottom: 0.5rem;
-  color: var(--ion-color-warning);
+}
+
+.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%;
+    }
+  }
 }

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;
   }
 }
 

frontend/projects/shared/src/directives/enter/enter.directive.ts

@@ -1,6 +1,6 @@
 import { Directive, HostListener, Inject } from '@angular/core'
 import { DOCUMENT } from '@angular/common'
-import { debounce } from '@start9labs/shared'
+import { debounce } from '../../util/misc.util'
 
 @Directive({
   selector: '[appEnter]',

frontend/projects/shared/src/public-api.ts

@@ -24,6 +24,8 @@ export * from './directives/responsive-col/responsive-col.module'
 export * from './directives/responsive-col/responsive-col-viewport.directive'
 export * from './directives/safe-links/safe-links.directive'
 export * from './directives/safe-links/safe-links.module'
+export * from './directives/enter/enter.directive'
+export * from './directives/enter/enter.module'
 
 export * from './pipes/emver/emver.module'
 export * from './pipes/emver/emver.pipe'

frontend/projects/ui/src/app/app.module.ts

@@ -10,11 +10,12 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { IonicModule } from '@ionic/angular'
 import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor'
 import {
-  MarkdownModule,
   DarkThemeModule,
+  EnterModule,
+  LightThemeModule,
+  MarkdownModule,
   ResponsiveColModule,
   SharedPipesModule,
-  LightThemeModule,
 } from '@start9labs/shared'
 
 import { AppComponent } from './app.component'
@@ -25,7 +26,6 @@ import { MarketplaceModule } from './marketplace.module'
 import { PreloaderModule } from './app/preloader/preloader.module'
 import { FooterModule } from './app/footer/footer.module'
 import { MenuModule } from './app/menu/menu.module'
-import { EnterModule } from './app/enter/enter.module'
 import { APP_PROVIDERS } from './app.providers'
 import { PatchDbModule } from './services/patch-db/patch-db.module'
 import { ToastContainerModule } from './components/toast-container/toast-container.module'

frontend/projects/ui/src/app/pages/login/ca-wizard/ca-wizard.component.html

@@ -1,83 +1,99 @@
-<ion-content>
+<div class="center-container">
   <ng-container *ngIf="!caTrusted; else trusted">
-    <ion-icon name="lock-closed-outline" class="wiz-icon"></ion-icon>
+    <ion-card id="untrusted" class="text-center">
-    <h1 class="title">Trust Your Root CA</h1>
+      <ion-icon name="lock-closed-outline" class="wiz-icon"></ion-icon>
-    <p class="subtitle">
+      <h1>Trust Your Root CA</h1>
-      Download and trust your server's Root Certificate Authority to establish a
+      <p>
-      secure (
+        Download and trust your server's Root Certificate Authority to establish
-      <b>HTTPS</b>
+        a secure (HTTPS) connection. You will need to repeat this on every
-      ) connection. You will need to repeat this on every device you use to
+        device you use to connect to your server.
-      connect to your server.
+      </p>
-    </p>
+      <ol>
-    <ol>
+        <li>
-      <li>
+          <b>Download your server's Root CA</b>
-        <b>Download your server's Root CA</b>
+          - Your server uses its Root CA to generate SSL/TLS certificates for
-        . Your server uses its Root CA to generate SSL/TLS certificates for
+          itself and installed services. These certificates are then used to
-        itself and installed services. These certificates are then used to
+          encrypt network traffic with your client devices.
-        encrypt network traffic with your client devices.
+          <br />
-        <br />
+          <ion-button
-        <ion-button strong size="small" (click)="download()">
+            strong
-          Download
+            size="small"
-          <ion-icon slot="end" name="download-outline"></ion-icon>
+            shape="round"
-        </ion-button>
+            color="tertiary"
-      </li>
+            (click)="download()"
-      <li>
+          >
-        <b>Trust your server's Root CA</b>
+            Download
-        . Follow instructions for your OS. By trusting your server's Root CA,
+            <ion-icon slot="end" name="download-outline"></ion-icon>
-        your device can verify the authenticity of encrypted communications with
+          </ion-button>
-        your server.
+        </li>
-        <br />
+        <li>
-        <ion-button
+          <b>Trust your server's Root CA</b>
-          strong
+          - Follow instructions for your OS. By trusting your server's Root CA,
-          size="small"
+          your device can verify the authenticity of encrypted communications
-          href="https://docs.start9.com/0.3.5.x/user-manual/getting-started/trust-ca/#trust-root-ca"
+          with your server.
-          target="_blank"
+          <br />
-          noreferrer
+          <ion-button
-        >
+            strong
-          View Instructions
+            size="small"
-          <ion-icon slot="end" name="open-outline"></ion-icon>
+            shape="round"
-        </ion-button>
+            color="primary"
-      </li>
+            href="https://docs.start9.com/0.3.5.x/user-manual/getting-started/trust-ca/#trust-root-ca"
-      <li>
+            target="_blank"
-        <b>Test</b>
+            noreferrer
-        . If refreshing the page does not work, you may need to quit the browser
+          >
-        and re-open.
+            View Instructions
-        <i>Tip: before quitting, bookmark this page or copy the URL.</i>
+            <ion-icon slot="end" name="open-outline"></ion-icon>
-        <br />
+          </ion-button>
-        <ion-button strong size="small" (click)="refresh()">
+        </li>
-          Refresh
+        <li>
-          <ion-icon slot="end" name="refresh"></ion-icon>
+          <b>Test</b>
-        </ion-button>
+          - If refreshing the page does not work, you may need to quit the
-      </li>
+          browser and re-open.
-    </ol>
+          <i>Tip: before quitting, bookmark this page or copy the URL.</i>
-    <ion-button
+          <br />
-      style="--padding-start: 0"
+          <ion-button
-      fill="clear"
+            strong
-      (click)="launchHttps()"
+            size="small"
-      [disabled]="caTrusted"
+            shape="round"
-    >
+            class="refresh"
-      Skip
+            (click)="refresh()"
-      <ion-icon slot="end" name="open-outline"></ion-icon>
+          >
-    </ion-button>
+            Refresh
+            <ion-icon slot="end" name="refresh"></ion-icon>
+          </ion-button>
+        </li>
+      </ol>
+      <ion-button
+        style="--padding-start: 0"
+        fill="clear"
+        (click)="launchHttps()"
+        [disabled]="caTrusted"
+      >
+        Skip
+        <ion-icon slot="end" name="open-outline"></ion-icon>
+      </ion-button>
+    </ion-card>
   </ng-container>
 
   <ng-template #trusted>
-    <ion-icon
+    <ion-card id="trusted" class="text-center">
-      name="shield-checkmark-outline"
+      <ion-icon
-      class="wiz-icon"
+        name="shield-checkmark-outline"
-      color="success"
+        class="wiz-icon"
-    ></ion-icon>
+        color="success"
-    <h1 class="title">Root CA Trusted!</h1>
+      ></ion-icon>
-    <p class="subtitle">
+      <h1>Root CA Trusted!</h1>
-      You have successfully trusted your server's Root CA and may now log in
+      <p>
-      securely.
+        You have successfully trusted your server's Root CA and may now log in
-    </p>
+        securely.
-    <ion-button strong (click)="launchHttps()">
+      </p>
-      Go to login
+      <ion-button strong (click)="launchHttps()" color="tertiary" shape="round">
-      <ion-icon slot="end" name="open-outline"></ion-icon>
+        Go to login
-    </ion-button>
+        <ion-icon slot="end" name="open-outline"></ion-icon>
+      </ion-button>
+    </ion-card>
   </ng-template>
-</ion-content>
+</div>
 
 <a
   id="install-cert"

frontend/projects/ui/src/app/pages/login/ca-wizard/ca-wizard.component.scss

@@ -1,41 +1,76 @@
-ion-content {
+#trusted {
-  --padding-top: 2.2rem;
+  max-width: 40%;
-  --padding-bottom: 2.2rem;
-  --padding-start: 2.2rem;
-  --padding-end: 2.2rem;
 }
 
-.title {
+#untrusted {
-  font-size: 28px;
+  max-width: 50%;
-  font-weight: 600;
 }
 
-.subtitle {
+.center-container {
-  font-size: 21px;
+  padding: 1rem;
-  line-height: 26px;
+  display: flex;
-  margin-bottom: 30px;
+  flex-direction: column;
-  margin-top: 0;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+}
+
+ion-card {
+  color: var(--ion-color-dark);
+  background: #414141;
+  box-shadow: 0 4px 4px rgba(17, 17, 17, 0.144);
+  border-radius: 35px;
+  padding: 1.5rem;
+  width: 100%;
+
+  h1 {
+    font-weight: bold;
+    font-size: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
+
+  p {
+    font-size: 21px;
+    line-height: 25px;
+    margin-bottom: 30px;
+    margin-top: 0;
+  }
+}
+
+.text-center {
+  text-align: center;
 }
 
 ol {
   font-size: 17px;
   line-height: 25px;
+  text-align: left;
 
   li {
     padding-bottom: 24px;
   }
 
   ion-button {
-    margin-top: 8px;
+    margin-top: 10px;
   }
 }
 
-a {
+.refresh {
-  cursor: pointer;
+  --background: var(--ion-color-success-shade);
-  color: aquamarine;
-  text-decoration: underline;
 }
 
 .wiz-icon {
   font-size: 64px;
 }
+
+@media (max-width: 700px) {
+  #trusted, #untrusted {
+    max-width: 100%;
+  }
+}
+
+@media (min-width: 701px) and (max-width: 1200px) {
+  #trusted, #untrusted {
+    max-width: 75%;
+  }
+}