firstpassphrase.html revision 3f50c38dc070f4bb515c1b64450dae14f316474e 
1<html i18n-values="dir:textdirection;">
2<head>
3<title></title>
4<style type="text/css">
5body {
6   line-height: 1.5em;
7   background: #FFFFFF;
8   font-size: 11pt;
9}
10html[os='mac'] body {
11  line-height: 1.5em;
12  background: #FFFFFF;
13}
14form {
15  -webkit-user-select: none;
16}
17.error {
18  color: red;
19  font-size: 10pt;
20 }
21.sync-header {
22  font-size: 1.2em;
23  font-weight: bold;
24  margin-bottom: 10px;
25}
26.sync-instructions {
27  margin-top: 10px;
28  margin-bottom: 10px;
29}
30.sync-footer {
31  position: fixed;
32  right: 0px;
33  bottom: 0px;
34  margin-right: 10px;
35  margin-bottom: 10px;
36}
37.sync-section {
38  background: #EEE;
39  margin: 5px;
40  padding: 10px;
41}
42html[dir='rtl'] .sync-footer {
43  text-align: left;
44  left: 0px;
45  bottom: 0px;
46  margin-left: 20px;
47}
48input[type='button'],
49input[type='submit'] {
50  min-width: 87px;
51  min-height: 26px;
52}
53html[os='mac'] input[type='button'],
54html[os='mac'] input[type='submit'] {
55  font-size: 12pt;
56}
57
58#passphrase {
59  margin-top: 5px;
60}
61
62#passphraseLabel,
63#confirmPassphraseLabel {
64  width: 145px;
65  float: left;
66  text-align: right;
67  margin-right: 4px;
68  padding-top: 3px;
69}
70
71</style>
72<script src="chrome://resources/js/cr.js"></script>
73<script>
74  var currentMode;
75
76  // Called once, when this html/js is loaded.
77  function setupDialog(args) {
78    // Allow platform specific rules
79    if (cr.isMac) {
80      document.documentElement.setAttribute('os', 'mac');
81    } else if (!cr.isWindows) {
82      document.documentElement.setAttribute('os', 'linux');
83    }
84
85    switchToMode("");
86  }
87
88  function switchToMode(mode) {
89    document.getElementById("section-explicit").style.display = "none";
90    document.getElementById("section-nothanks").style.display = "none";
91    document.getElementById("section-google").style.display = "none";
92
93    if (mode == "google") {
94      document.getElementById("section-google").style.display = "block";
95    } else if (mode =="explicit") {
96      document.getElementById("section-explicit").style.display = "block";
97    } else if (mode == "nothanks") {
98      document.getElementById("section-nothanks").style.display = "block";
99    }
100  }
101
102  function getRadioCheckedValue() {
103    var f = document.getElementById("form");
104    for (var i = 0; i < f.option.length; ++i) {
105      if (f.option[i].checked) {
106        return f.option[i].value;
107      }
108    }
109    return undefined;
110  }
111
112  function onRadioChange() {
113    switchToMode(getRadioCheckedValue());
114  }
115
116  function checkPassphraseMatch() {
117    var emptyError = document.getElementById("emptyerror");
118    var mismatchError = document.getElementById("mismatcherror");
119    emptyError.style.display = "none";
120    mismatchError.style.display = "none";
121
122    if (getRadioCheckedValue() != "explicit") {
123      return true;
124    }
125    var f = document.getElementById("form");
126    if (f.passphrase.value.length == 0) {
127      emptyError.style.display = "block";
128      return false;
129    }
130    if (f.confirmpassphrase.value.length > 0 &&
131        f.confirmpassphrase.value != f.passphrase.value) {
132      mismatchError.style.display = "block";
133      return false;
134    }
135    return true;
136  }
137
138  function sendValuesAndClose() {
139    var f = document.getElementById("form");
140    if (!checkPassphraseMatch()) {
141      return false;
142    }
143
144    var result = JSON.stringify({"option": getRadioCheckedValue(),
145                                 "passphrase": f.passphrase.value});
146    chrome.send("FirstPassphrase", [result]);
147  }
148</script>
149</head>
150<body i18n-values=".style.fontFamily:fontfamily" onload="setupDialog();">
151<form id="form" onSubmit="sendValuesAndClose(); return false;">
152  <div class="sync-header" id="title" i18n-content="title"></div>
153  <div class="sync-instructions" id="instructions"
154       i18n-content="instructions"></div>
155  <div>
156    <input name="option" type="radio" value="google" onchange="onRadioChange();">
157      <span i18n-content="googleOption"></span>
158    </input>
159  </div>
160  <div>
161    <input name="option" type="radio" value="explicit" onchange="onRadioChange();">
162    <span i18n-content="explicitOption"></span>
163    </input>
164  </div>
165  <div>
166    <input name="option" type="radio" value="nothanks" onchange="onRadioChange();">
167    <span i18n-content="nothanksOption"></span>
168    </input>
169  </div>
170
171  <div class="sync-section" id="section-google">
172    <div i18n-content="sectionGoogleMessage"></div>
173  </div>
174  <div class="sync-section" id="section-explicit">
175    <div i18n-content="sectionExplicitMessage"></div>
176    <div>
177      <div i18n-content="passphraseLabel" id="passphraseLabel"></div>
178      <input id="passphrase" name="passphrase" label="passphraseLabel"
179             type="password" onkeyup="checkPassphraseMatch();"
180             onchange="checkPassphraseMatch();"/>
181    </div>
182    <div>
183      <div i18n-content="confirmLabel" id="confirmPassphraseLabel">
184      </div>
185      <input id="confirmpassphrase" name="confirmpassphrase" type="password"
186             label="confirmPassphraseLabel"
187             onkeyup="checkPassphraseMatch();"
188             onchange="checkPassphraseMatch();" />
189    </div>
190    <div class="error" style="display:none"
191         id="emptyerror" i18n-content="emptyErrorMessage"></div>
192    <div class="error" style="display:none"
193         id="mismatcherror" i18n-content="mismatchErrorMessage"></div>
194  </div>
195  <div class="sync-section" id="section-nothanks">
196    <div i18n-content="sectionNothanksMessage"></div>
197  </div>
198
199  <div class="sync-footer">
200    <input id="okButton" type="submit" i18n-values="value:ok" />
201  </div>
202</form>
203</body>
204</html>
205