refactor(tsx): convert Login view

Author: fabiovincenzi

src/ui/views/Login/Login.jsx renamed to src/ui/views/Login/Login.tsx

@@ -1,9 +1,7 @@
-import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-// @material-ui/core components
+import React, { useState, FormEvent } from 'react';
+import { useNavigate, Navigate } from 'react-router-dom';
 import FormControl from '@material-ui/core/FormControl';
 import InputLabel from '@material-ui/core/InputLabel';
-// core components
 import GridItem from '../../components/Grid/GridItem';
 import GridContainer from '../../components/Grid/GridContainer';
 import Input from '@material-ui/core/Input';
@@ -12,70 +10,83 @@ import Card from '../../components/Card/Card';
 import CardHeader from '../../components/Card/CardHeader';
 import CardBody from '../../components/Card/CardBody';
 import CardFooter from '../../components/Card/CardFooter';
-import axios from 'axios';
+import axios, { AxiosError } from 'axios';
 import logo from '../../assets/img/git-proxy.png';
 import { Badge, CircularProgress, Snackbar } from '@material-ui/core';
 import { getCookie } from '../../utils';
 import { useAuth } from '../../auth/AuthProvider';
 
-const loginUrl = `${import.meta.env.VITE_API_URI}/api/auth/login`;
+interface LoginResponse {
+  username: string;
+  password: string;
+}
 
-export default function UserProfile() {
-  const [username, setUsername] = useState('');
-  const [password, setPassword] = useState('');
-  const [message, setMessage] = useState('');
-  const [, setGitAccountError] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
+const loginUrl = `${import.meta.env.VITE_API_URI}/api/auth/login`;
 
+const Login: React.FC = () => {
   const navigate = useNavigate();
   const { refreshUser } = useAuth();
 
-  function validateForm() {
+  const [username, setUsername] = useState<string>('');
+  const [password, setPassword] = useState<string>('');
+  const [message, setMessage] = useState<string>('');
+  const [success, setSuccess] = useState<boolean>(false);
+  const [gitAccountError, setGitAccountError] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  function validateForm(): boolean {
     return (
       username.length > 0 && username.length < 100 && password.length > 0 && password.length < 200
     );
   }
 
-  function handleOIDCLogin() {
+  function handleOIDCLogin(): void {
     window.location.href = `${import.meta.env.VITE_API_URI}/api/auth/oidc`;
   }
 
-  function handleSubmit(event) {
+  function handleSubmit(event: FormEvent): void {
+    event.preventDefault();
     setIsLoading(true);
+
     axios
-      .post(
+      .post<LoginResponse>(
         loginUrl,
-        {
-          username: username,
-          password: password,
-        },
+        { username, password },
         {
           withCredentials: true,
           headers: {
             'Content-Type': 'application/json',
-            'X-CSRF-TOKEN': getCookie('csrf'),
+            'X-CSRF-TOKEN': getCookie('csrf') || '',
           },
         },
       )
-      .then(function () {
+      .then(() => {
         window.sessionStorage.setItem('git.proxy.login', 'success');
         setMessage('Success!');
-        setIsLoading(false);
-        refreshUser().then(() => navigate('/dashboard/repo'));
+        setSuccess(true);
+        refreshUser();
       })
-      .catch(function (error) {
-        if (error.response.status === 307) {
+      .catch((error: AxiosError) => {
+        if (error.response?.status === 307) {
           window.sessionStorage.setItem('git.proxy.login', 'success');
           setGitAccountError(true);
-        } else if (error.response.status === 403) {
+        } else if (error.response?.status === 403) {
           setMessage('You do not have the correct access permissions...');
         } else {
           setMessage('You entered an invalid username or password...');
         }
+      })
+      .finally(() => {
         setIsLoading(false);
       });
+  }
 
-    event.preventDefault();
+  if (gitAccountError) {
+    return <Navigate to='/dashboard/profile' />;
+  }
+
+  if (success) {
+    return <Navigate to='/dashboard/repo' />;
   }
 
   return (
@@ -91,43 +102,36 @@ export default function UserProfile() {
         <GridItem xs={12} sm={10} md={6} lg={4} xl={3}>
           <Card>
             <CardHeader color='primary'>
-              <div
-                style={{
-                  textAlign: 'center',
-                  marginRight: '10px',
-                  marginTop: '12px',
-                  marginBottom: '12px',
-                }}
-              >
+              <div style={{ textAlign: 'center', margin: '12px 10px' }}>
                 <img
-                  style={{ verticalAlign: 'middle', filter: 'brightness(0) invert(1)' }}
-                  width={'150px'}
                   src={logo}
                   alt='logo'
+                  width={150}
+                  style={{ verticalAlign: 'middle', filter: 'brightness(0) invert(1)' }}
                   data-test='git-proxy-logo'
                 />
               </div>
             </CardHeader>
             <CardBody>
               <GridContainer>
-                <GridItem xs={6} sm={6} md={6}>
-                  <FormControl>
-                    <InputLabel>Username</InputLabel>
+                <GridItem xs={12} sm={12} md={12}>
+                  <FormControl fullWidth>
+                    <InputLabel htmlFor='username'>Username</InputLabel>
                     <Input
                       id='username'
-                      type='username'
+                      type='text'
                       value={username}
                       onChange={(e) => setUsername(e.target.value)}
-                      autoFocus={true}
+                      autoFocus
                       data-test='username'
                     />
                   </FormControl>
                 </GridItem>
               </GridContainer>
               <GridContainer>
-                <GridItem xs={6} sm={6} md={6}>
-                  <FormControl>
-                    <InputLabel>Password</InputLabel>
+                <GridItem xs={12} sm={12} md={12}>
+                  <FormControl fullWidth>
+                    <InputLabel htmlFor='password'>Password</InputLabel>
                     <Input
                       id='password'
                       type='password'
@@ -162,9 +166,9 @@ export default function UserProfile() {
               )}
             </CardFooter>
           </Card>
-          <div style={{ textAlign: 'center', opacity: 0.9, fontSize: '12px' }}>
-            <Badge overlap='rectangular' color='error' badgeContent={'NEW'} />{' '}
-            <span style={{ paddingLeft: '20px' }}>
+          <div style={{ textAlign: 'center', opacity: 0.9, fontSize: 12, marginTop: 20 }}>
+            <Badge overlap='rectangular' color='error' badgeContent='NEW' />
+            <span style={{ paddingLeft: 20 }}>
               View our <a href='/dashboard/push'>open source activity feed</a> or{' '}
               <a href='/dashboard/repo'>scroll through projects</a> we contribute to
             </span>
@@ -173,4 +177,6 @@ export default function UserProfile() {
       </GridContainer>
     </form>
   );
-}
+};
+
+export default Login;