29 lines
1.1 KiB
JavaScript
29 lines
1.1 KiB
JavaScript
|
import React from 'react';
|
||
|
|
import {Form, Segment, Input, Button} from 'semantic-ui-react';
|
||
|
|
|
||
|
|
const loginForm = ({i18n, page, onSubmit}) => {
|
||
|
|
let account;
|
||
|
|
let password;
|
||
|
|
return (
|
||
|
|
<Form size="large" onSubmit={(e, data) => {
|
||
|
|
e.preventDefault();
|
||
|
|
onSubmit(data.formData);
|
||
|
|
}} serializer={e => {
|
||
|
|
let acc = e.querySelector('input[name="acc"]').value;
|
||
|
|
let pass = e.querySelector('input[name="pass"]').value;
|
||
|
|
return {account: acc, password: pass};
|
||
|
|
}}>
|
||
|
|
<Segment stacked={true} >
|
||
|
|
<Form.Field>
|
||
|
|
<Input icon="user" iconPosition="left" name="acc" placeholder={typeof i18n.t == 'function' ? i18n.t(`${page}.input.placeholder.account`) : ''} />
|
||
|
|
</Form.Field>
|
||
|
|
<Form.Field>
|
||
|
|
<Input icon="lock" iconPosition="left" name="pass" type="password" placeholder={typeof i18n.t == 'function' ? i18n.t(`${page}.input.placeholder.password`) : ''} />
|
||
|
|
</Form.Field>
|
||
|
|
<Button type="submit" color="teal" size="large" fluid={true} content={typeof i18n.t == 'function' ? i18n.t(`${page}.button.login`) : ''} />
|
||
|
|
</Segment>
|
||
|
|
</Form>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default loginForm;
|