Show prominently the Clipper third-party

README.rst

@@ -77,6 +77,13 @@ See also the `allauth configuration`_ and `advanced usage`_ docs pages.
 
   **Examples:** ``'my-account'``, ``'/my-account/'``
 
+``ALLAUTH_ENS_HIGHLIGHT_CLIPPER``
+  *Optional* — Boolean (default: `True`).
+
+  When set to `True`, displays prominently the Clipper option in the login view
+  (if you use the `allauth_ens` templates).
+
+  
 *****
 Views
 *****

allauth_ens/scss/_highlight_clipper.scss

@@ -0,0 +1,35 @@
+.content-wrapper.highlight-clipper {
+    .main-login-choices {
+        li:not(:first-child) {
+            margin-top: 5px;
+        }
+        
+        a {
+            display: block;
+            text-align: center;
+            background: $gray-lighter;
+            padding: 35px 20px;
+            color: $black;
+            font-size: 1.1em;
+
+            @include hover-focus {
+                background: lighten($brand-primary, 50%);
+                text-decoration: none;
+            }
+        }
+    }
+    &:not(.not-clipper) {
+        width: 100vw;
+        max-width: 500px;
+        
+        & > :not(.main-login-choices) {
+            display: none;
+        }
+    }
+    
+    &.not-clipper {
+        .main-login-choices {
+            display: none;
+        }
+    }
+}

allauth_ens/scss/screen.scss

@@ -5,3 +5,5 @@
 @import "mixins";
 
 @import "base";
+
+@import "highlight_clipper";

allauth_ens/static/allauth_ens/screen.css

@@ -1,4 +1,4 @@
-/* line 5, ../../../vendor/bundle/ruby/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 5, ../../../../../../../../var/lib/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -20,45 +20,45 @@ time, mark, audio, video {
   vertical-align: baseline;
 }
 
-/* line 22, ../../../vendor/bundle/ruby/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 22, ../../../../../../../../var/lib/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html {
   line-height: 1;
 }
 
-/* line 24, ../../../vendor/bundle/ruby/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 24, ../../../../../../../../var/lib/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 ol, ul {
   list-style: none;
 }
 
-/* line 26, ../../../vendor/bundle/ruby/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 26, ../../../../../../../../var/lib/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 table {
   border-collapse: collapse;
   border-spacing: 0;
 }
 
-/* line 28, ../../../vendor/bundle/ruby/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 28, ../../../../../../../../var/lib/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 caption, th, td {
   text-align: left;
   font-weight: normal;
   vertical-align: middle;
 }
 
-/* line 30, ../../../vendor/bundle/ruby/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 30, ../../../../../../../../var/lib/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 q, blockquote {
   quotes: none;
 }
-/* line 103, ../../../vendor/bundle/ruby/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 103, ../../../../../../../../var/lib/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 q:before, q:after, blockquote:before, blockquote:after {
   content: "";
   content: none;
 }
 
-/* line 32, ../../../vendor/bundle/ruby/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 32, ../../../../../../../../var/lib/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 a img {
   border: none;
 }
 
-/* line 116, ../../../vendor/bundle/ruby/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 116, ../../../../../../../../var/lib/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
   display: block;
 }
@@ -775,3 +775,35 @@ section > * + * {
   background: #2d672d;
   color: #fff;
 }
+
+/* line 3, ../../scss/_highlight_clipper.scss */
+.content-wrapper.highlight-clipper .main-login-choices li:not(:first-child) {
+  margin-top: 5px;
+}
+/* line 7, ../../scss/_highlight_clipper.scss */
+.content-wrapper.highlight-clipper .main-login-choices a {
+  display: block;
+  text-align: center;
+  background: #eceeef;
+  padding: 35px 20px;
+  color: #000;
+  font-size: 1.1em;
+}
+/* line 10, ../../scss/_mixins.scss */
+.content-wrapper.highlight-clipper .main-login-choices a:focus, .content-wrapper.highlight-clipper .main-login-choices a:hover {
+  background: #a8d6fe;
+  text-decoration: none;
+}
+/* line 21, ../../scss/_highlight_clipper.scss */
+.content-wrapper.highlight-clipper:not(.not-clipper) {
+  width: 100vw;
+  max-width: 500px;
+}
+/* line 25, ../../scss/_highlight_clipper.scss */
+.content-wrapper.highlight-clipper:not(.not-clipper) > :not(.main-login-choices) {
+  display: none;
+}
+/* line 31, ../../scss/_highlight_clipper.scss */
+.content-wrapper.highlight-clipper.not-clipper .main-login-choices {
+  display: none;
+}

allauth_ens/templates/account/login.html

@@ -30,10 +30,23 @@
 {% endif %}
 {% endblock %}
 
+{% block content-extra-classes %}{% is_clipper_highlighted as highlight_clipper %}{% if highlight_clipper %}highlight-clipper{% endif %}{% endblock %}
+
 {% block content %}
 
 {% get_providers as socialaccount_providers %}
 
+{% is_clipper_highlighted as highlight_clipper %}
+
+{% if highlight_clipper %}
+    <section class="main-login-choices">
+        <ul>
+            <li><a title="Clipper" href="{% provider_login_url "clipper" process="login" scope=scope auth_params=auth_params %}">{% trans "Connect with Clipper" %}</a></li>
+            <li><a title="Other choices" href="javascript:void(0);" onclick="$('.content-wrapper').toggleClass('not-clipper')">{% trans "Other ways to sign in/sign up" %}</a></li>
+        </ul>
+    </section>
+{% endif %}
+    
 {% if socialaccount_providers %}
 <section id="providers">
   <ul class="method-list">
@@ -68,7 +81,6 @@
     {% endif %}
   </form>
 </section>
-
 {% endblock %}
 
 {% block extra_js %}

allauth_ens/templates/allauth_ens/base.html

@@ -79,7 +79,7 @@
 
     {% block messages-extra %}{% endblock %}
 
-    <div class="content-wrapper">
+    <div class="content-wrapper {% block content-extra-classes %}{% endblock %}">
       {% block content %}{% endblock %}
     </div>
 

allauth_ens/templates/socialaccount/snippets/provider_list.html

@@ -7,7 +7,7 @@
 {% for provider in socialaccount_providers %}
 {% if provider.id == "openid" %}
   {% for brand in provider.get_brands %}
-  <li class="method-wrapper">
+  <li class="method-wrapper provider-openid-{{ brand.id }}">
     <a title="{{ brand.name }}"
       href="{% provider_login_url provider.id openid=brand.openid_url process=process %}"
       >
@@ -16,9 +16,9 @@
   </li>
   {% endfor %}
 {% endif %}
-<li class="method-wrapper">
+<li class="method-wrapper provider-{{ provider.id }}">
   <a title="{{ provider.name }}"
-    href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_parms %}"
+    href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}"
     >
     {{ provider.name }}
   </a>

allauth_ens/templatetags/allauth_ens.py

@@ -33,3 +33,9 @@ def get_profile_url():
 def is_open_for_signup(context):
     request = context['request']
     return get_adapter(request).is_open_for_signup(request)
+
+
+@simple_tag
+def is_clipper_highlighted():
+    return ('allauth_ens.providers.clipper' in getattr(settings, 'INSTALLED_APPS', [])) \
+        and getattr(settings, 'ALLAUTH_ENS_HIGHLIGHT_CLIPPER', True)