feat #34: add error UI

polyculeconnect/static/style/index.css

@@ -0,0 +1,98 @@
+:root {
+    --crust: #dce0e8;
+    --mantle: #e6e9ef;
+    --base: #eff1f5;
+    --surface-0: #ccd0da;
+    --surface-1: #bcc0cc;
+    --surface-2: #acb0be;
+    --overlay-0: #9ca0b0;
+    --overlay-1: #8c8fa1;
+    --overlay-2: #7c7f93;
+    --subtext-0: #6c6f85;
+    --subtext-1: #5c5f77;
+    --text: #4c4f69;
+
+    --logo-purple: #340c46;
+    --logo-yellow: #fcbf00;
+    --logo-pink: #e50051;
+    --logo-blue: #009fe3;
+}
+
+body {
+    background-color: var(--base);
+    color: var(--text);
+    margin: 0;
+}
+
+.site-header {
+    width: 100%;
+    display: flex;
+    padding: 10px;
+    margin-bottom: 40px;
+
+    .site-logo img {
+        height: 100px;
+    }
+}
+
+.container {
+    background-color: var(--mantle);
+    display: grid;
+    grid-template-columns: 1;
+    row-gap: 20px;
+    padding: 15px 50px;
+    max-width: 50%;
+    width: fit-content;
+    margin: auto;
+    border: 1px solid var(--surface-0);
+    border-radius: 5px;
+}
+
+.container-content {
+    margin-bottom: 10px;
+    margin-top: 10px;
+}
+
+.form-elements {
+    display: grid;
+    grid-template-columns: 1;
+    row-gap: 10px;
+    margin-bottom: 15px;
+    padding: 0 10px;
+}
+
+.form-buttons {
+    display: flex;
+    justify-content: space-between;
+}
+
+.form-input {
+    width: 100%;
+    padding: 5px;
+    box-sizing: border-box;
+}
+
+.form-input::placeholder {
+    color: var(--subtext-1);
+}
+
+.button {
+    border: none;
+    color: var(--mantle);
+    padding: 5px 20px;
+    border-radius: 3px;
+    text-align: center;
+    vertical-align: middle;
+    text-decoration: none;
+    display: inline-block;
+    font-size: medium;
+    cursor: pointer;
+}
+
+.button-accept {
+    background-color: var(--logo-blue);
+}
+
+.button-cancel {
+    background-color: var(--logo-pink);
+}

polyculeconnect/templates/approval.html

@@ -1,42 +1,34 @@
 {{ template "header.html" . }}
 
-<div class="theme-panel">
+<div class="container">
-    <h2 class="theme-heading">Grant Access</h2>
+    <div class="container-content">
-
-    <hr class="dex-separator">
-    <div>
         {{ if .Scopes }}
-        <div class="dex-subtle-text">{{ .Client }} would like to:</div>
+        <div>{{ .Client }} would like to:</div>
-        <ul class="dex-list">
+        <ul>
             {{ range $scope := .Scopes }}
             <li>{{ $scope }}</li>
             {{ end }}
         </ul>
         {{ else }}
-        <div class="dex-subtle-text">{{ .Client }} has not requested any personal information</div>
+        <div>{{ .Client }} has not requested any personal information</div>
         {{ end }}
     </div>
-    <hr class="dex-separator">
 
-    <div>
+    <div class="form-buttons">
-        <div class="theme-form-row">
+        <form method="post" class="container-form">
-            <form method="post">
+            <input type="hidden" name="req" value="{{ .AuthReqID }}" />
-                <input type="hidden" name="req" value="{{ .AuthReqID }}" />
+            <input type="hidden" name="approval" value="approve">
-                <input type="hidden" name="approval" value="approve">
+            <button type="submit" class="button button-accept">
-                <button type="submit" class="dex-btn theme-btn--success">
+                <span>Grant Access</span>
-                    <span class="dex-btn-text">Grant Access</span>
+            </button>
-                </button>
+        </form>
-            </form>
+        <form method="post" class="container-form">
-        </div>
+            <input type="hidden" name="req" value="{{ .AuthReqID }}" />
-        <div class="theme-form-row">
+            <input type="hidden" name="approval" value="rejected">
-            <form method="post">
+            <button type="submit" class="button button-cancel">
-                <input type="hidden" name="req" value="{{ .AuthReqID }}" />
+                <span>Cancel</span>
-                <input type="hidden" name="approval" value="rejected">
+            </button>
-                <button type="submit" class="dex-btn theme-btn-provider">
+        </form>
-                    <span class="dex-btn-text">Cancel</span>
-                </button>
-            </form>
-        </div>
     </div>
 
 </div>

polyculeconnect/templates/error.html

@@ -1,8 +1,10 @@
 {{ template "header.html" . }}
 
-<div class="theme-panel">
+<div class="container">
-    <h2 class="theme-heading">{{ .ErrType }}</h2>
+    <div class="container-content">
-    <p>{{ .ErrMsg }}</p>
+        <h2>{{ .ErrType }}</h2>
+        <p>{{ .ErrMsg }}</p>
+    </div>
 </div>
 
 {{ template "footer.html" . }}

polyculeconnect/templates/header.html

@@ -7,6 +7,8 @@
     <title>PolyculeConnect</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <link rel="stylesheet" href="/static/style/index.css">
+
     <link rel="apple-touch-icon" sizes="180x180" href="/static/icons/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="/static/icons/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/static/icons/favicon-16x16.png">
@@ -17,3 +19,10 @@
 </head>
 
 <body>
+
+    <div class="site-header">
+        <div class="site-logo">
+            <img src="/static/img/logo-text.png" alt="PolyculeConnect website logo">
+        </div>
+
+    </div>

polyculeconnect/templates/login.html

@@ -2,12 +2,22 @@
 
 <script src="/static/scripts/index.js" defer></script>
 
-<div>
+<div class="container">
-    <form action="" id="connectorform">
+    <div class="container-content">
-        <label for="cname">Connector name</label>
+        Enter the service to use for login.
-        <input type="text" id="cname" name="connector_id">
+    </div>
-        <input type="submit">
+
-    </form>
+    <div class="container-content">
+        <form action="" id="connectorform" class="container-form">
+            <div class="form-elements">
+                <input type="text" id="cname" name="connector_id" placeholder="Service name" required
+                    class="form-input">
+            </div>
+            <div class="form-buttons">
+                <input type="submit" class="button button-accept" value="Continue">
+            </div>
+        </form>
+    </div>
 </div>
 
 {{ template "footer.html" . }}