diff --git a/packages/lesspass-web-component/package.json b/packages/lesspass-web-component/package.json
index 3b288e6..264decd 100644
--- a/packages/lesspass-web-component/package.json
+++ b/packages/lesspass-web-component/package.json
@@ -28,5 +28,10 @@
"not dead",
"not ie <= 11",
"not op_mini all"
- ]
+ ],
+ "devDependencies": {
+ "enzyme": "^3.9.0",
+ "enzyme-adapter-react-16": "^1.13.2",
+ "react-test-renderer": "^16.8.6"
+ }
}
diff --git a/packages/lesspass-web-component/src/LessPass.js b/packages/lesspass-web-component/src/LessPass.js
index 360cc8b..3069de6 100644
--- a/packages/lesspass-web-component/src/LessPass.js
+++ b/packages/lesspass-web-component/src/LessPass.js
@@ -2,17 +2,10 @@ import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import styled, { createGlobalStyle } from "styled-components";
import Logo from "./logo.png";
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
- faCogs,
- faQuestion,
- faUserSecret
-} from "@fortawesome/free-solid-svg-icons";
-
-library.add(faCogs);
-library.add(faQuestion);
-library.add(faUserSecret);
+import PasswordGenerationPage from "./password/PasswordGenerationPage";
+import SettingsPage from "./settings/SettingsPage";
+import HelpPage from "./help/HelpPage";
+import Icon from "./ui/Icon";
const GlobalStyle = createGlobalStyle`
html {
@@ -95,7 +88,7 @@ const FooterLink = styled(Link)`
}
`;
-const FooterIcon = styled(FontAwesomeIcon)`
+const FooterIcon = styled(Icon)`
font-size: 1em;
margin-bottom: 0.5em;
`;
@@ -104,217 +97,9 @@ const FooterText = styled.div`
font-size: 0.8em;
`;
-const InputWrapper = styled.div`
- position: relative;
- input {
- width: 100%;
- padding: 1em 0.5em;
- outline: none;
- border: 1px solid #dddddd;
- border-radius: 3px;
- }
- input:focus {
- border-color: #333333;
- }
- label {
- background-color: #ffffff;
- color: #333333;
- padding: 0 0.5em;
- position: absolute;
- top: -0.5em;
- font-size: 0.8em;
- left: 10px;
- }
-`;
-
-class Input extends React.Component {
- state = {
- focused: false
- };
-
- onBlur = () => {
- this.setState({ focused: false });
- };
-
- onFocus = () => {
- this.setState({ focused: true });
- };
-
- render() {
- const { focused } = this.state;
- const { label, value, onChange, ...props } = this.props;
- return (
-
- {(focused || value) && }
- onChange(event.target.value)}
- placeholder={focused ? "" : label}
- {...props}
- />
-
- );
- }
-}
-
-const Options = styled.div`
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- color: #333;
-`;
-
-const Counter = styled.div`
- display: flex;
- border-radius: 3px;
- border: 1px solid #333;
- span {
- background-color: #333;
- color: #eee;
- padding: 0 1em;
- cursor: pointer;
- }
- input {
- width: 50px;
- border: none;
- text-align: center;
- }
- &:focus-within {
- border: 1px solid #0275d8;
- span {
- background-color: #0275d8;
- }
- }
-`;
-const CounterWrapper = styled.div`
- display: flex;
- flex-direction: column;
- label {
- font-size: 0.8em;
- padding-bottom: 0.5em;
- color: #666;
- }
-`;
-
-const CheckboxWrapper = styled.div`
- display: flex;
- align-items: center;
- label {
- font-size: 0.8em;
- color: #666;
- }
-`;
-
-const Button = styled.button`
- width: 100%;
- background-color: #333;
- color: #eee;
- border: none;
- padding: 1em;
- border-radius: 3px;
-
- &:focus {
- background-color: #0275d8;
- }
-`;
-
-const PasswordGeneration = styled.div`
- display: flex;
- justify-content: space-around;
- height: 100%;
- flex-direction: column;
-`;
-
-class PasswordGenerationPage extends React.Component {
- state = {
- site: "",
- login: "",
- masterPassword: ""
- };
-
- render() {
- const { site, login, masterPassword } = this.state;
- return (
-
- this.setState({ site })}
- tabIndex={1}
- />
- this.setState({ login })}
- tabIndex={2}
- />
- this.setState({ masterPassword })}
- tabIndex={3}
- />
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- +
-
-
-
-
-
- -
-
- +
-
-
-
-
-
- );
- }
-}
-
-class SettingPage extends React.Component {
- render() {
- return
SettingPage
;
- }
-}
-
-class HelpPage extends React.Component {
- render() {
- return HelpPage
;
- }
-}
-
class LessPass extends React.Component {
render() {
+ const { db } = this.props;
return (
@@ -323,8 +108,15 @@ class LessPass extends React.Component {
-
-
+ }
+ />
+ }
+ />