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

regenerate random password, some layout changes

Browse Source
This commit is contained in:
Alexander Bell 2018-09-30 12:23:40 +02:00
parent 5a32e9ad21
commit 7e0ccd16e8
4 changed files with 108 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/PasswordManager/Edit.js
View File

@ -9,6 +9,7 @@ import alertify from 'alertify.js';
* Functions import
*/
import { encrypt, decrypt } from '../../stores/functions/encryption';
import { generatePassword } from '../../stores/functions/generatePassword';
/*
* Component imports
@ -57,6 +58,7 @@ const Edit = inject("rootStore") ( observer(
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.dice = this.dice.bind(this);
this.state = {
url: '',
@ -116,6 +118,15 @@ const Edit = inject("rootStore") ( observer(
}
dice() {
//Generate a new random password
this.setState({
password: generatePassword()
});
}
handleSubmit() {
const url = this.state.url;
const login = encrypt(this.state.login, this.props.encryptionkey);
@ -172,25 +183,45 @@ const Edit = inject("rootStore") ( observer(
<Form onSubmit={this.handleSubmit}>
<Form.Field>
<label>Application / URL:</label>
<Input iconPosition='left' placeholder='http://exmple.com'>
<input value={url} type="text" name="url" id="url" onChange={this.handleChange} autoComplete="off" required />
</Input>
<Input
defaultValue={url}
name="url"
id="url"
onChange={this.handleChange}
type="text"
placeholder="http://alexbell.ninja"
required
/>
</Form.Field>
<Form.Field>
<label>Username / email adress:</label>
<Input iconPosition='left' placeholder='example@example.com'>
<input value={login} type="text" name="login" onChange={this.handleChange} autoComplete="off" required />
</Input>
<Input
defaultValue={login}
name="login"
onChange={this.handleChange}
type="text"
placeholder="example@example.com"
required
/>
</Form.Field>
<Form.Field>
<label>Password:</label>
<Input iconPosition='left' placeholder='********'>
<input value={password} type="text" name="password" onChange={this.handleChange} autoComplete="off" required />
</Input>
<Input
value={password}
name="password"
onChange={this.handleChange}
type="text"
placeholder='********'
label={<Button onClick={this.dice} type="button" icon><Icon name='random' /></Button>}
labelPosition="right"
required
/>
</Form.Field>
<p>Login and password are going to be encrypted with the key you have set.</p>
<Button loading={this.state.loading} type='submit' primary>Update</Button>

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

@ -9,6 +9,7 @@ import alertify from 'alertify.js';
* Functions import
*/
import { encrypt } from '../../stores/functions/encryption';
import { generatePassword } from '../../stores/functions/generatePassword';
/*
* Component imports
@ -57,11 +58,12 @@ const New = inject("rootStore") ( observer(
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.dice = this.dice.bind(this);
this.state = {
url: '',
login: '',
password: this.generatePassword(),
password: generatePassword(),
loading: false
}
@ -80,7 +82,7 @@ const New = inject("rootStore") ( observer(
this.setState({
url: '',
login: '',
password: this.generatePassword()
password: generatePassword()
});
}
}
@ -98,23 +100,6 @@ const New = inject("rootStore") ( observer(
}
generatePassword() {
//Creates a unique id for each chat bubble so that the animation can be triggered
var random = "";
var possible = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOP0123456";
for (var i = 0; i < 16; i++)
random += possible.charAt(Math.floor(Math.random() * possible.length));
while(true) {
if(!document.getElementById(random)) {
return random;
}
}
}
handleChange(e) {
this.setState({
[e.target.name]: e.target.value
@ -122,6 +107,15 @@ const New = inject("rootStore") ( observer(
}
dice() {
//Generate a new random password
this.setState({
password: generatePassword()
});
}
handleSubmit() {
const url = this.state.url;
const login = encrypt(this.state.login, this.props.encryptionkey);
@ -177,23 +171,41 @@ const New = inject("rootStore") ( observer(
<Form.Field>
<label>Application / URL:</label>
<Input iconPosition='left' placeholder='http://exmple.com'>
<input value={this.state.url} type="text" name="url" id="url" onChange={this.handleChange} autoComplete="off" required />
</Input>
<Input
defaultValue={this.state.url}
name="url"
id="url"
onChange={this.handleChange}
type="text"
placeholder="http://alexbell.ninja"
required
/>
</Form.Field>
<Form.Field>
<label>Username / email adress:</label>
<Input iconPosition='left' placeholder='example@example.com'>
<input value={this.state.login} type="text" name="login" onChange={this.handleChange} autoComplete="off" required />
</Input>
<Input
defaultValue={this.state.login}
name="login"
onChange={this.handleChange}
type="text"
placeholder="example@example.com"
required
/>
</Form.Field>
<Form.Field>
<label>Password:</label>
<Input iconPosition='left' placeholder='********'>
<input value={this.state.password} type="text" name="password" onChange={this.handleChange} autoComplete="off" required />
</Input>
<Input
value={this.state.password}
name="password"
onChange={this.handleChange}
type="text"
placeholder='********'
label={<Button onClick={this.dice} type="button" icon><Icon name='random' /></Button>}
labelPosition="right"
required
/>
</Form.Field>
<p>Login and password are going to be encrypted with the key you have set.</p>

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

@ -239,13 +239,13 @@ const PasswordManager = inject("rootStore") ( observer(
<Table.Cell>{url}</Table.Cell>
<Table.Cell>{login}</Table.Cell>
<Table.Cell>
<Button icon onClick={copyLogin}>
<Button icon onClick={copyLogin} circular>
<Icon name='copy' />
</Button>
</Table.Cell>
<Table.Cell>{password}</Table.Cell>
<Table.Cell>
<Button icon onClick={copyPassword}>
<Button icon onClick={copyPassword} circular>
<Icon name='copy' />
</Button>
</Table.Cell>
@ -269,9 +269,18 @@ const PasswordManager = inject("rootStore") ( observer(
<Headline black="Password " red="manager" />
<Input icon placeholder='Search...'>
<input type='text' id="search" placeholder='Search...' name="search" onChange={this.onChangeInput} autoComplete="off" />
<Input
icon
placeholder='Search...'
type='text'
id="search"
name="search"
onChange={this.onChangeInput}
iconPosition='left'
transparent
>
<Icon name='search' />
<input />
</Input>
<Menu attached='top'>

15
src/stores/functions/generatePassword.js Normal file
View File

@ -0,0 +1,15 @@
export function generatePassword() {
//Creates a unique id for each chat bubble so that the animation can be triggered
var random = "";
var possible = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOP0123456";
for (var i = 0; i < 16; i++)
random += possible.charAt(Math.floor(Math.random() * possible.length));
while(true) {
if(!document.getElementById(random)) {
return random;
}
}
}