aleabodo/mywebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

auto focus input, url shortened

Browse Source
This commit is contained in:
Alexander Bell 2018-09-21 17:13:00 +02:00
parent 5dfd05bd1d
commit 3258f2666f
4 changed files with 16 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Menu/Menu.js
View File

@ -103,7 +103,7 @@ const Main = inject("rootStore") ( observer(
Home Home
</Menu.Item> </Menu.Item>
<Menu.Item name='/passwords' active={activeItem === '/passwords'} onClick={this.handleItemClick} as='a'> <Menu.Item name='/p' active={activeItem === '/p'} onClick={this.handleItemClick} as='a'>
Password manager Password manager
</Menu.Item> </Menu.Item>
@ -138,7 +138,7 @@ const Main = inject("rootStore") ( observer(
Home Home
</Menu.Item> </Menu.Item>
<Menu.Item name="/passwords" active={activeItem === '/passwords'} onClick={this.handleItemClick} as='a'> <Menu.Item name="/p" active={activeItem === '/p'} onClick={this.handleItemClick} as='a'>
Password manager Password manager
</Menu.Item> </Menu.Item>

10
src/components/PasswordManager/New.js
View File

@ -76,6 +76,7 @@ const New = inject("rootStore") ( observer(
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if(nextProps.open !== this.props.open) { if(nextProps.open !== this.props.open) {
//Empty input fields
this.setState({ this.setState({
url: '', url: '',
login: '', login: '',
@ -85,6 +86,13 @@ const New = inject("rootStore") ( observer(
} }
componentDidUpdate() {
if(this.props.open && this.state.url === '' && this.state.login === '') {
document.getElementById('url').focus();
}
}
componentWillUnmount() { componentWillUnmount() {
this.sheet.detach() this.sheet.detach()
} }
@ -169,7 +177,7 @@ const New = inject("rootStore") ( observer(
<Form.Field> <Form.Field>
<label>Application / URL:</label> <label>Application / URL:</label>
<Input iconPosition='left' placeholder='http://exmple.com'> <Input iconPosition='left' placeholder='http://exmple.com'>
<input value={this.state.url} type="text" name="url" onChange={this.handleChange} autoComplete="off" required /> <input value={this.state.url} type="text" name="url" id="url" onChange={this.handleChange} autoComplete="off" required />
</Input> </Input>
</Form.Field> </Form.Field>

2
src/pages/Main.js
View File

@ -76,7 +76,7 @@ class Main extends Component {
<Segment className={this.classes.mainSegment} padded="very"> <Segment className={this.classes.mainSegment} padded="very">
<Switch> <Switch>
<Route exact path="/" component={Home} /> <Route exact path="/" component={Home} />
<Route path="/passwords" component={PasswordManager} /> <Route path="/p" component={PasswordManager} />
</Switch> </Switch>
<img alt="" className={this.classes.ninja} src={require('../files/images/ninja.svg')} /> <img alt="" className={this.classes.ninja} src={require('../files/images/ninja.svg')} />
</Segment> </Segment>

5
src/pages/passwordManager/PasswordManager.js
View File

@ -76,6 +76,9 @@ const PasswordManager = inject("rootStore") ( observer(
componentDidMount() { componentDidMount() {
this.fetchData(); this.fetchData();
//Focus on search input
document.getElementById('search').focus();
} }
@ -230,7 +233,7 @@ const PasswordManager = inject("rootStore") ( observer(
<Headline black="Password " red="manager" /> <Headline black="Password " red="manager" />
<Input icon placeholder='Search...'> <Input icon placeholder='Search...'>
<input type='text' placeholder='Search...' name="search" onChange={this.onChangeInput} autoComplete="off" /> <input type='text' id="search" placeholder='Search...' name="search" onChange={this.onChangeInput} autoComplete="off" />
<Icon name='search' /> <Icon name='search' />
</Input> </Input>