sign up and login ui done

Varsani2520 · Jul 1, 2024 · 50c24d1 · 50c24d1
1 parent dbcae08
commit 50c24d1
Show file tree

Hide file tree

Showing 2 changed files with 103 additions and 83 deletions.
diff --git a/app/components/LoginPage.jsx b/app/components/LoginPage.jsx
@@ -1,12 +1,11 @@
 "use client";
 import React, { useState } from "react";
-import TextField from "@mui/material/TextField";
 import Button from "@mui/material/Button";
 import { loginservice } from "../service/loginService";
 import { toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import { useRouter } from "next/navigation";
-import { Box, Container, Grid, Typography, Paper, useTheme } from "@mui/material";
+import { Box, Container, Grid, Typography, useTheme } from "@mui/material";
 import { useDispatch } from "react-redux";
 import { loginUserFailure, loginUserSuccess } from "../action/action";
 import Link from "next/link";
@@ -18,7 +17,7 @@ import Cookies from "js-cookie";
 const LoginPage = () => {
   const dispatch = useDispatch();
   const router = useRouter();
-  const theme = useTheme()
+  const theme = useTheme();
   const [login, setLogin] = useState({
     username: "",
     password: "",
@@ -49,12 +48,19 @@ const LoginPage = () => {
 
   return (
     <Container>
-      <div style={{ marginTop: "100px", marginBottom: "180px", background: theme.palette.primary.main, color: theme.palette.background.text }}>
+      <div
+        style={{
+          marginTop: "100px",
+          marginBottom: "180px",
+          color: theme.palette.background.text,
+          background: theme.palette.primary.main,
+        }}
+      >
         <Toast />
-        <Grid container spacing={2} sx={{ justifyContent: 'center' }}>
+        <Grid container spacing={2} sx={{ justifyContent: "center" }}>
           <Grid item xs={12} md={6}>
             <Box sx={{ display: { xs: "none", md: "block" } }}>
-              <Lottie animationData={loginAnimation} style={{ height: '500px' }} />
+              <Lottie animationData={loginAnimation} style={{ height: "500px" }} />
             </Box>
           </Grid>
           <Grid
@@ -67,53 +73,60 @@ const LoginPage = () => {
               justifyContent: "center",
             }}
           >
-            {/* <Paper
-            sx={{
-              padding: 4,
-              maxWidth: 400,
-              width: "100%",
-              backgroundColor: "white",
-              borderRadius: 8,
-            }}
-          > */}
             <form onSubmit={handleSubmit}>
-              <Typography variant="h5" align="center" gutterBottom sx={{ color: theme.palette.background.text }}>
+              <Typography
+                variant="h5"
+                align="center"
+                gutterBottom
+                sx={{ color: theme.palette.background.text }}
+              >
                 Login
               </Typography>
-              <TextField
-                label="Username"
-                fullWidth
-                variant="outlined"
+              <input
+                type="text"
+                placeholder="Username"
+                style={{
+                  width: "80%",
+                  padding: "10px",
+                  marginBottom: "15px",
+                  border: "1px solid #ccc",
+                  borderRadius: "4px",
+                  outline: "none",
+                }}
                 onChange={(e) =>
                   setLogin({
                     ...login,
                     username: e.target.value,
                   })
                 }
                 value={login.username}
-                margin="normal"
               />
-              <TextField
-                fullWidth
-                label="Password"
+              <input
                 type="password"
-                variant="outlined"
+                placeholder="Password"
+                style={{
+                  width: "80%",
+                  padding: "10px",
+                  marginBottom: "15px",
+                  border: "1px solid #ccc",
+                  borderRadius: "4px",
+                  outline: "none",
+                }}
                 onChange={(e) =>
                   setLogin({
                     ...login,
                     password: e.target.value,
                   })
                 }
                 value={login.password}
-                margin="normal"
               />
               <Button
                 variant="contained"
                 type="submit"
                 fullWidth
                 sx={{
                   mt: 2,
-
+                  width:"85%",
                   background: theme.palette.background.button,
                   "&:hover": { backgroundColor: "#0069d9" },
                   color: theme.palette.background.text,
@@ -125,7 +138,6 @@ const LoginPage = () => {
                 Don't have an account? <Link href="/pages/signup">Sign up</Link>
               </Typography>
             </form>
-            {/* </Paper> */}
           </Grid>
         </Grid>
       </div>

diff --git a/app/components/SignUp.jsx b/app/components/SignUp.jsx
@@ -1,16 +1,15 @@
-'use client'
+"use client"
 import React, { useState } from "react";
 import Button from "@mui/material/Button";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
-import { Container, Grid, TextField, useTheme } from "@mui/material";
+import { Container, Grid, useTheme } from "@mui/material";
 import { signupservice } from "../service/signupservice";
+import { toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import Link from "next/link";
 import Lottie from "lottie-react";
 import loginAnimation from "../lottie-animation/loginAnimation.json";
-import { toast } from "react-toastify";
-import Toast from "./Toast";
 
 const SignUp = () => {
   const theme = useTheme();
@@ -25,7 +24,7 @@ const SignUp = () => {
     e.preventDefault();
 
     // Validate if all fields are filled
-    if (!signup.username || !signup.password || !signup.name || !signup.address ) {
+    if (!signup.username || !signup.password || !signup.name || !signup.address) {
       toast.error("Please fill in all fields");
       return;
     }
@@ -48,10 +47,11 @@ const SignUp = () => {
         signup.username,
         signup.password,
         signup.name,
-        signup.address,
+        signup.address
       );
       console.log(response);
       toast.success("Account Created Successfully");
+      // Assuming `router` is properly set up with useRouter() from Next.js
       router.push("/pages/login");
     } catch (error) {
       toast.error("Failed to Create Account");
@@ -61,12 +61,18 @@ const SignUp = () => {
 
   return (
     <Container>
-      <div style={{ marginTop: "100px", marginBottom: "180px", color: theme.palette.background.text, background: theme.palette.primary.main }}>
-        <Toast />
+      <div
+        style={{
+          marginTop: "100px",
+          marginBottom: "180px",
+          color: theme.palette.background.text,
+          background: theme.palette.primary.main,
+        }}
+      >
         <Grid container spacing={2}>
           <Grid item xs={12} md={6}>
             <Box sx={{ display: { xs: "none", md: "block" } }}>
-              <Lottie animationData={loginAnimation} style={{ height: '500px' }} />
+              <Lottie animationData={loginAnimation} style={{ height: "500px" }} />
             </Box>
           </Grid>
           <Grid
@@ -84,67 +90,69 @@ const SignUp = () => {
               <Typography component="h1" variant="h4" mb={4}>
                 Create Account
               </Typography>
-              <TextField
-                label="Username"
-                variant="outlined"
-                fullWidth
-                onChange={(e) =>
-                  setSignup({
-                    ...signup,
-                    username: e.target.value,
-                  })
-                }
+              <input
+                type="text"
+                placeholder="Username"
                 value={signup.username}
-                margin="normal"
+                onChange={(e) => setSignup({ ...signup, username: e.target.value })}
+                style={{
+                  width: "80%",
+                  padding: "10px",
+                  marginBottom: "15px",
+                  border: "1px solid #ccc",
+                  borderRadius: "4px",
+                  outline: "none",
+                }}
               />
-              <TextField
-                label="Password"
-                fullWidth
+              <input
                 type="password"
-                variant="outlined"
-                onChange={(e) =>
-                  setSignup({
-                    ...signup,
-                    password: e.target.value,
-                  })
-                }
+                placeholder="Password"
                 value={signup.password}
-                margin="normal"
+                onChange={(e) => setSignup({ ...signup, password: e.target.value })}
+                style={{
+                  width: "80%",
+                  padding: "10px",
+                  marginBottom: "15px",
+                  border: "1px solid #ccc",
+                  borderRadius: "4px",
+                  outline: "none",
+                }}
               />
-              <TextField
-                label="Name"
-                fullWidth
-                variant="outlined"
-                onChange={(e) =>
-                  setSignup({
-                    ...signup,
-                    name: e.target.value,
-                  })
-                }
+              <input
+                type="text"
+                placeholder="Name"
                 value={signup.name}
-                margin="normal"
+                onChange={(e) => setSignup({ ...signup, name: e.target.value })}
+                style={{
+                  width: "80%",
+                  padding: "10px",
+                  marginBottom: "15px",
+                  border: "1px solid #ccc",
+                  borderRadius: "4px",
+                  outline: "none",
+                }}
               />
-              <TextField
-                fullWidth
-                label="Address"
-                variant="outlined"
-                onChange={(e) =>
-                  setSignup({
-                    ...signup,
-                    address: e.target.value,
-                  })
-                }
+              <input
+                type="text"
+                placeholder="Address"
                 value={signup.address}
-                margin="normal"
+                onChange={(e) => setSignup({ ...signup, address: e.target.value })}
+                style={{
+                  width: "80%",
+                  padding: "10px",
+                  marginBottom: "15px",
+                  border: "1px solid #ccc",
+                  borderRadius: "4px",
+                  outline: "none",
+                }}
               />
-
               <Button
-                fullWidth
                 variant="contained"
                 color="secondary"
                 type="submit"
                 sx={{
                   mt: 2,
+                  width: "85%",
                   background: theme.palette.background.button,
                   "&:hover": { backgroundColor: "#0069d9" },
                   color: theme.palette.background.text,