✨ Auth views

Signed-off-by: Pau Costa <mico@micodev.es>

client/src/App.test.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

client/src/App.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
-
-export default App;

client/src/app/loginSlice.ts

@@ -0,0 +1,118 @@
+import { createSlice } from "@reduxjs/toolkit";
+import { Status } from "../util/types";
+import {
+  AuthLoginPostRequest,
+  AuthSignupPostRequest,
+  AuthenticationApi,
+  Configuration,
+} from "../api";
+import { AppThunk } from "./store";
+import { Axios, AxiosError } from "axios";
+
+interface loginState {
+  loggedIn: boolean;
+  status: Status;
+  error: string | null;
+  userInfo: {
+    firstName: string;
+    jwt: string;
+  };
+}
+
+const initialState: loginState = {
+  loggedIn: false,
+  status: Status.idle,
+  error: null,
+  userInfo: {
+    firstName: "",
+    jwt: "",
+  },
+};
+
+export const loginSlice = createSlice({
+  name: "login",
+  initialState,
+  reducers: {
+    login: (state, action) => {
+      state.loggedIn = true;
+      state.userInfo.jwt = action.payload;
+    },
+    logoff: (state) => {
+      state.loggedIn = false;
+      state.userInfo = initialState.userInfo;
+    },
+    setStatus: (state, action) => {
+      state.status = action.payload;
+    },
+    setError: (state, action) => {
+      state.error = action.payload;
+    },
+  },
+});
+
+const api = new AuthenticationApi(
+  new Configuration({
+    basePath: process.env.REACT_APP_BACKEND_URL,
+  })
+);
+
+export const postLogin =
+  (params: AuthLoginPostRequest): AppThunk =>
+  async (dispatch) => {
+    let response;
+    try {
+      dispatch(setStatus(Status.loading));
+      response = await api.authLoginPost(params);
+
+      dispatch(login(response.data.token));
+      await addJWT(response.data.token || "");
+
+      dispatch(setError(""));
+      dispatch(setStatus(Status.succeeded));
+    } catch (error) {
+      dispatch(setStatus(Status.failed));
+      const errorMessage = "Invalid email or password";
+      dispatch(setError(errorMessage));
+    }
+  };
+
+export const postSignup =
+  (params: AuthSignupPostRequest): AppThunk =>
+  async (dispatch) => {
+    let response;
+    console.log(params);
+    try {
+      dispatch(setStatus(Status.loading));
+      response = await api.authSignupPost(params);
+
+      dispatch(postLogin({ email: params.email, password: params.password }));
+    } catch (error) {
+      dispatch(setStatus(Status.failed));
+      const errorMessage = "Change this pls";
+      dispatch(setError(errorMessage));
+    }
+  };
+
+export const postLogout = (): AppThunk => async (dispatch) => {
+  localStorage.removeItem("jwt");
+  sessionStorage.removeItem("jwt");
+  dispatch(logoff());
+  await api.authLogoutGet();
+};
+
+const addJWT = async (token: string) => {
+  localStorage.setItem("jwt", token);
+};
+
+export const { login, logoff, setStatus, setError } = loginSlice.actions;
+
+export default loginSlice.reducer;
+
+export const selectLoggedIn = (state: { login: loginState }) =>
+  state.login.loggedIn;
+
+export const selectUserInfo = (state: { login: loginState }) =>
+  state.login.userInfo;
+
+export const selectErrorMessage = (state: { login: loginState }) =>
+  state.login.error;

client/src/app/store.ts

@@ -0,0 +1,20 @@
+import { Action, ThunkAction, configureStore } from "@reduxjs/toolkit";
+import { useDispatch } from "react-redux";
+import loginReducer from "./loginSlice";
+
+export const store = configureStore({
+  reducer: {
+    login: loginReducer,
+  },
+});
+
+export type AppDispatch = typeof store.dispatch;
+export type RootState = ReturnType<typeof store.getState>;
+export type AppThunk<ReturnType = void> = ThunkAction<
+  ReturnType,
+  RootState,
+  unknown,
+  Action<string>
+>;
+
+export const useAppDispatch: () => AppDispatch = useDispatch;

