This repository has been archived by the owner on Apr 3, 2019. It is now read-only.
/
sign_up.mustache
114 lines (98 loc) · 5.19 KB
/
sign_up.mustache
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<div id="main-content">
<header>
<h1 id="fxa-signup-header">
{{#serviceName}}
<!-- L10N: For languages structured like English, the second phrase can read "to continue to %(serviceName)s" -->
{{#t}}Create a Firefox Account{{/t}} <span class="service">{{#t}}Continue to %(serviceName)s{{/t}}</span>
{{/serviceName}}
{{^serviceName}}
{{#t}}Create a Firefox Account{{/t}}
{{/serviceName}}
</h1>
</header>
<section>
{{#error}}
<div class="error visible">{{ error }}</div>
{{/error}}
{{^error}}
<div class="error"></div>
<div class="success"></div>
<form novalidate>
<div class="input-row">
<input type="email" class="email" placeholder="{{#t}}Email{{/t}}" value="{{ email }}" {{#shouldFocusEmail}}autofocus{{/shouldFocusEmail}} required />
</div>
<div class="input-row password-row">
<input id="password" type="password" class="password tooltip-below" placeholder="{{#t}}Password{{/t}}" value="{{ password }}" pattern=".{8,}" required autocomplete="off" {{#shouldFocusPassword}}autofocus{{/shouldFocusPassword}} />
<input id="show-password" type="checkbox" class="show-password" aria-controls="password" tabindex="-1" data-novalue />
<label for="show-password" class="show-password-label">
{{#t}}Show{{/t}}
</label>
<div class="input-help input-help-focused">{{#t}}Must be at least 8 characters{{/t}}</div>
</div>
<div class="select-row-wrapper" id="year-picker">
<div class="select-row">
<select id="fxa-age-year" {{#shouldFocusYear}}autofocus{{/shouldFocusYear}}>
<option id="fxa-none" value="none">{{#t}}Year of birth{{/t}}</option>
<option id="fxa-1990" value="1990">{{#t}}1990 or earlier{{/t}}</option>
<option id="fxa-1991" value="1991">{{#t}}1991{{/t}}</option>
<option id="fxa-1992" value="1992">{{#t}}1992{{/t}}</option>
<option id="fxa-1993" value="1993">{{#t}}1993{{/t}}</option>
<option id="fxa-1994" value="1994">{{#t}}1994{{/t}}</option>
<option id="fxa-1995" value="1995">{{#t}}1995{{/t}}</option>
<option id="fxa-1996" value="1996">{{#t}}1996{{/t}}</option>
<option id="fxa-1997" value="1997">{{#t}}1997{{/t}}</option>
<option id="fxa-1998" value="1998">{{#t}}1998{{/t}}</option>
<option id="fxa-1999" value="1999">{{#t}}1999{{/t}}</option>
<option id="fxa-2000" value="2000">{{#t}}2000{{/t}}</option>
<option id="fxa-2001" value="2001">{{#t}}2001{{/t}}</option>
<option id="fxa-2002" value="2002">{{#t}}2002{{/t}}</option>
<option id="fxa-2003" value="2003">{{#t}}2003{{/t}}</option>
<option id="fxa-2004" value="2004">{{#t}}2004{{/t}}</option>
<option id="fxa-2005" value="2005">{{#t}}2005{{/t}}</option>
<option id="fxa-2006" value="2006">{{#t}}2006{{/t}}</option>
<option id="fxa-2007" value="2007">{{#t}}2007{{/t}}</option>
</select>
</div>
</div>
<div class="select-row-wrapper hidden" id="month-date-picker">
<div class="select-row half-width">
<select id="fxa-age-month">
<option id="fxa-month-none" value="none">{{#t}}Month{{/t}}</option>
<option id="fxa-month-0" value="0">{{#t}}January{{/t}}</option>
<option id="fxa-month-1" value="1">{{#t}}February{{/t}}</option>
<option id="fxa-month-2" value="2">{{#t}}March{{/t}}</option>
<option id="fxa-month-3" value="3">{{#t}}April{{/t}}</option
<option id="fxa-month-4" value="4">{{#t}}May{{/t}}</option>
<option id="fxa-month-5" value="5">{{#t}}June{{/t}}</option>
<option id="fxa-month-6" value="6">{{#t}}July{{/t}}</option>
<option id="fxa-month-7" value="7">{{#t}}August{{/t}}</option>
<option id="fxa-month-8" value="8">{{#t}}September{{/t}}</option>
<option id="fxa-month-9" value="9">{{#t}}October{{/t}}</option>
<option id="fxa-month-10" value="10">{{#t}}November{{/t}}</option>
<option id="fxa-month-11" value="11">{{#t}}December{{/t}}</option>
</select>
</div>
<div class="select-row half-width disabled">
<select id="fxa-age-date" disabled="true">
<option id="fxa-day-none" value="none">{{#t}}Day{{/t}}</option>
</select>
</div>
</div>
<div class="privacy-links">
{{#t}}By proceeding, I agree to the <a id="fxa-tos" href="/legal/terms">Terms of Service</a> and <a id="fxa-pp" href="/legal/privacy">Privacy Notice</a> of Firefox cloud services.{{/t}}
</div>
<div class="button-row">
<button id="submit-btn" type="submit" class="disabled">{{#t}}Sign up{{/t}}</button>
</div>
{{#isSync}}
<div class="input-row customize-sync-row">
<label><input id="customize-sync" type="checkbox" class="customize-sync"> {{#t}}Choose what to sync{{/t}}</label>
</div>
{{/isSync}}
</form>
<div class="links">
<a href="/signin" class="sign-in">{{#t}}Already have an account? Sign in.{{/t}}</a>
</div>
{{/error}}
</section>
</div>