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 { - - + } + /> + } + />