client/src/components/Copyright.tsx

@@ -0,0 +1,18 @@
+import { Link, Typography } from "@mui/material";
+
+export function Copyright(props: any) {
+  return (
+    <Typography
+      variant="body2"
+      color="text.secondary"
+      align="center"
+      {...props}
+    >
+      {"Copyright © "}
+      <Link color="inherit" href="https://tutrastero.com/">
+        Tu Trastero Tu Otro Espacio S.L
+      </Link>{" "}
+      {new Date().getFullYear()}.
+    </Typography>
+  );
+}

client/src/components/Drawer.tsx

@@ -0,0 +1,45 @@
+import {Grid, Hidden, Typography, Drawer, Box} from "@mui/material";
+
+export default function ResponsiveDrawer(){
+    const drawer = (
+        <div>
+            <Grid container direction="column">
+                <Grid item>
+                    <Typography variant="h6">Home</Typography>
+                </Grid>
+                <Grid item>
+                    <Typography variant="h6">Search</Typography>
+                </Grid>
+                <Grid item>
+                    <Typography variant="h6">Notifications</Typography>
+                </Grid>
+            </Grid>
+        </div>
+    );
+
+    return (
+        <Box sx={{ display: 'flex' }}>
+            {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
+            <Hidden smUp implementation="css">
+                <Drawer
+                    variant="temporary"
+                    anchor={'bottom'}
+                    open={true}
+                    ModalProps={{
+                        keepMounted: true, // Better open performance on mobile.
+                    }}
+                >
+                    {drawer}
+                </Drawer>
+            </Hidden>
+            <Hidden xsDown implementation="css">
+                <Drawer
+                    variant="permanent"
+                    open
+                >
+                    {drawer}
+                </Drawer>
+            </Hidden>
+        </Box>
+    );
+}

client/src/components/StyledComponents.tsx

@@ -0,0 +1,5 @@
+import { Divider, styled } from "@mui/material";
+
+export const StyledDivider = styled(Divider)({
+  marginBottom: "2%",
+});

client/src/error-page.tsx

@@ -0,0 +1,29 @@
+import {useRouteError} from "react-router-dom";
+import {Box, Typography} from "@mui/material";
+
+export default function ErrorPage() {
+    const error = useRouteError() as any;
+    console.error(error);
+
+    return (
+        <div id="error-page">
+            <Box sx={{
+                marginTop: 16,
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center"
+            }}>
+                <Typography component={"h1"} variant={"h1"}>
+                    Whoops!
+                </Typography>
+                <Typography component={"p"}>
+                    Something went wrong :(
+                </Typography>
+                <span style={{height: 16}}/>
+                <Typography component={"p"}>
+                    <i>{error.message || error.statusText}</i>
+                </Typography>
+            </Box>
+        </div>
+    )
+}

client/src/index.tsx

@@ -1,15 +1,59 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
+import "./index.css";
-import App from './App';
+import reportWebVitals from "./reportWebVitals";
-import reportWebVitals from './reportWebVitals';
+import "@fontsource/roboto";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import Root from "./routes/root";
+import ErrorPage from "./error-page";
+import { createTheme, CssBaseline, ThemeProvider } from "@mui/material";
+import Login from "./routes/Auth/login";
+import Register from "./routes/Auth/register";
+import AuthRoot from "./routes/Auth/authRoot";
+import { Provider } from "react-redux";
+import { store } from "./app/store";
 
 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+  document.getElementById("root") as HTMLElement
 );
+
+const defaultTheme = createTheme({
+  palette: {
+    mode: "dark",
+  },
+});
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <Root />,
+    errorElement: <ErrorPage />,
+  },
+  {
+    path: "/auth",
+    element: <AuthRoot />,
+    errorElement: <ErrorPage />,
+    children: [
+      {
+        path: "login",
+        element: <Login />,
+      },
+      {
+        path: "register",
+        element: <Register />,
+      },
+    ],
+  },
+]);
+
 root.render(
   <React.StrictMode>
-    <App />
+    <Provider store={store}>
+      <ThemeProvider theme={defaultTheme}>
+        <CssBaseline />
+        <RouterProvider router={router} />
+      </ThemeProvider>
+    </Provider>
   </React.StrictMode>
 );
 

