ilyaszm · YogeshShankar2k · Jan 25, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,10 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^1.2.3",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "react-router-dom": "^5.0.1",
-    "react-scripts": "3.0.1"
+    "react-phone-number-input": "^3.2.16",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "3.0.1",
+    "react-select": "^5.7.0",
+    "react-toastify": "^9.1.1"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/index.html b/public/index.html
@@ -1,15 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+
+<head>
     <meta charset="utf-8" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fascinate|Roboto:300,400,500,700&display=swap" />
-    <title>Login/Register Page</title>
-  </head>
-  <body>
+    <title>RentX</title>
+</head>
+
+<body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-  </body>
-</html>
+</body>
+
+</html>
diff --git a/src/App.css b/src/App.css
@@ -1,4 +1,5 @@
 /***    General     ***/
+
 * {
     box-sizing: border-box;
     margin: 0;
@@ -28,7 +29,9 @@ body {
     text-transform: capitalize
 }
 
+
 /***    Landing Page     ***/
+
 .main-title,
 .main-para {
     color: #f1f1f1
@@ -62,21 +65,23 @@ body {
 }
 
 #reg_btn:hover span {
-  padding-right: 25px;
+    padding-right: 25px;
 }
 
 #reg_btn:hover span:after {
-  opacity: 1;
-  right: 0;
+    opacity: 1;
+    right: 0;
 }
 
+
 /***    Login Page     ***/
+
 h2 {
     font-weight: 300
 }
 
 form {
-    display: inline-block;
+    display: contents;
     background: #f3f3f3;
     border: 1px solid #ddd;
     border-radius: 2px;
@@ -92,7 +97,8 @@ form label {
 }
 
 .right-label {
-    float: right;
+    margin-top: 10px;
+    float: inherit;
     cursor: pointer
 }
 
@@ -101,17 +107,22 @@ input {
     padding: .3rem;
     border-radius: 5px;
     outline: none;
-    border: none
+    border: none;
+    background: #323441;
 }
 
 #sub_btn {
-    display: block;
-    width: 100%;
+    /* margin-top: 40px; */
+    display: flex;
+    width: 110px;
     padding: .3rem;
     border: none;
-    background: #222;
-    color: #fff;
+    background: #323441;
+    color: #ed0b70;
     border-radius: 3px;
+    justify-content: center;
+    box-shadow: 0 8px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
+    /* margin-left: 55px; */
 }
 
 #sub_btn:hover {
@@ -124,7 +135,9 @@ footer p {
     font-size: .9rem
 }
 
+
 /***    Register Page     ***/
+
 #checkbox {
     width: 1rem
 }
@@ -137,7 +150,21 @@ form span {
     float: left
 }
 
+
 /***    Home Page     ***/
+
 .home-page-title {
     color: #222
+}
+
+.Login_Header {
+    color: #ED0B70;
+    align-items: center;
+}
+
+.title-login {
+    align-items: center;
+    font-weight: bold;
+    color: #ed0b70;
+    size: 40px;
 }
diff --git a/src/App.js b/src/App.js
@@ -6,40 +6,30 @@ import LoginPage from './components/pages/LoginPage'
 import RegisterPage from './components/pages/RegisterPage'
 import ForgetPasswordPage from './components/pages/ForgetPasswordPage'
 import HomePage from './components/pages/HomePage'
-
+import OtpPage from './components/pages/OtpPage'
+import Header from './components/Header/Header'
 import './App.css'
+import Footer from './components/Footer/Footer'
 
 export default function App() {
     return (
         <Router>
-            <div>
+            <div className="App"> 
+            {/* <Header  id="Login_Header" title={"Hello"} subtitle={"hello"} /> */}
+
+
                 <Switch>
-                    <Route exact path="/" component={ LandingPage } />
+
+                    <Route exact path="/" component={ LoginPage } />
                     <Route path="/login" component={ LoginPage } />
+                    <Route path="/otp" component={ OtpPage }/>
                     <Route path="/register" component={ RegisterPage } />
                     <Route path="/forget-password" component={ ForgetPasswordPage } />
                     <Route path="/home" component={ HomePage } />
+
                 </Switch>
-                <Footer />
+                {/* <Footer /> */}
             </div>
         </Router>
     )
-}
-
-const Footer = () => {
-    return (
-        <p className="text-center" style={ FooterStyle }>Designed & coded by <a href="https://izemspot.netlify.com" target="_blank" rel="noopener noreferrer">IZEMSPOT</a></p>
-    )
-}
-
-const FooterStyle = {
-    background: "#222",
-    fontSize: ".8rem",
-    color: "#fff",
-    position: "absolute",
-    bottom: 0,
-    padding: "1rem",
-    margin: 0,
-    width: "100%",
-    opacity: ".5"
 }
