wELCOMe
+mORe wELCOMe
+
+
+
+
+
+
+
+
+
+
+
+
+ gUESt
+rETURNINg
+wELCOMe
-Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed - posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, - consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur - adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Cras - mattis consectetur purus sit amet fermentum.
-
-
Curabitur blandit tempus porttitor. Nulla vitae elit libero, a - pharetra augue. Vestibulum id ligula porta felis euismod semper. - Maecenas sed diam eget risus varius blandit sit amet non magna. - Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis - vestibulum. Maecenas sed diam eget risus varius blandit sit amet - non magna.
-
-
- oRIGIn
+ oRIGIn
-
+
{fields.origin}
+
uSERNAMe
-
- tITLe
-
- {fields.title}
-
+
+ tITLe
+
+ {fields.title}
+
-
+
{fields.username}
-
+
cOPy
@@ -80,11 +78,12 @@ export function ItemFields({fields}) {
pASSWORd
-
+
{PASSWORD_DOT.repeat(fields.password.length)}
-
+
cOPy
@@ -102,6 +101,7 @@ export function ItemFields({fields}) {
ItemFields.propTypes = {
fields: fieldsPropTypes,
+ onCopy: PropTypes.func.isRequired,
};
export class EditItemFields extends React.Component {
@@ -126,32 +126,32 @@ export class EditItemFields extends React.Component {
return (
+
+
+
+
+
+ );
+}
diff --git a/src/webextension/popup/unlock/components/app.js b/src/webextension/list/manage/components/account-summary-label.css
similarity index 57%
rename from src/webextension/popup/unlock/components/app.js
rename to src/webextension/list/manage/components/account-summary-label.css
index 1ab717eb..d25cc583 100644
--- a/src/webextension/popup/unlock/components/app.js
+++ b/src/webextension/list/manage/components/account-summary-label.css
@@ -2,12 +2,6 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-import React from "react";
-
-import UnlockPrompt from "./unlock-prompt";
-
-import "./app.css";
-
-export default function App() {
- return
-
-
-
-
diff --git a/src/webextension/list/manage/components/homepage.css b/src/webextension/list/manage/components/homepage.css
index 8e95856c..ee564f94 100644
--- a/src/webextension/list/manage/components/homepage.css
+++ b/src/webextension/list/manage/components/homepage.css
@@ -3,34 +3,28 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
.homepage {
- align-items: center;
display: flex;
flex-flow: column nowrap;
- justify-content: center;
- margin: 3em auto;
- width: 701px;
+ align-items: center;
+ margin: 3em;
}
.homepage > h1,
+.homepage > h2,
.homepage > p {
color: #0c0c0d;
letter-spacing: 0.2px;
- line-height: 1.5;
+ line-height: 1.5;
+ text-align: center;
}
.homepage h1 {
- font-size: 33px;
+ font-size: 17px;
font-weight: 300;
- margin: auto;
- text-align: center;
-}
-
-.homepage p {
- font-size: 15px;
- text-align: left;
- white-space: pre-line;
+ font-style: italic;
+ text-transform: lowercase;
}
.homepage > img {
- width: 300px;
+ max-width: 279px;
}
diff --git a/src/webextension/list/manage/components/homepage.js b/src/webextension/list/manage/components/homepage.js
index 8918983d..7bac56f1 100644
--- a/src/webextension/list/manage/components/homepage.js
+++ b/src/webextension/list/manage/components/homepage.js
@@ -3,34 +3,22 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
import { Localized } from "fluent-react";
-import PropTypes from "prop-types";
import React from "react";
+import AccountDetails from "../containers/account-details";
+
import styles from "./homepage.css";
-export default function Homepage({count}) {
+export default function Homepage() {
const imgSrc = browser.extension.getURL("/images/nessie_v2.svg");
- let title;
- if (count === 0) {
- title = "welcOMe to lOcKboX";
- } else {
- title = "YoU have X enTrieS in YoUr lOcKboX";
- }
-
return (
-
-
-
-
+
+
);
}
-
-Homepage.propTypes = {
- count: PropTypes.number.isRequired,
-};
diff --git a/src/webextension/list/manage/components/intro-page.css b/src/webextension/list/manage/components/intro-page.css
new file mode 100644
index 00000000..1d7eb66a
--- /dev/null
+++ b/src/webextension/list/manage/components/intro-page.css
@@ -0,0 +1,40 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+.intro-images {
+ display: grid;
+ grid-auto-flow: column;
+ grid-template-columns: 1fr 1fr 1fr;
+ grid-template-rows: auto auto auto;
+ grid-column-gap: 4em;
+ margin: 4em auto;
+ padding: 0 4em;
+ max-width: 800px;
+}
+
+.intro-image {
+ display: contents;
+ text-align: center;
+}
+
+.intro-image > h1,
+.intro-image > p {
+ overflow: hidden;
+}
+
+.intro-image > img {
+ width: 100%;
+ border: 1px solid rgba(12, 12, 13, 0.3);
+ border-radius: 5px;
+ box-shadow: 0 0 10px rgba(12, 12, 13, 0.3);
+}
+
+.intro-image > h1 {
+ font-size: 17px;
+ margin-bottom: 0;
+}
+
+.intro-image > p {
+ font-size: 15px;
+}
diff --git a/src/webextension/list/manage/components/intro-page.js b/src/webextension/list/manage/components/intro-page.js
new file mode 100644
index 00000000..0d45f04e
--- /dev/null
+++ b/src/webextension/list/manage/components/intro-page.js
@@ -0,0 +1,55 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { Localized } from "fluent-react";
+import PropTypes from "prop-types";
+import React from "react";
+
+import AccountDetails from "../containers/account-details";
+
+import styles from "./intro-page.css";
+
+function IntroImage({src, title, children}) {
+ return (
+
+
+
+
+ sAVe uSERNAMe aNd pASSWORd...
+
+
+
+
+ cLICk tHe lOCKBOx iCOn...
+
+
+
+
+ cOPy an eNTRY's iNFo...
+
+
+
+
+ );
+}
diff --git a/src/webextension/list/manage/components/item-details.css b/src/webextension/list/manage/components/item-details.css
index 879f2e98..6d6b269e 100644
--- a/src/webextension/list/manage/components/item-details.css
+++ b/src/webextension/list/manage/components/item-details.css
@@ -3,7 +3,8 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
.item-details {
- margin: 2em;
+ padding: 2em;
+ background-color: #f9f9fa;
}
.item-details > h1 {
@@ -12,7 +13,6 @@
}
.buttons {
- border-top: 1px solid #d6d6d6;
margin-top: 1em;
padding: 1em 0;
}
diff --git a/src/webextension/list/manage/components/item-details.js b/src/webextension/list/manage/components/item-details.js
index da8c609f..fcab13f3 100644
--- a/src/webextension/list/manage/components/item-details.js
+++ b/src/webextension/list/manage/components/item-details.js
@@ -15,19 +15,19 @@ import styles from "./item-details.css";
// Note: ItemDetails doesn't directly interact with items from the Lockbox
// datastore. For that, please consult <../containers/current-item.js>.
-export default function ItemDetails({fields, onEdit, onDelete}) {
+export default function ItemDetails({fields, onCopy, onEdit, onDelete}) {
return (
-
+
-
+
@@ -36,6 +36,7 @@ export default function ItemDetails({fields, onEdit, onDelete}) {
ItemDetails.propTypes = {
...ItemFields.propTypes,
+ onCopy: PropTypes.func.isRequired,
onEdit: PropTypes.func.isRequired,
onDelete: PropTypes.func.isRequired,
};
diff --git a/src/webextension/list/manage/components/link-account.css b/src/webextension/list/manage/components/link-account.css
new file mode 100644
index 00000000..6a04cef5
--- /dev/null
+++ b/src/webextension/list/manage/components/link-account.css
@@ -0,0 +1,44 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+.link {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin: 2em auto;
+ padding: 0;
+ max-width: 500px;
+}
+
+.link > h2,
+.link > p {
+ text-align: center;
+ letter-spacing: 0.2px;
+ line-height: 1.5;
+}
+
+.link > h2 {
+ margin: 0 0 .5em;
+ padding: 0;
+ font-size: 17px;
+ font-weight: 600;
+ line-height: 1.32;
+}
+
+.link > p {
+ font-size: 15px;
+ margin: 0 0 0.5em;
+}
+
+.link > menu {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ margin: 0;
+ padding: 0;
+}
+
+.link > menu > button {
+ margin: 0.5em;
+}
diff --git a/src/webextension/list/manage/components/link-account.js b/src/webextension/list/manage/components/link-account.js
new file mode 100644
index 00000000..b0ac0a70
--- /dev/null
+++ b/src/webextension/list/manage/components/link-account.js
@@ -0,0 +1,38 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { Localized } from "fluent-react";
+import PropTypes from "prop-types";
+import React from "react";
+
+import Button from "../../../widgets/button";
+
+import styles from "./link-account.css";
+
+export default function LinkAccount({ onCreate, onSignin }) {
+ return (
+
+
+
+
+
+
+
+ );
+}
+LinkAccount.propTypes = {
+ onCreate: PropTypes.func.isRequired,
+ onSignin: PropTypes.func.isRequired,
+};
diff --git a/src/webextension/list/manage/components/send-feedback.js b/src/webextension/list/manage/components/send-feedback.js
deleted file mode 100644
index d17e6944..00000000
--- a/src/webextension/list/manage/components/send-feedback.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-import { Localized } from "fluent-react";
-import React from "react";
-
-import Button from "../../../widgets/button";
-import * as telemetry from "../../../telemetry";
-
-const FEEDBACK_URL = "https://qsurvey.mozilla.com/s3/Lockbox-Input";
-
-export default function SendFeedback() {
- const doClick = () => {
- telemetry.recordEvent("feedbackClick", "manage");
- window.open(FEEDBACK_URL, "_blank");
- };
-
- return (
-
-
-
- );
-}
-
-SendFeedback.propTypes = {};
diff --git a/src/webextension/list/manage/containers/account-details.js b/src/webextension/list/manage/containers/account-details.js
new file mode 100644
index 00000000..9a3c3e76
--- /dev/null
+++ b/src/webextension/list/manage/containers/account-details.js
@@ -0,0 +1,54 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import React from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+
+import * as telemetry from "../../../telemetry";
+import LinkAccount from "../components/link-account";
+import AccountLinked from "../components/account-linked";
+
+function linkAction(action) {
+ const obj = (action === "signup") ?
+ "manageAcctCreate" :
+ "manageAcctSignin";
+ return async () => {
+ telemetry.recordEvent("click", obj);
+ browser.runtime.sendMessage({
+ type: "upgrade_account",
+ action,
+ });
+ };
+}
+
+const ConnectedLinkAccount = connect(
+ (state) => ({
+ ...state,
+ onCreate: linkAction("signup"),
+ onSignin: linkAction("signin"),
+ })
+)(LinkAccount);
+
+function AccountDetails({mode}) {
+ let inner = null;
+
+ if (mode === "guest") {
+ inner =
-
@@ -27,7 +23,15 @@ function AddItem({dispatch}) {
}
AddItem.propTypes = {
- dispatch: PropTypes.func.isRequired,
+ disabled: PropTypes.bool.isRequired,
+ onAddItem: PropTypes.func.isRequired,
};
-export default connect()(AddItem);
+export default connect(
+ (state) => ({
+ disabled: state.list.selectedItemId === NEW_ITEM_ID,
+ }),
+ (dispatch) => ({
+ onAddItem: () => { dispatch(startNewItem()); },
+ })
+)(AddItem);
diff --git a/src/webextension/list/manage/containers/current-selection.js b/src/webextension/list/manage/containers/current-selection.js
index 0e0f10fb..3c765e9a 100644
--- a/src/webextension/list/manage/containers/current-selection.js
+++ b/src/webextension/list/manage/containers/current-selection.js
@@ -9,11 +9,12 @@ import { connect } from "react-redux";
import { flattenItem, unflattenItem } from "../../common";
import {
addItem, updateItem, requestRemoveItem, editCurrentItem, requestCancelEditing,
- editorChanged,
+ editorChanged, copiedField,
} from "../../actions";
import EditItemDetails from "../components/edit-item-details";
import ItemDetails from "../components/item-details";
import Homepage from "../components/homepage";
+import IntroPage from "../components/intro-page";
const ConnectedEditItemDetails = connect(
(state, ownProps) => ({
@@ -45,6 +46,7 @@ const ConnectedItemDetails = connect(
fields: flattenItem(ownProps.item),
}),
(dispatch, ownProps) => ({
+ onCopy: (field) => { dispatch(copiedField(field)); },
onEdit: () => { dispatch(editCurrentItem()); },
onDelete: () => { dispatch(requestRemoveItem(ownProps.item.id)); },
})
@@ -59,8 +61,10 @@ function CurrentSelection({editing, item, hideHome, numItems}) {
} else if (hideHome) {
// Don't show anything since we're still loading the item details.
inner = null;
+ } else if (numItems !== 0) {
+ inner = ;
+ inner =
-
diff --git a/src/webextension/list/manage/containers/item-count.js b/src/webextension/list/manage/containers/item-count.js
deleted file mode 100644
index c16c33b5..00000000
--- a/src/webextension/list/manage/containers/item-count.js
+++ /dev/null
@@ -1,28 +0,0 @@
- /* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-import { Localized } from "fluent-react";
-import PropTypes from "prop-types";
-import React from "react";
-import { connect } from "react-redux";
-
-import styles from "./item-count.css";
-
-function ItemCount({count}) {
- return (
-
- ## iTEMs
-
- );
-}
-
-ItemCount.propTypes = {
- count: PropTypes.number.isRequired,
-};
-
-export default connect(
- (state) => ({
- count: state.cache.items.length,
- })
-)(ItemCount);
diff --git a/src/webextension/popup/unlock/components/app.css b/src/webextension/list/manage/containers/open-faq.css
similarity index 56%
rename from src/webextension/popup/unlock/components/app.css
rename to src/webextension/list/manage/containers/open-faq.css
index efbc44fc..4c9f3cae 100644
--- a/src/webextension/popup/unlock/components/app.css
+++ b/src/webextension/list/manage/containers/open-faq.css
@@ -2,13 +2,6 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-body {
- padding: 0;
- margin: 0;
- width: 250px;
- color: #0c0c0d;
- background-color: #f9f9fa;
- font: caption;
- font-size: 13px;
- -moz-user-select: none;
+.faq {
+ font-size: 15px;
}
diff --git a/src/webextension/list/manage/containers/open-faq.js b/src/webextension/list/manage/containers/open-faq.js
new file mode 100644
index 00000000..21bfc2e3
--- /dev/null
+++ b/src/webextension/list/manage/containers/open-faq.js
@@ -0,0 +1,34 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { Localized } from "fluent-react";
+import PropTypes from "prop-types";
+import React from "react";
+import { connect } from "react-redux";
+
+import { ExternalLink } from "../../../widgets/link";
+import { openFAQ } from "../../actions";
+
+import styles from "./open-faq.css";
+
+function OpenFAQ({onOpenFAQ}) {
+ return (
+
+
+ fAq
+
+
+ );
+}
+
+OpenFAQ.propTypes = {
+ onOpenFAQ: PropTypes.func.isRequired,
+};
+
+export default connect(
+ undefined,
+ (dispatch) => ({
+ onOpenFAQ: () => { dispatch(openFAQ()); },
+ })
+)(OpenFAQ);
diff --git a/src/webextension/list/manage/containers/item-count.css b/src/webextension/list/manage/containers/send-feedback.css
similarity index 51%
rename from src/webextension/list/manage/containers/item-count.css
rename to src/webextension/list/manage/containers/send-feedback.css
index 54d82943..2ff9e646 100644
--- a/src/webextension/list/manage/containers/item-count.css
+++ b/src/webextension/list/manage/containers/send-feedback.css
@@ -1,8 +1,7 @@
- /* This Source Code Form is subject to the terms of the Mozilla Public
+/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-.item-count {
- font-size: 17px;
- white-space: nowrap;
+.send-feedback {
+ font-size: 15px;
}
diff --git a/src/webextension/list/manage/containers/send-feedback.js b/src/webextension/list/manage/containers/send-feedback.js
new file mode 100644
index 00000000..70263c84
--- /dev/null
+++ b/src/webextension/list/manage/containers/send-feedback.js
@@ -0,0 +1,34 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { Localized } from "fluent-react";
+import PropTypes from "prop-types";
+import React from "react";
+import { connect } from "react-redux";
+
+import { ExternalLink } from "../../../widgets/link";
+import { sendFeedback } from "../../actions";
+
+import styles from "./send-feedback.css";
+
+function SendFeedback({onSendFeedback}) {
+ return (
+
+
+ fEEDBACk
+
+
+ );
+}
+
+SendFeedback.propTypes = {
+ onSendFeedback: PropTypes.func.isRequired,
+};
+
+export default connect(
+ undefined,
+ (dispatch) => ({
+ onSendFeedback: () => { dispatch(sendFeedback()); },
+ })
+)(SendFeedback);
diff --git a/src/webextension/list/manage/index.js b/src/webextension/list/manage/index.js
index 6b0ce700..d798ee1b 100644
--- a/src/webextension/list/manage/index.js
+++ b/src/webextension/list/manage/index.js
@@ -10,12 +10,16 @@ import thunk from "redux-thunk";
import AppLocalizationProvider from "../../l10n";
import App from "./components/app";
-import { listItems } from "../actions";
+import { getAccountDetails, listItems } from "../actions";
import reducer from "./reducers";
import initializeMessagePorts from "../message-ports";
import * as telemetry from "../../telemetry";
+import telemetryLogger from "./telemetry";
-const store = createStore(reducer, undefined, applyMiddleware(thunk));
+const store = createStore(reducer, undefined, applyMiddleware(
+ thunk, telemetryLogger
+));
+store.dispatch(getAccountDetails());
store.dispatch(listItems());
initializeMessagePorts(store);
@@ -23,7 +27,7 @@ telemetry.recordEvent("render", "manage");
ReactDOM.render(
-
diff --git a/src/webextension/list/manage/reducers.js b/src/webextension/list/manage/reducers.js
index bd1d3392..c1c8f87f 100644
--- a/src/webextension/list/manage/reducers.js
+++ b/src/webextension/list/manage/reducers.js
@@ -5,7 +5,7 @@
import { combineReducers } from "redux";
import * as actions from "../actions";
-import { cacheReducer, listReducer } from "../reducers";
+import { accountReducer, cacheReducer, listReducer } from "../reducers";
export function editorReducer(state = {
editing: false, changed: false, hideHome: false,
@@ -45,6 +45,7 @@ export function modalReducer(state = {id: null, props: null}, action) {
}
export default combineReducers({
+ account: accountReducer,
cache: cacheReducer,
list: listReducer,
editor: editorReducer,
diff --git a/src/webextension/list/manage/telemetry.js b/src/webextension/list/manage/telemetry.js
new file mode 100644
index 00000000..d38904bf
--- /dev/null
+++ b/src/webextension/list/manage/telemetry.js
@@ -0,0 +1,63 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import * as actions from "../actions";
+import * as telemetry from "../../telemetry";
+
+export default (store) => (next) => (action) => {
+ try {
+ switch (action.type) {
+ case actions.ADD_ITEM_STARTING:
+ telemetry.recordEvent("itemAdding", "manage");
+ break;
+ case actions.UPDATE_ITEM_STARTING:
+ telemetry.recordEvent("itemUpdating", "manage");
+ break;
+ case actions.REMOVE_ITEM_STARTING:
+ telemetry.recordEvent("itemDeleting", "manage");
+ break;
+ case actions.ADD_ITEM_COMPLETED:
+ if (action.interactive && action.item) {
+ telemetry.recordEvent("itemAdded", "manage",
+ {itemid: action.item.id});
+ }
+ break;
+ case actions.UPDATE_ITEM_COMPLETED:
+ if (action.interactive && action.item) {
+ telemetry.recordEvent("itemUpdated", "manage",
+ {itemid: action.item.id});
+ }
+ break;
+ case actions.REMOVE_ITEM_COMPLETED:
+ if (action.interactive && action.item) {
+ telemetry.recordEvent("itemDeleted", "manage",
+ {itemid: action.item.id});
+ }
+ break;
+ case actions.SELECT_ITEM_COMPLETED:
+ if (action.item) {
+ telemetry.recordEvent("itemSelected", "manage",
+ {itemid: action.item.id});
+ }
+ break;
+ case actions.COPIED_FIELD:
+ telemetry.recordEvent(`${action.field}Copied`, "manage");
+ break;
+ case actions.START_NEW_ITEM:
+ telemetry.recordEvent("addClick", "manage");
+ break;
+ case actions.SEND_FEEDBACK:
+ telemetry.recordEvent("feedbackClick", "manage");
+ break;
+ case actions.OPEN_FAQ:
+ telemetry.recordEvent("faqClick", "manage");
+ break;
+ }
+ } catch (e) {
+ // eslint-disable-next-line no-console
+ console.error("Unable to record telemetry event", e);
+ }
+
+ return next(action);
+};
diff --git a/src/webextension/list/message-ports.js b/src/webextension/list/message-ports.js
index f1696eea..e04b1ba5 100644
--- a/src/webextension/list/message-ports.js
+++ b/src/webextension/list/message-ports.js
@@ -2,7 +2,7 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-import { addedItem, updatedItem, removedItem } from "./actions";
+import { accountDetailsUpdated, addedItem, updatedItem, removedItem } from "./actions";
let messagePort;
@@ -12,6 +12,9 @@ export default function initializeMessagePorts(store) {
messagePort = browser.runtime.connect();
messagePort.onMessage.addListener((message) => {
switch (message.type) {
+ case "account_details_updated":
+ store.dispatch(accountDetailsUpdated(message.account));
+ break;
case "added_item":
store.dispatch(addedItem(message.item));
break;
diff --git a/src/webextension/list/popup/components/item-details-panel.js b/src/webextension/list/popup/components/item-details-panel.js
index 63156b73..74ab7eb5 100644
--- a/src/webextension/list/popup/components/item-details-panel.js
+++ b/src/webextension/list/popup/components/item-details-panel.js
@@ -11,17 +11,17 @@ import { ItemFields } from "../../components/item-fields";
import styles from "./item-details-panel.css";
-export default function ItemDetailsPanel({fields, onBack}) {
+export default function ItemDetailsPanel({fields, onCopy, onBack}) {
return (
- { onBack(); }}>
+
eNTRy dETAILs
-
+
);
@@ -29,5 +29,6 @@ export default function ItemDetailsPanel({fields, onBack}) {
ItemDetailsPanel.propTypes = {
...ItemFields.propTypes,
+ onCopy: PropTypes.func.isRequired,
onBack: PropTypes.func.isRequired,
};
diff --git a/src/webextension/list/popup/containers/current-selection.js b/src/webextension/list/popup/containers/current-selection.js
index 7fd6a995..15de934b 100644
--- a/src/webextension/list/popup/containers/current-selection.js
+++ b/src/webextension/list/popup/containers/current-selection.js
@@ -7,7 +7,7 @@ import React from "react";
import { connect } from "react-redux";
import { flattenItem } from "../../common";
-import { selectItem } from "../../actions";
+import { selectItem, copiedField } from "../../actions";
import ItemDetailsPanel from "../components/item-details-panel";
import ItemListPanel from "../components/item-list-panel";
@@ -16,6 +16,7 @@ const ConnectedItemDetailsPanel = connect(
fields: flattenItem(ownProps.item),
}),
(dispatch) => ({
+ onCopy: (field) => { dispatch(copiedField(field)); },
onBack: () => { dispatch(selectItem(null)); },
})
)(ItemDetailsPanel);
diff --git a/src/webextension/list/popup/index.js b/src/webextension/list/popup/index.js
index 7decd846..0e1abb68 100644
--- a/src/webextension/list/popup/index.js
+++ b/src/webextension/list/popup/index.js
@@ -13,11 +13,17 @@ import App from "./components/app";
import { listItems } from "../actions";
import reducer from "./reducers";
import initializeMessagePorts from "../message-ports";
+import * as telemetry from "../../telemetry";
+import telemetryLogger from "./telemetry";
-const store = createStore(reducer, undefined, applyMiddleware(thunk));
+const store = createStore(reducer, undefined, applyMiddleware(
+ thunk, telemetryLogger
+));
store.dispatch(listItems());
initializeMessagePorts(store);
+telemetry.recordEvent("render", "doorhanger");
+
ReactDOM.render(
(next) => (action) => {
+ try {
+ switch (action.type) {
+ case actions.SELECT_ITEM_COMPLETED:
+ if (action.item) {
+ telemetry.recordEvent("itemSelected", "doorhanger",
+ {itemid: action.item.id});
+ }
+ break;
+ case actions.COPIED_FIELD:
+ telemetry.recordEvent(`${action.field}Copied`, "doorhanger");
+ break;
+ }
+ } catch (e) {
+ // eslint-disable-next-line no-console
+ console.error("Unable to record telemetry event", e);
+ }
+
+ return next(action);
+};
diff --git a/src/webextension/list/reducers.js b/src/webextension/list/reducers.js
index 0487b26c..f078a83b 100644
--- a/src/webextension/list/reducers.js
+++ b/src/webextension/list/reducers.js
@@ -27,6 +27,18 @@ function maybeRemoveCurrentItem(state, action) {
return {};
}
+export function accountReducer(state = { mode: "guest" }, action) {
+ switch (action.type) {
+ case actions.GET_ACCOUNT_DETAILS_COMPLETED:
+ return {
+ ...state,
+ ...action.account,
+ };
+ default:
+ return state;
+ }
+}
+
export function cacheReducer(state = {items: [], currentItem: null}, action) {
switch (action.type) {
case actions.LIST_ITEMS_COMPLETED:
diff --git a/src/webextension/locales/en-US/common.ftl b/src/webextension/locales/en-US/common.ftl
new file mode 100644
index 00000000..2ec6d727
--- /dev/null
+++ b/src/webextension/locales/en-US/common.ftl
@@ -0,0 +1,10 @@
+product-title = Lockbox
+product-tagline = The simple way to store, retrieve and manage website login info
+
+// when Kinto is supported, the above should be changed to:
+// Creating a Firefox account - or adding Lockbox to an existing account - protects your logins
+// with the strongest encryption available and syncs your Lockbox info across accounts.
+
+
+product-action-signin = Sign In
+product-action-prefs = Preferences
diff --git a/src/webextension/locales/en-US/firstrun.ftl b/src/webextension/locales/en-US/firstrun.ftl
index 87a965e3..7e9ae417 100644
--- a/src/webextension/locales/en-US/firstrun.ftl
+++ b/src/webextension/locales/en-US/firstrun.ftl
@@ -1,29 +1,13 @@
document
.title = Welcome to Lockbox
-welcome-title = Welcome to Lockbox (Alpha)
+firstrun-intro-title = Welcome to { product-title }
+firstrun-intro-tagline = { product-tagline }
-welcome-intro =
- You've just installed the Lockbox browser extension!
- This Alpha prototype will give you the ability to create
- new entries, and then later you can view, search, edit, and
- delete those entries.
+firstrun-using-guest-title = New to Lockbox?
-welcome-warning =
- This is a rapidly evolving prototype that will change as Alpha progresses.
- Any data stored here is not guaranteed to be retained in future updates.
+firstrun-using-guest-action = Get Started
-welcome-feedback =
- Please be sure to let us know your thoughts using our feedback
- button within the tool, including any issues you may find, things
- you like, and the things you're looking forward to in the future.
+firstrun-using-returning-title = Returning User?
-master-password-setup-formtitle = Please create a master password below:
-
-master-password-setup-password = Password
-
-master-password-setup-confirm = Confirm Password
-
-master-password-setup-err-mismatch = Passwords to not match
-
-master-password-setup-submit = Continue to Lockbox
+firstrun-using-returning-action = Sign in to your Firefox Account
diff --git a/src/webextension/locales/en-US/list.ftl b/src/webextension/locales/en-US/list.ftl
index 90159ee6..72c3f2ab 100644
--- a/src/webextension/locales/en-US/list.ftl
+++ b/src/webextension/locales/en-US/list.ftl
@@ -3,10 +3,10 @@
document
.title = Lockbox Entries
-item-fields-title = Entry Name
+item-fields-title = Site Name
item-fields-title-input
.placeholder = Primary Bank
-item-fields-origin = Website Address
+item-fields-origin = Site Address
item-fields-origin-input
.placeholder = www.example.com
item-fields-username = Username
@@ -18,66 +18,74 @@ item-fields-password = Password
item-fields-copy-password = Copy
.title = Copy the password to the clipboard
item-fields-notes = Notes
-item-fields-notes-input
- .placeholder = Answers to security questions or other account specifics…
-item-summary-new-title = New Entry
+item-summary-new-title = New entry
item-summary-title =
{ $length ->
- [0] (No Entry Name)
+ [0] (no site name)
*[other] { $title }
}
item-summary-username =
{ $length ->
- [0] (No Username)
+ [0] (no username)
*[other] { $username }
}
item-filter
- .placeholder = Search for an entry
+ .placeholder = Search Lockbox Entries
[[manage]]
-toolbar-item-count =
- { $count ->
- [one] 1 Entry
- *[other] { $count } Entries
- }
-
-toolbar-add-item = New Entry
+toolbar-add-item = New entry
toolbar-go-home = Home
-toolbar-send-feedback = Feedback
+toolbar-send-feedback = Provide Feedback
+toolbar-open-faq = FAQ
all-items-empty =
- When you create an entry, it will be saved in this sidebar.
+ When you add an Entry, it automatically shows up here.
all-items-filtered = No results
-homepage-title =
- { $count ->
- [0] Welcome to Lockbox
- [1] You have { $count } entry in your Lockbox
- *[other] You have { $count } entries in your Lockbox
- }
+intro-page-step-1 =
+ Save username and password info to create a { product-title } entry.
+
+ .title = Add login info to { product-title }
+
+intro-page-step-2 =
+ Click the { product-title } icon to see all the entries you've saved.
+
+ .title = Go straight to your logins
-homepage-greeting =
- You’ve successfully installed the Lockbox browser extension! This Alpha
- prototype gives you the ability to create new entries, and then view, search,
- edit, and delete those entries.
-
- Please be sure to let us know your thoughts using our feedback button above,
- including any issues you may find, things you like, and the things you’re
- looking forward to in the future.
+intro-page-step-3 =
+ Copy an entry's info to sign in right from Firefox.
+
+ .title = Sign in from { product-title }
+
+homepage-title = { product-tagline }
+
+homepage-linkaccount-title = Add Serious Security & Convenience
+homepage-linkaccount-description =
+ Now create a Firefox account – or add { product-title } to an existing
+ account – to protect your logins with the strongest encryption
+ available and sync your { product-title } info across devices.
+
+homepage-linkaccount-action-create = Create Account
+homepage-linkaccount-action-signin = { product-action-signin }
+
+homepage-accountlinked-title = Your logins are locked down tight!
+homepage-accountlinked-description =
+ { product-title } uses the strongest encryption available to
+ protect your logins – even for banking and other critical sites.
item-details-heading-view = Entry Details
-item-details-heading-new = Create a New Entry
-item-details-heading-edit = Edit Entry
+item-details-heading-new = Create New Entry
+item-details-heading-edit = Edit Entry Details
-item-details-edit = Edit Entry
-item-details-delete = Delete Entry
+item-details-edit = Edit
+item-details-delete = Delete
-item-details-save-new = Save Entry
-item-details-save-existing = Save Changes
+item-details-save-new = Create Entry
+item-details-save-existing = Save
item-details-cancel = Cancel
[[popup]]
@@ -86,12 +94,14 @@ manage-lockbox-button = Manage Lockbox
item-details-panel-title = Entry Details
+navigate-panel-backwards = Go back
+
[[dialogs]]
-modal-cancel-editing = This entry has unsaved changes. Are you sure you want to discard them?
+modal-cancel-editing = Unsaved changes exist. Discard them?
.confirmLabel = Discard Changes
.cancelLabel = Go Back
-modal-delete = Are you sure you want to delete this entry?
- .confirmLabel = Delete Entry
+modal-delete = Delete this Entry?
+ .confirmLabel = Delete
.cancelLabel = Cancel
diff --git a/src/webextension/locales/en-US/popup.ftl b/src/webextension/locales/en-US/popup.ftl
deleted file mode 100644
index b0a20dd3..00000000
--- a/src/webextension/locales/en-US/popup.ftl
+++ /dev/null
@@ -1,8 +0,0 @@
-[[unlock]]
-
-unlock-prompt-title = Lockbox
-unlock-prompt-desc = Enter your password
-
-unlock-prompt-err-invalid-pwd = Wrong password
-
-unlock-prompt-submit = Unlock
diff --git a/src/webextension/locales/en-US/unlock.ftl b/src/webextension/locales/en-US/unlock.ftl
new file mode 100644
index 00000000..8c7a8339
--- /dev/null
+++ b/src/webextension/locales/en-US/unlock.ftl
@@ -0,0 +1,5 @@
+unlock-title = { product-title }
+unlock-tagline = { product-tagline }
+
+unlock-action-signin = { product-action-signin }
+unlock-action-prefs = { product-action-prefs }
diff --git a/src/webextension/locales/en-US/widgets.ftl b/src/webextension/locales/en-US/widgets.ftl
index 3f500244..b14c7e09 100644
--- a/src/webextension/locales/en-US/widgets.ftl
+++ b/src/webextension/locales/en-US/widgets.ftl
@@ -3,5 +3,8 @@ filter-input-clear = Clear
password-input-show = Show
password-input-hide = Hide
+panel-back-button
+ .alt = Go Back
+
modal-root
.contentLabel = Modal dialog
diff --git a/src/webextension/manifest.json.tpl b/src/webextension/manifest.json.tpl
index cfafee75..e4579ea5 100644
--- a/src/webextension/manifest.json.tpl
+++ b/src/webextension/manifest.json.tpl
@@ -19,7 +19,8 @@
"default_icon": {
"32": "icons/lb_locked.svg"
},
- "default_title": "Lockbox"
+ "default_title": "Lockbox",
+ "browser_style": false
},
"commands": {
@@ -37,6 +38,7 @@
],
"options_ui": {
- "page": "settings/index.html"
+ "page": "settings/index.html",
+ "browser_style": false
}
}
diff --git a/src/webextension/popup/unlock/components/unlock-prompt.css b/src/webextension/popup/unlock/components/unlock-prompt.css
deleted file mode 100644
index 46089a7f..00000000
--- a/src/webextension/popup/unlock/components/unlock-prompt.css
+++ /dev/null
@@ -1,27 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-.unlock-prompt {
- margin: 1em;
-}
-
-.unlock-prompt > form {
- width: 100%;
- height: 100%;
-
- margin: 0;
- padding: 0;
- display: flex;
- flex-flow: column nowrap;
- justify-content: space-around;
- align-items: center;
-}
-
-.unlock-prompt > form > p {
- flex: 1;
-}
-
-.password-input {
- margin-bottom: 1em;
-}
diff --git a/src/webextension/popup/unlock/components/unlock-prompt.js b/src/webextension/popup/unlock/components/unlock-prompt.js
deleted file mode 100644
index 2d7c8589..00000000
--- a/src/webextension/popup/unlock/components/unlock-prompt.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-import { Localized } from "fluent-react";
-import React from "react";
-
-import Button from "../../../widgets/button";
-import ErrorMessage from "../../../widgets/error-message";
-import PasswordInput from "../../../widgets/password-input";
-
-import styles from "./unlock-prompt.css";
-
-export default class UnlockPrompt extends React.Component {
- constructor() {
- super();
- this.state = {
- error: "",
- password: "",
- };
- }
-
- // This function exists to allow tests to override it; otherwise, our unit
- // tests would break because we navigated away from the test URL!
- _navigate(url) {
- // istanbul ignore next
- window.location.replace(url);
- }
-
- async attempt() {
- const { password } = this.state;
-
- try {
- await browser.runtime.sendMessage({
- type: "unlock",
- password,
- });
-
- if (process.env.ENABLE_DOORHANGER) {
- this._navigate(browser.extension.getURL("/list/popup/index.html"));
- } else {
- await browser.runtime.sendMessage({
- type: "open_view",
- name: "manage",
- });
- window.close();
- }
- } catch (err) {
- this.setState({
- error: "unlock-prompt-err-invalid-pwd",
- });
- }
- }
-
- componentDidMount() {
- this._passwordField.focus();
- }
-
- handlePasswordChange(value) {
- this.setState({
- error: "",
- password: value,
- });
- }
-
- render() {
- const { error } = this.state;
-
- // XXX: It might be worth splitting this up and Redux-ifying this view so
- // that each component is as simple as possible.
- return (
-
-
-
- );
- }
-}
diff --git a/src/webextension/unlock/components/app.css b/src/webextension/unlock/components/app.css
new file mode 100644
index 00000000..5ec13990
--- /dev/null
+++ b/src/webextension/unlock/components/app.css
@@ -0,0 +1,77 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+body {
+ padding: 0;
+ margin: 0;
+ width: 344px;
+ color: #0c0c0d;
+ background-color: #f9f9fa;
+ font: caption;
+ font-size: 13px;
+ -moz-user-select: none;
+}
+
+.unlock {
+ margin: 0;
+ display: flex;
+ flex-flow: column nowrap;
+ align-items: center;
+}
+
+.unlock > img {
+ margin: 2em auto;
+ width: 229px;
+}
+
+.unlock > .content {
+ margin: 2em auto;
+ width: 229px;
+ display: flex;
+ flex-flow: column nowrap;
+ align-items: center;
+}
+
+.unlock > .content > h1 {
+ font-size: 2em;
+ font-weight: bold;
+ text-align: center;
+ margin: 0 0 .5em;
+}
+
+.unlock > .content > h2 {
+ font-size: 1.5em;
+ font-weight: normal;
+ font-style: italic;
+ text-align: center;
+ text-transform: lowercase;;
+ margin: 0;
+}
+
+.unlock > menu {
+ margin: 0;
+ padding: 0;
+ width: 100vw;
+ display: flex;
+ flex-flow: row nowrap;
+ align-items: stretch;
+}
+
+.unlock > menu > * {
+ width: 50%;
+ flex-grow: 1;
+}
+
+.unlock > menu > * {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+}
+
+.unlock > menu > *:first-child {
+ border-bottom-right-radius: 0;
+}
+
+.unlock > menu > *:last-child {
+ border-bottom-left-radius: 0;
+}
diff --git a/src/webextension/unlock/components/app.js b/src/webextension/unlock/components/app.js
new file mode 100644
index 00000000..5ec9ddec
--- /dev/null
+++ b/src/webextension/unlock/components/app.js
@@ -0,0 +1,52 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { Localized } from "fluent-react";
+import React from "react";
+
+import Button from "../../widgets/button";
+import * as telemetry from "../../telemetry";
+
+import styles from "./app.css";
+
+export default function App() {
+ const imgSrc = browser.extension.getURL("/images/nessie_v2.svg");
+
+ const doSignIn = async () => {
+ telemetry.recordEvent("click", "unlockSignin");
+ browser.runtime.sendMessage({
+ type: "signin",
+ view: "manage",
+ });
+ };
+ const doPrefs = async () => {
+ browser.runtime.openOptionsPage();
+ window.close();
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/webextension/popup/unlock/index.js b/src/webextension/unlock/index.js
similarity index 79%
rename from src/webextension/popup/unlock/index.js
rename to src/webextension/unlock/index.js
index 66864372..c4ee395e 100644
--- a/src/webextension/popup/unlock/index.js
+++ b/src/webextension/unlock/index.js
@@ -5,16 +5,16 @@
import React from "react";
import ReactDOM from "react-dom";
-import AppLocalizationProvider from "../../l10n";
+import AppLocalizationProvider from "../l10n";
import App from "./components/app";
-import * as telemetry from "../../telemetry";
+import * as telemetry from "../telemetry";
// This is the closest approximation we can get to a toolbar click when the
// popup is registered.
telemetry.recordEvent("render", "popupUnlock");
ReactDOM.render(
-
,
diff --git a/src/webextension/widgets/button.css b/src/webextension/widgets/button.css
index 636decab..73ba94a0 100644
--- a/src/webextension/widgets/button.css
+++ b/src/webextension/widgets/button.css
@@ -5,9 +5,30 @@
.button {
white-space: nowrap;
text-align: center;
+ letter-spacing: 0.2px;
+ line-height: 1;
border: 0;
}
+.button > img {
+ /* This should make sure that buttons with text *and* an icon are well-aligned
+ vertically. */
+ vertical-align: -33%;
+}
+
+.button[disabled] {
+ opacity: 0.4;
+ cursor: not-allowed;
+}
+
+.button:focus {
+ box-shadow: inset 0 0 0 2px #0a84ff, 0 0 0 3px rgba(10, 132, 255, 0.3);
+}
+
+.button::-moz-focus-inner {
+ border: none;
+}
+
.primary-theme {
color: #ffffff;
background-color: #0060df;
@@ -23,21 +44,21 @@
background-color: transparent;
}
-.primary-theme:hover {
+.primary-theme:not([disabled]):hover {
background-color: #003eaa;
}
-.normal-theme:hover,
-.ghost-theme:hover {
+.normal-theme:not([disabled]):hover,
+.ghost-theme:not([disabled]):hover {
background-color: rgba(12, 12, 13, 0.2);
}
-.primary-theme:active {
+.primary-theme:not([disabled]):active:hover {
background-color: #002275;
}
-.normal-theme:hover,
-.ghost-theme:hover {
+.normal-theme:not([disabled]):active:hover,
+.ghost-theme:not([disabled]):active:hover {
background-color: rgba(12, 12, 13, 0.3);
}
@@ -50,6 +71,7 @@
.normal-size {
height: 32px;
+ min-width: 80px;
padding: 0 8px;
font-size: 13px;
border-radius: 2px;
diff --git a/src/webextension/widgets/dialog-box.css b/src/webextension/widgets/dialog-box.css
index 8bc7e152..2a3f2bba 100644
--- a/src/webextension/widgets/dialog-box.css
+++ b/src/webextension/widgets/dialog-box.css
@@ -4,6 +4,9 @@
.modal-dialog {
padding: 1em;
+ font-size: 17px;
+ font-weight: 300;
+ text-align: center;
}
.modal-dialog > menu {
diff --git a/src/webextension/widgets/filter-input.js b/src/webextension/widgets/filter-input.js
index deaf12d9..403e0fc8 100644
--- a/src/webextension/widgets/filter-input.js
+++ b/src/webextension/widgets/filter-input.js
@@ -14,6 +14,7 @@ export default class FilterInput extends React.Component {
className: PropTypes.string,
onChange: PropTypes.func,
value: PropTypes.string,
+ disabled: PropTypes.bool,
};
}
@@ -21,6 +22,7 @@ export default class FilterInput extends React.Component {
return {
className: "",
value: "",
+ disabled: false,
};
}
@@ -43,15 +45,20 @@ export default class FilterInput extends React.Component {
render() {
// eslint-disable-next-line no-unused-vars
- const {className, onChange, value, ...props} = this.props;
- const finalClassName = `${styles.inputWrapper} ${className}`.trimRight();
+ const {className, onChange, value, disabled, ...props} = this.props;
+ const disabledClass = disabled ? ` ${styles.disabled}` : "";
+ const finalClassName = (
+ `${styles.inputWrapper}${disabledClass} ${className}`
+ ).trimRight();
return (
-
+
diff --git a/src/webextension/list/components/item-list.css b/src/webextension/list/components/item-list.css
index f08bb288..09ed7d1f 100644
--- a/src/webextension/list/components/item-list.css
+++ b/src/webextension/list/components/item-list.css
@@ -3,15 +3,25 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
.empty {
- white-space: pre-wrap;
- margin: 3em 1em;
- font-style: italic;
text-align: center;
- color: #626262;
+ white-space: pre-wrap;
+ margin: 1em 1em;
+ padding: 20px;
+ overflow: hidden;
+ overflow-wrap: break-word;
+ color: #737373;
+ font-size: 15px;
+ line-height: 1.5;
+ letter-spacing: 0.2px;
+}
+
+.item {
+ border-bottom: solid 0.5px #d7d7db;
+ border-right: solid 0.5px #d7d7db;
}
.item:nth-child(2n+1) {
- background-color: #f1f1f1;
+ background-color: #ededf0;
}
.item:nth-child(2n) {
diff --git a/src/webextension/list/components/item-summary.css b/src/webextension/list/components/item-summary.css
index 38b5fe5f..b59c9ec5 100644
--- a/src/webextension/list/components/item-summary.css
+++ b/src/webextension/list/components/item-summary.css
@@ -5,15 +5,38 @@
.item-summary {
border-bottom: 1px solid #d7d7db;
padding: .5em;
+ font-size: 15px;
+}
+
+.item-summary::before {
+ background-image: url(/icons/arrowhead-right-16.svg);
+ background-repeat: no-repeat;
+ background-size: 16px 16px;
+ content: "";
+ float: right;
+ height: 16px;
+ width: 16px;
+ margin: 14px 0;
+}
+
+[data-selected] .item-summary::before {
+ display: none;
}
.title, .subtitle {
+ line-height: 1.5;
+ letter-spacing: 0.2px;
+ color: #0c0c0d;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
+.title {
+ font-weight: bold;
+}
+
.subtitle {
- font-size: 80%;
- opacity: 0.75;
+ font-size: 13px;
+ font-weight: 400;
}
diff --git a/src/webextension/list/containers/item-filter.js b/src/webextension/list/containers/item-filter.js
index 5cdb3293..33986bba 100644
--- a/src/webextension/list/containers/item-filter.js
+++ b/src/webextension/list/containers/item-filter.js
@@ -20,6 +20,7 @@ function ItemFilter(props) {
export default connect(
(state) => ({
value: state.filter,
+ disabled: state.cache.items.length === 0,
}),
(dispatch) => ({
onChange: (value) => { dispatch(filterItems(value)); },
diff --git a/src/webextension/list/manage/components/account-linked.css b/src/webextension/list/manage/components/account-linked.css
new file mode 100644
index 00000000..5b0c36f9
--- /dev/null
+++ b/src/webextension/list/manage/components/account-linked.css
@@ -0,0 +1,33 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+.linked {
+ margin: 2em auto;
+ padding: 0;
+ display: flex;
+ flex-flow: column nowrap;
+ align-items: center;
+}
+
+.linked > h2,
+.linked > p {
+ text-align: center;
+ letter-spacing: 0.2px;
+ line-height: 1.5;
+}
+
+.linked > h2 {
+ margin: 0 0 .5em;
+ padding: 0;
+ font-size: 17px;
+ font-weight: 600;
+ line-height: 1.32;
+ color: #058b00;
+}
+
+.linked > p {
+ margin-top: 0;
+ font-size: 15px;
+ white-space: pre-line;
+}
diff --git a/src/webextension/list/manage/components/account-linked.js b/src/webextension/list/manage/components/account-linked.js
new file mode 100644
index 00000000..96ce5fa9
--- /dev/null
+++ b/src/webextension/list/manage/components/account-linked.js
@@ -0,0 +1,21 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { Localized } from "fluent-react";
+import React from "react";
+
+import styles from "./account-linked.css";
+
+export default function AccountLinked() {
+ return (
+ aCCOUNt lINKEd
+Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+{title}
-{"yOu'Ve suCCessfuLLY iNSTalled..."}
+tHe sIMPLe wAy tO sTORE...
+ 
+
+ );
+}
+
+IntroImage.propTypes = {
+ src: PropTypes.string.isRequired,
+ title: PropTypes.string.isRequired,
+ children: PropTypes.node,
+};
+
+export default function IntroPage() {
+ return (
+ {title}
+{children}
+iTEm dETAILs
uPGRADe
+uPGRADe yOUr lOCKBOx
+{inner}
;
+}
+
+AccountDetails.propTypes = {
+ mode: PropTypes.string.isRequired,
+};
+
+export default connect(
+ (state) => ({
+ mode: state.account.mode,
+ })
+)(AccountDetails);
diff --git a/src/webextension/list/manage/containers/account-summary.js b/src/webextension/list/manage/containers/account-summary.js
new file mode 100644
index 00000000..de329146
--- /dev/null
+++ b/src/webextension/list/manage/containers/account-summary.js
@@ -0,0 +1,18 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { connect } from "react-redux";
+
+import AccountSummaryLabel from "../components/account-summary-label";
+
+export default connect(
+ (state) => {
+ if (state.account.mode === "authenticated") {
+ return {
+ email: state.account.email,
+ };
+ }
+ return {};
+ }
+)(AccountSummaryLabel);
diff --git a/src/webextension/list/manage/containers/add-item.js b/src/webextension/list/manage/containers/add-item.js
index 4877c9ad..4196ed51 100644
--- a/src/webextension/list/manage/containers/add-item.js
+++ b/src/webextension/list/manage/containers/add-item.js
@@ -9,17 +9,13 @@ import { connect } from "react-redux";
import Button from "../../../widgets/button";
import { startNewItem } from "../../actions";
-import * as telemetry from "../../../telemetry";
-
-function AddItem({dispatch}) {
- const doClick = () => {
- telemetry.recordEvent("addClick", "addButton");
- dispatch(startNewItem());
- };
+import { NEW_ITEM_ID } from "../../common";
+function AddItem({disabled, onAddItem}) {
return (
{inner}
;
}
diff --git a/src/webextension/list/manage/containers/go-home.js b/src/webextension/list/manage/containers/go-home.js
index d475a007..c2c0e2a5 100644
--- a/src/webextension/list/manage/containers/go-home.js
+++ b/src/webextension/list/manage/containers/go-home.js
@@ -13,7 +13,7 @@ import { requestSelectItem } from "../../actions";
function GoHome({onClick}) {
return (
lOCKBOx
+lOCKBOx tAGLINe
+
- this.updateValue(e.target.value)}/>
-
diff --git a/src/webextension/widgets/input.css b/src/webextension/widgets/input.css
index d90b4bc3..4e4be3e2 100644
--- a/src/webextension/widgets/input.css
+++ b/src/webextension/widgets/input.css
@@ -15,28 +15,36 @@
.input-wrapper {
height: 30px;
width: -moz-available;
- color: #0c0c0d;
background-color: #f9f9fa;
border: 1px solid rgba(12, 12, 13, 0.3);
border-radius: 2px;
}
+.input[disabled],
+.input-wrapper.disabled {
+ background-color: #ededf0;
+ cursor: not-allowed;
+}
+
.input {
padding: 0 8px;
font-size: 13px;
+ color: #0c0c0d;
}
-.input:hover,
-.input-wrapper:hover {
+.input:not([disabled]):hover,
+.input-wrapper:not(.disabled):hover {
border-color: rgba(12, 12, 13, 0.5);
}
.input:focus,
-.input-wrapper:focus-within {
+.input:focus:hover,
+.input-wrapper:focus-within,
+.input-wrapper:focus-within:hover {
border-color: #0a84ff;
- /* Note: This is a best-guess from the screenshots for the Photon spec, since
- the box shadow isn't actually specified. */
- box-shadow: 0 0 3px rgba(10, 168, 255, 0.5);
+ /* Note: This is adapted from the Photon button spec, since the input fields
+ spec doesn't define this. */
+ box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.3);
}
.input-wrapper {
@@ -50,9 +58,14 @@
width: 0;
min-width: 0;
border: 0;
+ color: #0c0c0d;
background-color: transparent;
}
+.input-wrapper.disabled > input {
+ cursor: not-allowed;
+}
+
.input-wrapper button {
white-space: nowrap;
text-align: center;
@@ -68,17 +81,25 @@
color: #003eaa;
}
+.field-text,
+.label-text {
+ color: #0c0c0d;
+ letter-spacing: 0.2px;
+ line-height: 1.5;
+}
+
.field-text {
/* This lines up our labels with the text in elements. */
margin-top: 7px;
min-height: 25px;
font-size: 13px;
+ font-weight: bold;
-moz-user-select: text;
+ overflow: hidden;
+ overflow-wrap: break-word;
}
.label-text {
- margin-top: 10px;
- margin-bottom: 3px;
- color: #626262;
+ margin: 10px 0 3px 0;
font-size: 13px;
}
diff --git a/src/webextension/widgets/link.css b/src/webextension/widgets/link.css
new file mode 100644
index 00000000..bc661524
--- /dev/null
+++ b/src/webextension/widgets/link.css
@@ -0,0 +1,36 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+.external {
+ color: #0060df;
+ background-color: transparent;
+}
+
+.external::after {
+ background-image: url(/icons/external-link.svg);
+ background-repeat: no-repeat;
+ background-size: 16px 16px;
+ content: "";
+ display: inline-block;
+ height: 16px;
+ margin: -.3rem .15rem 0 .25rem;
+ vertical-align: middle;
+ width: 16px;
+}
+
+.external:active {
+ color: #003eaa;
+ text-decoration: underline;
+}
+
+.external:hover {
+ color: #0060df;
+ text-decoration: underline;
+ background-color: transparent;
+}
+
+.external:focus {
+ color: #0060df;
+ border-color: #0a84ff;
+}
diff --git a/src/webextension/widgets/link.js b/src/webextension/widgets/link.js
new file mode 100644
index 00000000..18e9f464
--- /dev/null
+++ b/src/webextension/widgets/link.js
@@ -0,0 +1,25 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import PropTypes from "prop-types";
+import React from "react";
+
+import styles from "./link.css";
+
+export function ExternalLink({onClick, children, className, ...props}) {
+ const finalClassName = `${styles.external} ${className}`.trimRight();
+ return (
+ {children}
+ );
+}
+
+ExternalLink.propTypes = {
+ children: PropTypes.node,
+ className: PropTypes.string,
+ onClick: PropTypes.func.isRequired,
+};
+
+ExternalLink.defaultProps = {
+ className: "",
+};
diff --git a/src/webextension/widgets/modal-root.css b/src/webextension/widgets/modal-root.css
index 12afb82c..2c6a4774 100644
--- a/src/webextension/widgets/modal-root.css
+++ b/src/webextension/widgets/modal-root.css
@@ -3,9 +3,9 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
.modal {
- border: 1px solid #0c0c0d;
- border-radius: 2px;
- box-shadow: 0 0 3em rgba(0, 0, 0, 0.75);
+ border-radius: 4px;
+ box-shadow: 0 4px 16px 0 rgba(12, 12, 13, 0.1);
+ min-width: 300px;
color: #0c0c0d;
background-color: #f9f9fa;
}
diff --git a/src/webextension/widgets/panel.css b/src/webextension/widgets/panel.css
index 5be4e2dd..572715f5 100644
--- a/src/webextension/widgets/panel.css
+++ b/src/webextension/widgets/panel.css
@@ -12,11 +12,12 @@
.panel-header {
display: flex;
align-items: center;
+ font-weight: 500;
height: 32px;
- padding: 12px;
+ padding: 2px 5px;
/* Ensure the box shadow overlays the body. */
z-index: 10;
- box-shadow: 0 -5px 5px 5px rgba(12, 12, 13, 0.5);
+ box-shadow: 0 -3px 3px 3px rgba(12, 12, 13, 0.5);
}
.panel-header > span {
@@ -28,6 +29,7 @@
flex: 1;
overflow-x: hidden;
overflow-y: auto;
+ background-color: #ededf0;
}
.panel-footer {
diff --git a/src/webextension/widgets/panel.js b/src/webextension/widgets/panel.js
index 2ae7946f..08325ee3 100644
--- a/src/webextension/widgets/panel.js
+++ b/src/webextension/widgets/panel.js
@@ -2,6 +2,7 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+import { Localized } from "fluent-react";
import React from "react";
import PropTypes from "prop-types";
@@ -11,9 +12,16 @@ import styles from "./panel.css";
export function PanelHeader({className, onBack, children}) {
const finalClassName = `${styles.panelHeader} ${className}`.trimRight();
+ const imgSrc = browser.extension.getURL("/icons/arrowhead-left-16.svg");
return (
- {onBack ? : null}
+ {onBack ? (
+
+ ) : null}
{children}
);
diff --git a/src/webextension/widgets/password-input.js b/src/webextension/widgets/password-input.js
index 1be9d15a..5a442b73 100644
--- a/src/webextension/widgets/password-input.js
+++ b/src/webextension/widgets/password-input.js
@@ -15,6 +15,7 @@ export default class PasswordInput extends React.Component {
return {
className: PropTypes.string,
monospace: PropTypes.bool,
+ disabled: PropTypes.bool,
};
}
@@ -22,6 +23,7 @@ export default class PasswordInput extends React.Component {
return {
className: "",
monospace: true,
+ disabled: false,
};
}
@@ -48,20 +50,24 @@ export default class PasswordInput extends React.Component {
}
render() {
- const {className, monospace, ...props} = this.props;
- const finalClassName = `${styles.inputWrapper} ${className}`.trimRight();
+ const {className, monospace, disabled, ...props} = this.props;
+ const disabledClass = disabled ? ` ${styles.disabled}` : "";
+ const finalClassName = (
+ `${styles.inputWrapper}${disabledClass} ${className}`
+ ).trimRight();
+
return (
- this.inputElement = element} {...props}/>
this.stackElement = element}>
-
-
diff --git a/src/webextension/widgets/scrolling-list.css b/src/webextension/widgets/scrolling-list.css
index ced079ca..df8d33bc 100644
--- a/src/webextension/widgets/scrolling-list.css
+++ b/src/webextension/widgets/scrolling-list.css
@@ -16,10 +16,15 @@
.scrolling-list > li[data-selected] {
color: #0c0c0d;
- background-color: #b1b1b3;
+ background-color: #f9f9fa;
+ border-right: none;
}
.scrolling-list:focus > li[data-selected] {
color: #ffffff;
background-color: #0060df;
}
+
+.scrolling-list > li[data-selected=false] {
+ border-right: #ff0000;
+}
diff --git a/src/webextension/widgets/toolbar.css b/src/webextension/widgets/toolbar.css
index 693dff41..e463b47d 100644
--- a/src/webextension/widgets/toolbar.css
+++ b/src/webextension/widgets/toolbar.css
@@ -10,7 +10,7 @@
}
.toolbar > * + * {
- margin-inline-start: 1ch;
+ margin-inline-start: 2ch;
}
.toolbar-space {
diff --git a/test/background/accounts-test.js b/test/background/accounts-test.js
new file mode 100644
index 00000000..77fdd6f6
--- /dev/null
+++ b/test/background/accounts-test.js
@@ -0,0 +1,301 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import chai, { expect } from "chai";
+import chaiAsPromised from "chai-as-promised";
+import fetchMock from "fetch-mock";
+import jose from "node-jose";
+import sinon from "sinon";
+import sinonChai from "sinon-chai";
+
+import getAccount, * as accounts from
+ "src/webextension/background/accounts";
+
+chai.use(chaiAsPromised);
+chai.use(sinonChai);
+
+describe("background > accounts", () => {
+ beforeEach(() => {
+ accounts.setAccount();
+ });
+
+ it("getAccount()", () => {
+ const acct = getAccount();
+ expect(acct).to.be.an.instanceof(accounts.Account);
+ expect(getAccount()).to.equal(acct);
+ });
+
+ describe("loadAccount()", () => {
+ it("with saved account", async () => {
+ const result = await accounts.loadAccount({
+ get: async () => ({
+ account: {
+ config: "dev-latest",
+ info: {
+ verified: true,
+ uid: "1234",
+ },
+ },
+ }),
+ });
+ expect(result.info).to.deep.equal({verified: true, uid: "1234"});
+ });
+
+ it("without saved account", async () => {
+ const result = await accounts.loadAccount({
+ get: async () => ({}),
+ });
+ expect(result.info).to.equal(undefined);
+ });
+ });
+
+ describe("openAccount()", () => {
+ it("with saved account", async () => {
+ const result = await accounts.openAccount({
+ get: async () => ({
+ account: {
+ config: "dev-latest",
+ info: {
+ verified: true,
+ uid: "1234",
+ },
+ },
+ }),
+ });
+ expect(result.info).to.deep.equal({ verified: true, uid: "1234" });
+ });
+
+ it("without saved account", async () => {
+ const result = await accounts.openAccount({
+ get: async () => ({}),
+ });
+ expect(result.info).to.equal(undefined);
+ });
+
+ it("with error", async () => {
+ const result = await accounts.openAccount({
+ get: async () => {
+ throw new Error("test for failure");
+ },
+ });
+ expect(result.info).to.equal(undefined);
+ });
+ });
+
+ it("saveAccount()", async () => {
+ const set = sinon.stub().resolves({});
+ await accounts.saveAccount({set});
+ expect(set).to.have.been.calledWith({account: {
+ config: "production",
+ info: undefined,
+ }});
+ });
+
+ it("setAccount()", () => {
+ accounts.setAccount("dev-latest");
+ expect(getAccount.__GetDependency__("account").config)
+ .to.equal("dev-latest");
+
+ accounts.setAccount();
+ expect(getAccount.__GetDependency__("account"))
+ .to.equal(undefined);
+ });
+
+ describe("Account", () => {
+ let acct;
+ const unauthedInfo = {
+ uid: "1234",
+ access_token: "KhDtmS0a98vx6fe0HB0XhrtXEuYtB6nDF6aC-rwbufnYvQDgTnvxzZlFyHjB5fcF95AGi2TysUUyXBbprHIQ9g",
+ id_token: "eyJhbGciOiJSUzI1NiIsImtpZCI6IjBDWTBJb3RVVHBtWDFDbXJqMWNwcTB6aFBkd1NtalJSaWlJNzduMmMtMFkifQ.eyJ1aWQiOiIxMjM0IiwiaXNzIjoic2NvcGVkLWtleXMifQ.pX8I1LqCD849Gp0TzKcS6LM_fko0gc7wkSzBgPaxFDyF8AZrWn9-HTRoW-9YIuHujLzldbI1k34VeSHNM85vkPjm_AxbBKuXEiVJQdcCAxNjbSQmM1dOX6kZKwN4oDu8X4BB3CwQq5eXioYYiPur149O_I2bhFDuMBtQBoQosZtOScuKliXcURuWEwhYcnHe8axit0fQ0vd1FOJK3300hccqcZNoHGXrSVj42mdo_aSREOcwSUP4i0r0aCfJqnxai43uy1C5l54mSN1KzqGeasx60lWPU-Jm3gPm_2CXRWbfWxF3-OnxhMhSQiS90kefX81H03ZYVShDutsx55d0tQ",
+ };
+ const authedInfo = {
+ ...unauthedInfo,
+ email: "eripley@wyutani.com",
+ refresh_token: "rmrBzLYi2zia4ExNBy7uXE4s_Da_HMS4d3tvr203OVTq1EMQqh-85m4Hejo3TKBKuont6QFIlLJ23rZR4xqZBA",
+ expires_at: 1825884426240000,
+ keys: new Map(),
+ };
+
+ beforeEach(() => {
+ acct = new accounts.Account({});
+ });
+
+ it("toJSON()", () => {
+ let expected;
+
+ // as GUEST
+ acct.info = undefined;
+ expected = {
+ config: "production",
+ info: undefined,
+ };
+ expect(acct.toJSON()).to.deep.equal(expected);
+
+ // as UNAUTHENTICATED
+ acct.info = unauthedInfo;
+ expected = {
+ config: "production",
+ info: {
+ ...unauthedInfo,
+ expires_at: undefined,
+ },
+ };
+ expect(acct.toJSON()).to.deep.equal(expected);
+
+ // as AUTHENTICATED
+ acct.info = authedInfo;
+ expected = {
+ config: "production",
+ info: {
+ ...unauthedInfo,
+ expires_at: 1825884426240000,
+ },
+ };
+ expect(acct.toJSON()).to.deep.equal(expected);
+ });
+
+ it("mode", () => {
+ expect(acct.mode).to.equal(accounts.GUEST);
+ acct.info = unauthedInfo;
+ expect(acct.mode).to.equal(accounts.UNAUTHENTICATED);
+ acct.info = authedInfo;
+ expect(acct.mode).to.equal(accounts.AUTHENTICATED);
+ });
+
+ it("signedIn", () => {
+ expect(acct.signedIn).to.equal(false);
+ acct.info = authedInfo;
+ expect(acct.signedIn).to.equal(true);
+ });
+
+ it("uid", () => {
+ expect(acct.uid).to.equal(undefined);
+ acct.info = authedInfo;
+ expect(acct.uid).to.equal("1234");
+ });
+
+ it("email", () => {
+ expect(acct.email).to.equal(undefined);
+ acct.info = authedInfo;
+ expect(acct.email).to.equal("eripley@wyutani.com");
+ });
+
+ describe("signin/out", () => {
+ let stubWAF;
+
+ async function setupMocks({
+ withKeys = false,
+ badState = false,
+ missingCode = false,
+ }) {
+ const appKeys = new Map();
+ let keys_jwe = "";
+
+ if (withKeys) {
+ const k = await jose.JWK.createKeyStore().generate("oct", 256);
+ appKeys.set("https://identity.mozilla.com/apps/lockbox", k);
+ }
+
+ // setup fake OAuth Authorization response
+ stubWAF.callsFake(async ({url}) => {
+ url = new URL(url);
+ const requestParams = url.searchParams;
+ const redirect = requestParams.get("redirect_uri");
+ const state = requestParams.get("state");
+ let peerECDH = requestParams.get("keys_jwk");
+
+ if (withKeys && peerECDH) {
+ peerECDH = JSON.parse(jose.util.base64url.decode(peerECDH).toString("utf8"));
+ let payload = {};
+ for (let [n, k] of appKeys) {
+ payload[n] = JSON.stringify(k.toJSON(true));
+ }
+ payload = JSON.stringify(payload);
+ keys_jwe = jose.JWE.createEncrypt({ format: "compact" }, peerECDH).final(payload, "utf8");
+ }
+
+ const responseParams = new URLSearchParams();
+ responseParams.set("state", !badState ? state : "thisisabogusstatevalue");
+ if (!missingCode) {
+ responseParams.set(
+ "code",
+ "7scJCX3_Dhc5cfwA3iJ32k07dJEuf3pghu4cNsH5dBXXO9h0OAQ8tHjucatkh8qQVoUiDf04r0dlv4LqkxZ-7Q"
+ );
+ }
+ const responseURL = new URL(`${redirect}?${responseParams}`);
+ return responseURL.toString();
+ });
+
+ // setup fake OAuth token response
+ fetchMock.post("end:/v1/token", async () => ({
+ status: 200,
+ body: {
+ grant_type: "bearer",
+ expires_in: 1209600,
+ auth_at: 1510734551,
+ refresh_token: authedInfo.refresh_token,
+ keys_jwe: await keys_jwe,
+ },
+ }));
+
+ // setup fake profile response
+ fetchMock.get("end:/v1/profile", {
+ status: 200,
+ body: {
+ uid: "1234",
+ email: "eripley@wyutani.com",
+ },
+ });
+
+ return appKeys;
+ }
+
+ before(() => {
+ acct = new accounts.Account({ config: "production" });
+ });
+
+ beforeEach(async () => {
+ stubWAF = sinon.stub(browser.identity, "launchWebAuthFlow");
+ });
+ afterEach(async () => {
+ stubWAF.restore();
+ fetchMock.restore();
+ await acct.signOut();
+ });
+
+ it("signIn() without keys", async () => {
+ await setupMocks({});
+ const result = await acct.signIn();
+
+ expect(result).to.have.property("uid").that.is.a("string");
+ });
+
+ it("signIn() with keys", async () => {
+ const expectedKeys = await setupMocks({withKeys: true});
+ const result = await acct.signIn();
+
+ expect(result).to.have.property("uid").that.is.a("string");
+ expect(result).to.have.property("keys").to.have.all.keys(...expectedKeys.keys());
+ expect(acct).to.have.property("keys").to.have.all.keys(...expectedKeys.keys());
+ });
+
+ it("signIn() fails with invalid state", async () => {
+ await setupMocks({ badState: true });
+
+ expect(acct.signIn()).to.be.rejectedWith(Error, "invalid oauth state");
+ });
+
+ it("signIn() fails with missing code", async () => {
+ await setupMocks({missingCode: true});
+
+ expect(acct.signIn()).to.be.rejectedWith(Error, "invalid oauth authorization code");
+ });
+
+ it("signOut()", async () => {
+ await acct.signOut();
+ expect(acct.info).to.equal(undefined);
+ });
+ });
+ });
+});
diff --git a/test/background/authorization-test.js b/test/background/authorization-test.js
deleted file mode 100644
index 54a99f26..00000000
--- a/test/background/authorization-test.js
+++ /dev/null
@@ -1,147 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-import chai, { expect } from "chai";
-import chaiAsPromised from "chai-as-promised";
-import fetchMock from "fetch-mock";
-import sinon from "sinon";
-import sinonChai from "sinon-chai";
-
-import getAuthorization, * as authz from
- "src/webextension/background/authorization";
-
-chai.use(chaiAsPromised);
-chai.use(sinonChai);
-
-describe("background > authorization", () => {
- beforeEach(() => {
- authz.setAuthorization();
- });
-
- it("getAuthorization()", () => {
- const authorization = getAuthorization();
- expect(authorization).to.be.an.instanceof(authz.Authorization);
- expect(getAuthorization()).to.equal(authorization);
- });
-
- describe("loadAuthorization()", () => {
- it("with saved authz", async () => {
- const result = await authz.loadAuthorization({get: async () => {
- return {authz: {
- config: "dev-latest",
- info: {
- verified: true,
- uid: "1234",
- },
- }};
- }});
- expect(result.info).to.deep.equal({verified: true, uid: "1234"});
- });
-
- it("without saved authz", async () => {
- const result = await authz.loadAuthorization({get: async () => {
- return {};
- }});
- expect(result.info).to.equal(undefined);
- });
- });
-
- it("saveAuthorization()", async () => {
- const set = sinon.stub().resolves({});
- await authz.saveAuthorization({set});
- expect(set).to.have.been.calledWith({authz: {
- config: "dev-latest",
- info: undefined,
- }});
- });
-
- it("setAuthorization()", () => {
- authz.setAuthorization("dev-latest");
- expect(getAuthorization.__GetDependency__("authorization").config)
- .to.equal("dev-latest");
-
- authz.setAuthorization();
- expect(getAuthorization.__GetDependency__("authorization"))
- .to.equal(undefined);
- });
-
- describe("Authorization", () => {
- let authorization;
- const fakeInfo = {
- verified: true,
- uid: "1234",
- email: "eripley@wyutani.com",
- };
-
- beforeEach(() => {
- authorization = new authz.Authorization({});
- });
-
- it("toJSON()", () => {
- authorization.info = fakeInfo;
- expect(authorization.toJSON()).to.deep.equal({
- config: "dev-latest",
- info: {
- verified: true,
- uid: "1234",
- },
- });
- });
-
- it("signedIn", () => {
- expect(authorization.signedIn).to.equal(false);
- authorization.info = fakeInfo;
- expect(authorization.signedIn).to.equal(true);
- });
-
- it("verified", () => {
- expect(authorization.verified).to.equal(false);
- authorization.info = {...fakeInfo, verified: false};
- expect(authorization.verified).to.equal(false);
- authorization.info = fakeInfo;
- expect(authorization.verified).to.equal(true);
- });
-
- it("uid", () => {
- expect(authorization.uid).to.equal(undefined);
- authorization.info = fakeInfo;
- expect(authorization.uid).to.equal("1234");
- });
-
- it("email", () => {
- expect(authorization.email).to.equal(undefined);
- authorization.info = fakeInfo;
- expect(authorization.email).to.equal("eripley@wyutani.com");
- });
-
- it("signIn()", async () => {
- const result = await authorization.signIn();
- fetchMock.restore();
-
- expect(result).to.have.property("uid").that.is.a("string");
- });
-
- it("signOut()", async () => {
- await authorization.signOut();
- expect(authorization.info).to.equal(undefined);
- });
-
- describe("verify()", () => {
- it("verify user", async () => {
- authorization.info = fakeInfo;
-
- const result = await authorization.verify("password");
-
- expect(result).to.equal("password");
- expect(authorization.verified).to.equal(true);
- });
-
- it("fail when not signed in", () => {
- expect(authorization.verify("password")).to.be.rejectedWith(
- Error, "not signed in"
- );
- });
- });
- });
-});
diff --git a/test/background/browser-action-test.js b/test/background/browser-action-test.js
index 8fb82540..0c3bd28a 100644
--- a/test/background/browser-action-test.js
+++ b/test/background/browser-action-test.js
@@ -9,12 +9,16 @@ import sinonChai from "sinon-chai";
import "test/mocks/browser";
import updateBrowserAction from "src/webextension/background/browser-action";
+import { GUEST, UNAUTHENTICATED, AUTHENTICATED } from "src/webextension/background/accounts";
chai.use(chaiAsPromised);
chai.use(sinonChai);
describe("background > browser action", () => {
let openView;
+ const datastoreBase = {
+ unlock: () => {},
+ };
beforeEach(() => {
openView = sinon.spy();
@@ -26,20 +30,49 @@ describe("background > browser action", () => {
});
it("uninitialized data store", async () => {
- await updateBrowserAction({initialized: false});
+ await updateBrowserAction({
+ account: { mode: GUEST },
+ datastore: { ...datastoreBase, initialized: false },
+ });
browser.browserAction.onClicked.mockFireListener();
expect(openView).to.have.been.calledWith("firstrun");
});
- it("locked data store", async () => {
- await updateBrowserAction({initialized: true, locked: true});
+ it("locked data store (as GUEST)", async () => {
+ await updateBrowserAction({
+ account: { mode: GUEST },
+ datastore: { ...datastoreBase, initialized: true, locked: true },
+ });
+ expect(browser.browserAction.getPopup()).to.eventually.equal(
+ browser.extension.getURL("popup/list/index.html")
+ );
+ });
+
+ it("locked data store (as UNAUTHENTICATED)", async () => {
+ await updateBrowserAction({
+ account: { mode: UNAUTHENTICATED },
+ datastore: { ...datastoreBase, initialized: true, locked: true },
+ });
expect(browser.browserAction.getPopup()).to.eventually.equal(
browser.extension.getURL("popup/unlock/index.html")
);
});
- it("unlocked data store", async () => {
- await updateBrowserAction({initialized: true, locked: false});
+ it("unlocked data store (as GUEST)", async () => {
+ await updateBrowserAction({
+ account: { mode: GUEST },
+ datastore: { ...datastoreBase, initialized: true, locked: false },
+ });
+ expect(browser.browserAction.getPopup()).to.eventually.equal(
+ browser.extension.getURL("popup/list/index.html")
+ );
+ });
+
+ it("unlocked data store (as AUTHENTICATED)", async () => {
+ await updateBrowserAction({
+ account: { mode: AUTHENTICATED },
+ datastore: { ...datastoreBase, initialized: true, locked: false },
+ });
expect(browser.browserAction.getPopup()).to.eventually.equal(
browser.extension.getURL("popup/list/index.html")
);
diff --git a/test/background/message-ports-test.js b/test/background/message-ports-test.js
index de9be18f..6b363437 100644
--- a/test/background/message-ports-test.js
+++ b/test/background/message-ports-test.js
@@ -7,6 +7,7 @@ import chaiAsPromised from "chai-as-promised";
import fetchMock from "fetch-mock";
import sinon from "sinon";
import sinonChai from "sinon-chai";
+import waitUntil from "async-wait-until";
import "test/mocks/browser";
import openDataStore from "src/webextension/background/datastore";
@@ -16,16 +17,39 @@ chai.use(chaiAsPromised);
chai.use(sinonChai);
describe("background > message ports", () => {
- const password = "n0str0m0";
-
let itemId, selfMessagePort, otherMessagePort, selfListener, otherListener;
+ let addonPort;
before(async () => {
await openDataStore();
+ // capture connect from message-ports
+ browser.runtime.onConnect.addListener((port) => {
+ addonPort = port;
+ browser.runtime.onConnect.mockClearListener();
+ });
initializeMessagePorts();
selfMessagePort = browser.runtime.connect();
otherMessagePort = browser.runtime.connect(undefined, {mockPrimary: false});
+
+ // setup fake OAuth response
+ fetchMock.post("end:/v1/token", {
+ status: 200,
+ body: {
+ grant_type: "bearer",
+ access_token: "KhDtmS0a98vx6fe0HB0XhrtXEuYtB6nDF6aC-rwbufnYvQDgTnvxzZlFyHjB5fcF95AGi2TysUUyXBbprHIQ9g",
+ expires_in: 1209600,
+ auth_at: 1510734551,
+ refresh_token: "rmrBzLYi2zia4ExNBy7uXE4s_Da_HMS4d3tvr203OVTq1EMQqh-85m4Hejo3TKBKuont6QFIlLJ23rZR4xqZBA",
+ },
+ });
+ fetchMock.get("end:/v1/profile", {
+ status: 200,
+ body: {
+ uid: "1234",
+ email: "eripley@wyutani.com",
+ },
+ });
});
after(() => {
@@ -48,6 +72,50 @@ describe("background > message ports", () => {
// Note: these tests are in a specific order since we modify the datastore as
// we test. Each test assumes the previous has passed.
+ describe("from addon", () => {
+ let openView;
+
+ beforeEach(() => {
+ openView = sinon.spy();
+ initializeMessagePorts.__Rewire__("openView", openView);
+ });
+ afterEach(() => {
+ initializeMessagePorts.__ResetDependency__("openView");
+ });
+
+ it('handle (from addon) "extension_installed"', () => {
+ addonPort.postMessage({
+ type: "extension_installed",
+ });
+
+ expect(openView).to.have.callCount(1);
+ });
+
+ it('handle (from addon) "extension_upgraded"', async () => {
+ addonPort.postMessage({
+ type: "extension_upgraded",
+ oldVersion: "0.1.1",
+ version: "0.1.2",
+ });
+
+ await waitUntil(() => openView.callCount === 1);
+ expect(openView).to.have.callCount(1);
+ });
+ });
+
+ it('handle "get_account_details"', async () => {
+ const result = await browser.runtime.sendMessage({
+ type: "get_account_details",
+ });
+
+ expect(result).to.deep.equal({
+ account: {
+ mode: "guest",
+ uid: undefined,
+ email: undefined,
+ },
+ });
+ });
it('handle "open_view"', async () => {
const result = await browser.runtime.sendMessage({
@@ -67,33 +135,32 @@ describe("background > message ports", () => {
expect(result).to.deep.equal({});
});
- it('handle "signin"', async () => {
+ it('handle "initialize"', async () => {
const result = await browser.runtime.sendMessage({
- type: "signin", interactive: true,
+ type: "initialize",
});
- expect(result).to.have.property("uid").that.is.a("string");
+ expect(result).to.deep.equal({});
});
-
- it('handle "initialize"', async () => {
+ it('handle "upgrade_account"', async () => {
const result = await browser.runtime.sendMessage({
- type: "initialize", password,
+ type: "upgrade_account",
});
expect(result).to.deep.equal({});
});
- it('handle "lock"', async () => {
+ it('handle "signout"', async () => {
const result = await browser.runtime.sendMessage({
- type: "lock",
+ type: "signout",
});
expect(result).to.deep.equal({});
});
- it('handle "unlock"', async () => {
+ it('handle "signin"', async () => {
const result = await browser.runtime.sendMessage({
- type: "unlock", password,
+ type: "signin",
});
expect(result).to.deep.equal({});
diff --git a/test/background/telemetry-test.js b/test/background/telemetry-test.js
index 76ac3008..e956e916 100644
--- a/test/background/telemetry-test.js
+++ b/test/background/telemetry-test.js
@@ -6,7 +6,7 @@ import chai, { expect } from "chai";
import sinon from "sinon";
import sinonChai from "sinon-chai";
-import getAuthorization from "src/webextension/background/authorization";
+import getAccount from "src/webextension/background/accounts";
import * as telemetry from "src/webextension/background/telemetry";
chai.use(sinonChai);
@@ -24,7 +24,7 @@ describe("background > telemetry", () => {
describe("no fxa uid", () => {
before(() => {
- getAuthorization().info = undefined;
+ getAccount().info = undefined;
});
it("recordEvent()", async () => {
@@ -54,13 +54,13 @@ describe("background > telemetry", () => {
describe("with fxa uid", () => {
before(() => {
// Pretend we're signed in.
- getAuthorization().info = {
+ getAccount().info = {
uid: "1234",
};
});
after(() => {
- getAuthorization().info = undefined;
+ getAccount().info = undefined;
});
it("recordEvent() (with fxa uid)", async () => {
diff --git a/test/bootstrap-test.js b/test/bootstrap-test.js
index 9e91f728..ad5ceccf 100644
--- a/test/bootstrap-test.js
+++ b/test/bootstrap-test.js
@@ -2,7 +2,7 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-/* global Services, ADDON_INSTALL, ADDON_UNINSTALL */
+/* global Services, ADDON_INSTALL, ADDON_UPGRADE, ADDON_UNINSTALL */
import waitUntil from "async-wait-until";
import chai, { expect } from "chai";
@@ -32,6 +32,7 @@ describe("bootstrap", () => {
afterEach(() => {
// Clear the listeners set in .
browser.runtime.onMessage.mockClearListener();
+ browser.runtime.onConnect.mockClearListener();
});
it("web extension loaded and telemetry recorded", async () => {
@@ -81,8 +82,14 @@ describe("bootstrap", () => {
describe("install()", () => {
const install = bootstrap.__get__("install");
+ const dispatcher = bootstrap.__get__("dispatcher");
+
+ beforeEach(() => {
+ sinon.spy(dispatcher, "record");
+ });
afterEach(() => {
+ dispatcher.record.restore();
Services.prefs.mockResetPrefs();
});
@@ -92,6 +99,18 @@ describe("bootstrap", () => {
expect(Services.prefs.getBoolPref(REMEMBER_SIGNONS_PREF)).to.equal(false);
expect(Services.prefs.getBoolPref(ORIGINAL_REMEMBER_SIGNONS_PREF))
.to.equal(true);
+ expect(dispatcher.record).to.have.been.calledWith({
+ type: "extension_installed",
+ });
+ });
+
+ it('dispatches "extension_upgraded" event on upgrade', () => {
+ install({ newVersion: "0.1.2", oldVersion: "0.1.1" }, ADDON_UPGRADE);
+ expect(dispatcher.record).to.have.been.calledWith({
+ type: "extension_upgraded",
+ version: "0.1.2",
+ oldVersion: "0.1.1",
+ });
});
it("does nothing on other events", () => {
@@ -128,4 +147,55 @@ describe("bootstrap", () => {
.to.equal(true);
});
});
+
+
+ describe("EventDispatcher", () => {
+ const EventDispatcher = bootstrap.__get__("EventDispatcher");
+ let dispatcher, port;
+
+ beforeEach(() => {
+ dispatcher = new EventDispatcher();
+ port = {
+ postMessage: sinon.spy(),
+ };
+ });
+ afterEach(() => {
+ port = undefined;
+ dispatcher = undefined;
+ });
+
+ it("constructs", () => {
+ expect(dispatcher).to.have.property("pendingEvents").to.deep.equal([]);
+ });
+
+ it("records event; saves for later", () => {
+ dispatcher.record({
+ type: "extension_installed",
+ });
+ expect(dispatcher).to.have.property("pendingEvents").to.deep.equal([{
+ type: "extension_installed",
+ }]);
+
+ dispatcher.connect(port);
+ expect(dispatcher).to.have.property("port").to.equal(port);
+ expect(dispatcher).to.have.property("pendingEvents").to.deep.equal([]);
+ expect(port.postMessage).to.have.been.calledWith({
+ type: "extension_installed",
+ });
+ });
+
+ it("records event; posts immediately", () => {
+ dispatcher.connect(port);
+ expect(dispatcher).to.have.property("port").to.equal(port);
+ expect(dispatcher).to.have.property("pendingEvents").to.deep.equal([]);
+
+ dispatcher.record({
+ type: "extension_installed",
+ });
+ expect(dispatcher).to.have.property("pendingEvents").to.deep.equal([]);
+ expect(port.postMessage).to.have.been.calledWith({
+ type: "extension_installed",
+ });
+ });
+ });
});
diff --git a/test/firstrun/components/app-test.js b/test/firstrun/components/app-test.js
index 3740b359..d1387797 100644
--- a/test/firstrun/components/app-test.js
+++ b/test/firstrun/components/app-test.js
@@ -8,9 +8,8 @@ import React from "react";
import mountWithL10n from "test/mocks/l10n";
import App from "src/webextension/firstrun/components/app";
-import Welcome from "src/webextension/firstrun/components/welcome";
-import MasterPasswordSetup from
- "src/webextension/firstrun/components/master-password-setup";
+import Intro from "src/webextension/firstrun/components/intro";
+import Using from "src/webextension/firstrun/components/using";
chai.use(chaiEnzyme());
@@ -20,7 +19,7 @@ describe("firstrun > components >
- );
+const middlewares = [];
+const mockStore = configureStore(middlewares);
- expect(wrapper.find("h1")).to.contain.text("welcOMe to lOcKboX");
- });
-
- it("render with 5 items", () => {
+describe("list > manage > components >
+
+
);
- expect(wrapper.find("h1")).to.contain.text(
- "YoU have X enTrieS in YoUr lOcKboX"
- );
+ expect(wrapper.find("h1")).to.contain.text("tHe sIMPLe wAy tO sTORE...");
+ expect(wrapper).to.contain(AccountDetails);
});
});
diff --git a/test/list/manage/components/item-details-test.js b/test/list/manage/components/item-details-test.js
index 5e390cfc..f2da1990 100644
--- a/test/list/manage/components/item-details-test.js
+++ b/test/list/manage/components/item-details-test.js
@@ -29,7 +29,8 @@ describe("list > manage > components >
+ {}} onEdit={onEdit}
+ onDelete={onDelete}/>
);
});
diff --git a/test/list/manage/components/link-account-test.js b/test/list/manage/components/link-account-test.js
new file mode 100644
index 00000000..6dfd1b83
--- /dev/null
+++ b/test/list/manage/components/link-account-test.js
@@ -0,0 +1,58 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import chai, { expect } from "chai";
+import chaiEnzyme from "chai-enzyme";
+import React from "react";
+import sinon from "sinon";
+
+import mountWithL10n from "test/mocks/l10n";
+import LinkAccount from "src/webextension/list/manage/components/link-account";
+
+chai.use(chaiEnzyme());
+
+describe("list > manage > components >
+ );
+
+ expect(wrapper.find("h2")).to.have.text("uPGRADe");
+ expect(wrapper.find("p")).to.have.text("uPGRADe yOUr lOCKBOx");
+ expect(wrapper.findWhere((x) => x.prop("id") === "homepage-linkaccount-action-create").find("button")).to.have.text("cREATe aCCOUNt");
+ expect(wrapper.findWhere((x) => x.prop("id") === "homepage-linkaccount-action-signin").find("button")).to.have.text("sIGn iN");
+ });
+
+ it('click on "Create Account"', () => {
+ const wrapper = mountWithL10n(
+
+
+ );
+
+ expect(wrapper).to.contain(LinkAccount);
+ });
+
+ it("render in authenticated mode", () => {
+ const store = mockStore({
+ ...initialState,
+ account: {
+ mode: "authenticated",
+ uid: "1234",
+ email: "eripley@wyutani.com",
+ },
+ });
+ const wrapper = mountWithL10n(
+
+
+ );
+
+ expect(wrapper).to.contain(AccountLinked);
+ });
+
+ describe("actions", () => {
+ let store, wrapper;
+ let spy;
+
+ beforeEach(() => {
+ store = mockStore(initialState);
+ wrapper = mountWithL10n(
+
+
+ );
+
+ spy = sinon.spy(() => ({}));
+ browser.runtime.onMessage.addListener(spy);
+ });
+ afterEach(() => {
+ browser.runtime.onMessage.mockClearListener();
+ spy.reset();
+ });
+
+ it('click on "create account"', async () => {
+ wrapper.findWhere((x) => x.prop("id") === "homepage-linkaccount-action-create")
+ .find("button").simulate("click");
+
+ await waitUntil(() => spy.callCount === 2);
+ expect(spy).to.have.been.calledWith({
+ type: "upgrade_account",
+ action: "signup",
+ });
+ });
+
+ it('click on "sign in"', async () => {
+ wrapper.findWhere((x) => x.prop("id") === "homepage-linkaccount-action-signin")
+ .find("button").simulate("click");
+
+ await waitUntil(() => spy.callCount === 2);
+ expect(spy).to.have.been.calledWith({
+ type: "upgrade_account",
+ action: "signin",
+ });
+ });
+ });
+});
diff --git a/test/list/manage/containers/account-summary-test.js b/test/list/manage/containers/account-summary-test.js
new file mode 100644
index 00000000..d201b997
--- /dev/null
+++ b/test/list/manage/containers/account-summary-test.js
@@ -0,0 +1,48 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import chai, { expect } from "chai";
+import chaiEnzyme from "chai-enzyme";
+import React from "react";
+import configureStore from "redux-mock-store";
+import { Provider } from "react-redux";
+
+import { initialState } from "../mock-redux-state";
+import mountWithL10n from "test/mocks/l10n";
+import AccountSummary from "src/webextension/list/manage/containers/account-summary";
+
+chai.use(chaiEnzyme());
+
+const middlewares = [];
+const mockStore = configureStore(middlewares);
+
+describe("list > manage > containers >
+
+ );
+
+ expect(wrapper.find("span")).to.have.text("eripley@wyutani.com");
+ });
+ it("render empty in guest mode", () => {
+ const store = mockStore(initialState);
+ const wrapper = mountWithL10n(
+
+
+ );
+
+ expect(wrapper.hostNodes()).to.have.length(0);
+ });
+});
diff --git a/test/list/manage/containers/add-item-test.js b/test/list/manage/containers/add-item-test.js
index 3d9edf3b..56f41455 100644
--- a/test/list/manage/containers/add-item-test.js
+++ b/test/list/manage/containers/add-item-test.js
@@ -4,12 +4,13 @@
import { expect } from "chai";
import React from "react";
-import configureStore from "redux-mock-store";
import { Provider } from "react-redux";
+import configureStore from "redux-mock-store";
import { initialState } from "../mock-redux-state";
import mountWithL10n from "test/mocks/l10n";
import { startNewItem } from "src/webextension/list/actions";
+import { NEW_ITEM_ID } from "src/webextension/list/common";
import AddItem from "src/webextension/list/manage/containers/add-item";
const middlewares = [];
@@ -26,4 +27,21 @@ describe("list > manage > containers >
+
+ );
+ wrapper.simulate("click");
+ expect(store.getActions()).to.deep.equal([]);
+ });
});
diff --git a/test/list/manage/containers/open-faq-test.js b/test/list/manage/containers/open-faq-test.js
new file mode 100644
index 00000000..509102d5
--- /dev/null
+++ b/test/list/manage/containers/open-faq-test.js
@@ -0,0 +1,40 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import chai, { expect } from "chai";
+import React from "react";
+import { Provider } from "react-redux";
+import configureStore from "redux-mock-store";
+import sinon from "sinon";
+import sinonChai from "sinon-chai";
+
+import { initialState } from "../mock-redux-state";
+import mountWithL10n from "test/mocks/l10n";
+import { OPEN_FAQ } from "src/webextension/list/actions";
+import OpenFAQ from
+ "src/webextension/list/manage/containers/open-faq";
+
+chai.use(sinonChai);
+
+const middlewares = [];
+const mockStore = configureStore(middlewares);
+
+describe("list > manage > containers >
+
+ );
+
+ wrapper.simulate("click");
+ expect(windowOpen).to.have.callCount(1);
+ expect(store.getActions()).to.deep.equal([{
+ type: OPEN_FAQ,
+ }]);
+ windowOpen.restore();
+ });
+});
diff --git a/test/list/manage/components/send-feedback-test.js b/test/list/manage/containers/send-feedback-test.js
similarity index 50%
rename from test/list/manage/components/send-feedback-test.js
rename to test/list/manage/containers/send-feedback-test.js
index 6ae48cc2..3862cb90 100644
--- a/test/list/manage/components/send-feedback-test.js
+++ b/test/list/manage/containers/send-feedback-test.js
@@ -4,22 +4,37 @@
import chai, { expect } from "chai";
import React from "react";
+import { Provider } from "react-redux";
+import configureStore from "redux-mock-store";
import sinon from "sinon";
import sinonChai from "sinon-chai";
+import { initialState } from "../mock-redux-state";
import mountWithL10n from "test/mocks/l10n";
+import { SEND_FEEDBACK } from "src/webextension/list/actions";
import SendFeedback from
- "src/webextension/list/manage/components/send-feedback";
+ "src/webextension/list/manage/containers/send-feedback";
chai.use(sinonChai);
-describe("list > manage > components >
+
);
+
wrapper.simulate("click");
expect(windowOpen).to.have.callCount(1);
+ expect(store.getActions()).to.deep.equal([{
+ type: SEND_FEEDBACK,
+ }]);
+ windowOpen.restore();
});
});
diff --git a/test/list/manage/mock-redux-state.js b/test/list/manage/mock-redux-state.js
index ac25ebfe..09c34dd2 100644
--- a/test/list/manage/mock-redux-state.js
+++ b/test/list/manage/mock-redux-state.js
@@ -5,6 +5,9 @@
// Keep these in sync with .
export const initialState = {
+ account: {
+ mode: "guest",
+ },
cache: {
items: [],
currentItem: null,
@@ -25,6 +28,9 @@ export const initialState = {
};
export const filledState = {
+ account: {
+ mode: "guest",
+ },
cache: {
items: [
{id: "0", title: "title 0", username: "username 0",
diff --git a/test/list/message-ports-test.js b/test/list/message-ports-test.js
index 36c0461e..fcd8dba5 100644
--- a/test/list/message-ports-test.js
+++ b/test/list/message-ports-test.js
@@ -28,6 +28,22 @@ describe("list > message ports", () => {
browser.runtime.onConnect.mockClearListener();
});
+ it('handle "account_details_updated"', () => {
+ const account = {
+ mode: "authenticated",
+ uid: "1234",
+ email: "eripley@wyutani.com",
+ };
+ messagePort.postMessage({type: "account_details_updated", account});
+
+ const dispatched = store.getActions();
+ expect(store.getActions()).to.deep.equal([{
+ type: actions.GET_ACCOUNT_DETAILS_COMPLETED,
+ actionId: dispatched[0].actionId,
+ account,
+ }]);
+ });
+
it('handle "added_item"', () => {
const item = {
id: "1",
diff --git a/test/list/reducers-test.js b/test/list/reducers-test.js
index 6114394a..aa4a1872 100644
--- a/test/list/reducers-test.js
+++ b/test/list/reducers-test.js
@@ -6,11 +6,40 @@ import { expect } from "chai";
import * as actions from "src/webextension/list/actions";
import {
- cacheReducer, listReducer,
+ accountReducer, cacheReducer, listReducer,
} from "src/webextension/list/reducers";
import { NEW_ITEM_ID } from "src/webextension/list/common";
describe("list > reducers", () => {
+ describe("account reducer", () => {
+ it("initial state", () => {
+ expect(accountReducer(undefined, {})).to.deep.equal({
+ mode: "guest",
+ });
+ });
+
+ it("handle GET_ACCOUNT_DETAILS_COMPLETED", () => {
+ const state = {
+ mode: "guest",
+ };
+ const action = {
+ type: actions.GET_ACCOUNT_DETAILS_COMPLETED,
+ actionId: 0,
+ account: {
+ mode: "authenticated",
+ uid: "1234",
+ email: "eripley@wyutani.com",
+ },
+ };
+
+ expect(accountReducer(state, action)).to.deep.equal({
+ mode: "authenticated",
+ uid: "1234",
+ email: "eripley@wyutani.com",
+ });
+ });
+ });
+
describe("cache reducer", () => {
it("initial state", () => {
const action = {};
diff --git a/test/mocks/browser.js b/test/mocks/browser.js
index d16b084b..85977324 100644
--- a/test/mocks/browser.js
+++ b/test/mocks/browser.js
@@ -114,7 +114,16 @@ window.browser = {
identity: {
async launchWebAuthFlow({url}) {
- return url;
+ url = new URL(url);
+ const requestParams = url.searchParams;
+ const redirect = requestParams.get("redirect_uri");
+ const state = requestParams.get("state");
+
+ const responseParams = new URLSearchParams();
+ responseParams.set("state", state);
+ responseParams.set("code", "7scJCX3_Dhc5cfwA3iJ32k07dJEuf3pghu4cNsH5dBXXO9h0OAQ8tHjucatkh8qQVoUiDf04r0dlv4LqkxZ-7Q");
+ const responseURL = new URL(`${redirect}?${responseParams}`);
+ return responseURL.toString();
},
},
@@ -122,6 +131,8 @@ window.browser = {
onMessage: new MockOnMessageListener(),
onConnect: new MockListener(),
+ openOptionsPage: () => {},
+
async sendMessage(msg) {
return this.onMessage.mockFireListener(msg, primaryMessageSender);
},
diff --git a/test/mocks/xpcom.js b/test/mocks/xpcom.js
index 981094ca..b1fd4bff 100644
--- a/test/mocks/xpcom.js
+++ b/test/mocks/xpcom.js
@@ -3,6 +3,7 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
window.ADDON_INSTALL = "ADDON_INSTALL";
+window.ADDON_UPGRADE = "ADDON_UPGRADE";
window.ADDON_UNINSTALL = "ADDON_UNINSTALL";
window.Components = {
diff --git a/test/popup/unlock/components/app-test.js b/test/popup/unlock/components/app-test.js
deleted file mode 100644
index 24f5a977..00000000
--- a/test/popup/unlock/components/app-test.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-import { expect } from "chai";
-import React from "react";
-
-import mountWithL10n from "test/mocks/l10n";
-import App from "src/webextension/popup/unlock/components/app";
-import UnlockPrompt from
- "src/webextension/popup/unlock/components/unlock-prompt";
-
-describe("popup > unlock > components >
+ );
+ expect(wrapper.find("input")).to.have.prop("disabled", true);
+ expect(wrapper.find("button")).to.have.prop("disabled", true);
+ expect(wrapper.childAt(0).prop("className")).to.match(
+ /^\S+input-wrapper\S+ \S+disabled\S+$/
+ );
+ });
+
it("merge classNames", () => {
const wrapper = mountWithL10n(
{}}>external link
+ );
+ expect(wrapper.find("a")).to.have.text("external link");
+ expect(wrapper.find("a")).prop("className").to.match(
+ /^\S+external\S+$/
+ );
+ });
+
+ it("merge className", () => {
+ const wrapper = mount(
+ {}}
+ className="extra-extra">external link
+ );
+ expect(wrapper.find("a")).to.have.text("external link");
+ expect(wrapper.find("a")).prop("className").to.match(
+ /^\S+external\S+ extra-extra$/
+ );
+ });
+
+ it("calls onClick handler", () => {
+ const spyClick = sinon.spy();
+ const wrapper = mount(
+ external link
+ );
+ wrapper.find("a").simulate("click");
+
+ expect(spyClick).to.have.callCount(1);
+ });
+});
diff --git a/test/widgets/panel-test.js b/test/widgets/panel-test.js
index a2e02a50..f4c19882 100644
--- a/test/widgets/panel-test.js
+++ b/test/widgets/panel-test.js
@@ -9,6 +9,7 @@ import sinon from "sinon";
import sinonChai from "sinon-chai";
import { mount } from "test/enzyme";
+import mountWithL10n from "test/mocks/l10n";
import Panel, { PanelHeader, PanelBody, PanelFooter } from
"src/webextension/widgets/panel";
@@ -35,7 +36,9 @@ describe("widgets > panel", () => {
it("onBack fired", () => {
const onBack = sinon.spy();
- const wrapper = mount(header );
+ const wrapper = mountWithL10n(
+ header
+ );
wrapper.find("button").simulate("click");
expect(onBack).to.have.callCount(1);
});
diff --git a/webpack.config.babel.js b/webpack.config.babel.js
index 001b49f2..d316bda5 100644
--- a/webpack.config.babel.js
+++ b/webpack.config.babel.js
@@ -23,13 +23,6 @@ const NODE_ENV = (() => {
return "development";
})();
-// Enable the doorhanger by default on dev builds.
-const ENABLE_DOORHANGER = (
- process.env.ENABLE_DOORHANGER ?
- Boolean(parseInt(process.env.ENABLE_DOORHANGER)) :
- NODE_ENV !== "production"
-);
-
const cssLoader = {
loader: "css-loader",
query: {
@@ -104,7 +97,7 @@ export default {
"webextension/list/manage/index": "./webextension/list/manage/index.js",
"webextension/list/popup/index": "./webextension/list/popup/index.js",
"webextension/firstrun/index": "./webextension/firstrun/index.js",
- "webextension/popup/unlock/index": "./webextension/popup/unlock/index.js",
+ "webextension/unlock/index": "./webextension/unlock/index.js",
"webextension/settings/index": "./webextension/settings/index.js",
},
@@ -135,7 +128,6 @@ export default {
new webpack.DefinePlugin({
"process.env": {
"NODE_ENV": JSON.stringify(NODE_ENV),
- "ENABLE_DOORHANGER": JSON.stringify(ENABLE_DOORHANGER),
},
}),
new HTMLWebpackPlugin({
@@ -163,8 +155,8 @@ export default {
}),
new HTMLWebpackPlugin({
template: "template.ejs",
- filename: "webextension/popup/unlock/index.html",
- chunks: ["webextension/popup/unlock/index"],
+ filename: "webextension/unlock/index.html",
+ chunks: ["webextension/unlock/index"],
inject: false,
minify: htmlMinifyOptions,
}),
diff --git a/webpack.config.test.js b/webpack.config.test.js
index 63423648..5f84cf5c 100644
--- a/webpack.config.test.js
+++ b/webpack.config.test.js
@@ -6,12 +6,6 @@ import path from "path";
import webpack from "webpack";
import combineLoaders from "webpack-combine-loaders";
-// Enable the doorhanger by default for our tests.
-const ENABLE_DOORHANGER = (
- process.env.ENABLE_DOORHANGER ?
- Boolean(parseInt(process.env.ENABLE_DOORHANGER)) : true
-);
-
export default {
devtool: "inline-source-map",
@@ -41,7 +35,6 @@ export default {
new webpack.DefinePlugin({
"process.env": {
"NODE_ENV": JSON.stringify("test"),
- "ENABLE_DOORHANGER": JSON.stringify(ENABLE_DOORHANGER),
},
}),
],