git » remoteu2f » commit bcdf947

proxy: Add simple CSS

author Alberto Bertogli
2015-10-23 02:38:29 UTC
committer Alberto Bertogli
2015-10-23 02:38:29 UTC
parent ab01245512137fefd3bb4a36ebcc95a9d9230e77
proxy: Add simple CSS

This patch adds a CSS file, and changes the register and authenticate pages to
use it. The end result is a nicer UI, and better feedback to the user on the
state of the request.
remoteu2f-proxy/embedded_data.go +75 -10
remoteu2f-proxy/server.go +8 -1
remoteu2f-proxy/to_embed/authenticate.html +14 -5
remoteu2f-proxy/to_embed/register.html +14 -5
remoteu2f-proxy/to_embed/remoteu2f.css +35 -0
remoteu2f-proxy/to_embed/remoteu2f.js +6 -0 
diff --git a/remoteu2f-proxy/embedded_data.go b/remoteu2f-proxy/embedded_data.go
index 5c9b3ae..dd62901 100644
--- a/remoteu2f-proxy/embedded_data.go
+++ b/remoteu2f-proxy/embedded_data.go
@@ -10,6 +10,13 @@ package main
 const authenticate_html = `<!DOCTYPE html>
 <html>
   <head>
+    <meta charset="UTF-8">
+    <title>remoteu2f - authenticate</title>
+
+    <link href='https://fonts.googleapis.com/css?family=Roboto'
+        rel='stylesheet' type='text/css'/>
+
+    <link href='remoteu2f.css' rel='stylesheet' type='text/css'/>
   </head>
 
   <body>
@@ -17,12 +24,14 @@ const authenticate_html = `<!DOCTYPE html>
 
     <h2>{{.Message}}</h2>
 
-    <p class="instructions">
-    Please insert/touch your security key to authenticate.
-    </p>
+    <div id="icon" class="huge pulse">
+      <b><span id="icon"> ● ● ● </span></b>
+    </div>
 
-    <p class="status">
-    Status: <span id="status">waiting for security key</span>
+    <hr/>
+
+    <p id="status">
+    Please insert/touch your security key to authenticate
     </p>
 
     <script
@@ -47,6 +56,13 @@ const authenticate_html = `<!DOCTYPE html>
 const register_html = `<!DOCTYPE html>
 <html>
   <head>
+    <meta charset="UTF-8">
+    <title>remoteu2f - register</title>
+
+    <link href='https://fonts.googleapis.com/css?family=Roboto'
+        rel='stylesheet' type='text/css'/>
+
+    <link href='remoteu2f.css' rel='stylesheet' type='text/css'/>
   </head>
 
   <body>
@@ -54,12 +70,14 @@ const register_html = `<!DOCTYPE html>
 
     <h2>{{.Message}}</h2>
 
-    <p class="instructions">
-    Please insert/touch your security key to complete the registration.
-    </p>
+    <div id="icon" class="huge pulse">
+      <b><span id="icon"> ● ● ● </span></b>
+    </div>
+
+    <hr/>
 
-    <p class="status">
-    Status: <span id="status">waiting for security key</span>
+    <p id="status">
+    Please insert/touch your security key to complete the registration
     </p>
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"
@@ -93,15 +111,21 @@ function handleKeyResponse(resp) {
             5: "Timed out waiting for security key",
         }
 
+        $("div#icon").toggleClass("pulse", false);
+        $("span#icon").text(" ✘ ");
         $('#status').text(
                 codeToText[resp.errorCode] + " -- "
                 + resp.errorMessage);
         return;
     }
 
+    $("span#icon").text(" ○ ○ ○ ");
     $('#status').text('sending response');
     $.post('response', JSON.stringify(resp)).done(function() {
+        $("div#icon").toggleClass("pulse", false);
+        $("span#icon").text(" ✔ ");
         $('#status').text('done');
+
     });
 }
 `