diff --git a/src/assets/images/RentDTX.png b/src/assets/images/RentDTX.png
diff --git a/src/components/Footer/Footer.css b/src/components/Footer/Footer.css
@@ -0,0 +1,10 @@
+.footer {
+    height: 85px;
+    position: absolute;
+    bottom: 0px;
+    left: 0;
+    width: 100%;
+    text-align: center;
+    background-color: #182331;
+    color: white;
+}
diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js
@@ -0,0 +1,16 @@
+import React from "react";
+import "./Footer.css";
+import { Link } from 'react-router-dom'
+
+export default function Footer(props) {
+  return (
+    <div className="footer">
+
+<p style={{ color: '#f1f1f1',paddingTop:"25px"}}>{props.text}<Link to={"/register"} style={{ color: '#ed0b70'}}>{props.page}</Link></p>
+
+      <h1>{props.note}</h1>
+    </div>
+  );
+}
+
+
diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
@@ -0,0 +1,10 @@
+.header {
+    height: 81px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    text-align: center;
+    background-color: #182331;
+    color: white;
+}
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
@@ -0,0 +1,11 @@
+import React from "react";
+import "./Header.css";
+
+export default function Header(props) {
+    return ( 
+    <div className = "header" >
+      <h1>{props.title}</h1> 
+      <p>{props.subtitle}</p>
+        </div>
+    );
+}
diff --git a/src/components/Main/Main.js b/src/components/Main/Main.js
@@ -0,0 +1,10 @@
+import React from "react";
+
+
+export default function Main(props) {
+    return ( 
+    <div>
+
+        </div>
+    );
+}
diff --git a/src/components/Toast/Toast.css b/src/components/Toast/Toast.css
@@ -0,0 +1,5 @@
+.notification-container {
+    font-size: 14px;
+    box-sizing: border-box;
+    position: fixed;
+}
diff --git a/src/components/Toast/Toast.js b/src/components/Toast/Toast.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import "./Toast.css"
+const Toast = () => {
+    return (
+        <div className="notification toast">
+        <button>
+            X
+        </button>
+        <div className="notification-image">
+            <img src="" alt="" />
+        </div>
+        <div>
+            <p className="notification-title">Title</p>
+            <p className="notification-message">Message</p>
+        </div>
+    </div>
+    )
+}
+export default Toast;
diff --git a/src/components/pages/ForgetPasswordPage.js b/src/components/pages/ForgetPasswordPage.js
@@ -4,23 +4,25 @@ import { Link } from 'react-router-dom'
 import '../../App.css'
 
 export default function ForgetPasswordPage() {
-    return (
-        <div className="text-center m-5-auto">
-            <h2>Reset your password</h2>
-            <h5>Enter your email address and we will send you a new password</h5>
-            <form action="/login">
-                <p>
-                    <label id="reset_pass_lbl">Email address</label><br/>
-                    <input type="email" name="email" required />
-                </p>
-                <p>
-                    <button id="sub_btn" type="submit">Send password reset email</button>
-                </p>
-            </form>
-            <footer>
-                <p>First time? <Link to="/register">Create an account</Link>.</p>
-                <p><Link to="/">Back to Homepage</Link>.</p>
-            </footer>
-        </div>
+    return (<div>
+
+    </div>
+        // <div className="text-center m-5-auto">
+        //     <h2>Reset your password</h2>
+        //     <h5>Enter your email address and we will send you a new password</h5>
+        //     <form action="/login">
+        //         <p>
+        //             <label id="reset_pass_lbl">Email address</label><br/>
+        //             <input type="email" name="email" required />
+        //         </p>
+        //         <p>
+        //             <button id="sub_btn" type="submit">Send password reset email</button>
+        //         </p>
+        //     </form>
+        //     <footer>
+        //         <p>First time? <Link to="/register">Create an account</Link>.</p>
+        //         <p><Link to="/">Back to Homepage</Link>.</p>
+        //     </footer>
+        // </div>
     )
-}
+}