Add styling to mockpass login page (#8)

Add resources for public directory

WIP for mock singpass login page

Update placeholder text for dropdown

Clean up template


Remove unnecessary files


Modify images to add mockpass watermark


Modify images to add watermark


Fix CSS to use mockpass files


rename directory path


remove unnecessary code

index.js

@@ -33,6 +33,7 @@ const app = configSpcp(express(), {
 configMyInfo(app, { serviceProvider, port: PORT })
 
 app.enable('trust proxy')
+app.use(express.static('public'))
 
 app.listen(
   PORT,

public/mockpass/resources/css/animate.css

@@ -0,0 +1,43 @@
+@charset "UTF-8";
+
+/* login page, qr tab tooltip animation */
+@keyframes tooltip-ani {
+    0% {
+        transform: translateX(0) rotateY(-16deg);
+        opacity: 1;
+    }
+    5% {
+        transform: translateX(0) rotateY(20deg);
+        opacity: 1;
+    }
+    10% {
+        transform: translateX(0) rotateY(-12deg);
+        opacity: 1;
+    }
+    15% {
+        transform: translateX(0) rotateY(6deg);
+        opacity: 1;
+    }
+    20% {
+        transform: translateX(0) rotateY(-4deg);
+        opacity: 1;
+    }
+    25% {
+        transform: translateX(0) rotateY(1deg);
+        opacity: 1;
+    }
+    30% {
+        transform: translateX(0) rotateY(0deg);
+        opacity: 1;
+    }
+    100% {
+        transform: translateX(0) rotateY(0deg);
+        opacity: 1;
+    }
+}
+.ani-rotate {
+    animation-name: tooltip-ani;
+    animation-duration: 1.5s;
+    animation-iteration-count: 3;
+    animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
+}

public/mockpass/resources/css/common.css

@@ -0,0 +1,121 @@
+/*------------------------------------------------
+            LOADING SCREEN START
+------------------------------------------------ */
+.loading-screen-wrappper {
+    background-color: #000;
+    position: fixed;
+    height: 100%;
+    width: 100vw;
+    left: 0;
+    top: 0;
+    opacity: 0.7;
+    z-index: 9999;
+}
+
+.loading-screen-container {
+    position: relative;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.loader-title {
+    width: 300px;
+    height: 50px;
+    color: #fff;
+    font-weight: bold;
+    font-size: 16px;
+    margin: auto;
+    text-align: center;
+}
+
+.loader {
+    border: 16px solid #f3f3f3;
+    border-radius: 50%;
+    border-top: 16px solid #ff0000;
+    width: 50px;
+    height: 50px;
+    -webkit-animation: spin 2s linear infinite;
+    animation: spin 2s linear infinite;
+    margin: auto;
+}
+
+@-webkit-keyframes spin {
+    0% { -webkit-transform: rotate(0deg); }
+    100% { -webkit-transform: rotate(360deg); }
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/*------------------------------------------------
+            LOADING SCREEN END
+------------------------------------------------ */
+
+/*------------------------------------------------
+            PASSWORD COMPLEXITY START
+------------------------------------------------ */
+.password-complexity-checker-wrapper {
+    position: relative;
+}
+
+.pwd-complexity-hidden {
+    display: none;
+}
+
+.pwd-complexity-info {
+    border: 1px solid #a4a4a4;
+    background-color: #fff;
+    position: absolute;
+    z-index: 61;
+    font-size: 14px;
+    padding: 5px 10px;
+    width: 100%;
+}
+
+.pc-form-success {
+    color: #2fa13e;
+    padding-right: 3px;
+    font-size: inherit;
+    vertical-align: top;
+}
+
+.pc-form-error {
+    color: #cf2010;
+    padding-right: 3px;
+    font-size: inherit;
+    vertical-align: top;
+}
+
+.pc-form-error .icon-exclamation, .pc-form-success .icon-exclamation {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    margin-right: 10px;
+    position: relative;
+    top: 4px;
+    background: url("../img/pwd-complexity-icon-0a8ed77b6b99b6fd7cf2206943de1612.png");
+}
+
+.pc-form-success .icon-exclamation {
+    background-position: -16px 0;
+}
+
+.pwd-complexity-info>p {
+    margin: 0 0 5px 0;
+}
+
+.pwd-complexity-info>ul {
+    list-style: none;
+    margin: 0;
+    padding: 0 0 10px 0;
+    font-size: 12px;
+}
+
+input.password-error {
+    border: 1px solid red;
+}
+/*------------------------------------------------
+            PASSWORD COMPLEXITY END
+------------------------------------------------ */

public/mockpass/resources/css/reset.css

@@ -0,0 +1,95 @@
+html, body, div, span, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+abbr, address, cite, code,
+del, dfn, em, img, ins, kbd, q, samp,
+small, strong, sub, sup, var,
+b, i,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section, summary,
+time, mark, audio, video {
+ margin:0;
+ padding:0;
+ border:0;
+ outline:0;
+ font-size:100%;
+ vertical-align:baseline;
+ background:transparent;
+}
+
+body {
+ line-height:1;
+}
+
+article,aside,details,figcaption,figure,
+footer,header,hgroup,menu,nav,section { 
+ display:block;
+}
+
+nav ul {
+ list-style:none;
+}
+
+blockquote, q {
+ quotes:none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content:'';
+ content:none;
+}
+
+a {
+ margin:0;
+ padding:0;
+ font-size:100%;
+ vertical-align:baseline;
+ background:transparent;
+}
+
+/* change colours to suit your needs */
+ins {
+ background-color:#ff9;
+ color:#000;
+ text-decoration:none;
+}
+
+/* change colours to suit your needs */
+mark {
+ background-color:#ff9;
+ color:#000; 
+ font-style:italic;
+ font-weight:bold;
+}
+
+
+del {
+ text-decoration: line-through;
+}
+
+abbr[title], dfn[title] {
+ border-bottom:1px dotted;
+ cursor:help;
+}
+
+table {
+ border-collapse:collapse;
+ border-spacing:0;
+}
+
+/* change border colour to suit your needs */
+hr {
+ display:block;
+ height:1px;
+ border:0; 
+ border-top:1px solid #cccccc;
+ margin:1em 0;
+ padding:0;
+}
+
+input, select {
+ vertical-align:middle;
+}