Fixed Seller Page

Pelps12 · Mar 24, 2022 · d2e0c0d · d2e0c0d
1 parent 5627ef1
commit d2e0c0d
Show file tree

Hide file tree

Showing 6 changed files with 270 additions and 46 deletions.
diff --git a/components/Header.js b/components/Header.js
@@ -18,11 +18,11 @@ const Header = () => {
 
   return (
     <div className={sliderStyles.header}>
-      <h1 className={sliderStyles.logo}>Las Price</h1>
+      <h1 className={sliderStyles.logo}><a href="/">Las Price</a></h1>
       <Navigation/>
       <MobileNavigation/>
       <div className={sliderStyles.btnIcon}>
-      <a className={sliderStyles.navAnchor} href=""><button className={sliderStyles.navBtn}>Become a Seller</button></a>
+      <a className={sliderStyles.navAnchor} href="/seller"><button className={sliderStyles.navBtn}>Become a Seller</button></a>
       {/* <a className={sliderStyles.navAnchor} href=""><button className={sliderStyles.navBtn}><MdOutlineAccountCircle size={33}/></button></a> */}
       <nav className={sliderStyles.navIcon}>
         {open ? closeIcon : hamburgerIcon}

diff --git a/components/IconLinks.js b/components/IconLinks.js
@@ -1,14 +1,15 @@
 import React from 'react';
 import iconStyles from '../styles/IconLink.module.css';
+import Link from 'next/link';
 
 const IconLinks = () => {
   return (
     <div className={iconStyles.action}>
         <div className={iconStyles.menu}>
            <h3>First Last</h3>
             <ul>
-                <li><a href="">Sign Up</a></li>
-                <li><a href="">Log In</a></li>
+                <li><a href="/register">Sign Upp</a></li>
+                <li><a href="/login">Log In</a></li>
                 <li><a href="">My Profile</a></li>
             </ul>
         </div>

diff --git a/components/LoginForm.js b/components/LoginForm.js
@@ -5,9 +5,10 @@ import { useRouter } from "next/router";
 import { MixPanelTracking } from "../util/Mixpanel";
 
 const LoginForm = ({ providers, csrfToken }) => {
-    const { data: session } = useSession();
+    const { data: session, status } = useSession();
     console.log(session);
     const router = useRouter();
+    const [error, setError] = useState("");
     const [userCredentials, setUserCredentials] = useState({
         email: "",
         password: "",
@@ -35,9 +36,12 @@ const LoginForm = ({ providers, csrfToken }) => {
                 console.log("Hello");
                 router.replace("/home");
             }
-            if(!result.ok){
-                console.log(`${result.status} not authorized`)
+            const checking = result.ok;
+            console.log("HelloJohn" + checking);
+            if (!result.ok) {
+                setError("Your password is incorrect");
             }
+
         } catch (error) {
             //Display error message
             console.log(error);
@@ -46,47 +50,66 @@ const LoginForm = ({ providers, csrfToken }) => {
 
     }
     const handleChange = (e) => {
-		const { name, value } = e.target;
+        const { name, value } = e.target;
 
-		setUserCredentials({ ...userCredentials, [name]: value });
-	};
-  return (
-      <div className={formStyle.wrapper}>
-          {Object.values(providers).filter(provider =>provider.name != "Credentials").map((provider) =>(
-              <div className={formStyle.innerForm} key ={provider.name}>
-                <div className={formStyle.formGroup} key ={provider.name}>
-                    <button onClick={() => signIn(provider.id, {callbackUrl: "http://localhost:3000/home"})}>
-                        Sign in with {provider.name}
-                    </button>
-                </div>
-              </div>
-          ))}
+        setUserCredentials({ ...userCredentials, [name]: value });
+    };
+    return (
+        <div className={formStyle.wrapper}>
+
+            <div className={formStyle.imageBox}>
 
-            <form onSubmit={handleSubmit} className={formStyle.formGroup}>
-            <input
-					className="input"
-					type="email"
-					placeholder="Email Address"
-					required
-					value={email}
-					onChange={handleChange}
-					name="email"
-					autoComplete="email"
-				/><br/>
-				<input
-					className="input"
-					type="password"
-					placeholder="Password"
-					required
-					value={password}
-					onChange={handleChange}
-					name="password"
-					autoComplete="password"
-				/><br/>
-                <button type="submit">Sign in</button>
-            </form>
             </div>
+            <div className={formStyle.content}>
+                <div className={formStyle.formBox}>
+                    {/* <div>
+      The user is <b>{result?.ok ? 'currently' : 'not'}</b> logged in.    </div> */}
+                    <div><p>{error}</p></div>
+                    <form onSubmit={handleSubmit} className={formStyle.formGroup}>
+                        <h2>Login</h2>
+                        <div className={formStyle.inputBox}>
+                            <input
+                                className="input"
+                                type="email"
+                                placeholder="Email Address"
+                                required
+                                value={email}
+                                onChange={handleChange}
+                                name="email"
+                                autoComplete="email"
+                            />
+                        </div>
+                        <div className={formStyle.inputBox}>
+                            <input
+                                className="input"
+                                type="password"
+                                placeholder="Password"
+                                required
+                                value={password}
+                                onChange={handleChange}
+                                name="password"
+                                autoComplete="password"
+                            />
+                        </div>
+                        <div className={formStyle.inputBox}>
+                            <input type="submit" value="Sign in" />
+                        </div>
+
+                    </form>
+                    {Object.values(providers).filter(provider => provider.name != "Credentials").map((provider) => (
+                        <div className={formStyle.innerForm} key={provider.name}>
+                            <div className={formStyle.formGroup} key={provider.name}>
+                                <button onClick={() => signIn(provider.id, { callbackUrl: "http://localhost:3000/home" })}>
+                                    Sign in with {provider.name}
+                                </button>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+
+        </div>
 
-        )
-          }
+    )
+}
 export default LoginForm
diff --git a/components/SellerForm.js b/components/SellerForm.js
@@ -0,0 +1,83 @@
+import formStyle from "../styles/SellerForm.module.css";
+const SellerForm = () => {
+    return (
+        <div className={formStyle.wrapper}>
+            <div className={formStyle.imageBox}>
+
+            </div>
+            <div className={formStyle.content}>
+            <div className={formStyle.formBox}>
+                <form action="">
+                <h2>Become a Seller</h2>
+                <div className={formStyle.inputBox}>
+                            <label htmlFor="accountbank">Account Bank:</label>
+                            <input
+                                className="input"
+                                type="text"
+                                placeholder="Account Bank"
+                                required
+                            />
+                        </div>
+                        <div className={formStyle.inputBox}>
+                            <label htmlFor="accountnumber">Account Number:</label>
+                            <input
+                                className="input"
+                                type="number"
+                                placeholder="Account Number"
+                                required
+                            />
+                        </div>
+                        <div className={formStyle.inputBox}>
+                            <label htmlFor="storename">Store Name:</label>
+                            <input
+                                className="input"
+                                type="text"
+                                placeholder="Store Name"
+                                required
+                            />
+                        </div>
+                        <div className={formStyle.inputBox}>
+                            <label htmlFor="starttime">Start Time:</label>
+                            <input
+                                className="input"
+                                type="time"
+                                placeholder="Start Time"
+                                required
+                            />
+                        </div>
+                        <div className={formStyle.inputBox}>
+                            <label htmlFor="closingtime">Closing Time:</label>
+                            <input
+                                className="input"
+                                type="time"
+                                placeholder="Closing Time"
+                                required
+                            />
+                        </div>
+                        <div className={formStyle.inputBox}>
+                            <label htmlFor="latitude">Latitude:</label>
+                            <input
+                                className="input"
+                                type="text"
+                                placeholder="Latitude"
+                                required
+                            />
+                        </div>
+                        <div className={formStyle.inputBox}>
+                            <label htmlFor="longitude">Longitude:</label>
+                            <input
+                                className="input"
+                                type="text"
+                                placeholder="Longitude"
+                                required
+                            />
+                        </div>
+
+                </form>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default SellerForm
diff --git a/pages/seller.js b/pages/seller.js
@@ -0,0 +1,7 @@
+import SellerForm from "../components/SellerForm"
+
+export default function  Seller() {
+  return (
+    <SellerForm/>
+  )
+}
diff --git a/styles/SellerForm.module.css b/styles/SellerForm.module.css
@@ -0,0 +1,110 @@
+.wrapper{
+    position: relative;
+    width: 100%;
+    height: 100vh;
+    display: flex;
+}
+
+.wrapper .imageBox{
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.wrapper .content{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+
+}
+
+.wrapper .content .formBox{
+    width: 50%;
+    padding: 40px;
+
+    margin: 50px;
+}
+
+.wrapper .content .formBox h2{
+   color: orange;
+   font-weight: 600;
+   font-size: 1.5em;
+   text-transform: uppercase;
+   margin-bottom: 20px;
+   border-bottom: 4px solid orange;
+   display: inline-block;
+   letter-spacing: 1px;
+}
+
+.wrapper .content .formBox .inputBox{
+    margin-bottom: 20px;
+}
+
+.wrapper .content .formBox .inputBox{
+    margin-bottom: 20px;
+}
+
+.wrapper .content .formBox .inputBox input{
+    width: 100%;
+    padding: 10px 20px;
+    outline: none;
+    font-weight: 400;
+    border: 1px solid orange;
+    font-size: 16px;
+    letter-spacing: 1px;
+    color: orange;
+    background: transparent;
+    border-radius: 30px;
+}
+
+.wrapper .content .formBox .inputBox input[type="submit"]{
+    background: orange;
+    color: white;
+    outline: none;
+    border: none;
+    font-weight: 500;
+    cursor: pointer;
+}
+.wrapper .content .formBox .inputBox input[type="submit"]:hover{
+    background: teal;
+}
+.wrapper .content .formBox .inputBox p{
+   color: teal;
+}
+
+.wrapper .content .formBox .inputBox p a{
+    color: teal;
+ }
+
+.formGroup button{
+    white-space: nowrap;
+}
+ @media (max-width: 768px){
+     .wrapper .imageBox{
+         position: absolute;
+         top: 0;
+         left: 0;
+         width: 100%;
+         height: 100%;
+     }
+     .wrapper .content{
+         display: flex;
+         justify-content: center;
+         align-items: center;
+         width: 100%;
+         height: 100%;
+         z-index: 1;
+     }
+     .wrapper .content .formBox{
+         width: 100%;
+         padding: 40px;
+         background: rgb(255 255 255 / 0.9);
+         margin: 50px;
+     }
+ }