Style auth page

ui/app/styles/_button.scss

@@ -2,6 +2,7 @@
   @include Typography.Interface(M);
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   margin: 0;
   padding: scale.$sm-2 scale.$sm-1;
   border-radius: 2px;

ui/app/styles/_login.scss

@@ -0,0 +1,65 @@
+@use 'cloud-ui/tokens/color';
+@use 'cloud-ui/tokens/scale';
+@use 'cloud-ui/tokens/typography' as Typography;
+
+form.login {
+  display: flex;
+  flex-direction: column;
+  padding-top: scale.$base;
+}
+
+.login fieldset {
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+  padding: 0;
+  margin: 0 0 scale.$lg-2;
+  border: none;
+
+  label {
+    @include Typography.Interface(M);
+    padding-bottom: scale.$sm-2;
+  }
+
+  small {
+    text-align: right;
+    padding-top: scale.$sm-2;
+  }
+
+  fieldset {
+    margin-bottom: scale.$lg-2;
+  }
+
+  code.copyable {
+    color: color.$white;
+    background: color.$ui-gray-800;
+    font-size: scale.$base;
+    padding: scale.$sm-2 scale.$sm-2;
+    border-radius: 2px;
+
+    &::before {
+      content: '$';
+      opacity: 0.5;
+      margin-right: scale.$sm-2;
+    }
+  }
+
+  input {
+    font-size: scale.$base;
+    padding: scale.$sm-2 scale.$sm-2;
+    box-shadow: $inset-box-shadow;
+    border-radius: 2px;
+    border: none;
+    margin: 0;
+    font-family: monospace;
+
+    &::placeholder {
+      color: color.$ui-cool-gray-500;
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: $glowing-box-shadow;
+    }
+  }
+}

ui/app/styles/_page.scss

@@ -7,13 +7,21 @@ $box-shadow:
   0 2px 1px 1px rgba(color.$ui-cool-gray-600, .1);
 $button-box-shadow:
   0 3px 2px rgba(color.$ui-cool-gray-600, .2);
+$inset-box-shadow:
+  inset 0 0 0 1px rgba(color.$ui-cool-gray-600, .2),
+  inset 0 2px 1px 1px rgba(color.$ui-cool-gray-600, .1);
+$glowing-box-shadow:
+  inset 0 0 0 1px rgba(color.$blue-500, .8),
+  inset 0 2px 1px 1px rgba(color.$ui-cool-gray-600, .1),
+  0 0 0 3px rgba(color.$blue-500, .2);
 
 @import './_app-item';
 @import './_app-meta-item';
 @import './_badge';
 @import './_breadcrumbs';
 @import './_button';
 @import './_icon-tile';
+@import './_login';
 
 #page {
   position: relative;
@@ -300,7 +308,28 @@ $button-box-shadow:
     height: 100%;
 
     .card {
-      padding: scale.$lg-12;
+      text-align: center;
+      padding: scale.$lg-8;
+    }
+
+    .logo {
+      color: color.$black;
+      width: scale.$lg-14;
+      height: scale.$lg-14;
+      padding: scale.$lg-1 scale.$base scale.$base;
+      background: color.$ui-cool-gray-050;
+      box-shadow: 0 0 0 1px color.$ui-cool-gray-100;
+      border-radius: 8px;
+    }
+
+    h1 {
+      margin: scale.$lg-2 auto scale.$sm-2;
+
+      & + p {
+        @include Typography.Interface(L);
+        color: color.$ui-cool-gray-600;
+        margin-bottom: scale.$lg-2;
+      }
     }
   }
 }

ui/app/templates/auth.hbs

@@ -1,7 +1,8 @@
 <div class="auth-page">
   <Card>
-    <p>Authentication/session page.</p>
-    <Login></Login>
-    <p>Run <code>waypoint token new</code></p>
+    {{inline-svg "waypoint-logo" class="logo"}}
+    <h1>Welcome to Waypoint</h1>
+    <p>To get started, authenticate via the CLI</p>
+    <Login />
   </Card>
 </div>

ui/app/templates/components/login.hbs

@@ -1,7 +1,14 @@
-<form {{action 'login' on='submit'}}>
-    <label>
-        {{t 'login.input.label'}}
-        <Input data-test-login=true @value={{this.token}} placeholder={{t 'login.input.placeholder'}} />
-    </label>
-    <button data-test-login-submit {{action "login"}} type="button">{{t 'login.input.button'}}</button>
+<form {{action 'login' on='submit'}} class="login">
+  <fieldset>
+    <label>{{t 'login.instruction'}}</label>
+    <code class="copyable">waypoint token new</code>
+    <small><a href="#">Read more in our documentation</a></small>
+  </fieldset>
+
+  <fieldset>
+    <label for="token-field">{{t 'login.input.label'}}</label>
+    <Input data-test-login=true @value={{this.token}} id="token-field" placeholder={{t 'login.input.placeholder'}} />
+  </fieldset>
+
+  <button data-test-login-submit {{action "login"}} type="button" class="button button--primary">{{t 'login.button'}}</button>
 </form>

ui/translations/en-us.yaml

@@ -23,6 +23,7 @@ page:
 
 login:
   input:
-    placeholder: 'Token value'
-    button: 'Login'
-    label: 'Login'
+    placeholder: 'Enter your token from the CLI'
+    label: 'Then enter the token below'
+  button: 'Authenticate Waypoint Server'
+  instruction: 'Run the following command in the CLI to generate a token'