client/src/routes/Auth/authRoot.tsx

@@ -0,0 +1,54 @@
+import { Copyright } from "@mui/icons-material";
+import { Grid, Paper, Typography } from "@mui/material";
+import { Outlet, useNavigate } from "react-router-dom";
+import { StyledDivider } from "../../components/StyledComponents";
+import { useSelector } from "react-redux";
+import { selectLoggedIn } from "../../app/loginSlice";
+import { useEffect } from "react";
+
+export default function AuthRoot() {
+  const loggedIn = useSelector(selectLoggedIn);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (loggedIn) {
+      return navigate("/");
+    }
+  });
+
+  return (
+    <Grid
+      container
+      alignItems="center"
+      justifyContent="center"
+      sx={{
+        minHeight: "100vh",
+        backgroundColor: (theme) =>
+          theme.palette.mode === "light"
+            ? theme.palette.grey[100]
+            : theme.palette.grey[900],
+      }}
+      direction="column"
+      spacing={5}
+    >
+      <Grid
+        item
+        container
+        alignItems="center"
+        direction="column"
+        justifyContent="center"
+      >
+        <Typography variant="h1" fontSize={"4.5rem"}>
+          DevSpace
+          <StyledDivider />
+        </Typography>
+        <Grid item>
+          <Outlet />
+        </Grid>
+      </Grid>
+      <Grid item>
+        <Copyright />
+      </Grid>
+    </Grid>
+  );
+}

client/src/routes/Auth/login.tsx

@@ -0,0 +1,117 @@
+import {
+  Box,
+  Button,
+  Checkbox,
+  Container,
+  FormControlLabel,
+  Grid,
+  Paper,
+  TextField,
+  Typography,
+  styled,
+} from "@mui/material";
+import { StyledDivider } from "../../components/StyledComponents";
+import { Link } from "@mui/material";
+import { useAppDispatch } from "../../app/store";
+import { postLogin, selectErrorMessage } from "../../app/loginSlice";
+import { AuthLoginPostRequest } from "../../api";
+import { useSelector } from "react-redux";
+
+export default function Login() {
+  const dispatch = useAppDispatch();
+  const errorMessage = useSelector(selectErrorMessage);
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const data = new FormData(event.currentTarget);
+    const paramsObject = {
+      email: data.get("email"),
+      password: data.get("password"),
+      longExpiration: data.get("longExpiration"),
+    };
+
+    dispatch(postLogin(paramsObject as unknown as AuthLoginPostRequest));
+  };
+  return (
+    <>
+      <Container maxWidth="sm" sx={{ marginTop: "15%" }}>
+        <Grid
+          container
+          direction="column"
+          justifyContent={"center"}
+          alignItems={"center"}
+          spacing={2}
+          sx={{ padding: "10%" }}
+        >
+          <Grid item xs={12}>
+            <Grid
+              item
+              component="form"
+              onSubmit={handleSubmit}
+              container
+              direction="column"
+              spacing={3}
+            >
+              <Grid item>
+                <StyledTypography>Email:</StyledTypography>
+                <TextField
+                  fullWidth
+                  required
+                  label="Email"
+                  name="email"
+                  variant="outlined"
+                  autoComplete="email"
+                  autoFocus
+                />
+              </Grid>
+              <Grid item>
+                <StyledTypography>Password:</StyledTypography>
+                <TextField
+                  fullWidth
+                  required
+                  label="Password"
+                  name="password"
+                  type="password"
+                  variant="outlined"
+                  error={!!errorMessage}
+                  helperText={errorMessage}
+                />
+              </Grid>
+              <Grid item>
+                <FormControlLabel
+                  id="longExpiration"
+                  control={<Checkbox value="remember" color="primary" />}
+                  label="Remember me"
+                />
+              </Grid>
+              <Grid item>
+                <Button type="submit" variant="contained" fullWidth={true}>
+                  Login
+                </Button>
+              </Grid>
+            </Grid>
+          </Grid>
+          <Grid item>
+            <StyledDivider />
+            <Typography variant="h5" fontSize={"1.5rem"}>
+              Don't have an account yet?
+            </Typography>
+          </Grid>
+          <StyledGrid item>
+            <Link href="../auth/register" variant="body2">
+              Register now!
+            </Link>
+          </StyledGrid>
+        </Grid>
+      </Container>
+    </>
+  );
+}
+
+const StyledGrid = styled(Grid)({
+  width: "50%",
+});
+
+const StyledTypography = styled(Typography)({
+  marginBottom: "5%",
+});

