Permalink
Browse files

[bug 757608] Improve the AoA Twitter signin modal

Prompt users to sign in to SUMO or register for a new account to keep
them logged in to Twitter.
  • Loading branch information...
1 parent 391895b commit d3a18cbba1efb022d9e8b82419e99956c6cb2310 @rehandalal rehandalal committed Jun 22, 2012
Showing with 53 additions and 21 deletions.
  1. +31 −10 apps/customercare/templates/customercare/twitter_modal.html
  2. +22 −11 media/css/customercare.css
@@ -1,16 +1,37 @@
{# vim: set ts=2 et sts=2 sw=2: #}
<div id="twitter-modal" class="kbox" title="{{ _('Sign in with your Twitter account') }}" data-modal="true" data-authed="{{ authed }}" data-twitter-user="{{ twitter_user }}">
<div class="inner-container">
- <p>
- {% trans %}
- Before you join the Army of Awesome, you need to log in so you
- can respond to tweets.
- You will now be redirected to Twitter to log in.
- {% endtrans %}
+ <p>{% trans %}
+ Before you join, you need to give Army of Awesome the permission to post
+ tweets on your behalf.{% endtrans %}
</p>
- <div>
- <a href="#" class="cancel kbox-cancel">{{ _('Cancel') }}</a>
- <a href="?twitter_auth_request=1" class="signin">{{ _('Sign in') }}</a>
- </div>
+ <p>{% trans %}
+ You will always control every tweet you post. {% endtrans %}
+ <strong>{% trans %}
+ Army of Awesome will never tweet without your permission.{% endtrans %}
+ </strong>
+ </p>
+ <a href="?twitter_auth_request=1" class="btn-modal signin-twitter">
+ {{ _('Sign in') }}
+ </a>
+ {% if not user.is_authenticated() %}
+ <p>{% trans %}
+ If you’re registered with Mozilla Support, we will keep you logged into
+ Twitter, so you can use Army of Awesome instantly.{% endtrans %}
+ </p>
+ <p>{% trans %}
+ Are you registered with Mozilla Support?{% endtrans %}
+ </p>
+ <div>
+ <a href="{{ url('users.login') }}" class="btn-modal signin-sumo">
+ <span class="highlight">{{ _('Yes, I am.') }}</span>
+ {{ _('Click to sign in.') }}
+ </a>
+ <a href="{{ url('users.register') }}" class="btn-modal register">
+ <span class="highlight">{{ _("No, I'm not.") }}</span>
+ {{ _('Click to register.') }}
+ </a>
+ </div>
+ {% endif %}
</div>
</div>
View
@@ -582,8 +582,17 @@ a.header-button {
margin-bottom: 5px;
}
-#twitter-modal .cancel,
-#twitter-modal .signin {
+#twitter-modal p {
+ margin: 0 0 10px 0;
+}
+
+#twitter-modal .inner-container > div,
+.btn-modal {
+ height: 36px;
+}
+
+.btn-modal,
+.btn-modal:visited {
background: -moz-linear-gradient(center top, #f1f1f1 15px, #eee 18px, #ddd, #ccc);
background: -webkit-gradient(linear, center top, center bottom, color-stop(.417, #f1f1f1), color-stop(.5, #eee), color-stop(.75, #ddd), to(#ccc));
border-radius: 6px;
@@ -592,25 +601,27 @@ a.header-button {
color: #5a5a5a;
display: block;
float: left;
- height: 36px;
line-height: 35px;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
- width: 140px;
+ width: 200px;
}
-#twitter-modal .cancel {
- margin: 15px 15px 0px 48px;
+.btn-modal.register {
+ margin: 0 0 0 14px;
}
-#twitter-modal .signin {
- color: #10a2c6;
- margin: 15px 0px 0px 0;
+.btn-modal.signin-twitter {
+ float: none;
+ margin: 15px auto;
+ width: 300px;
}
-#twitter-modal .inner-container div {
- height: 50px;
+.btn-modal .highlight,
+.btn-modal.signin-twitter,
+.btn-modal.signin-twitter:visited {
+ color: #10a2c6;
}
/*----------------------------------

0 comments on commit d3a18cb

Please sign in to comment.