mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-10 20:05:49 +00:00
Bug 602682 - Sync UI: Implement easy setup. r=mconnor a=blocking-beta8
This adds the Add a Device wizard.
This commit is contained in:
parent
4adece05c1
commit
7757aca5d3
174
browser/base/content/syncAddDevice.js
Normal file
174
browser/base/content/syncAddDevice.js
Normal file
@ -0,0 +1,174 @@
|
||||
/* ***** BEGIN LICENSE BLOCK *****
|
||||
* Version: MPL 1.1/GPL 2.0/LGPL 2.1
|
||||
*
|
||||
* The contents of this file are subject to the Mozilla Public License Version
|
||||
* 1.1 (the "License"); you may not use this file except in compliance with
|
||||
* the License. You may obtain a copy of the License at
|
||||
* http://www.mozilla.org/MPL/
|
||||
*
|
||||
* Software distributed under the License is distributed on an "AS IS" basis,
|
||||
* WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
|
||||
* for the specific language governing rights and limitations under the
|
||||
* License.
|
||||
*
|
||||
* The Original Code is Firefox Sync.
|
||||
*
|
||||
* The Initial Developer of the Original Code is
|
||||
* Mozilla Foundation.
|
||||
* Portions created by the Initial Developer are Copyright (C) 2010
|
||||
* the Initial Developer. All Rights Reserved.
|
||||
*
|
||||
* Contributor(s):
|
||||
* Philipp von Weitershausen <philipp@weitershausen.de>
|
||||
*
|
||||
* Alternatively, the contents of this file may be used under the terms of
|
||||
* either the GNU General Public License Version 2 or later (the "GPL"), or
|
||||
* the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
|
||||
* in which case the provisions of the GPL or the LGPL are applicable instead
|
||||
* of those above. If you wish to allow use of your version of this file only
|
||||
* under the terms of either the GPL or the LGPL, and not to allow others to
|
||||
* use your version of this file under the terms of the MPL, indicate your
|
||||
* decision by deleting the provisions above and replace them with the notice
|
||||
* and other provisions required by the GPL or the LGPL. If you do not delete
|
||||
* the provisions above, a recipient may use your version of this file under
|
||||
* the terms of any one of the MPL, the GPL or the LGPL.
|
||||
*
|
||||
* ***** END LICENSE BLOCK ***** */
|
||||
|
||||
const Ci = Components.interfaces;
|
||||
const Cc = Components.classes;
|
||||
const Cu = Components.utils;
|
||||
|
||||
Cu.import("resource://services-sync/main.js");
|
||||
Cu.import("resource://gre/modules/XPCOMUtils.jsm");
|
||||
|
||||
const PIN_PART_LENGTH = 4;
|
||||
|
||||
const ADD_DEVICE_PAGE = 0;
|
||||
const DEVICE_CONNECTED_PAGE = 1;
|
||||
const SYNC_KEY_PAGE = 2;
|
||||
|
||||
let gSyncAddDevice = {
|
||||
|
||||
init: function init() {
|
||||
this.pin1.setAttribute("maxlength", PIN_PART_LENGTH);
|
||||
this.pin2.setAttribute("maxlength", PIN_PART_LENGTH);
|
||||
this.pin3.setAttribute("maxlength", PIN_PART_LENGTH);
|
||||
|
||||
this.nextFocusEl = {pin1: this.pin2,
|
||||
pin2: this.pin3,
|
||||
pin3: this.wizard.getButton("next")};
|
||||
|
||||
this.throbber = document.getElementById("add-device-throbber");
|
||||
this.errorRow = document.getElementById("errorRow");
|
||||
},
|
||||
|
||||
onPageShow: function onPageShow() {
|
||||
this.wizard.getButton("back").hidden = true;
|
||||
|
||||
switch (this.wizard.pageIndex) {
|
||||
case ADD_DEVICE_PAGE:
|
||||
this.wizard.canAdvance = false;
|
||||
this.wizard.canRewind = false;
|
||||
this.pin1.focus();
|
||||
break;
|
||||
case DEVICE_CONNECTED_PAGE:
|
||||
this.wizard.canAdvance = true;
|
||||
this.wizard.canRewind = false;
|
||||
this.wizard.getButton("next").hidden = true;
|
||||
this.wizard.getButton("cancel").hidden = true;
|
||||
this.wizard.getButton("finish").hidden = false;
|
||||
break;
|
||||
case SYNC_KEY_PAGE:
|
||||
this.wizard.canAdvance = true;
|
||||
this.wizard.canRewind = true;
|
||||
this.wizard.getButton("back").hidden = false;
|
||||
document.getElementById("weavePassphrase").value =
|
||||
Weave.Utils.hyphenatePassphrase(Weave.Service.passphrase);
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
onWizardAdvance: function onWizardAdvance() {
|
||||
switch (this.wizard.pageIndex) {
|
||||
case ADD_DEVICE_PAGE:
|
||||
this.startTransfer();
|
||||
return false;
|
||||
case DEVICE_CONNECTED_PAGE:
|
||||
window.close();
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
|
||||
startTransfer: function startTransfer() {
|
||||
this.errorRow.hidden = true;
|
||||
let self = this;
|
||||
this._jpakeclient = new Weave.JPAKEClient({
|
||||
onComplete: function onComplete() {
|
||||
delete self._jpakeclient;
|
||||
self.wizard.pageIndex = DEVICE_CONNECTED_PAGE;
|
||||
},
|
||||
onAbort: function onAbort(error) {
|
||||
delete self._jpakeclient;
|
||||
|
||||
// Aborted by user, ignore.
|
||||
if (!error)
|
||||
return;
|
||||
|
||||
self.errorRow.hidden = false;
|
||||
self.throbber.hidden = true;
|
||||
self.pin1.value = self.pin2.value = self.pin3.value = "";
|
||||
self.pin1.disabled = self.pin2.disabled = self.pin3.disabled = false;
|
||||
self.pin1.focus();
|
||||
}
|
||||
});
|
||||
this.throbber.hidden = false;
|
||||
this.pin1.disabled = this.pin2.disabled = this.pin3.disabled = true;
|
||||
this.wizard.canAdvance = false;
|
||||
|
||||
let pin = this.pin1.value + this.pin2.value + this.pin3.value;
|
||||
let credentials = {account: Weave.Service.account,
|
||||
password: Weave.Service.password,
|
||||
synckey: Weave.Service.passphrase,
|
||||
serverURL: Weave.Service.serverURL};
|
||||
this._jpakeclient.sendWithPIN(pin, credentials);
|
||||
},
|
||||
|
||||
onWizardBack: function onWizardBack() {
|
||||
if (this.wizard.pageIndex != SYNC_KEY_PAGE)
|
||||
return true;
|
||||
|
||||
this.wizard.pageIndex = ADD_DEVICE_PAGE;
|
||||
return false;
|
||||
},
|
||||
|
||||
onWizardCancel: function onWizardCancel() {
|
||||
if (this._jpakeclient) {
|
||||
this._jpakeclient.abort();
|
||||
delete this._jpakeclient;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
|
||||
onTextBoxInput: function onTextBoxInput(textbox) {
|
||||
if (textbox.value.length == PIN_PART_LENGTH)
|
||||
this.nextFocusEl[textbox.id].focus();
|
||||
|
||||
this.wizard.canAdvance = (this.pin1.value.length == PIN_PART_LENGTH
|
||||
&& this.pin2.value.length == PIN_PART_LENGTH
|
||||
&& this.pin3.value.length == PIN_PART_LENGTH);
|
||||
},
|
||||
|
||||
goToSyncKeyPage: function goToSyncKeyPage() {
|
||||
this.wizard.pageIndex = SYNC_KEY_PAGE;
|
||||
}
|
||||
|
||||
};
|
||||
// onWizardAdvance() and onPageShow() are run before init() so we'll set
|
||||
// these up as lazy getters.
|
||||
["wizard", "pin1", "pin2", "pin3"].forEach(function (id) {
|
||||
XPCOMUtils.defineLazyGetter(gSyncAddDevice, id, function() {
|
||||
return document.getElementById(id);
|
||||
});
|
||||
});
|
161
browser/base/content/syncAddDevice.xul
Normal file
161
browser/base/content/syncAddDevice.xul
Normal file
@ -0,0 +1,161 @@
|
||||
<?xml version="1.0"?>
|
||||
|
||||
# ***** BEGIN LICENSE BLOCK *****
|
||||
# Version: MPL 1.1/GPL 2.0/LGPL 2.1
|
||||
#
|
||||
# The contents of this file are subject to the Mozilla Public License Version
|
||||
# 1.1 (the "License"); you may not use this file except in compliance with
|
||||
# the License. You may obtain a copy of the License at
|
||||
# http://www.mozilla.org/MPL/
|
||||
#
|
||||
# Software distributed under the License is distributed on an "AS IS" basis,
|
||||
# WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
|
||||
# for the specific language governing rights and limitations under the
|
||||
# License.
|
||||
#
|
||||
# The Original Code is Firefox Sync.
|
||||
#
|
||||
# The Initial Developer of the Original Code is
|
||||
# Mozilla Foundation.
|
||||
# Portions created by the Initial Developer are Copyright (C) 2009
|
||||
# the Initial Developer. All Rights Reserved.
|
||||
#
|
||||
# Contributor(s):
|
||||
# Philipp von Weitershausen <philipp@weitershausen.de>
|
||||
#
|
||||
# Alternatively, the contents of this file may be used under the terms of
|
||||
# either the GNU General Public License Version 2 or later (the "GPL"), or
|
||||
# the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
|
||||
# in which case the provisions of the GPL or the LGPL are applicable instead
|
||||
# of those above. If you wish to allow use of your version of this file only
|
||||
# under the terms of either the GPL or the LGPL, and not to allow others to
|
||||
# use your version of this file under the terms of the MPL, indicate your
|
||||
# decision by deleting the provisions above and replace them with the notice
|
||||
# and other provisions required by the GPL or the LGPL. If you do not delete
|
||||
# the provisions above, a recipient may use your version of this file under
|
||||
# the terms of any one of the MPL, the GPL or the LGPL.
|
||||
#
|
||||
# ***** END LICENSE BLOCK *****
|
||||
|
||||
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
|
||||
<?xml-stylesheet href="chrome://browser/skin/syncSetup.css" type="text/css"?>
|
||||
<?xml-stylesheet href="chrome://browser/skin/syncCommon.css" type="text/css"?>
|
||||
|
||||
<!DOCTYPE window [
|
||||
<!ENTITY % brandDTD SYSTEM "chrome://branding/locale/brand.dtd">
|
||||
<!ENTITY % syncBrandDTD SYSTEM "chrome://browser/locale/syncBrand.dtd">
|
||||
<!ENTITY % syncSetupDTD SYSTEM "chrome://browser/locale/syncSetup.dtd">
|
||||
%brandDTD;
|
||||
%syncBrandDTD;
|
||||
%syncSetupDTD;
|
||||
]>
|
||||
<wizard xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
|
||||
xmlns:html="http://www.w3.org/1999/xhtml"
|
||||
id="wizard"
|
||||
title="&addDevice.title.label;"
|
||||
windowtype="Sync:AddDevice"
|
||||
onwizardnext="return gSyncAddDevice.onWizardAdvance();"
|
||||
onwizardback="return gSyncAddDevice.onWizardBack();"
|
||||
onwizardcancel="gSyncAddDevice.onWizardCancel();"
|
||||
onload="gSyncAddDevice.init();">
|
||||
|
||||
<script type="application/javascript"
|
||||
src="chrome://browser/content/syncAddDevice.js"/>
|
||||
<script type="application/javascript"
|
||||
src="chrome://browser/content/syncUtils.js"/>
|
||||
<script type="application/javascript"
|
||||
src="chrome://browser/content/utilityOverlay.js"/>
|
||||
<script type="application/javascript"
|
||||
src="chrome://global/content/printUtils.js"/>
|
||||
|
||||
<wizardpage id="addDevicePage"
|
||||
label="&addDevice.title.label;"
|
||||
onpageshow="gSyncAddDevice.onPageShow();">
|
||||
<description>
|
||||
&addDevice.dialog.description.label;
|
||||
<label class="text-link"
|
||||
value="&addDevice.showMeHow.label;"
|
||||
href="https://services.mozilla.com/sync/help/add-device"/>
|
||||
</description>
|
||||
<spacer flex="1"/>
|
||||
<description>
|
||||
&addDevice.dialog.enterCode.label;
|
||||
</description>
|
||||
<spacer flex="1"/>
|
||||
<vbox align="center">
|
||||
<textbox id="pin1"
|
||||
class="pin"
|
||||
oninput="gSyncAddDevice.onTextBoxInput(this);"
|
||||
onfocus="this.select();"
|
||||
/>
|
||||
<textbox id="pin2"
|
||||
class="pin"
|
||||
oninput="gSyncAddDevice.onTextBoxInput(this);"
|
||||
onfocus="this.select();"
|
||||
/>
|
||||
<textbox id="pin3"
|
||||
class="pin"
|
||||
oninput="gSyncAddDevice.onTextBoxInput(this);"
|
||||
onfocus="this.select();"
|
||||
/>
|
||||
</vbox>
|
||||
<spacer flex="1"/>
|
||||
<vbox id="add-device-throbber" align="center" hidden="true">
|
||||
<image/>
|
||||
</vbox>
|
||||
<hbox id="errorRow" pack="center" hidden="true">
|
||||
<image class="statusIcon" status="error"/>
|
||||
<label class="status"
|
||||
value="&addDevice.dialog.tryAgain.label;"/>
|
||||
</hbox>
|
||||
<spacer flex="3"/>
|
||||
<label class="text-link"
|
||||
value="&addDevice.dontHaveDevice.label;"
|
||||
onclick="gSyncAddDevice.goToSyncKeyPage();"/>
|
||||
</wizardpage>
|
||||
|
||||
<wizardpage id="deviceConnectedPage"
|
||||
label="&addDevice.dialog.connected.label;"
|
||||
onpageshow="gSyncAddDevice.onPageShow();">
|
||||
<vbox align="center">
|
||||
<image id="successPageIcon"/>
|
||||
</vbox>
|
||||
<separator/>
|
||||
<description class="normal">
|
||||
&addDevice.dialog.successful.label;
|
||||
</description>
|
||||
</wizardpage>
|
||||
|
||||
<!-- Need a non-empty label here, otherwise we get a default label on Mac -->
|
||||
<wizardpage id="syncKeyPage"
|
||||
label=" "
|
||||
onpageshow="gSyncAddDevice.onPageShow();">
|
||||
<description>
|
||||
&addDevice.dialog.syncKey.label;
|
||||
</description>
|
||||
<spacer/>
|
||||
|
||||
<groupbox>
|
||||
<label value="&syncKeyEntry.label;"
|
||||
accesskey="&syncKeyEntry.accesskey;"
|
||||
control="weavePassphrase"/>
|
||||
<textbox id="weavePassphrase"
|
||||
disabled="true"/>
|
||||
</groupbox>
|
||||
|
||||
<groupbox align="center">
|
||||
<description>&syncKeyBackup.description;</description>
|
||||
<hbox>
|
||||
<button id="printSyncKeyButton"
|
||||
label="&button.syncKeyBackup.print.label;"
|
||||
accesskey="&button.syncKeyBackup.print.accesskey;"
|
||||
oncommand="gSyncUtils.passphrasePrint('weavePassphrase');"/>
|
||||
<button id="saveSyncKeyButton"
|
||||
label="&button.syncKeyBackup.save.label;"
|
||||
accesskey="&button.syncKeyBackup.save.accesskey;"
|
||||
oncommand="gSyncUtils.passphraseSave('weavePassphrase');"/>
|
||||
</hbox>
|
||||
</groupbox>
|
||||
</wizardpage>
|
||||
|
||||
</wizard>
|
@ -61,6 +61,8 @@ browser.jar:
|
||||
content/browser/aboutSyncTabs.css (content/aboutSyncTabs.css)
|
||||
* content/browser/aboutSyncTabs-bindings.xml (content/aboutSyncTabs-bindings.xml)
|
||||
* content/browser/syncSetup.xul (content/syncSetup.xul)
|
||||
content/browser/syncAddDevice.js (content/syncAddDevice.js)
|
||||
* content/browser/syncAddDevice.xul (content/syncAddDevice.xul)
|
||||
content/browser/syncSetup.js (content/syncSetup.js)
|
||||
* content/browser/syncGenericChange.xul (content/syncGenericChange.xul)
|
||||
content/browser/syncGenericChange.js (content/syncGenericChange.js)
|
||||
|
@ -215,6 +215,15 @@ let gSyncPane = {
|
||||
"centerscreen,chrome,dialog,modal");
|
||||
},
|
||||
|
||||
openAddDevice: function () {
|
||||
let win = Services.wm.getMostRecentWindow("Sync:AddDevice");
|
||||
if (win)
|
||||
win.focus();
|
||||
else
|
||||
window.openDialog("chrome://browser/content/syncAddDevice.xul",
|
||||
"syncAddDevice", "centerscreen,chrome,resizable=no");
|
||||
},
|
||||
|
||||
resetSync: function () {
|
||||
this.openSetup(true);
|
||||
}
|
||||
|
@ -147,6 +147,10 @@
|
||||
</row>
|
||||
</rows>
|
||||
</grid>
|
||||
<!-- TODO l10n -->
|
||||
<label class="text-link"
|
||||
onclick="gSyncPane.openAddDevice(); return false;"
|
||||
value="Add a Device"/>
|
||||
</groupbox>
|
||||
<groupbox>
|
||||
<caption label="&syncPrefsCaption.label;"/>
|
||||
|
@ -59,6 +59,12 @@
|
||||
<!ENTITY addDevice.dontHaveDevice.label "I don't have the device with me">
|
||||
<!ENTITY addDevice.setup.description.label "To activate, go to &syncBrand.shortName.label; Options on your other device and select "Add a Device".">
|
||||
<!ENTITY addDevice.setup.enterCode.label "Then, enter this code:">
|
||||
<!ENTITY addDevice.dialog.description.label "To activate your new device, go to &syncBrand.shortName.label; Options on the device and select "Connect."">
|
||||
<!ENTITY addDevice.dialog.enterCode.label "Enter the code that the device provides:">
|
||||
<!ENTITY addDevice.dialog.tryAgain.label "Please try again.">
|
||||
<!ENTITY addDevice.dialog.successful.label "The device has been successfully added. The initial synchronization can several minutes and will finish in the background.">
|
||||
<!ENTITY addDevice.dialog.syncKey.label "To activate your device you will need to enter your Sync Key. Please print or save this key and take it with you.">
|
||||
<!ENTITY addDevice.dialog.connected.label "Device Connected">
|
||||
|
||||
<!-- Existing Account Page 2: Manual Login -->
|
||||
<!ENTITY setup.signInPage.title.label "Sign In">
|
||||
|
Loading…
Reference in New Issue
Block a user