From 8e22bf61d07adfd483c588b91cf9368c313ab053 Mon Sep 17 00:00:00 2001
From: Howard Johnson <merlin@merlinthp.org>
Date: Oct 07 2016 12:24:52 +0000
Subject: Styled the user consent page for openID Connect


This styles up the user consent page for openID Connect. It presents the
list of items to consent centered in the middle of a fluid full-page
layout, with the user action to accept or reject at the bottom of the
list

There is a new master-user template that this page now uses to display
the content, as the the master template uses the login-pf layout that
does not work well with long lists of content.

This is mostly Ryan Lerch's work from PR#96, with some minor CSS and
HTML changes to make it consistent with the login page.

Merges: #96
Signed-off-by: Ryan Lerch <rlerch@redhat.com>
Signed-off-by: Howard Johnson <merlin@merlinthp.org>
Reviewed-by: Patrick Uiterwijk <puiterwijk@redhat.com>

---
diff --git a/less/styles.less b/less/styles.less
index 781df78..8f2a151 100644
--- a/less/styles.less
+++ b/less/styles.less
@@ -3467,3 +3467,35 @@ table.datatable th:active {
   border-radius: 1px;
   border-radius: 25px;
 }
+.headerbar-ipsilon-user {
+  padding-top:1em;
+  padding-bottom:1em;
+  margin-bottom:2em;
+}
+.ipsilon-user body {
+  background: #1d2124 url("../img/bg-login.jpg") repeat-x 50% 0;
+  background-size: auto;
+}
+@media (min-width: 768px) {
+  .ipsilon-user body {
+    background-size: 100% auto;
+  }
+}
+.ipsilon-user .container-fluid.main-content{
+  background-color: rgba(255, 255, 255, 0.055);
+  color: #fff;
+  padding-bottom: 40px;
+  padding-top: 20px;
+}
+.ipsilon-user .list-group-item{
+  background-color: rgba(255,255,255,0.1);
+  border: 1px solid rgba(255,255,255,0.01);
+}
+.ipsilon-user .list-group{
+  border-top: 1px solid rgba(255,255,255,0.01);
+}
+.ipsilon-logotext{
+  margin-top: 2em;
+  height: 18px;
+  padding-left: 1em;
+}
diff --git a/templates/master-user.html b/templates/master-user.html
new file mode 100644
index 0000000..a8139af
--- /dev/null
+++ b/templates/master-user.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<!--[if IE 8]><html class="ie8"><![endif]-->
+<!--[if gt IE 8]><!-->
+<html class="ipsilon-user">
+<!--<![endif]-->
+  <head>
+    <title>{{ title }}</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="{{ basepath }}/ui/css/patternfly.css" rel="stylesheet" media="screen, print">
+    <link href="{{ basepath }}/ui/css/styles.css" rel="stylesheet" media="screen, print">
+    {%- if heads %}
+      {%- for group, value in heads.items() %}
+        {%- for head in value %}
+    {{ head }}
+        {%- endfor %}
+      {%- endfor %}
+    {%- endif %}
+  </head>
+  <body>
+    <div class="container-fluid headerbar-ipsilon-user">
+      <div class="row">
+        <div class="col-md-6">
+          <a href="{{ basepath }}/" id="badge" tabindex="-1">
+            <img class="ipsilon-logotext" src="{{ basepath }}/ui/img/brand-lg.png" alt="Ipsilon" />
+          </a>
+        </div>
+        <div class="col-md-6 text-right">
+          <a href="{{ basepath }}/" id="badge" tabindex="-1">
+            <img src="{{ basepath }}/ui/img/logo.svg" alt="Ipsilon IdP" />
+          </a>
+      </div>
+      </div>
+    </div>
+
+    <div class="container-fluid main-content">
+      <div class="row">
+        {% block main %}
+        {% endblock %}
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/templates/openidc/consent_form.html b/templates/openidc/consent_form.html
index 9879d58..aba7c21 100644
--- a/templates/openidc/consent_form.html
+++ b/templates/openidc/consent_form.html
@@ -1,7 +1,7 @@
-{% extends "master.html" %}
+{% extends "master-user.html" %}
 {% block main %}
 
