Small improvements for authentication

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;
+}

src/components/Auth/Login.tsx

@@ -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"

src/components/Auth/SignUp.tsx

@@ -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!

src/components/TopBar.tsx

@@ -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>
       ) : (