feat: Update logo component and refactor UserAuth for improved readability and consistency

app/src/pages/UserAuth.tsx

@@ -2,7 +2,11 @@ import React, { useState, FormEvent } from "react";
 import { useNavigate } from "react-router-dom";
 import { LogoIconLarge } from "../components/icons/Logo";
 import { EyeIcon } from "../components/icons/ExportCommonIcons";
-import { useLoadingProgress, useOrganization, useUserName } from "../store/store";
+import {
+  useLoadingProgress,
+  useOrganization,
+  useUserName,
+} from "../store/store";
 import { signInApi } from "../services/factoryBuilder/signInSignUp/signInApi";
 import { signUpApi } from "../services/factoryBuilder/signInSignUp/signUpApi";
 
@@ -21,7 +25,7 @@ const UserAuth: React.FC = () => {
   const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    const organization = (email.split("@")[1]).split(".")[0];
+    const organization = email.split("@")[1].split(".")[0];
     try {
       const res = await signInApi(email, password, organization);
 
@@ -39,7 +43,7 @@ const UserAuth: React.FC = () => {
       } else if (res.message === "User Not Found!!! Kindly signup...") {
         setError("Account not found");
       }
-    } catch (error) { }
+    } catch (error) {}
   };
 
   const handleRegister = async (e: FormEvent) => {
@@ -47,7 +51,7 @@ const UserAuth: React.FC = () => {
     if (email && password && userName) {
       setError("");
       try {
-        const organization = (email.split("@")[1]).split(".")[0];
+        const organization = email.split("@")[1].split(".")[0];
         const res = await signUpApi(userName, email, password, organization);
 
         if (res.message === "New User created") {
@@ -56,123 +60,121 @@ const UserAuth: React.FC = () => {
         if (res.message === "User already exists") {
           setError("User already exists");
         }
-      } catch (error) { }
+      } catch (error) {}
     } else {
       setError("Please fill all the fields!");
     }
   };
 
   return (
-    <>
-      <div className="auth-container">
-        <div className="logo-icon">
-          <LogoIconLarge />
-        </div>
-        <h1>Welcome to Dwinzo</h1>
-        <p>
-          {isSignIn ? (
-            <>
-              Don’t have an account?{" "}
-              <span
-                className="link"
-                onClick={() => setIsSignIn(false)}
-                style={{ cursor: "pointer" }}
-              >
-                Register here!
-              </span>
-            </>
-          ) : (
-            <>
-              Already have an account?{" "}
-              <span
-                className="link"
-                onClick={() => setIsSignIn(true)}
-                style={{ cursor: "pointer" }}
-              >
-                Login here!
-              </span>
-            </>
-          )}
-        </p>
+    <div className="auth-container">
+      <div className="logo-icon">
+        <LogoIconLarge />
+      </div>
+      <h1>Welcome to Dwinzo</h1>
+      <p>
+        {isSignIn ? (
+          <>
+            Don’t have an account?{" "}
+            <span
+              className="link"
+              onClick={() => setIsSignIn(false)}
+              style={{ cursor: "pointer" }}
+            >
+              Register here!
+            </span>
+          </>
+        ) : (
+          <>
+            Already have an account?{" "}
+            <span
+              className="link"
+              onClick={() => setIsSignIn(true)}
+              style={{ cursor: "pointer" }}
+            >
+              Login here!
+            </span>
+          </>
+        )}
+      </p>
 
-        <button className="google-login">
-          <span className="google-icon">G</span> Continue with Google
-        </button>
+      <button className="google-login">
+        <span className="google-icon">G</span> Continue with Google
+      </button>
 
-        {error && <div className="error-message">🛈 {error}</div>}
+      {error && <div className="error-message">🛈 {error}</div>}
 
-        <form
-          onSubmit={isSignIn ? handleLogin : handleRegister}
-          className="auth-form"
-        >
-          {!isSignIn && (
-            <input
-              type="text"
-              value={userName}
-              placeholder="Username"
-              onChange={(e) => setUserName(e.target.value)}
-              required
-            />
-          )}
+      <form
+        onSubmit={isSignIn ? handleLogin : handleRegister}
+        className="auth-form"
+      >
+        {!isSignIn && (
           <input
-            type="email"
-            name="email"
-            value={email}
-            placeholder="Email"
-            onChange={(e) => setEmail(e.target.value)}
+            type="text"
+            value={userName}
+            placeholder="Username"
+            onChange={(e) => setUserName(e.target.value)}
             required
           />
-          <div className="password-container">
-            <input
-              name="password"
-              type={showPassword ? "text" : "password"}
-              value={password}
-              placeholder="Password"
-              onChange={(e) => setPassword(e.target.value)}
-              required
-            />
-            <button
-              type="button"
-              className="toggle-password"
-              onClick={() => setShowPassword(!showPassword)}
-            >
-              <EyeIcon isClosed={showPassword} />
-            </button>
-          </div>
-          {!isSignIn && (
-            <div className="policy-checkbox">
-              <input type="checkbox" name="" id="" required />
-              <div className="label">
-                I have read and agree to the terms of service
-              </div>
-            </div>
-          )}
-          <button type="submit" className="continue-button">
-            {isSignIn ? "Continue" : "Register"}
+        )}
+        <input
+          type="email"
+          name="email"
+          value={email}
+          placeholder="Email"
+          onChange={(e) => setEmail(e.target.value)}
+          required
+        />
+        <div className="password-container">
+          <input
+            name="password"
+            type={showPassword ? "text" : "password"}
+            value={password}
+            placeholder="Password"
+            onChange={(e) => setPassword(e.target.value)}
+            required
+          />
+          <button
+            type="button"
+            className="toggle-password"
+            onClick={() => setShowPassword(!showPassword)}
+          >
+            <EyeIcon isClosed={showPassword} />
           </button>
-        </form>
-        <p className="policy">
-          By signing up for, or logging into, an account, you agree to our{" "}
-          <span
-            className="link"
-            onClick={() => navigate("/privacy")}
-            style={{ cursor: "pointer" }}
-          >
-            privacy policy
-          </span>{" "}
-          &{" "}
-          <span
-            className="link"
-            onClick={() => navigate("/terms")}
-            style={{ cursor: "pointer" }}
-          >
-            terms of service
-          </span>{" "}
-          whether you read them or not. You can also find these terms on our
-          website.
-        </p>
-      </div>
-    </>
+        </div>
+        {!isSignIn && (
+          <div className="policy-checkbox">
+            <input type="checkbox" name="" id="" required />
+            <div className="label">
+              I have read and agree to the terms of service
+            </div>
+          </div>
+        )}
+        <button type="submit" className="continue-button">
+          {isSignIn ? "Continue" : "Register"}
+        </button>
+      </form>
+      <p className="policy">
+        By signing up for, or logging into, an account, you agree to our{" "}
+        <span
+          className="link"
+          onClick={() => navigate("/privacy")}
+          style={{ cursor: "pointer" }}
+        >
+          privacy policy
+        </span>{" "}
+        &{" "}
+        <span
+          className="link"
+          onClick={() => navigate("/terms")}
+          style={{ cursor: "pointer" }}
+        >
+          terms of service
+        </span>{" "}
+        whether you read them or not. You can also find these terms on our
+        website.
+      </p>
+    </div>
   );
 };