-<div class="col-sm-12">
+<div class="col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3">
   <p>The OpenID Connect client <b>
 {%- if client['homepage'] %}
     <a href="{{ client['homepage'] }}">{{ client['name'] }}</a>
@@ -20,35 +20,35 @@
 {%- endif %}
 </div>
 
-<div class="col-sm-7 col-md-6 col-lg-5 login">
+<div class="col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3">
   <form class="form-horizontal" role="form" id="consent_form" action="{{ action }}" method="post" enctype="application/x-www-form-urlencoded">
     <input type="hidden" name="ipsilon_transaction_id" id="ipsilon_transaction_id" value="{{ ipsilon_transaction_id }}">
 
-    <div class="alert alert-danger">
+    <div class="list-group">
 {%- for item in claim_requests|dictsort %}
-        <div class="form-group">
-            <div class="col-sm-10 col-md-10">
-              {{ item[1]['display_name'] }}
+        <div class="list-group-item">
+            <div>
+              <strong>{{ item[1]['display_name'] }}</strong>
             </div>
-            <div class="col-sm-10 col-md-10">{{ item[1]['value'] }}</div>
+            <div>{{ item[1]['value'] }}</div>
         </div>
 {%- endfor %}
 {%- for item in scopes|dictsort %}
       <b>{{ item[0] }}</b>
 {%- for item in item[1]|dictsort %}
-        <div class="form-group">
-            <div class="col-sm-10 col-md-10">
+        <div class="list-group-item">
+            <div>
               <!-- Empty, so that values come on the right hand -->
             </div>
-            <div class="col-sm-10 col-md-10">{{ item[1] }}</div>
+            <div>{{ item[1] }}</div>
         </div>
 {%- endfor %}
 {%- endfor %}
     </div>
 
-    <div class="form-group">
-      <div class="col-sm-offset-2 col-md-offset-2 col-xs-12 col-sm-10 col-md-10 submit">
-        <button type="submit" name="decided_deny" value="Reject" class="btn btn-primary btn-lg" tabindex="3">Reject</button>
+    <div class="form-group pull-right">
+      <div class="submit">
+        <button type="submit" name="decided_deny" value="Reject" class="btn btn-link" tabindex="3">Reject</button>
         <button type="submit" name="decided_allow" value="Allow" class="btn btn-primary btn-lg" tabindex="3">Allow</button>
       </div>
     </div>
diff --git a/ui/css/styles.css b/ui/css/styles.css
index bf888ec..d46e235 100644
--- a/ui/css/styles.css
+++ b/ui/css/styles.css
@@ -3467,3 +3467,35 @@ table.datatable th:active {
   border-radius: 1px;
   border-radius: 25px;
 }
+.headerbar-ipsilon-user {
+  padding-top: 1em;
+  padding-bottom: 1em;
+  margin-bottom: 2em;
+}
+.ipsilon-user body {
+  background: #1d2124 url("../img/bg-login.jpg") repeat-x 50% 0;
+  background-size: auto;
+}
+@media (min-width: 768px) {
+  .ipsilon-user body {
+    background-size: 100% auto;
+  }
+}
+.ipsilon-user .container-fluid.main-content {
+  background-color: rgba(255, 255, 255, 0.055);
+  color: #fff;
+  padding-bottom: 40px;
+  padding-top: 20px;
+}
+.ipsilon-user .list-group-item {
+  background-color: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.01);
+}
+.ipsilon-user .list-group {
+  border-top: 1px solid rgba(255, 255, 255, 0.01);
+}
+.ipsilon-logotext {
+  margin-top: 2em;
+  height: 18px;
+  padding-left: 1em;
+}

