From 409dd77b49e722dcf9d001dddbf3adb77bd72a2b Mon Sep 17 00:00:00 2001
From: Shane Tomlinson <stomlinson@mozilla.com>
Date: Tue, 1 Nov 2011 10:17:55 +0000
Subject: [PATCH] Always show the content even if Javascript is disabled.
Add a noscript tag to signin and signup stating to use these features, Javascript must be enabled.
issue #510
---
resources/static/css/style.css | 14 ++++++-
resources/static/js/browserid.js | 9 ++--
resources/views/index.ejs | 71 +++++++++++++++++---------------
resources/views/layout.ejs | 1 +
resources/views/signin.ejs | 4 ++
resources/views/signup.ejs | 6 +++
6 files changed, 67 insertions(+), 38 deletions(-)
diff --git a/resources/static/css/style.css b/resources/static/css/style.css
index 20c2e610d..64e8c5f17 100644
--- a/resources/static/css/style.css
+++ b/resources/static/css/style.css
@@ -21,6 +21,18 @@ body {
overflow-y: scroll;
}
+noscript {
+ position: fixed;
+ display: block;
+ background-color: #ef1010;
+ top: 0;
+ left: 0;
+ padding: 1px;
+ width: 100%;
+ color: #fff;
+ text-align: center;
+}
+
/* for floats */
.cf:after {
content: ".";
@@ -106,7 +118,7 @@ hr {
#content {
padding: 84px 0;
- display: none;
+ /* display: none;*/
}
#about {
diff --git a/resources/static/js/browserid.js b/resources/static/js/browserid.js
index 7ed223b97..d40061658 100644
--- a/resources/static/js/browserid.js
+++ b/resources/static/js/browserid.js
@@ -90,9 +90,12 @@ $(function() {
});
});
+ $("#vAlign,#content").hide();
+
+ var ANIMATION_TIME = 500;
user.checkAuthentication(function(authenticated) {
if (authenticated) {
- $("#content").fadeIn("slow");
+ $("#content").fadeIn(ANIMATION_TIME);
if ($('#emailList').length) {
bid.manageAccount();
}
@@ -100,10 +103,10 @@ $(function() {
else {
// If vAlign exists (main page), it takes precedence over content.
if( $("#vAlign").length) {
- $("#vAlign").fadeIn("slow");
+ $("#vAlign").fadeIn(ANIMATION_TIME);
}
else {
- $("#content").fadeIn("slow");
+ $("#content").fadeIn(ANIMATION_TIME);
}
}
});
diff --git a/resources/views/index.ejs b/resources/views/index.ejs
index 5725e35fd..74922b301 100644
--- a/resources/views/index.ejs
+++ b/resources/views/index.ejs
@@ -1,40 +1,43 @@
- <div id="content" style="display:none;">
- <div id="manage">
- <h1 class="serif">Account Manager</h1>
- <div class="edit cf">
- <strong>Your Email Addresses</strong>
+ <div id="content" style="display:none">
+ <div id="manage">
+ <h1 class="serif">Account Manager</h1>
+ <div class="edit cf">
+ <strong>Your Email Addresses</strong>
- <a id="manageAccounts" href="#">edit</a>
- <a id="cancelManage" href="#">done</a>
- </div>
- <ul id="emailList">
- </ul>
- <div id="disclaimer">You may, at any time, <a href="#" id="cancelAccount">cancel your account</a></div>
- </div>
- </div>
+ <a id="manageAccounts" href="#">edit</a>
+ <a id="cancelManage" href="#">done</a>
+ </div>
+ <ul id="emailList">
+ </ul>
+ <div id="disclaimer">You may, at any time, <a href="#" id="cancelAccount">cancel your account</a></div>
+ </div>
+ </div>
- <div id="vAlign" style="display:none;">
- <div id="signUp">
- <div id="card"><img src="/i/slit.png"></div>
- <div id="hint"></div>
- <div id="status"></div>
+ <div id="vAlign">
+ <div id="signUp">
+ <div id="card"><img src="/i/slit.png"></div>
+ <div id="hint"></div>
+ <div id="status"></div>
- <p>Connect with <em>BrowserID</em>, the safest & easiest way to sign in.</p>
- <p>
- <a class="granted info" href="/about">Take the tour</a> or
+ <p>Connect with <em>BrowserID</em>, the safest & easiest way to sign in.</p>
+ <p>
+ <a class="granted info" href="/about">Take the tour</a>
+ <span class="require-js">or
<a href="/signup" class="button granted create">sign up</a>
- </p>
- </div>
- </div>
+ </span>
+ </p>
+ </div>
+ </div>
+
+ <script type="text/html" id="templateUser">
+ <li class="identity cf">
+ <div class="email">{{ email }}</div>
+ <div class="activity cf">
+ <button class="delete">remove</button>
+ <!-- removed registration info. We want to replace this with Last Used At ... -->
+ <!-- <abbr title="Registered: {{ created }}" class="status">Registered {{ relative }}.</abbr>-->
+ </div>
+ </li>
+ </script>
-<script type="text/html" id="templateUser">
- <li class="identity cf">
- <div class="email">{{ email }}</div>
- <div class="activity cf">
- <button class="delete">remove</button>
- <!-- removed registration info. We want to replace this with Last Used At ... -->
- <!-- <abbr title="Registered: {{ created }}" class="status">Registered {{ relative }}.</abbr>-->
- </div>
- </li>
-</script>
diff --git a/resources/views/layout.ejs b/resources/views/layout.ejs
index d012c52ef..0a5c452ca 100644
--- a/resources/views/layout.ejs
+++ b/resources/views/layout.ejs
@@ -43,6 +43,7 @@
<ul class="cf">
<li><a class="home" href="/"></a></li>
</ul>
+
<ul class="nav cf">
<li><a href="/about">How it works</a></li>
<li><a href="https://github.com/mozilla/browserid/wiki/How-to-Use-BrowserID-on-Your-Site" target="_blank">Developers</a></li>
diff --git a/resources/views/signin.ejs b/resources/views/signin.ejs
index 54089605e..0f37b0935 100644
--- a/resources/views/signin.ejs
+++ b/resources/views/signin.ejs
@@ -49,3 +49,7 @@
</div>
</div>
+<noscript>
+ We're sorry, but to sign in to BrowserID, you must have Javascript enabled.
+</noscript>
+
diff --git a/resources/views/signup.ejs b/resources/views/signup.ejs
index 29a6f662f..4b9d7efd1 100644
--- a/resources/views/signup.ejs
+++ b/resources/views/signup.ejs
@@ -36,3 +36,9 @@
</div>
</div>
+<noscript>
+ We're sorry, but to sign up for BrowserID, you must have Javascript enabled.
+</noscript>
+
+
+
--
GitLab