Merge pull request #36 from synapsestudios/bugfix/114-login-page-styling

Bugfix/114 login page styling
synapsestudios · Mar 16, 2017 · 3a9c235 · 3a9c235
2 parents 161ad08 + 8f5ce9e
commit 3a9c235
Show file tree

Hide file tree

Showing 7 changed files with 5,598 additions and 34 deletions.
diff --git a/api/src/application/user/user-controller.js b/api/src/application/user/user-controller.js
@@ -64,7 +64,7 @@ module.exports = (
       .catch(error => {
         // assume email collision and show validation message
         reply.view('user-registration', {
-          title: 'Register',
+          title: 'Sign Up',
           formAction: `/user/register?${querystring.stringify(request.query)}`,
           returnTo: `${request.query.redirect_uri}?status=cancelled`,
           error: true,
@@ -149,7 +149,7 @@ module.exports = (
         handleRegistrationPost(request, reply);
       } else {
         reply.view('user-registration', {
-          title: 'Register',
+          title: 'Sign Up',
           formAction: `/user/register?${querystring.stringify(request.query)}`,
           returnTo: `${request.query.redirect_uri}?status=cancelled`,
           error: !!error,
@@ -210,6 +210,7 @@ module.exports = (
         };
         reply.view('user-profile', {
           returnTo: request.query.redirect_uri,
+          title: 'User Profile',
           fields: [
             {
               name: 'name',

diff --git a/api/src/plugins/openid-connect/openid-connect.js b/api/src/plugins/openid-connect/openid-connect.js
@@ -114,7 +114,7 @@ exports.register = function (server, options, next) {
             reply.view('login', {
               client,
               cookie,
-              title: 'Sign-in',
+              title: 'Log In',
               debug: querystring.stringify(cookie.params, ',<br/>', ' = ', {
                 encodeURIComponent: value => value,
               }),
@@ -182,7 +182,7 @@ exports.register = function (server, options, next) {
                 error: 'Invalid email password combination',
                 client,
                 cookie,
-                title: 'Sign-in',
+                title: 'Log In',
                 debug: querystring.stringify(cookie.params, ',<br/>', ' = ', {
                   encodeURIComponent: value => value,
                 }),

diff --git a/api/src/plugins/openid-connect/templates/layout/layout.hbs b/api/src/plugins/openid-connect/templates/layout/layout.hbs
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Sign-in</title>
+    <title>{{title}}</title>
     <style type="text/css">
       /* http://meyerweb.com/eric/tools/css/reset/
       v2.0 | 20110126
@@ -177,11 +177,22 @@
       }
 
       /* Form inputs and scaffolding */
-      .input-scaffold {
+      .input-scaffold,
+      .toggle-scaffold {
         position: relative;
         display: block;
         width: 100%;
-        padding: 16px;
+        padding: 12px 16px;
+      }
+
+      .input-scaffold label,
+      .toggle-scaffold label {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+        align-items: center;
+        width: 100%;
       }
 
       .input-scaffold__label {
@@ -192,6 +203,11 @@
         margin-bottom: 6px;
       }
 
+      .toggle-scaffold__label {
+        font-size: 16px;
+        font-weight: bold;
+      }
+
       .input-scaffold__input {
         display: block;
         width: 100%;
@@ -205,6 +221,10 @@
         appearance: none;
       }
 
+      .toggle-scaffold__input {
+        margin-right: 8px;
+      }
+
       .input-scaffold__validation {
         margin-top: 8px;
       }
@@ -219,13 +239,20 @@
       }
 
       /* Alerts */
+      .alerts {
+        margin: 8px;
+      }
+
       .alert {
         width: 100%;
         height: auto;
         padding: 16px;
         font-weight: bold;
         border-radius: 4px;
-        margin-bottom: 16px;
+      }
+
+      .alert + .alert {
+        margin-top: 8px;
       }
 
       .alert--error {
@@ -240,30 +267,28 @@
     </style>
   </head>
   <body>
-    <div class="login-card">
-      <h1>{{title}}</h1>
-      <div class="login-client-image">
-        {{#if client.logoUri}}
-        <img src="{{client.logoUri}}" />
-        {{/if}}
+    <div class="auth">
+
+      <div class="auth-lock">
+        <div class="auth-header">
+          {{#if client.logoUri}}
+            <img src="{{client.logoUri}}" />
+          {{/if}}
+          <h1>{{title}}</h1>
+        </div>
+        <div class="auth-form">
+          {{{content}}}
+        </div>
       </div>
-      {{{content}}}
-      <div class="login-help">
+
+      <div class="auth-help">
         <a href="{{cookie.returnTo}}">[ Cancel ]</a>
         {{#if client.tosUri}}<a href="{{client.tosUri}}">[ Terms of Service ]</a>{{/if}}
         {{#if client.policyUri}}<a href="{{client.policyUri}}">[ Privacy Policy ]</a>{{/if}}
       </div>
-    </div>
-    <div class="login-card">
-      <div class="grant-debug">
-        {{cookie.uuid}}
-      </div>
-      <div class="grant-debug">
-        {{{debug}}}
-      </div>
-      <div class="grant-debug">
-        {{{interaction}}}
-      </div>
+
+      <div class="auth-underlay" />
+
     </div>
   </body>
 </html>
diff --git a/api/src/plugins/openid-connect/templates/login.hbs b/api/src/plugins/openid-connect/templates/login.hbs
@@ -45,9 +45,18 @@
     {{/if}}
   </div>
 
-  <label>
-    <input type="checkbox" name="remember" value="yes" checked="yes"> Stay signed in
-  </label>
+  <div class="toggle-scaffold">
+    <label>
+      <input
+        class="toggle-scaffold__input"
+        type="checkbox"
+        name="remember"
+        value="yes"
+        checked="yes"
+      >
+      <span class="toggle-scaffold__label">Remember me</span>
+    </label>
+  </div>
 
-  <button type="submit">Sign-in</button>
+  <button type="submit">Log In</button>
 </form>
diff --git a/api/templates/user-registration.hbs b/api/templates/user-registration.hbs
@@ -71,5 +71,5 @@
     {{/if}}
   </div>
 
-  <button type="submit">Register</button>
+  <button type="submit">Sign Up</button>
 </form>
diff --git a/test-client/src/App.js b/test-client/src/App.js
@@ -44,9 +44,9 @@ class App extends Component {
     return (
       <div>
         <span>
-          <a href={`http://sso-client.dev:9000/op/auth?client_id=${config.clientId}&response_type=code id_token token&scope=${config.scope}&redirect_uri=${config.redirectUri}&nonce=nonce`}>Login</a>
+          <a href={`http://sso-client.dev:9000/op/auth?client_id=${config.clientId}&response_type=code id_token token&scope=${config.scope}&redirect_uri=${config.redirectUri}&nonce=nonce`}>Log In</a>
           <span> | </span>
-          <a href={`http://sso-client.dev:9000/user/register?client_id=${config.clientId}&response_type=code id_token token&scope=${config.scope}&redirect_uri=${config.redirectUri}&nonce=nonce`}>Register</a>
+          <a href={`http://sso-client.dev:9000/user/register?client_id=${config.clientId}&response_type=code id_token token&scope=${config.scope}&redirect_uri=${config.redirectUri}&nonce=nonce`}>Sign Up</a>
         </span>
       </div>
     );