Added toggle button for login and register with no functionality

TPH777 · Jun 26, 2024 · d6150ab · d6150ab
1 parent 73dae04
commit d6150ab
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 15 deletions.
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
@@ -4,12 +4,14 @@ import ErrorText from "../components/ErrorText";
 import { auth, googleProvider } from "../config/firebase";
 import { signInWithEmailAndPassword, signInWithPopup } from "firebase/auth";
 import GoogleButton from "react-google-button";
+import { ButtonGroup, ToggleButton } from "react-bootstrap";
 
 export const LoginPage = () => {
   const [authenticating, setAuthenticating] = useState(false);
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
+  const [user, setUser] = useState<boolean>(true);
 
   let navigate = useNavigate();
 
@@ -77,13 +79,37 @@ export const LoginPage = () => {
         />
       </div>
 
-      <button
-        type="submit"
-        disabled={authenticating}
-        className="btn btn-primary ms-3"
-      >
-        {authenticating ? "Signing In..." : "Sign In"}
-      </button>
+      <div className="mb-4">
+        <ButtonGroup>
+          <ToggleButton
+            id="post-checked"
+            type="radio"
+            variant={"outline-success"}
+            value={1}
+            checked={user === true}
+            onChange={() => setUser(true)}
+          >
+            Consumer
+          </ToggleButton>
+          <ToggleButton
+            id="post-unchecked"
+            type="radio"
+            variant={"outline-dark"}
+            value={2}
+            checked={user === false}
+            onChange={() => setUser(false)}
+          >
+            Business
+          </ToggleButton>
+        </ButtonGroup>
+        <button
+          type="submit"
+          disabled={authenticating}
+          className="btn btn-primary ms-3"
+        >
+          {authenticating ? "Signing In..." : "Sign In"}
+        </button>
+      </div>
 
       <small>
         <p className="m-1 text-center">

diff --git a/src/pages/Register.tsx b/src/pages/Register.tsx
@@ -3,6 +3,7 @@ import { Link, useNavigate } from "react-router-dom";
 import ErrorText from "../components/ErrorText";
 import { auth } from "../config/firebase";
 import { createUserWithEmailAndPassword, updateProfile } from "firebase/auth";
+import { ButtonGroup, ToggleButton } from "react-bootstrap";
 
 export const RegisterPage = () => {
   const [registering, setRegistering] = useState(false);
@@ -11,6 +12,7 @@ export const RegisterPage = () => {
   const [password, setPassword] = useState("");
   const [confirm, setConfirm] = useState("");
   const [error, setError] = useState("");
+  const [user, setUser] = useState<boolean>(true);
 
   const navigate = useNavigate();
 
@@ -114,14 +116,37 @@ export const RegisterPage = () => {
           onChange={(e) => setConfirm(e.target.value)}
         />
       </div>
-
-      <button
-        disabled={registering}
-        type="submit"
-        className="btn btn-primary btn-block mb-4"
-      >
-        {registering ? "Registering..." : "Register"}
-      </button>
+      <div className="mb-4">
+        <ButtonGroup>
+          <ToggleButton
+            id="post-checked"
+            type="radio"
+            variant={"outline-success"}
+            value={1}
+            checked={user === true}
+            onChange={() => setUser(true)}
+          >
+            Consumer
+          </ToggleButton>
+          <ToggleButton
+            id="post-unchecked"
+            type="radio"
+            variant={"outline-dark"}
+            value={2}
+            checked={user === false}
+            onChange={() => setUser(false)}
+          >
+            Business
+          </ToggleButton>
+        </ButtonGroup>
+        <button
+          disabled={registering}
+          type="submit"
+          className="btn btn-primary btn-block ms-3"
+        >
+          {registering ? "Registering..." : "Register"}
+        </button>
+      </div>
 
       <small>
         <p className="m-1 text-center">