136 lines
4.2 KiB
Python
136 lines
4.2 KiB
Python
import React, { useState, useEffect, useContext } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { Link } from 'react-router-dom';
|
|
import { toast } from 'react-toastify';
|
|
import AppContext from '../../../context/Context';
|
|
import { Button, Form, Row, Col, FormGroup, Input, CustomInput, Label } from 'reactstrap';
|
|
import { createCookie, getItemFromStore, setItemToStore } from '../../../helpers/utils';
|
|
import withRedirect from '../../../hoc/withRedirect';
|
|
import { withTranslation } from 'react-i18next';
|
|
import { APIBaseURL } from '../../../config';
|
|
|
|
|
|
const LoginForm = ({ setRedirect, hasLabel, layout, t }) => {
|
|
// State
|
|
const [email, setEmail] = useState(getItemFromStore('email', ''));
|
|
const [password, setPassword] = useState('');
|
|
const [remember, setRemember] = useState(true);
|
|
const [isDisabled, setIsDisabled] = useState(true);
|
|
// Context
|
|
const { language, setLanguage } = useContext(AppContext);
|
|
|
|
// Handler
|
|
const handleSubmit = e => {
|
|
e.preventDefault();
|
|
let isResponseOK = false;
|
|
fetch(APIBaseURL + '/users/login', {
|
|
method: 'PUT',
|
|
body: JSON.stringify({ "data": { "email": email, "password": password } }),
|
|
headers: { "Content-Type": "application/json" }
|
|
}).then(response => {
|
|
console.log(response);
|
|
if (response.ok) {
|
|
isResponseOK = true;
|
|
}
|
|
return response.json();
|
|
}).then(json => {
|
|
console.log(json);
|
|
console.log(isResponseOK);
|
|
if (isResponseOK) {
|
|
createCookie('user_name', json.name, 1000 * 60 * 60 * 8);
|
|
createCookie('user_display_name', json.display_name, 1000 * 60 * 60 * 8);
|
|
createCookie('user_uuid', json.uuid, 1000 * 60 * 60 * 8);
|
|
createCookie('token', json.token, 1000 * 60 * 60 * 8);
|
|
createCookie('is_logged_in', true, 1000 * 60 * 60 * 8);
|
|
console.log("display_name:");
|
|
toast.success(t('Logged in as ') + json.display_name);
|
|
if (remember) {
|
|
setItemToStore('email', email);
|
|
} else {
|
|
setItemToStore('email', '');
|
|
}
|
|
setRedirect(true);
|
|
} else {
|
|
toast.error(json.description)
|
|
}
|
|
}).catch(err => {
|
|
console.log(err);
|
|
});
|
|
|
|
};
|
|
|
|
useEffect(() => {
|
|
setIsDisabled(!email || !password);
|
|
}, [email, password]);
|
|
|
|
return (
|
|
<Form onSubmit={handleSubmit}>
|
|
<FormGroup>
|
|
{hasLabel && <Label>{t('Email address')}</Label>}
|
|
<Input
|
|
placeholder={!hasLabel ? t('Email address') : ''}
|
|
value={email}
|
|
onChange={({ target }) => setEmail(target.value)}
|
|
type="email"
|
|
autoFocus
|
|
/>
|
|
</FormGroup>
|
|
<FormGroup>
|
|
{hasLabel && <Label>{t('Password')}</Label>}
|
|
<Input
|
|
placeholder={!hasLabel ? t('Password') : ''}
|
|
value={password}
|
|
onChange={({ target }) => setPassword(target.value)}
|
|
type="password"
|
|
/>
|
|
</FormGroup>
|
|
<Row className="justify-content-between align-items-center">
|
|
<Col xs="auto">
|
|
<CustomInput
|
|
id="customCheckRemember"
|
|
label={t('Remember me')}
|
|
checked={remember}
|
|
onChange={({ target }) => setRemember(target.checked)}
|
|
type="checkbox"
|
|
/>
|
|
</Col>
|
|
<Col xs="auto">
|
|
<Link className="fs--1" to={`/authentication/${layout}/forget-password`}>
|
|
{t('Forget Password?')}
|
|
</Link>
|
|
</Col>
|
|
</Row>
|
|
<FormGroup>
|
|
<Button color="primary" block className="mt-3" disabled={isDisabled}>
|
|
{t('Log in')}
|
|
</Button>
|
|
</FormGroup>
|
|
<CustomInput
|
|
type="select"
|
|
id="language"
|
|
name="language"
|
|
className="mb-3"
|
|
value={language}
|
|
onChange={({ target }) => setLanguage(target.value)}
|
|
>
|
|
<option value="zh_CN">{t('language-zh_CN')}</option>
|
|
<option value="en">{t('language-en')}</option>
|
|
<option value="de">{t('language-de')}</option>
|
|
</CustomInput>
|
|
</Form>
|
|
);
|
|
};
|
|
|
|
LoginForm.propTypes = {
|
|
setRedirect: PropTypes.func.isRequired,
|
|
layout: PropTypes.string,
|
|
hasLabel: PropTypes.bool
|
|
};
|
|
|
|
LoginForm.defaultProps = {
|
|
layout: 'basic',
|
|
hasLabel: false
|
|
};
|
|
|
|
export default withTranslation()(withRedirect(LoginForm));
|