⚡ Step 5: Creating Login and Register Pages with Material-UI

After setting up the Navigation Bar using Material-UI (MUI), the next step is to create the Login and Register pages for Gather2Gether. Using MUI, we can quickly build clean, responsive forms without writing all the CSS from scratch.

Setting Up Routing

Before creating the pages, make sure React Router is installed:

npm install react-router-dom

Then, in App.jsx, define routes for Login and Register:

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Navbar from "./components/Navbar";
import Login from "./components/auth/Login";
import Register from "./components/auth/Register";

function App() {
  return (
    <Router>
      <Navbar />
      <main style={{ paddingTop: "64px", textAlign: "center" }}>
        <Routes>
          <Route path="/" element={<Login />} />
          <Route path="/register" element={<Register />} />
        </Routes>
      </main>
    </Router>
  );
}

export default App;

• The Login page will be displayed on the main page (/).
• The Register page will be accessible at /register.

Creating the Login Page

src/components/auth/Login.jsx:

import React, { useState } from "react";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";

export default function Login() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log({ email, password }); // Placeholder for backend API call
  };

  return (
    <Box
      sx={{
        mt: 8,
        mx: "auto",
        maxWidth: 400,
        p: 3,
        bgcolor: "white",
        borderRadius: 2,
        boxShadow: 3,
        display: "flex",
        flexDirection: "column",
      }}
    >
      <Typography variant="h5" sx={{ mb: 2, textAlign: "center" }}>
        Login
      </Typography>
      <form onSubmit={handleSubmit}>
        <TextField
          label="Email"
          type="email"
          fullWidth
          margin="normal"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <TextField
          label="Password"
          type="password"
          fullWidth
          margin="normal"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
        <Button type="submit" variant="contained" color="success" fullWidth sx={{ mt: 2 }}>
          Login
        </Button>
      </form>
    </Box>
  );
}

Creating the Register Page

src/components/auth/Register.jsx:

import React, { useState } from "react";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";

export default function Register() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log({ name, email, password, confirmPassword }); // Placeholder for backend API call
  };

  return (
    <Box
      sx={{
        mt: 8,
        mx: "auto",
        maxWidth: 400,
        p: 3,
        bgcolor: "white",
        borderRadius: 2,
        boxShadow: 3,
        display: "flex",
        flexDirection: "column",
      }}
    >
      <Typography variant="h5" sx={{ mb: 2, textAlign: "center" }}>
        Register
      </Typography>
      <form onSubmit={handleSubmit}>
        <TextField
          label="Name"
          type="text"
          fullWidth
          margin="normal"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
        <TextField
          label="Email"
          type="email"
          fullWidth
          margin="normal"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <TextField
          label="Password"
          type="password"
          fullWidth
          margin="normal"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
        <TextField
          label="Confirm Password"
          type="password"
          fullWidth
          margin="normal"
          value={confirmPassword}
          onChange={(e) => setConfirmPassword(e.target.value)}
        />
        <Button type="submit" variant="contained" color="success" fullWidth sx={{ mt: 2 }}>
          Register
        </Button>
      </form>
    </Box>
  );
}

✅ Features of Login & Register Pages

• Fully responsive and centered forms using MUI Box and TextField.
• Shadowed, card-like layout to make the forms visually appealing.
• Buttons and form inputs styled consistently with the app’s design.
• Ready for backend integration with Laravel for authentication.

With these pages in place, users can now navigate via the Navigation Bar to either log in or register. In the next step, we will connect these forms to our Laravel backend and implement real authentication.