feat: Update logo component and refactor UserAuth for improved readability and consistency
This commit is contained in:
parent
be4d8d458e
commit
e64840a4e7
|
|
@ -124,7 +124,6 @@ export function LogoIconLarge() {
|
|||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="45" cy="45" r="45" fill="#FCFDFD" />
|
||||
<circle
|
||||
cx="45.1957"
|
||||
cy="45.1957"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -6,83 +6,69 @@
|
|||
|
||||
// text colors
|
||||
// ---------- light mode ----------
|
||||
|
||||
// $text-color: #2b3344;
|
||||
// $text-disabled: #b7b7c6;
|
||||
// $input-text-color: #595965;
|
||||
// $highlight-text-color: #6f42c1;
|
||||
|
||||
// ---------- dark mode ----------
|
||||
|
||||
// $text-color-dark: #f3f3fd;
|
||||
// $text-disabled-dark: #6f6f7a;
|
||||
// $input-text-color-dark: #b5b5c8;
|
||||
// $highlight-text-color-dark: #B392F0;
|
||||
|
||||
// background colors
|
||||
// ---------- light mode ----------
|
||||
|
||||
// $background-color: linear-gradient(-45deg, #FCFDFDCC 0%, #FCFDFD99 100%);
|
||||
// $background-color-secondary: #FCFDFD4D;
|
||||
// $background-color-accent: #6f42c1;
|
||||
// $background-color-button: #6f42c1;
|
||||
// $background-color-drop-down: #6F42C14D;
|
||||
// $background-color-input: #FFFFFF4D;
|
||||
// $background-color-input-focus: #F2F2F7;
|
||||
// $background-color-drop-down-gradient: linear-gradient(-45deg, #75649366 0%, #40257266 100%);
|
||||
// $background-color-selected: #E0DFFF;
|
||||
// $background-radial-gray-gradient: radial-gradient(circle, #bfe0f8 0%, #e9ebff 46%, #e2acff 100%);
|
||||
|
||||
// ---------- dark mode ----------
|
||||
|
||||
// $background-color-dark: linear-gradient(-45deg, #333333B3 0%, #2D2437B3 100%);
|
||||
// $background-color-secondary-dark: #19191D99;
|
||||
// $background-color-accent-dark: #6f42c1;
|
||||
// $background-color-button-dark: #6f42c1;
|
||||
// $background-color-drop-down-dark: #50505080;
|
||||
// $background-color-input-dark: #FFFFFF33;
|
||||
// $background-color-input-focus-dark: #333333;
|
||||
// $background-color-drop-down-gradient-dark: linear-gradient(-45deg, #8973B166 0%, #53427366 100%);
|
||||
// $background-color-selected-dark: #403E66;
|
||||
// $background-radial-gray-gradient-dark: radial-gradient(circle, #31373b 0%, #48494b 46%, #52415c 100%);
|
||||
|
||||
// border colors
|
||||
// ---------- light mode ----------
|
||||
|
||||
// $border-color: #E0DFFF;
|
||||
// $border-color-accent: #6F42C1;
|
||||
|
||||
// ---------- dark mode ----------
|
||||
// $border-color-dark: #564B69;
|
||||
// $border-color-accent-dark: #6F42C1;
|
||||
|
||||
// highlight colors
|
||||
// ---------- light mode ----------
|
||||
|
||||
// $highlight-accent-color: #e0dfff;
|
||||
// $highlight-secondary-color: #c4abf1;
|
||||
|
||||
// ---------- dark mode ----------
|
||||
// $highlight-accent-color-dark: #403e6a;
|
||||
// $highlight-secondary-color-dark: #c4abf1;
|
||||
|
||||
// colors
|
||||
// $color1: #A392CD;
|
||||
// $color2: #7b4cd3;
|
||||
// $color3: #B186FF;
|
||||
// $color4: #8752E8;
|
||||
// $color5: #C7A8FF;
|
||||
|
||||
|
||||
// old variables
|
||||
$text-color: #2b3344;
|
||||
$text-disabled: #b7b7c6;
|
||||
$input-text-color: #595965;
|
||||
$highlight-text-color: #6f42c1;
|
||||
|
||||
// ---------- dark mode ----------
|
||||
$text-color-dark: #f3f3fd;
|
||||
$text-disabled-dark: #6f6f7a;
|
||||
$input-text-color-dark: #b5b5c8;
|
||||
$highlight-text-color-dark: #B392F0;
|
||||
|
||||
// background colors
|
||||
// ---------- light mode ----------
|
||||
$background-color: linear-gradient(-45deg, #FCFDFDCC 0%, #FCFDFD99 100%);
|
||||
$background-color-secondary: #FCFDFD4D;
|
||||
$background-color-accent: #6f42c1;
|
||||
$background-color-button: #6f42c1;
|
||||
$background-color-drop-down: #6F42C14D;
|
||||
$background-color-input: #FFFFFF4D;
|
||||
$background-color-input-focus: #F2F2F7;
|
||||
$background-color-drop-down-gradient: linear-gradient(-45deg, #75649366 0%, #40257266 100%);
|
||||
$background-color-selected: #E0DFFF;
|
||||
$background-radial-gray-gradient: radial-gradient(circle, #bfe0f8 0%, #e9ebff 46%, #e2acff 100%);
|
||||
|
||||
// ---------- dark mode ----------
|
||||
$background-color-dark: linear-gradient(-45deg, #333333B3 0%, #2D2437B3 100%);
|
||||
$background-color-secondary-dark: #19191D99;
|
||||
$background-color-accent-dark: #6f42c1;
|
||||
$background-color-button-dark: #6f42c1;
|
||||
$background-color-drop-down-dark: #50505080;
|
||||
$background-color-input-dark: #FFFFFF33;
|
||||
$background-color-input-focus-dark: #333333;
|
||||
$background-color-drop-down-gradient-dark: linear-gradient(-45deg, #8973B166 0%, #53427366 100%);
|
||||
$background-color-selected-dark: #403E66;
|
||||
$background-radial-gray-gradient-dark: radial-gradient(circle, #31373b 0%, #48494b 46%, #52415c 100%);
|
||||
|
||||
// border colors
|
||||
// ---------- light mode ----------
|
||||
$border-color: #E0DFFF;
|
||||
$border-color-accent: #6F42C1;
|
||||
|
||||
// ---------- dark mode ----------
|
||||
$border-color-dark: #564B69;
|
||||
$border-color-accent-dark: #6F42C1;
|
||||
|
||||
// highlight colors
|
||||
// ---------- light mode ----------
|
||||
$highlight-accent-color: #E0DFFF;
|
||||
$highlight-secondary-color: #6F42C1;
|
||||
|
||||
// ---------- dark mode ----------
|
||||
$highlight-accent-color-dark: #403E6A;
|
||||
$highlight-secondary-color-dark: #C4ABF1;
|
||||
|
||||
// colors
|
||||
$color1: #A392CD;
|
||||
$color2: #7b4cd3;
|
||||
$color3: #B186FF;
|
||||
$color4: #8752E8;
|
||||
$color5: #C7A8FF;
|
||||
|
||||
|
||||
// old variables
|
||||
$accent-color: #6f42c1;
|
||||
$accent-color-dark: #c4abf1;
|
||||
$highlight-accent-color: #e0dfff;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
section{
|
||||
|
||||
}
|
||||
section, .section{
|
||||
padding: 12px;
|
||||
outline: 1px solid var(--border-color);
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue