From 3e393e0adcdbc418326fd21bd522eb7cf1bcc81c Mon Sep 17 00:00:00 2001
From: Jan Dittberner <jan@dittberner.info>
Date: Sat, 2 Jan 2021 11:38:09 +0100
Subject: [PATCH] Bootstrap styling for IDP pages

---
 frontend_src/_custom.scss               |  62 +++++++++++++++++++++++-
 frontend_src/images/favicon.ico         | Bin 0 -> 4286 bytes
 templates/idp/base.gohtml               |   6 +--
 templates/idp/client_certificate.gohtml |  20 ++++----
 templates/idp/consent.gohtml            |  35 +++++++------
 templates/idp/login.gohtml              |  14 +++---
 6 files changed, 102 insertions(+), 35 deletions(-)
 create mode 100644 frontend_src/images/favicon.ico

diff --git a/frontend_src/_custom.scss b/frontend_src/_custom.scss
index 93c4b1c..319f9f9 100644
--- a/frontend_src/_custom.scss
+++ b/frontend_src/_custom.scss
@@ -1 +1,61 @@
-@import "~bootstrap/scss/bootstrap";
\ No newline at end of file
+@import "~bootstrap/scss/bootstrap";
+
+$dimmed_white: #f5f5f5;
+
+html,
+body {
+  height: 100%;
+  background-color: $dimmed_white;
+}
+
+body.idp {
+  display: -ms-flexbox;
+  display: flex;
+  // -ms-flex-align: center;
+  // align-items: center;
+  padding-top: 40px;
+  padding-bottom: 40px;
+}
+
+.form-signin {
+  max-width: 330px;
+}
+
+.form-consent {
+  max-width: 550px;
+}
+
+.form-signin, .form-consent {
+  width: 100%;
+  padding: 15px;
+  margin-left: auto;
+  margin-right: auto;
+
+  .checkbox {
+    font-weight: 400;
+  }
+
+  .form-control {
+    position: relative;
+    box-sizing: border-box;
+    height: auto;
+    padding: 10px;
+    font-size: 16px;
+  }
+
+  .form-control:focus {
+    z-index: 2;
+  }
+
+  .input[type="email"] {
+    margin-bottom: -1px;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .input[type="password"] {
+    margin-bottom: 10px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+}
diff --git a/frontend_src/images/favicon.ico b/frontend_src/images/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..dfccc66e5cce92c826c95a320ab137e499a5b8f3
GIT binary patch
literal 4286
zcmeHJYitx%6h6~o`+&APv)iK9M^{Tg+N7kAwBZL(jRX>`f^}xMP*K`iL#PGhodPb1
zee7%>qV-iHfuLzfNhKJNq}`>&w19|6QXd4viUDJSQ5#HcXnXzcxObUdEI*Au_HNFe
zd(Z1TbMC!ohDgHC<s$x1oeI%ZB6<`A5fy{DJU-$Th*#i$UV$K`QV+G~9Gq0wuw1P%
zbjNPLTlM)hWoNTnS!rnYhpkW0u4Se+EVrwITC@jJta@ThA~sM2D&}&pMv1~!aI1Z@
z=5W_l*e}i4Z(~`9WVWU@jrnyohLp2@U3s4SHS5Z&QF_gB*o?={*@*SmfPMh>hs4e}
zx!mt|?25A2)d4PNXi<>ABXovaWlz?pu!J6B%XUwW!8h|6;(o0j#RZ>n;RilEr+0e}
zaK8X<2z&vz6T{HeZ!ET~SyNYY9eABp9-fbt>`A#S1!#Q9>nVMZ4O(nW{IKsSAvfF(
zmj3I}?|^-k*ymXS*R=B}1;Q@ON9vcQIh#BgSy&Ip=&tzO_SvR?kXk7~KU0t<8M^Zc
zoQH2=8^Jd;N2TzsXj;sG&C1>^z3kT==c351hJ+pGhOTs(dFjdys~q!DqfE_@<Q||R
z;4|P)<1%ka)@0<+AoP1zIMSPS^-msS`q%9&?f2u%=W+hqo<+&97bQFf{CI7xx^5BM
z<U#TPf0Ry`ueB(ZSit{d!|i0Ykv=x3Z;v(B1arqP?^TnH`@{Eo6uzdc6>&`-po4h!
z6;ZO71?s%WTjerqzqoTXFqJc{rS?Yzp<V}~Fx-wd5d!kRqI9}iCUkU)GSLqf0>2Wp
z#iRgLqaKSOzem`4y_E3Ust2#}y<fWT1^&#VZDmtUJ=bCVlNF;GXHob<K4jI^)J|E8
z_}i$LE`nbG?*QKkS`Xsbn?dh_zCu1{p*Q!@w>-m`GV~c+@=>)}b8)v&i}}|0+iGTh
zPwaFgcl3lyT)(GWVZ|-UOgWlx9kJI(o-aUoSO<aAjsJ3yx5<O}%n48*<V#yh9eG8)
z-pKyre4XSrh~3W5MpgYnmiy%!Ecg6gbQScc@POU^mtIL_x%+Iaa#Je9UJde^2|Z%B
zBA0yJ00~$+mz#Z-4JM-APeEUW+#0#Ou4d-NoWb|SnHwu>E6rbWuxcptS{KVd?PnV{
z7L2uM&ilEo7<1oBtatC2g8O*;4j67_ozR>6AD~Zw&ClT)=$^(ip}!1lr;#Hb$TrY1
zO5*mo)3qBm&SuYi@Eq>q+f2D}^k(sqjcjXeo|zLcjz{8#C*j_E!MaD7k7HljnzW1=
zhcuG!J51Tn?o84A=<i{>A?#r}aySq2gW9p~lg9ghyZ376_~YH{*}AQTq7GJm`)peh
zLEK!#jXH;xeE9viWm)rh|MWlBUjXbEfxQavn0e^;g|h~HS1KD9Suw@@58k^huu)Uq
zZ_&qojKLAUvHV7qvskc!j=3kc`{sYTg}q!iH^xWl5M~o`o*&<P+!?%M)zO$-MtEO=
zY_qW}m4D*jIavQD+i+lI$$^TS;XV+_!RJxu-RUr~gy+(trBB0m$E-$8eMt1ni9MiU
z$C9uYKKa(EuEHMgbn%VBIX`E2^^Ggz6^K{hKd%70%Lt{XyFv-cE^h*bys~ssl1Y-C
vBqe2grKAO3IZ@gr6FnwN>5?obyOLyb+3^5&*xOIaq3jT7G&_`i7YOz@kMuCg

literal 0
HcmV?d00001

diff --git a/templates/idp/base.gohtml b/templates/idp/base.gohtml
index b3bd1af..5c547cf 100644
--- a/templates/idp/base.gohtml
+++ b/templates/idp/base.gohtml
@@ -12,6 +12,7 @@
         <link rel="icon" href="/images/favicon-128.png" sizes="128x128">
         <link rel="icon" href="/images/favicon-192.png" sizes="192x192">
         <link rel="icon" href="/images/favicon-228.png" sizes="228x228">
+        <link rel="icon" href="/images/favicon.ico">
 
         <!-- Android -->
         <link rel="shortcut icon" sizes="196x196" href="/images/favicon-196.png">
@@ -22,11 +23,10 @@
         <link rel="apple-touch-icon" href="/images/favicon-180.png" sizes="180x180">
 
         <link rel="stylesheet" href="/css/cacert.bundle.css">
+        <meta name="theme-color" content="#11568c">
         <title>{{ .Title }}</title>
     </head>
-    <body>
-    <h1>{{ .Title }}</h1>
-    <img src="/images/CAcert-logo.svg" width="510" height="116" alt="CAcert">
+    <body class="text-center idp">
     {{ template "content" . }}
     <script type="text/javascript" src="/js/cacert.bundle.js"></script>
     </body>
diff --git a/templates/idp/client_certificate.gohtml b/templates/idp/client_certificate.gohtml
index 22d85ae..9d4937b 100644
--- a/templates/idp/client_certificate.gohtml
+++ b/templates/idp/client_certificate.gohtml
@@ -1,14 +1,16 @@
 {{ define "content" }}
-    <p>{{ .IntroText }}</p>
-    <ul>
-        {{ range .emails }}
-            <li>{{ . }}</li>{{ end }}
-    </ul>
-    <p>{{ .RequestText }}</p>
-    <form method="post">
+    <form class="form-signin" method="post">
+        <img src="/images/CAcert-logo.svg" width="300" height="68" alt="CAcert" class="mb-4">
+        <h1 class="h3 mb-3">{{ .Title }}</h1>
+        <p class="text-left">{{ .IntroText }}</p>
+        <ul class="text-left">
+            {{ range .emails }}
+                <li>{{ . }}</li>{{ end }}
+        </ul>
+        <p class="text-left">{{ .RequestText }}</p>
         {{ .csrfField }}
         <input type="hidden" name="action" value="cert-login"/>
-        <button type="submit" name="use-certificate" value="yes">{{ .AcceptLabel }}</button>
-        <button type="submit">{{ .RejectLabel }}</button>
+        <button class="btn btn-lg btn-block btn-primary" type="submit" name="use-certificate" value="yes">{{ .AcceptLabel }}</button>
+        <button class="btn btn-block btn-outline-secondary" type="submit">{{ .RejectLabel }}</button>
     </form>
 {{ end }}
\ No newline at end of file
diff --git a/templates/idp/consent.gohtml b/templates/idp/consent.gohtml
index 4c47ff1..285d975 100644
--- a/templates/idp/consent.gohtml
+++ b/templates/idp/consent.gohtml
@@ -1,24 +1,27 @@
 {{ define "content" }}
-    <p>{{ .IntroConsentRequested }}</p>
-    {{ if .client.LogoURI }}
-        <p>
-            <img src="{{ .client.LogoURI }}" alt="{{ .client.ClientName }}"/>
-        </p>
-    {{ end }}
-    <p>{{ .IntroMoreInformation }}</p>
-    <form method="post">
-        {{ .csrfField }}
-        <ul>
+    <form class="form-consent" method="post">
+        <img src="/images/CAcert-logo.svg" width="300" height="68" alt="CAcert" class="mb-4">
+        <h1 class="h3 mb-3">{{ .Title }}</h1>
+        <p class="text-left">{{ .IntroConsentRequested }}</p>
+        {{ if .client.LogoURI }}
+            <p>
+                <img src="{{ .client.LogoURI }}" alt="{{ .client.ClientName }}"/>
+            </p>
+        {{ end }}
+        <ul class="list-group text-left small mb-3">
             {{ range .requestedScope }}
-                <li>{{ .Label }}</li>
+                <li class="list-group-item">{{ .Label }}</li>
             {{ end }}
         </ul>
+        <p class="text-left">{{ .IntroMoreInformation }}</p>
 
-        <p>
-            <input type="checkbox" name="consent" id="consent" value="true"/> <label
-                    for="consent">{{ .LabelConsent }}</label>
-        </p>
+        {{ .csrfField }}
+        <div class="checkbox mb-3">
+            <label>
+                <input type="checkbox" name="consent" id="consent" value="true"/>
+                {{ .LabelConsent }}</label>
+        </div>
 
-        <button type="submit">{{ .LabelSubmit }}</button>
+        <button class="btn btn-lg btn-primary btn-block" type="submit">{{ .LabelSubmit }}</button>
     </form>
 {{ end }}
\ No newline at end of file
diff --git a/templates/idp/login.gohtml b/templates/idp/login.gohtml
index 7196446..8c0440b 100644
--- a/templates/idp/login.gohtml
+++ b/templates/idp/login.gohtml
@@ -1,14 +1,16 @@
 {{ define "content" }}
-    <form method="post">
+    <form class="form-signin" method="post">
+        <img src="/images/CAcert-logo.svg" width="300" height="68" alt="CAcert" class="mb-4">
+        <h1 class="h3 mb-3">{{ .Title }}</h1>
         {{ .csrfField }}
         <input type="hidden" name="action" value="password-login"/>
         {{ if .errors.Form}}<p>{{ .errors.Form }}</p>{{ end }}
         {{ if .errors.Email }}<p>{{ .errors.Email }}</p>{{ end }}
-        <label for="email">{{ .LabelEmail }}</label>
-        <input type="text" id="email" name="email" value="{{ .Email }}"/><br/>
+        <label for="email" class="sr-only">{{ .LabelEmail }}</label>
+        <input type="email" id="email" class="form-control" placeholder="{{ .LabelEmail }}" required autofocus name="email" value="{{ .Email }}"/><br/>
         {{ if .errors.Password }}<p>{{ .errors.Password }}</p>{{ end }}
-        <label for="password">{{ .LabelPassword }}</label>
-        <input type="password" id="password" name="password" value=""/><br/>
-        <button type="submit">{{ .LabelLogin }}</button>
+        <label for="password" class="sr-only">{{ .LabelPassword }}</label>
+        <input type="password" id="password" class="form-control" placeholder="{{ .LabelPassword }}" name="password" value=""/><br/>
+        <button class="btn btn-lg btn-primary btn-block" type="submit">{{ .LabelLogin }}</button>
     </form>
 {{ end }}
\ No newline at end of file