client/src/routes/Auth/register.tsx

@@ -0,0 +1,123 @@
+import {
+  Button,
+  Container,
+  Grid,
+  Link,
+  Paper,
+  TextField,
+  Typography,
+  styled,
+} from "@mui/material";
+import { useAppDispatch } from "../../app/store";
+import { postSignup } from "../../app/loginSlice";
+import { AuthSignupPostRequest } from "../../api";
+
+export default function Register() {
+  const dispatch = useAppDispatch();
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const data = new FormData(event.currentTarget);
+    const paramsObject = {
+      email: data.get("email"),
+      password: data.get("password"),
+      passwordValidation: data.get("passwordConfirmation"),
+      firstName: data.get("firstName"),
+      lastName: data.get("lastName"),
+      longExpiration: true,
+    };
+    dispatch(postSignup(paramsObject as unknown as AuthSignupPostRequest));
+  };
+
+  return (
+    <>
+      <Container maxWidth="sm" sx={{ marginTop: "5%" }}>
+        <Grid
+          component="form"
+          onSubmit={handleSubmit}
+          container
+          direction="column"
+          justifyContent={"center"}
+          alignItems={"center"}
+          spacing={2}
+          sx={{ paddingBottom: "10%" }}
+        >
+          <Grid item container xs={12} spacing={2} sx={{ width: "70%" }}>
+            <Grid item xs={12}>
+              <StyledTypography>First Name:</StyledTypography>
+              <TextField
+                fullWidth
+                label="First Name"
+                name="firstName"
+                required
+                variant="outlined"
+              />
+            </Grid>
+            <Grid item xs={12}>
+              <StyledTypography>Last Name:</StyledTypography>
+              <TextField
+                fullWidth
+                name="lastName"
+                required
+                label="Last Name"
+                variant="outlined"
+              />
+            </Grid>
+            <Grid item xs={12}>
+              <StyledTypography>Email:</StyledTypography>
+              <TextField
+                fullWidth
+                label="Email"
+                name="email"
+                required
+                variant="outlined"
+              />
+            </Grid>
+            <Grid item xs={12}>
+              <StyledTypography>Password:</StyledTypography>
+              <TextField
+                type="password"
+                name="password"
+                required
+                label="Password"
+                fullWidth
+              />
+            </Grid>
+            <Grid item xs={12}>
+              <StyledTypography>Password Confirmation:</StyledTypography>
+              <TextField
+                type="password"
+                name="passwordConfirmation"
+                label="Password Confirmation"
+                fullWidth
+                required
+              />
+            </Grid>
+          </Grid>
+          <StyledGrid item xs={12}>
+            <Button type="submit" variant="contained" fullWidth={true}>
+              Register
+            </Button>
+          </StyledGrid>
+          <Grid item>
+            <Typography variant="h5" fontSize={"1.5rem"}>
+              Already have an account?
+            </Typography>
+          </Grid>
+          <StyledGrid item>
+            <Link href="../auth/login" variant="body2">
+              Login
+            </Link>
+          </StyledGrid>
+        </Grid>
+      </Container>
+    </>
+  );
+}
+
+const StyledGrid = styled(Grid)({
+  width: "50%",
+});
+const StyledTypography = styled(Typography)({
+  marginBottom: "5%",
+});

