Merge lp:~deadlight/canonical-identity-provider/core-vanilla-templates into lp:~deadlight/canonical-identity-provider/vanilla

[Karl Williams]

Added a base template with vanilla styling and converted the "Your Ubuntu One account" page as a test.

NOTE: the site header/navigation is not yet complete

----

QA:

- ./node_modules/gulp/bin/gulp.js sass
- make start-db run
- Go to [HOSTNAME]:8000/+ubuntuone-account

[Anthony Dillon (ya-bo-ng)]

Looking good, few questions in the code.

review: Needs Information

[Karl Williams (deadlight)]

I've left a few classes in that Vanilla doesn't use mostly because I'm not sure if any of them are used by JS in other places. BUT, since we're doing this page-by-page, I guess I can remove them and then wait and see if pages get an error as they come up.

[lp:~deadlight/canonical-identity-provider/core-vanilla-templates]

1689. By Karl Williams on 2019-07-17

Remove old classes. Use vanilla notification patter for notifications and messages.

[Karl Williams (deadlight)]

Ant: I've cleaned out all of the unused classes. Some might be required later but I can revert/add new features when we get to those pages.

[Anthony Dillon (ya-bo-ng)]

Thanks +1

review: Approve

=== modified file 'src/identityprovider/static_src/scss/styles.scss'
--- src/identityprovider/static_src/scss/styles.scss	2019-07-16 13:03:58 +0000
+++ src/identityprovider/static_src/scss/styles.scss	2019-07-17 13:42:18 +0000
@@ -4,6 +4,14 @@
 
 @import 'vanilla-framework/scss/build';
 
