LOCAL STORE
//App.js
import React from "react";
import { Routes, Route } from "react-router-dom";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import LoginPage from "./Pages/LoginPage";
import UsersList from "./Pages/UsersList";
import HomePage from "./Pages/HomePage";
import Footer from "./Components/Footer";
function App() {
return (
<>
<ToastContainer
position="top-center"
autoClose={2000}
hideProgressBar={false}
newestOnTop={false}
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
/>
<Routes>
<Route path="/" element={<LoginPage />} />
<Route path="/profile" element={<HomePage />} />
<Route path="/users" element={<UsersList />} />
</Routes>
<Footer />
</>
);
}
export default App;
//index.js
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App";
import './App.css'
import reportWebVitals from "./reportWebVitals";
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById("root")
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
//Header.js
import React from "react";
import { FaHouseUser } from "react-icons/fa";
import { Link } from "react-router-dom";
const Header = () => {
return (
<div>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Carousel</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-brand">
{" "}
<FaHouseUser /> User Managment System{" "}
</span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<Link className="nav-link " to="/profile">
Add New
</Link>
</li>
<li class="nav-item">
<Link className="nav-link " to="/users">
Users
</Link>
</li>
<li class="nav-item">
<Link className="nav-link " to="/">
Logout{" "}
</Link>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</div>
);
};
export default Header;
//Footer.js
import React from "react";
const Footer = () => {
return (
<footer id="footer" className="footer-1 mar1 bg2">
<div className="main-footer widgets-dark typo-light">
<div className="container">
<div className="row">
<div className="col-xs-12 col-sm-6 col-md-3">
<div className="widget subscribe no-box">
<h5 className="widget-title">COMPANY NAME<span></span></h5>
<p>About the company, little discription will goes here.. </p>
</div>
</div>
<div className="col-xs-12 col-sm-6 col-md-3">
<div className="widget no-box">
<h5 className="widget-title">Quick Links<span></span></h5>
<ul className="thumbnail-widget">
<li>
<div className="thumb-content"><a href="#.">Get Started</a></div>
</li>
<li>
<div className="thumb-content"><a href="#.">Top Leaders</a></div>
</li>
<li>
<div className="thumb-content"><a href="#.">Success Stories</a></div>
</li>
<li>
<div className="thumb-content"><a href="#.">Event/Tickets</a></div>
</li>
<li>
<div className="thumb-content"><a href="#.">News</a></div>
</li>
<li>
<div className="thumb-content"><a href="#.">Lifestyle</a></div>
</li>
<li>
<div className="thumb-content"><a href="#.">About</a></div>
</li>
</ul>
</div>
</div>
<div className="col-xs-12 col-sm-6 col-md-3">
<div className="widget no-box">
<h5 className="widget-title">Get Started<span></span></h5>
<p>Get access to your full Training and Marketing Suite.</p>
<a className="btn" href="https://bit.ly/3m9avif" target="_blank">Subscribe Now</a>
</div>
</div>
<div className="col-xs-12 col-sm-6 col-md-3">
<div className="widget no-box">
<h5 className="widget-title">Contact Us<span></span></h5>
<p><a href="mailto:info@domain.com" title="glorythemes">info@domain.com</a></p>
</div>
</div>
</div>
</div>
</div>
<div className="footer-copyright">
<div className="container">
<div className="row">
<div className="col-md-12 text-center">
<p>Copyright Company Name © 2022. All rights reserved.</p>
</div>
</div>
</div>
</div>
</footer>
);
};
export default Footer;
//Home.js
import React, { useEffect, useState } from "react";
// import { FaAlignCenter } from "react-icons/fa";
import { toast } from "react-toastify";
import Header from "../Components/Header";
const HomePage = () => {
const profilePIcDefault =
"https://static.vecteezy.com/system/resources/previews/002/318/271/non_2x/user-profile-icon-free-vector.jpg";
const [name, setname] = useState("");
const [email, setemail] = useState("");
const [password, setpassword] = useState("");
const [gender, setgender] = useState("");
const [img, setimg] = useState(profilePIcDefault);
const [checked, setchecked] = useState(false);
//covert img
const getBase64 = (file) => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onabort = (error) => reject(error);
reader.readAsDataURL(file);
});
};
//handle img
const handleImg = (e) => {
const file = e.target.files[0];
getBase64(file).then((base64) => {
localStorage["img"] = base64;
console.debug("File Store", base64);
});
};
//form submit handler
const handleSubmit = (e) => {
e.preventDefault();
if (name === "") {
toast.error("Name Is Required");
} else if (email === "") {
toast.error("Email Is Required");
} else if (password === "") {
toast.error("Password is Required");
} else {
localStorage.setItem("name", name);
localStorage.setItem("email", email);
localStorage.setItem("password", password);
// localStorage.setItem("img", img);
localStorage.setItem("gender", gender);
localStorage.setItem("terms", checked);
toast.success("User Saved!");
}
};
return (
<>
<Header />
<div className="container content mt-4">
<h5> 📝 Add New User</h5>
<div className="row border p-4">
<div className="col-md-6">
<div className="mb-3">
<label htmlFor="exampleInputName" className="form-label">
User Name
</label>
<input
type="text"
value={name}
onChange={(e) => setname(e.target.value)}
className="form-control"
id="exampleInputName"
aria-describedby="emailHelp"
/>
</div>
<div className="mb-3">
<label htmlFor="exampleInputEmail1" className="form-label">
Email Address
</label>
<input
type="email"
value={email}
onChange={(e) => setemail(e.target.value)}
className="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp"
/>
</div>
<div className="mb-3">
<label htmlFor="exampleInputPassword1" className="form-label">
Password
</label>
<input
type="password"
value={password}
onChange={(e) => setpassword(e.target.value)}
className="form-control"
id="exampleInputPassword1"
/>
</div>
{/* radios button inpput ================== */}
<div className="d-flex flex-row">
Gender :
<div className="form-check ms-2">
<input
className="form-check-input"
type="radio"
name="Gender"
value="Male"
defaultChecked={gender === "Male"}
onClick={(e) => setgender(e.target.value)}
id="flexRadioDefault1"
/>
<label className="form-check-label" htmlFor="flexRadioDefault1">
Male
</label>
</div>
<div className="form-check ms-2">
<input
className="form-check-input"
type="radio"
name="Gender"
value="Female"
defaultChecked={gender === "Female"}
onClick={(e) => setgender(e.target.value)}
id="flexRadioDefault2"
/>
<label className="form-check-label" htmlFor="flexRadioDefault2">
Female
</label>
</div>
</div>
<div className="form-check mt-3">
<input
className="form-check-input"
type="checkbox"
id="flexCheckDefault"
checked={checked}
onChange={(e) => setchecked(e.target.value)}
/>
<label className="form-check-label" htmlFor="flexCheckDefault">
I Acept Terms And Conditions
</label>
</div>
<button
type="submit"
className="form__submit-btn"
onClick={handleSubmit}
>
Submit
</button>
</div>
{/* col-md-6 ends */}
<div className="col-md-4 ">
<div className="profile_section">
<p>Select Profile Picture :</p>
<img
src={profilePIcDefault}
alt="profile_pic"
name="file"
className="img-thumbnail"
height={250}
width={250}
/>
</div>
<div className="mb-3">
<label htmlFor="formFile" className="form-label">
Default file input example
</label>
<input
className="form-control"
type="file"
onChange={handleImg}
name="file"
id="formFile"
/>
</div>
</div>
</div>
</div>
</>
);
};
export default HomePage;
//Login.js
import React, { useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import { toast } from "react-toastify";
const LoginPage = () => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const navigate = useNavigate();
//getting email password
const userName = localStorage.getItem("email")
? localStorage.getItem("email")
: "admin@admin.com";
const userPassword = localStorage.getItem("password")
? localStorage.getItem("password")
: "admin";
//submit function
const handleSubmit = (e) => {
e.preventDefault();
if (email === userName && password === userPassword) {
toast.success("Login Success");
navigate("/profile");
} else {
toast.error("Invalid Email OR password");
}
};
return (
<>
<div className="d-flex felx-column align-items-center justify-content-center bg2">
<form>
<h4 className="">User Management System </h4>
<hr />
<div className="mb-3">
<label htmlFor="exampleInputEmail1" className="form-label">
Email address
</label>
<input
type="email"
className="form-control"
value={email}
onChange={(e) => setEmail(e.target.value)}
id="exampleInputEmail1"
aria-describedby="emailHelp"
/>
</div>
<div className="mb-3">
<label htmlFor="exampleInputPassword1" className="form-label">
Password
</label>
<input
type="password"
className="form-control"
value={password}
onChange={(e) => setPassword(e.target.value)}
id="exampleInputPassword1"
/>
</div>
<div className="form__signupLink mb-3">
<p>
Don't Have An Account? <Link to="/">Signup !</Link>
</p>
</div>
<button type="submit" className="form__button" onClick={handleSubmit}>
Login
</button>
</form>
</div>
</>
);
};
export default LoginPage;
//Userlist.js
import React from "react";
import Header from "../Components/Header";
const UersList = () => {
const profilePIcDefault =
"https://static.vecteezy.com/system/resources/previews/002/318/271/non_2x/user-profile-icon-free-vector.jpg";
return (
<div>
<Header />
<div className="container content">
<div className="border mt-4 p-4">
<h3 className="text-center bg-info p-2 mb-3">
Welcome To User Management System
</h3>
<div className="row">
<div className="col-md-4">
<div className="d-flex flex-column align-items-center ">
<img
src={
localStorage.getItem("img")
? localStorage.getItem("img")
: profilePIcDefault
}
alt="profile_pic"
className="img-thumbnail"
height={200}
width={200}
/>
</div>
</div>
<div className="col-md-6 d-flex align-items-center">
<div className="ms-4">
<h4>
Name :{" "}
{localStorage.getItem("name")
? localStorage.getItem("name")
: "NA"}
</h4>
<h4>
Email :{" "}
{localStorage.getItem("email")
? localStorage.getItem("email")
: "NA"}
</h4>
<h4>
Gender :{" "}
{localStorage.getItem("gender")
? localStorage.getItem("gender")
: "NA"}
</h4>
<p>
Accepted Terms And Conditions :{" "}
{localStorage.getItem("terms") ? "YES" : "No"}
</p>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default UersList;
//App.css
footer .main-footer{ padding: 40px 0; background: #252525; margin-top: 100px;}
footer ul{ padding-left: 0; list-style: none;}
/* Copy Right Footer */
.footer-copyright { background: #222; padding: 5px 0;}
.footer-copyright .logo { display: inherit;}
.footer-copyright nav { float: right; margin-top: 5px;}
.footer-copyright nav ul { list-style: none; margin: 0; padding: 0;}
.footer-copyright nav ul li { border-left: 1px solid #505050; display: inline-block; line-height: 12px; margin: 0; padding: 0 8px;}
.footer-copyright nav ul li a{ color: #969696;}
.footer-copyright nav ul li:first-child { border: medium none; padding-left: 0;}
.footer-copyright p { color: #969696; margin: 2px 0 0;}
/* Footer Top */
.footer-top{ background: #252525; padding-bottom: 30px; margin-bottom: 30px; border-bottom: 3px solid #222;}
/* Footer transparent */
footer.transparent .footer-top, footer.transparent .main-footer{ background: transparent;}
footer.transparent .footer-copyright{ background: none repeat scroll 0 0 rgba(0, 0, 0, 0.3) ;}
/* Footer light */
footer.light .footer-top{ background: #f9f9f9;}
footer.light .main-footer{ background: #f9f9f9;}
footer.light .footer-copyright{ background: none repeat scroll 0 0 rgba(255, 255, 255, 0.3) ;}
/* Footer 4 */
.footer- .logo { display: inline-block;}
.thumb-content { text-align: left; }
a{text-decoration: none}
/*====================
Widgets
====================== */
.widget{ padding: 20px; margin-bottom: 40px;}
.widget.widget-last{ margin-bottom: 0px;}
.widget.no-box{ padding: 0; background-color: transparent; margin-bottom: 40px;
box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none;}
.widget.subscribe p{ margin-bottom: 18px;}
.widget li a{ color: #ff8d1e;}
.widget li a:hover{ color: #4b92dc;}
.widget-title {margin-bottom: 20px;}
.widget-title span {background: #839FAD none repeat scroll 0 0;display: block; height: 1px;margin-top: 25px;position: relative;width: 20%;}
.widget-title span::after {background: inherit;content: "";height: inherit; position: absolute;top: -4px;width: 50%;}
.widget-title.text-center span,.widget-title.text-center span::after {margin-left: auto;margin-right:auto;left: 0;right: 0;}
.widget .badge{ float: right; background: #7f7f7f;}
.typo-light h1,
.typo-light h2,
.typo-light h3,
.typo-light h4,
.typo-light h5,
.typo-light h6,
.typo-light p,
.typo-light div,
.typo-light span,
.typo-light small{ color: #fff;}
ul.social-footer2 { margin: 0;padding: 0; width: auto;}
ul.social-footer2 li {display: inline-block;padding: 0;}
ul.social-footer2 li a:hover {background-color:#ff8d1e;}
ul.social-footer2 li a {display: block; height:30px;width: 30px;text-align: center;}
.btn{background-color: #ff8d1e; color:#fff;}
.btn:hover, .btn:focus, .btn.active {background: #4b92dc;color: #fff;
-webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
-webkit-transition: all 250ms ease-in-out 0s;
-moz-transition: all 250ms ease-in-out 0s;
-ms-transition: all 250ms ease-in-out 0s;
-o-transition: all 250ms ease-in-out 0s;
transition: all 250ms ease-in-out 0s;
}
.mar{margin-bottom: 70px;}
.mar1{padding-top: 10px;}
a{ text-decoration: none;}
.thumb-content { text-align: left; }
.bg2{background-color: rgb(209, 207, 207);}
Comments
Post a Comment