client/src/routes/root.tsx

@@ -0,0 +1,32 @@
+import ResponsiveDrawer from "../components/Drawer";
+import { Outlet, useActionData, useNavigate } from "react-router-dom";
+import { Button, Grid } from "@mui/material";
+import { postLogout, selectLoggedIn, selectUserInfo } from "../app/loginSlice";
+import { useAppDispatch } from "../app/store";
+import { useSelector } from "react-redux";
+import { useEffect } from "react";
+
+export default function Root() {
+  const navigate = useNavigate();
+  const dispatch = useAppDispatch();
+  const loggedIn = useSelector(selectLoggedIn);
+  const userInfo = useSelector(selectUserInfo);
+
+  useEffect(() => {
+    if (!loggedIn) {
+      navigate("/auth/login");
+    }
+  }, [loggedIn, navigate]);
+
+  const handleClick = () => {
+    dispatch(postLogout());
+  };
+
+  return (
+    <>
+      <Button color="primary" variant="contained" onClick={handleClick}>
+        Log Off
+      </Button>
+    </>
+  );
+}

client/src/util/types.ts

@@ -0,0 +1,6 @@
+export enum Status {
+  idle = "idle",
+  loading = "loading",
+  succeeded = "succeeded",
+  failed = "failed",
+}

client/tsconfig.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
+    "lib": ["dom", "dom.iterable", "esnext"],
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -20,7 +16,5 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": [
+  "include": ["src"]
-    "src"
-  ]
 }

docker-compose.yml

@@ -6,6 +6,7 @@ services:
     build: ./client
     environment:
       NODE_ENV: development
+      REACT_APP_BACKEND_URL: http://localhost:3000
     ports:
       - "8080:3000"
   server:

server/src/index.ts

@@ -7,34 +7,36 @@ import {UserRoutes} from "./routes/userRoutes";
 import {AuthController} from "./controller/authController";
 import {PostRoutes} from "./routes/postRoutes";
 import {swaggerRouter} from "./routes/swaggerRoutes";
+import * as cors from "cors";
 
-AppDataSource.initialize().then(async () => {
+AppDataSource.initialize()
-
+  .then(async () => {
     // create express app
-    const app = express()
+    const app = express();
-    app.use(bodyParser.json())
+    app.use(bodyParser.json());
+    app.use(cors());
 
     // register express routes from defined application routes
     // Auth Routes
-    app.use('/auth', AuthRoutes)
+    app.use("/auth", AuthRoutes);
 
     // Swagger Routes
-    app.use('/docs', swaggerRouter);
+    app.use("/docs", swaggerRouter);
 
     // All routes after this one require authentication
     const authController = new AuthController();
-    app.use(authController.protect)
+    app.use(authController.protect);
 
-    app.use('/users', UserRoutes)
+    app.use("/users", UserRoutes);
-    app.use('/posts', PostRoutes)
+    app.use("/posts", PostRoutes);
 
     // setup express app here
-    app.use(errorHandler)
+    app.use(errorHandler);
     // start express server
-    app.listen(3000)
+    app.listen(3000);
 
-
+    console.log(
-
+      "Express server has started on port 3000. Open http://localhost:3000/users to see results"
-    console.log("Express server has started on port 3000. Open http://localhost:3000/users to see results")
+    );
-
+  })
-}).catch(error => console.log(error))
+  .catch((error) => console.log(error));