firstpassphrase.html revision 72a454cd3513ac24fbdd0e0cb9ad70b86a99b801 
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}
42
43#learn-more-link {
44  float: right;
45}
46
47html[dir='rtl'] .sync-footer {
48  text-align: left;
49  left: 0px;
50  bottom: 0px;
51  margin-left: 20px;
52}
53input[type='button'],
54input[type='submit'] {
55  min-width: 87px;
56  min-height: 26px;
57  margin-left: 7px;
58}
59html[os='mac'] input[type='button'],
60html[os='mac'] input[type='submit'] {
61  font-size: 12pt;
62}
63
64#passphrase {
65  margin-top: 5px;
66}
67
68</style>
69<script src="chrome://resources/js/cr.js"></script>
70<script>
71  var currentMode;
72
73  // Called once, when this html/js is loaded.
74  function setupDialog(args) {
75    // Allow platform specific rules
76    if (cr.isMac) {
77      document.documentElement.setAttribute('os', 'mac');
78    } else if (!cr.isWindows) {
79      document.documentElement.setAttribute('os', 'linux');
80    }
81
82    switchToMode("");
83  }
84
85  function switchToMode(mode) {
86    document.getElementById("section-explicit").style.display = "none";
87
88    if (mode == "explicit") {
89      document.getElementById("section-explicit").style.display = "block";
90    }
91  }
92
93  function getRadioCheckedValue() {
94    var f = document.getElementById("form");
95    for (var i = 0; i < f.option.length; ++i) {
96      if (f.option[i].checked) {
97        return f.option[i].value;
98      }
99    }
100    return undefined;
101  }
102
103  function onRadioChange() {
104    switchToMode(getRadioCheckedValue());
105  }
106
107  function checkPassphraseMatch() {
108    var emptyError = document.getElementById("emptyerror");
109    var mismatchError = document.getElementById("mismatcherror");
110    emptyError.style.display = "none";
111    mismatchError.style.display = "none";
112
113    if (getRadioCheckedValue() != "explicit") {
114      return true;
115    }
116    var f = document.getElementById("form");
117    if (f.passphrase.value.length == 0) {
118      emptyError.style.display = "block";
119      return false;
120    }
121    if (f.confirmpassphrase.value != f.passphrase.value) {
122      mismatchError.style.display = "block";
123      return false;
124    }
125    return true;
126  }
127
128  function sendValuesAndClose() {
129    var f = document.getElementById("form");
130    if (!checkPassphraseMatch()) {
131      return false;
132    }
133
134    var result = JSON.stringify({"option": getRadioCheckedValue(),
135                                 "passphrase": f.passphrase.value});
136    chrome.send("FirstPassphrase", [result]);
137  }
138
139  function optOutOfPasswordsAndClose() {
140    var result = JSON.stringify({"option": "nothanks",
141                                 "passphrase": ""});
142    chrome.send("FirstPassphrase", [result]);
143  }
144</script>
145</head>
146<body i18n-values=".style.fontFamily:fontfamily" onload="setupDialog();">
147<form id="form" onSubmit="sendValuesAndClose(); return false;">
148  <div class="sync-header" id="title" i18n-content="title"></div>
149  <div class="sync-instructions" id="instructions"
150       i18n-content="instructions"></div>
151  <div>
152    <input name="option" type="radio" value="google"
153           id="google-option" onchange="onRadioChange();">
154      <label for="google-option" i18n-content="googleOption"></label>
155    </input>
156  </div>
157  <div>
158    <input name="option" type="radio" value="explicit"
159           id="explicit-option" onchange="onRadioChange();">
160    <div id="learn-more-link">
161      <a i18n-values="href:encryptionhelpurl" target="_blank"
162         i18n-content="learnmore"></a>
163    </div>
164    <label for="explicit-option" i18n-content="explicitOption"></label>
165    </input>
166  </div>
167
168  <div class="sync-section" id="section-explicit">
169    <div i18n-content="sectionExplicitMessage"></div>
170    <div>
171      <div i18n-content="passphraseLabel" id="passphraseLabel"></div>
172      <input id="passphrase" name="passphrase" label="passphraseLabel"
173             type="password"/>
174    </div>
175    <div>
176      <div i18n-content="confirmLabel" id="confirmPassphraseLabel">
177      </div>
178      <input id="confirmpassphrase" name="confirmpassphrase" type="password"
179             label="confirmPassphraseLabel" />
180    </div>
181    <div class="error" style="display:none"
182         id="emptyerror" i18n-content="emptyErrorMessage"></div>
183    <div class="error" style="display:none"
184         id="mismatcherror" i18n-content="mismatchErrorMessage"></div>
185  </div>
186
187  <div class="sync-footer">
188    <input id="okButton" type="submit" i18n-values="value:syncpasswords" />
189    <input id="noThanksButton" type="submit" i18n-values="value:nothanks"
190           onclick="optOutOfPasswordsAndClose(); return false;"/>
191  </div>
192</form>
193</body>
194</html>
195