Small improvements for authentication
This commit is contained in:
parent
a3527e0b77
commit
2ad15e334b
18
src/App.less
18
src/App.less
|
@ -109,3 +109,21 @@ html, body {
|
|||
color: @text;
|
||||
--background-overlay: rgba(34, 38, 41, 0.9);
|
||||
}
|
||||
|
||||
// Fix autocomplete yellow/white background color in Chrome and Safari
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:focus,
|
||||
textarea:-webkit-autofill,
|
||||
textarea:-webkit-autofill:hover,
|
||||
textarea:-webkit-autofill:focus,
|
||||
select:-webkit-autofill,
|
||||
select:-webkit-autofill:hover,
|
||||
select:-webkit-autofill:focus {
|
||||
border: 0;
|
||||
-webkit-text-fill-color: @text;
|
||||
caret-color: @text;
|
||||
-webkit-box-shadow: 0 0 0px 1000px @component-background inset;
|
||||
box-shadow: 0 0 0px 1000px @component-background inset;
|
||||
transition: background-color 5000s ease-in-out 0s;
|
||||
}
|
||||
|
|
|
@ -10,7 +10,10 @@ import {
|
|||
MailOutlined,
|
||||
LockOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { Link } from 'react-router-dom';
|
||||
import {
|
||||
Link,
|
||||
useHistory,
|
||||
} from 'react-router-dom';
|
||||
import { useAuth } from '../../contexts/AuthContext';
|
||||
import { Routes } from '../../routes';
|
||||
import validateMessages from './validateMessages';
|
||||
|
@ -18,22 +21,29 @@ import validateMessages from './validateMessages';
|
|||
const { Item } = Form;
|
||||
|
||||
const Login = () => {
|
||||
const [form] = Form.useForm();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const { login } = useAuth();
|
||||
const history = useHistory();
|
||||
|
||||
const onFinish = async ({ email, password }: { email: string, password: string }) => {
|
||||
const onFinish = async ({ email, password }: { form: any, email: string, password: string }) => {
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
await login(email, password);
|
||||
notification.success({
|
||||
message: 'Login successful',
|
||||
description: 'Welcome back!',
|
||||
});
|
||||
setIsLoading(false);
|
||||
history.push(Routes.ROOT);
|
||||
} catch (err) {
|
||||
form.resetFields();
|
||||
console.warn(err);
|
||||
notification.error({
|
||||
message: 'Login failed',
|
||||
description: (err as Error).message,
|
||||
});
|
||||
}
|
||||
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
|
@ -49,6 +59,7 @@ const Login = () => {
|
|||
onFinish={onFinish}
|
||||
validateMessages={validateMessages}
|
||||
autoComplete="off"
|
||||
form={form}
|
||||
>
|
||||
<Item
|
||||
name="email"
|
||||
|
|
|
@ -10,7 +10,10 @@ import {
|
|||
MailOutlined,
|
||||
LockOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { Link } from 'react-router-dom';
|
||||
import {
|
||||
Link,
|
||||
useHistory,
|
||||
} from 'react-router-dom';
|
||||
import { useAuth } from '../../contexts/AuthContext';
|
||||
import { Routes } from '../../routes';
|
||||
import validateMessages from './validateMessages';
|
||||
|
@ -20,22 +23,29 @@ const { Item } = Form;
|
|||
const strongPassword = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/;
|
||||
|
||||
const SignUp = () => {
|
||||
const [form] = Form.useForm();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const { signUp } = useAuth();
|
||||
const history = useHistory();
|
||||
|
||||
const onFinish = async ({ email, password }: { email: string, password: string }) => {
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
await signUp(email, password);
|
||||
notification.success({
|
||||
message: 'Sign Up successful',
|
||||
description: 'Welcome on board!',
|
||||
});
|
||||
setIsLoading(false);
|
||||
history.push(Routes.ROOT);
|
||||
} catch (err) {
|
||||
form.resetFields();
|
||||
console.warn(err);
|
||||
notification.error({
|
||||
message: 'Failed to create an account',
|
||||
description: (err as Error).message,
|
||||
});
|
||||
}
|
||||
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
|
@ -51,6 +61,7 @@ const SignUp = () => {
|
|||
onFinish={onFinish}
|
||||
validateMessages={validateMessages}
|
||||
autoComplete="off"
|
||||
form={form}
|
||||
>
|
||||
<Item
|
||||
name="email"
|
||||
|
@ -103,7 +114,7 @@ const SignUp = () => {
|
|||
style={{ width: '100%' }}
|
||||
loading={isLoading}
|
||||
>
|
||||
Sign up
|
||||
Sign Up
|
||||
</Button>
|
||||
</Item>
|
||||
Or <Link to={Routes.LOGIN}>login</Link> if you already have an account!
|
||||
|
|
|
@ -17,6 +17,7 @@ import {
|
|||
Dropdown,
|
||||
Typography,
|
||||
Radio,
|
||||
notification,
|
||||
} from 'antd';
|
||||
import {
|
||||
UserOutlined,
|
||||
|
@ -43,6 +44,7 @@ import {
|
|||
LogoutOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
|
@ -66,11 +68,26 @@ const TopBar = () => {
|
|||
const { currentUser, logout } = useAuth();
|
||||
const history = useHistory();
|
||||
const matchedTabPath = useMemo(() => matchPath(pathname, { path: Routes.TAB }), [pathname]);
|
||||
const logoutClick = useCallback(async () => {
|
||||
try {
|
||||
await logout();
|
||||
notification.warning({
|
||||
message: 'Logout successful',
|
||||
description: 'See you again!',
|
||||
});
|
||||
} catch (err) {
|
||||
console.warn(err);
|
||||
notification.error({
|
||||
message: 'Login failed',
|
||||
description: (err as Error).message,
|
||||
});
|
||||
}
|
||||
}, [logout]);
|
||||
|
||||
const userMenu = (
|
||||
<Menu>
|
||||
{currentUser ? (
|
||||
<Menu.Item key="logout" icon={<LogoutOutlined />} onClick={logout}>
|
||||
<Menu.Item key="logout" icon={<LogoutOutlined />} onClick={logoutClick}>
|
||||
Logout
|
||||
</Menu.Item>
|
||||
) : (
|
||||
|
|
Loading…
Reference in New Issue