Add initial login page

apps/apigateway/src/app.ts

@@ -28,7 +28,7 @@ app.disable('x-powered-by');
 
 setupLogging(app);
 
-app.use(authVerification);
+// app.use(authVerification);
 setupProxies(app, ROUTES);
 
 app.get('/', (req, res) => {

apps/apigateway/src/routes.ts

@@ -17,6 +17,7 @@ const BASEURL_CUSTOMER =
 const BASEURL_BORROWING =
   process.env.BASEURL_BORROWING || 'http://localhost:8003';
 const BASEURL_PAYMENT = process.env.BASEURL_PAYMENT || 'http://localhost:8004';
+const BASEURL_AUTH = process.env.BASEURL_AUTH || 'http://localhost:8005';
 
 // function removeXPowerByHeader(
 //   proxyRes: http.IncomingMessage,
@@ -85,4 +86,18 @@ export const ROUTES: IRoute[] = [
       },
     },
   },
+  // Auth
+  {
+    url: '/api/auth',
+    auth: false,
+    creditCheck: false,
+    proxy: {
+      target: BASEURL_AUTH,
+      changeOrigin: true,
+      ws: false,
+      pathRewrite: {
+        '^/api/auth': '',
+      },
+    },
+  },
 ];

apps/ui/.env

@@ -3,3 +3,4 @@ VITE_BOOK_API_BASE_URL='http://localhost:8080'
 VITE_CUSTOMER_API_BASE_URL='http://localhost:8080'
 VITE_BORROWING_API_BASE_URL='http://localhost:8080'
 VITE_PAYMENT_API_BASE_URL='http://localhost:8080'
+VITE_AUTH_API_BASE_URL='http://localhost:8080'

apps/ui/src/App.tsx

@@ -16,6 +16,7 @@ import Borrowings from './pages/Borrowings';
 import Checkout from './pages/Checkout';
 import Home from './pages/Home';
 import Layout from './pages/Layout';
+import Login from './pages/Login';
 
 function App() {
   const [cartItems, setCartItems] = useState<ICart[]>([]);
@@ -88,6 +89,7 @@ function App() {
             />
             <Route path="about" element={<About />} />
             <Route path="admin" element={<Admin />} />
+            <Route path="login" element={<Login />} />
           </Route>
         </Routes>
       </BrowserRouter>

apps/ui/src/api/auth-api.ts

@@ -0,0 +1,10 @@
+import axios from 'axios';
+
+const BASE_URL = import.meta.env.VITE_AUTH_API_BASE_URL;
+const resource = '/api/auth';
+const url = `${BASE_URL}${resource}`;
+
+export async function login(payload: { email: string; password: string }) {
+  const endpoint = `${url}/auth/login`;
+  return await axios.post(endpoint, payload);
+}

apps/ui/src/pages/Login.tsx

@@ -0,0 +1,123 @@
+import { CircularProgress } from '@mui/material';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Checkbox from '@mui/material/Checkbox';
+import Container from '@mui/material/Container';
+import CssBaseline from '@mui/material/CssBaseline';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Grid from '@mui/material/Grid';
+import Link from '@mui/material/Link';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import * as React from 'react';
+import { login } from '../api/auth-api';
+import { useNavigate } from 'react-router-dom';
+
+// TODO remove, this demo shouldn't need to reset the theme.
+const defaultTheme = createTheme();
+
+export default function Login() {
+  const [error, setError] = React.useState(false);
+  const [loading, setLoading] = React.useState(false);
+  const navigate = useNavigate();
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setLoading(true);
+    setError(false);
+    const data = new FormData(event.currentTarget);
+
+    try {
+      const res = await login({
+        email: data.get('email').toString(),
+        password: data.get('password').toString(),
+      });
+      const token = res.data?.access_token;
+      console.log(token);
+      navigate('/');
+      console.log('redirected');
+    } catch (err) {
+      setError(true);
+      console.log(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <ThemeProvider theme={defaultTheme}>
+      <Container component="main" maxWidth="xs">
+        <CssBaseline />
+        <Box
+          sx={{
+            marginTop: 8,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+          }}
+        >
+          {/* <Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
+            <LockOutlinedIcon />
+          </Avatar> */}
+          <Typography component="h1" variant="h5">
+            Welcome back
+          </Typography>
+          <Box component="form" onSubmit={handleSubmit} sx={{ mt: 1 }}>
+            <TextField
+              margin="normal"
+              required
+              fullWidth
+              id="email"
+              label="Email Address"
+              name="email"
+              autoComplete="email"
+              autoFocus
+              error={error}
+            />
+            <TextField
+              margin="normal"
+              required
+              fullWidth
+              name="password"
+              label="Password"
+              type="password"
+              id="password"
+              autoComplete="current-password"
+              error={error}
+              helperText={error && 'Email or password is incorrect'}
+            />
+            <FormControlLabel
+              control={<Checkbox value="remember" color="primary" />}
+              label="Remember me"
+            />
+            <Button
+              type="submit"
+              fullWidth
+              variant="contained"
+              sx={{ mt: 3, mb: 2 }}
+            >
+              {loading ? (
+                <CircularProgress color="inherit" size={30} />
+              ) : (
+                'Sign In'
+              )}
+            </Button>
+            <Grid container>
+              <Grid item xs>
+                <Link href="#" variant="body2">
+                  Forgot password?
+                </Link>
+              </Grid>
+              <Grid item>
+                <Link href="#" variant="body2">
+                  {"Don't have an account? Sign Up"}
+                </Link>
+              </Grid>
+            </Grid>
+          </Box>
+        </Box>
+      </Container>
+    </ThemeProvider>
+  );
+}