+.p-navigation .row {
+  justify-content: space-between;
+}
+
+.p-navigation__nav {
+  width: auto;
+}
+
 .p-cip-hero {
   background-image: linear-gradient(212deg, #E95420 0%, #C44631 6%, #A33940 12%, #8B304A 18%, #7C2B51 24%, #772953 29%, #55163B 51%, #370626 75%, #2C001E 100%);
 }

=== modified file 'src/webui/templates/static/ubuntuone-account.html'
--- src/webui/templates/static/ubuntuone-account.html	2014-07-30 16:35:52 +0000
+++ src/webui/templates/static/ubuntuone-account.html	2019-07-17 13:42:18 +0000
@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 {% load i18n %}
 {% load static_url %}
 
@@ -13,56 +13,38 @@
 
 {% block menu %}{% endblock %}
 
-{% block text_title %}<h1 class="u1-h-main">{% trans "Your Ubuntu One account" %}</h1>{% endblock %}
+{% block text_title %}<h1>{% trans "Your Ubuntu One account" %}</h1>{% endblock %}
 
 {% block content %}
-<div class="yui3-g-r">
-
-    <div class="yui3-u-1-2 account-information">
-
-        <h3>{% trans "One account to log in to everything on Ubuntu" %}</h3>
-
-        <p>
-        {% blocktrans %}Ubuntu One is the single account you use to log in to
-        all services and sites related to Ubuntu.{% endblocktrans %}
-        </p>
-
-        <h3>{% trans "Already have an SSO account?" %}</h3>
-
-        <p>
-        {% blocktrans %}You can use your existing Ubuntu single sign on or
-        Launchpad credentials to log in. Your Ubuntu single sign on account is
-        now called your Ubuntu One account.{% endblocktrans %}
-        </p>
-    </div>
-
-    <div class="yui3-u-1-3 account-faq">
-
-        <div class="box">
-            <div class="title">
-                <h3>Account FAQ</h3>
-            </div>
-
-            <div class="body">
-                <ul class="questions">
-                  <li><a href="{% url 'faq' %}#what-is-an-ubuntu-one-account">{% trans "What is an Ubuntu One account?" %}</a></li>
-                  <li><a href="{% url 'faq' %}#how-can-i-update-my-ubuntu-one-email-address">{% trans "How can I update my Ubuntu One e-mail address?" %}</a></li>
-                  <li><a href="{% url 'faq' %}#i-never-received-my-ubuntu-one-verification-code-now-what">{% trans "I never received my Ubuntu One verification code. Now what?" %}</a></li>
-                  <li><a href="{% url 'faq' %}#how-do-i-recover-or-change-my-ubuntu-one-password">{% trans "How do I recover or change my Ubuntu One password?" %}</a></li>
-                  <li><a href="{% url 'faq' %}#can-i-delete-my-ubuntu-one-account">{% trans "Can I delete my Ubuntu One account?" %}</a></li>
-                </ul>
-
-                <p class="more-help">
-                {% url 'faq' as faq_url %}
-                {% blocktrans with email='[e-mail]' %}
-                <a href="{{ faq_url }}">View all FAQs</a> or email support at <a href="mailto:{{ email }}">{{ email }}</a>
-                {% endblocktrans %}
-            </div>
-
-        </div>
-
-    </div>
-
-</div>
-
+<section class="p-strip">
+  <div class="row">
+    <div class="col-8">
+      <h3>{% trans "One account to log in to everything on Ubuntu" %}</h3>
+      <p>{% blocktrans %}Ubuntu One is the single account you use to log in to
+      all services and sites related to Ubuntu.{% endblocktrans %}</p>
+      <h3>{% trans "Already have an SSO account?" %}</h3>
+      <p>{% blocktrans %}You can use your existing Ubuntu single sign on or
+      Launchpad credentials to log in. Your Ubuntu single sign on account is
+      now called your Ubuntu One account.{% endblocktrans %}</p>
+    </div>
+    <div class="col-4">
+      <div class="p-card">
+        <h3>Account FAQ</h3>
+        <ul class="p-list--divided">
+          <li class="p-list__item"><a href="{% url 'faq' %}#what-is-an-ubuntu-one-account">{% trans "What is an Ubuntu One account?" %}</a></li>
+          <li class="p-list__item"><a href="{% url 'faq' %}#how-can-i-update-my-ubuntu-one-email-address">{% trans "How can I update my Ubuntu One e-mail address?" %}</a></li>
+          <li class="p-list__item"><a href="{% url 'faq' %}#i-never-received-my-ubuntu-one-verification-code-now-what">{% trans "I never received my Ubuntu One verification code. Now what?" %}</a></li>
+          <li class="p-list__item"><a href="{% url 'faq' %}#how-do-i-recover-or-change-my-ubuntu-one-password">{% trans "How do I recover or change my Ubuntu One password?" %}</a></li>
+          <li class="p-list__item"><a href="{% url 'faq' %}#can-i-delete-my-ubuntu-one-account">{% trans "Can I delete my Ubuntu One account?" %}</a></li>
+        </ul>
+        <p>
+          {% url 'faq' as faq_url %}
+          {% blocktrans with email='[e-mail]' %}
+            <a href="{{ faq_url }}">View all FAQs</a> or email support at <a href="mailto:{{ email }}">{{ email }}</a>
+          {% endblocktrans %}
+        </p>
+      </div>
+    </div>
+  </div>
+</section>
 {% endblock %}

=== added directory 'src/webui/templates/vanilla'
=== added file 'src/webui/templates/vanilla/_footer.html'
--- src/webui/templates/vanilla/_footer.html	1970-01-01 00:00:00 +0000
+++ src/webui/templates/vanilla/_footer.html	2019-07-17 13:42:18 +0000
@@ -0,0 +1,28 @@
+{% load i18n static_url %}
+
+{% comment %}
+Copyright 2010 Canonical Ltd.  This software is licensed under the
+GNU Affero General Public License version 3 (see the file  LICENSE).
+{% endcomment %}
+
+<footer class="p-strip" data-qa-id="ubuntuone_footer">
+  <hr>
+  <div class="row">
+    <p>{% trans "Ubuntu One. One place to log in to everything on Ubuntu." %}</p>
+    {% spaceless %}
+    <ul class="p-inline-list--middot">
+      <li class="p-inline-list__item"><a href="{{ 'terms_of_service'|static_url }}">{% trans "Terms" %}</a></li>
+      <li class="p-inline-list__item"><a href="{{ 'privacy_policy'|static_url }}">{% trans "Canonical privacy notice" %}</a></li>
+      <li class="p-inline-list__item"><a href="{{ 'privacy_notice'|static_url }}">{% trans "SSO privacy notice" %}</a></li>
+      <li class="p-inline-list__item"><a href="{{ 'support_form'|static_url }}">{% trans "Support" %}</a></li>
+      <li class="p-inline-list__item"><a href="{{ 'dp_bugs'|static_url }}">{% trans "Report a bug on this site" %}</a></li>
+      {% block language_footer %}
+        {% if not embedded %}
+          <li class="p-inline-list__item"><a href="{% url 'set_language' %}">{% trans "Switch language" %}</a></li>
+        {% endif %}
+      {% endblock %}
+    </ul>
+    {% endspaceless %}
+    <p>{% blocktrans with current_date|date:"Y" as current_year %}&copy; Copyright {{ current_year }} Canonical Ltd. &lsquo;Ubuntu One&rsquo; and &lsquo;Canonical&rsquo; are registered trademarks of Canonical Ltd.{% endblocktrans %}</p>
+  </div>
+</footer>

=== added file 'src/webui/templates/vanilla/_header.html'
--- src/webui/templates/vanilla/_header.html	1970-01-01 00:00:00 +0000
+++ src/webui/templates/vanilla/_header.html	2019-07-17 13:42:18 +0000
@@ -0,0 +1,32 @@
+{% load i18n %}
+
+{% comment %}
+Copyright 2010 Canonical Ltd.  This software is licensed under the
+GNU Affero General Public License version 3 (see the file  LICENSE).
+{% endcomment %}
+
+<header id="navigation" class="p-navigation">
+  <div class="row">
+    <div class="p-navigation__banner">
+      <div class="p-navigation__logo">
+        {% if not embedded %}
+          <a href="/" id="u1-logo" class="p-navigation__link">
+            <img src="https://assets.ubuntu.com/v1/d738f754-Ubuntu_One_Mono_Logo.svg" alt="{% blocktrans %}Ubuntu One{% endblocktrans %}" width="90">
+          </a>
+        {% endif %}
+      </div>
+      <a href="#navigation" class="p-navigation__toggle--open" title="menu">Menu</a>
+      <a href="#navigation-closed" class="p-navigation__toggle--close" title="close menu">Close menu</a>
+    </div>
+    <nav class="p-navigation__nav">
+      <span class="u-off-screen">
+        <a href="#main-content">Jump to main content</a>
+      </span>
+      {% block me-menu %}
+        {% include "vanilla/widgets/header-me-menu.html" %}
+      {% endblock %}
+
+      {% block navigation %}{% endblock %}
+    </nav>
+  </div>
+</header>

=== added file 'src/webui/templates/vanilla/base.html'
--- src/webui/templates/vanilla/base.html	1970-01-01 00:00:00 +0000
+++ src/webui/templates/vanilla/base.html	2019-07-17 13:42:18 +0000
@@ -0,0 +1,179 @@
+{% load i18n static_url combo staticfiles %}
+<!DOCTYPE html>
+
+<!--[if IE 7 ]><html class="ie7" lang="en" dir="ltr"><![endif]-->
+<!--[if IE 8 ]><html class="ie8" lang="en" dir="ltr"><![endif]-->
+<!--[if (gte IE 9)|!(IE)]><!--><html lang="en" dir="ltr" class="no-js" {% block html_extra %}{% endblock %}><!--<![endif]-->
+{% comment %}Copyright 2013 Canonical Ltd. This software is licensed under the GNU Affero General Public License version 3 (see the file LICENSE).{% endcomment %}
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    {% block extra_meta %}{% endblock %}
+
+    {% block extra_header %}{% endblock %}
+
+    <title>{% block title %}{% trans "Log in" %}{% endblock %}</title>
+    <link rel="icon" type="image/vnd.microsoft.icon"
+    href="{% static 'identityprovider/img/favicon.ico' %}">
+
+    {% block corecss %}
+    <link href="{% static 'vanilla-css/styles.css' %}" rel="stylesheet">
+    {% endblock %}
+    {% block extra_css %}{% endblock %}
+
+    <!--[if lt IE 9]>
+    <script type="text/javascript" src="{% static 'identityprovider/js/ie/html5shiv.js' %}"></script>
+    <![endif]-->
+    <script>
+      document.documentElement.className=document.documentElement.className.replace(/\bno-js\b/,'') + ' js';
+    </script>
+  </head>
+  <body data-qa-id="{% block qaid %}{% endblock %}" {% if embedded %}onload="blank_targets()"{% endif %}
+  class="{% block bodyclass %}{% if user.is_authenticated %}with-menu{% endif %}{% endblock %}{% if readonly %} readonly{% endif %}">
+  {% get_current_language as LANGUAGE_CODE %}
+  <!-- Current language: {{ LANGUAGE_CODE }} -->
+
+  {% if google_tag_manager_id %}
+  <!-- Google Tag Manager (noscript) -->
+  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ google_tag_manager_id }}"
+    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+    <!-- End Google Tag Manager (noscript) -->
+    {% endif %}
+
+    <div id="cont" role="main">
+      {% include "vanilla/_header.html" %}
+
+      {% block menu %}
+      {% if user.is_authenticated %}
+      {% include "widgets/personal-menu.html" %}
+      {% endif %}
+      {% endblock %}
+
+      <div id="content">
+
+        {% block readonly %}
+        {% if readonly %}
+        <div class="p-notification--caution">
+          <p class="p-notification__response">
+            {% blocktrans %}We are currently in read-only mode. That means that at the moment you can't create new accounts, update your personal information, or request password reminders.{% endblocktrans %}
+          </p>
+        </div>
+        {% endif %}
+        {% endblock %}
+
+        {% block messages %}
+        {% if messages %}
+        {% for message in messages %}
+        <div class="p-notification">
+          <p class="p-notification__response">
+            {{ message }}
+          </p>
+        </div>
+        {% endfor %}
+        {% endif %}
+        {% endblock %}
+
+        <section class="p-strip--dark p-cip-hero">
+          <div class="row">
+            <div class="col-7">
+              {% block text_title %}{% endblock %}
+            </div>
+          </div>
+        </section>
+
+        <div id="{% block content_id %}box{% endblock %}">
+          {% block content %}{% endblock %}
+        </div>
+
+      </div><!-- close #content -->
+
+      {% include "vanilla/_footer.html" %}
+
+    </div><!-- close #cont -->
+
+    {% block general_js %}
+    <script type="text/javascript">
+    YUI_config = {
+      maxURLLength: 2000,
+      combine: {{ combine|lower }},
+      comboBase: '{{ combo_url }}?',
+      base: '{% static "yui/3.15.0/" %}',
+      root: 'yui/3.15.0/'
+    }
+  </script>
+  {# use combo to load yui, to provide far future caching, as whitenoise doesn't for non-hashed urls #}
+  {# notexist disables optimisation in template tag that avoids combo if only one file #}
+  {% combo 'yui/3.15.0/yui/yui-min.js' 'notexist' %}
+
+  <script type="text/javascript">
+  YUI().use('node', 'transition', function (Y) {
+    Y.all('.message.temporary').transition({
+      easing: 'ease-out',
+      duration: 0.1,
+      delay: 5,
+      height: 0,
+      opacity: 0,
+      marginTop: 0,
+      marginBottom: 0,
+      paddingTop: 0,
+      paddingBottom: 0,
+      on: {
+        start: function () {
+          this.setStyle('overflow', 'hidden');
+        }
+      }
+    });
+  });
+  </script>
+
+  {% endblock %}
+
+  {% block test_js %}{% endblock %}
+  {% block extra_js %}{% endblock %}
+
+  {% block disable_submit_buttons_js %}
+  <script type="text/javascript">
+  (function(){
+    // disable all submit buttons after initial form submission
+    // to prevent double-clicks
+    var formEls = document.querySelectorAll('form');
+
+    if (formEls && formEls.length) {
+      for (var i = formEls.length; i--;) {
+        formEls[i].addEventListener('submit', disableAfterSubmit);
+      }
+    }
+
+    function disableAfterSubmit(e) {
+      var formEl = e.currentTarget;
+      var submitEl = formEl.querySelector('input[type=submit],button[type=submit]');
+
+      if (!submitEl.classList.contains('disabled')) {
+        disableSubmitEl(submitEl);
+      } else {
+        e.preventDefault();
+      }
+    }
+
+    function disableSubmitEl(el) {
+      el.classList.add('disabled');
+    }
+
+  })();
+  </script>
+  {% endblock %}
+
+  {% block analytics %}
+  {% if google_tag_manager_id %}
+  <!-- Google Tag Manager -->
+  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+  })(window,document,'script','dataLayer','{{ google_tag_manager_id }}');</script>
+  <!-- End Google Tag Manager -->
+  {% endif %}
+  {% endblock %}
+
+  </body>
+</html>

