← Back to branch summary

~roadmr/canonical-identity-provider/webauthn-register-endpoint-part-2-the-registration

« back to all changes in this revision

Viewing changes to src/webui/templates/device/types.html

Merged webauthn-register-endpoint into webauthn-register-endpoint-part-2-the-registration.

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/webui/templates/device/types.html
1
 
{% extends "base.html" %}
 
1
{% extends "vanilla/base.html" %}
2
2
{% load i18n %}
3
3
{% load static_url %}
4
4
{% load gargoyle_tags %}
5
5
 
6
6
{% comment %}
7
 
Copyright 2012 Canonical Ltd.  This software is licensed under the GNU
 
7
Copyright 2012-2019 Canonical Ltd.  This software is licensed under the GNU
8
8
Affero General Public License version 3 (see the file LICENSE).
9
9
{% endcomment %}
10
10
 
11
11
{% block html_extra %}data-qa-id="device_addition"{% endblock %}
12
12
 
13
13
{% block title %}
14
 
  {% blocktrans %}{{ user }}'s devices{% endblocktrans %}
 
14
  {% trans "Add a new authentication device" %}
15
15
{% endblock %}
16
16
 
17
17
 
18
 
{% block text_title %}<h1 class="u1-h-main">{% trans "Add a new authentication device" %}</h1>{% endblock %}
 
18
{% block text_title %}{% trans "My account" %}{% endblock %}
19
19
 
20
20
{% block content %}
21
 
 
22
 
<form method="post" action="">
23
 
  {% csrf_token %}
24
 
 
25
 
  <dl class="device-types">
26
 
 
27
 
    <dt><label>
28
 
      <input type="radio" name="type" value="google" id="type_google" checked="checked"> {% trans "Smartphone or Tablet" %}
29
 
    </label></dt>
30
 
    <dd>
31
 
    <p><label for="type_google">{% blocktrans %}Android, Apple, or Blackberry mobile device with the Google Authenticator app;
32
 
          or Windows phone with the Auth7 app{% endblocktrans %}</label></p>
33
 
    </dd>
34
 
 
35
 
    <dt><label>
36
 
      <input type="radio" name="type" value="yubi" id="type_yubi"> {% trans "YubiKey" %}
37
 
      </label></dt>
38
 
    <dd>
39
 
      <p><label for="type_yubi">{% blocktrans %}USB YubiKey one time password generator{% endblocktrans %}</label></p>
40
 
    </dd>
41
 
 
42
 
    <dt><label>
43
 
      <input type="radio" name="type" value="generic" id="type_generic"> {% trans "Generic HOTP/TOTP device" %}
44
 
    </label></dt>
45
 
    <dd>
46
 
      <p><label for="type_generic">{% blocktrans %}Any other OATH HOTP/TOTP compatible device{% endblocktrans %}</label></p>
47
 
    </dd>
48
 
 
49
 
    <dt><label>
50
 
      <input type="radio" name="type" value="paper" id="type_paper"> {% trans "Printable Backup Codes" %}
51
 
    </label></dt>
52
 
    <dd>
53
 
      <p><label for="type_paper">{% blocktrans %}A list of backup codes to
54
 
      print.{% endblocktrans %}</label></p>
55
 
    </dd>
56
 
 
57
 
  </dl>
58
 
 
59
 
  <p>
60
 
    <button class="btn cta" type="submit" data-qa-id="add_device_from_type">
61
 
      <span>{% trans "Add device" %}</span>
62
 
    </button>
63
 
    <a class="cta secondary" data-qa-id="cancel_add_device_from_type" href="{{ device_list_path }}">{% trans "Cancel" %}</a>
64
 
  </p>
65
 
  <p>
66
 
    {% blocktrans with "twofactor_faq"|static_url as 2FFAQ %}
67
 
    The <a href="{{2FFAQ}}#Devices">2-Factor Auth FAQ</a>
68
 
    has details on compatible devices.
69
 
    {% endblocktrans %}
70
 
  </p>
71
 
 
72
 
 
73
 
</form>
74
 
 
 
21
  <h2>{% trans "Add a new authentication device" %}</h2>
 
22
  <form method="post" action="">
 
23
    {% csrf_token %}
 
24
 
 
25
    <ul class="p-list">
 
26
      <li class="p-list__item">
 
27
        <div class="row">
 
28
          <div class="col-3">
 
29
            <input type="radio" name="type" value="google" id="type_google" checked="checked">
 
30
            <label for="type_google">{% trans "Smartphone or Tablet" %}</label>
 
31
          </div>
 
32
          <div class="col-5">
 
33
            <p>{% blocktrans %}Android, Apple, or Blackberry mobile device with the Google Authenticator app; or Windows phone with the Auth7 app{% endblocktrans %}</p>
 
34
          </div>
 
35
        </div>
 
36
      </li>
 
37
      <li class="p-list__item">
 
38
        <div class="row">
 
39
          <div class="col-3 col-medium-3">
 
40
            <input type="radio" name="type" value="yubi" id="type_yubi">
 
41
            <label for="type_yubi">{% trans "YubiKey" %}</label>
 
42
          </div>
 
43
          <div class="col-5 col-medium-3">
 
44
            <p>{% blocktrans %}USB YubiKey one time password generator{% endblocktrans %}</p>
 
45
          </div>
 
46
        </div>
 
47
      </li>
 
48
      <li class="p-list__item">
 
49
        <div class="row">
 
50
          <div class="col-3 col-medium-3">
 
51
            <input type="radio" name="type" value="generic" id="type_generic">
 
52
            <label for="type_generic">{% trans "Generic HOTP/TOTP device" %}</label>
 
53
          </div>
 
54
          <div class="col-5 col-medium-3">
 
55
            <p>{% blocktrans %}Any other OATH HOTP/TOTP compatible device{% endblocktrans %}</p>
 
56
          </div>
 
57
        </div>
 
58
      </li>
 
59
      <li class="p-list__item">
 
60
        <div class="row">
 
61
          <div class="col-3 col-medium-3">
 
62
            <input type="radio" name="type" value="paper" id="type_paper">
 
63
            <label for="type_paper">{% trans "Printable Backup Codes" %}</label>
 
64
          </div>
 
65
          <div class="col-5 col-medium-3">
 
66
            <p>{% blocktrans %}A list of backup codes to
 
67
            print.{% endblocktrans %}</p>
 
68
          </div>
 
69
        </div>
 
70
      </li>
 
71
    </ul>
 
72
 
 
73
    <button class="p-button--positive" type="submit" data-qa-id="add_device_from_type">{% trans "Add device" %}</button>
 
74
    <a class="p-button--neutral" data-qa-id="cancel_add_device_from_type" href="{{ device_list_path }}">{% trans "Cancel" %}</a>
 
75
    <p>
 
76
      {% blocktrans with "twofactor_faq"|static_url as 2FFAQ %}
 
77
      The <a href="{{2FFAQ}}#Devices">2-Factor Auth FAQ</a>
 
78
      has details on compatible devices.
 
79
      {% endblocktrans %}
 
80
    </p>
 
81
  </form>
75
82
{% endblock %}