@@ -767,4 +791,45 @@ u2f.register = function(registerRequests, signRequests,
 `
 
 
+// to_embed/remoteu2f.css ----- 8< ----- 8< ----- 8< ----- 8< -----
+
+// remoteu2f_css contains the content of to_embed/remoteu2f.css.
+const remoteu2f_css = `
+body {
+  font-family: 'Roboto', sans-serif;
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  background: #ecf0f1;
+  text-align: center;
+}
+
+h1 {
+    background: #3f51b5;
+    color: #efefef;
+    padding: 1em 0 1em 1em;
+    margin: 0;
+    font-weight: normal;
+}
+h2 {
+    font-weight: normal;
+}
+
+div.huge {
+    font-size: xx-large;
+}
+
+@keyframes waiting_animation {
+    0% {color: #aaa;}
+    50% {color: #000;}
+    100% {color: #aaa;}
+}
+
+div.pulse {
+    animation: waiting_animation 2s infinite;
+}
+
+`
+
+
 
diff --git a/remoteu2f-proxy/server.go b/remoteu2f-proxy/server.go
index 86543a2..7c8f1a7 100644
--- a/remoteu2f-proxy/server.go
+++ b/remoteu2f-proxy/server.go
@@ -1,15 +1,17 @@
 package main
 
 // Embed the html and js files we need.
-//go:generate go run tools/embed.go to_embed/*.html to_embed/*.js
+//go:generate go run tools/embed.go to_embed/*.html to_embed/*.js to_embed/*.css
 
 import (
 	"crypto/rand"
 	"encoding/base64"
 	"fmt"
 	"io"
+	"mime"
 	"net"
 	"net/http"
+	"path/filepath"
 	"strings"
 	"sync"
 	"text/template"
@@ -285,6 +287,9 @@ func (s *Server) StaticHandler(path, content string) func(w http.ResponseWriter,
 			http.Error(w, "too many requests", 429)
 			return
 		}
+
+		w.Header().Set("Content-Type",
+			mime.TypeByExtension(filepath.Ext(path)))
 		w.Write([]byte(content))
 	}
 }
@@ -335,6 +340,8 @@ func (s *Server) ListenAndServe() {
 		s.StaticHandler("u2f_api.js", u2f_api_js))
 	r.HandleFunc("/{key}/remoteu2f.js",
 		s.StaticHandler("remoteu2f.js", remoteu2f_js))
+	r.HandleFunc("/{key}/remoteu2f.css",
+		s.StaticHandler("remoteu2f.css", remoteu2f_css))
 	httpServer := http.Server{
 		Addr:    s.HTTPAddr,
 		Handler: r,
diff --git a/remoteu2f-proxy/to_embed/authenticate.html b/remoteu2f-proxy/to_embed/authenticate.html
index 148fd78..e462795 100644
--- a/remoteu2f-proxy/to_embed/authenticate.html
+++ b/remoteu2f-proxy/to_embed/authenticate.html
@@ -1,6 +1,13 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <meta charset="UTF-8">
+    <title>remoteu2f - authenticate</title>
+
+    <link href='https://fonts.googleapis.com/css?family=Roboto'
+        rel='stylesheet' type='text/css'/>
+
+    <link href='remoteu2f.css' rel='stylesheet' type='text/css'/>
   </head>
 
   <body>
@@ -8,12 +15,14 @@
 
     <h2>{{.Message}}</h2>
 
-    <p class="instructions">
-    Please insert/touch your security key to authenticate.
-    </p>
+    <div id="icon" class="huge pulse">
+      <b><span id="icon"> ● ● ● </span></b>
+    </div>
+
+    <hr/>
 
-    <p class="status">
-    Status: <span id="status">waiting for security key</span>
+    <p id="status">
+    Please insert/touch your security key to authenticate
     </p>
 
     <script
diff --git a/remoteu2f-proxy/to_embed/register.html b/remoteu2f-proxy/to_embed/register.html
index e19aa06..9b70789 100644
--- a/remoteu2f-proxy/to_embed/register.html
+++ b/remoteu2f-proxy/to_embed/register.html
@@ -1,6 +1,13 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <meta charset="UTF-8">
+    <title>remoteu2f - register</title>
+
+    <link href='https://fonts.googleapis.com/css?family=Roboto'
+        rel='stylesheet' type='text/css'/>
+
+    <link href='remoteu2f.css' rel='stylesheet' type='text/css'/>
   </head>
 
   <body>
@@ -8,12 +15,14 @@
 
     <h2>{{.Message}}</h2>
 
-    <p class="instructions">
-    Please insert/touch your security key to complete the registration.
-    </p>
+    <div id="icon" class="huge pulse">
+      <b><span id="icon"> ● ● ● </span></b>
+    </div>
+
+    <hr/>
 
-    <p class="status">
-    Status: <span id="status">waiting for security key</span>
+    <p id="status">
+    Please insert/touch your security key to complete the registration
     </p>
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"
diff --git a/remoteu2f-proxy/to_embed/remoteu2f.css b/remoteu2f-proxy/to_embed/remoteu2f.css
new file mode 100644
index 0000000..d9e1fc1
--- /dev/null
+++ b/remoteu2f-proxy/to_embed/remoteu2f.css
@@ -0,0 +1,35 @@
+
+body {
+  font-family: 'Roboto', sans-serif;
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  background: #ecf0f1;
+  text-align: center;
+}
+
+h1 {
+    background: #3f51b5;
+    color: #efefef;
+    padding: 1em 0 1em 1em;
+    margin: 0;
+    font-weight: normal;
+}
+h2 {
+    font-weight: normal;
+}
+
+div.huge {
+    font-size: xx-large;
+}
+
+@keyframes waiting_animation {
+    0% {color: #aaa;}
+    50% {color: #000;}
+    100% {color: #aaa;}
+}
+
+div.pulse {
+    animation: waiting_animation 2s infinite;
+}
+
diff --git a/remoteu2f-proxy/to_embed/remoteu2f.js b/remoteu2f-proxy/to_embed/remoteu2f.js
index 22718a5..168beae 100644
--- a/remoteu2f-proxy/to_embed/remoteu2f.js
+++ b/remoteu2f-proxy/to_embed/remoteu2f.js
@@ -12,14 +12,20 @@ function handleKeyResponse(resp) {
             5: "Timed out waiting for security key",
         }
 
+        $("div#icon").toggleClass("pulse", false);
+        $("span#icon").text(" ✘ ");
         $('#status').text(
                 codeToText[resp.errorCode] + " -- "
                 + resp.errorMessage);
         return;
     }
 
+    $("span#icon").text(" ○ ○ ○ ");
     $('#status').text('sending response');
     $.post('response', JSON.stringify(resp)).done(function() {
+        $("div#icon").toggleClass("pulse", false);
+        $("span#icon").text(" ✔ ");
         $('#status').text('done');
+
     });
 }