=== added directory 'src/webui/templates/vanilla/widgets'
=== added file 'src/webui/templates/vanilla/widgets/header-me-menu.html'
--- src/webui/templates/vanilla/widgets/header-me-menu.html	1970-01-01 00:00:00 +0000
+++ src/webui/templates/vanilla/widgets/header-me-menu.html	2019-07-17 13:42:18 +0000
@@ -0,0 +1,18 @@
+{% load i18n %}
+{% load menu_item %}
+{% load url_with_token %}
+
+<ul class="p-navigation__links" role="menu" id="ac-status">
+  {% if user.is_authenticated %}
+    <li id="account" data-qa-id="account" class="p-navigation__link" role="menuitem">
+      <span data-qa-id="user_name" class="user-name">{{user.displayname}}</span>
+      <a href="{% url_with_token 'account-index' %}" id="account-link" data-qa-id="account_link">{% trans "My account" %}</a> <span class="sep">|</span>
+      <a href="{% url_with_token 'logout' %}" id="logout-link" data-qa-id="logout_link">{% trans "Log out" %}</a>
+    </li>
+{% else %}
+  <li class="p-navigation__link" role="menuitem">
+    {% url_with_token 'login' as login_url %}
+    {% menu_item "login" _("Log in or Create account") login_url %}
+  </li>
+{% endif %}
+</ul>