From b5e5ef514a77126536494cfadfab1ba667161aab Mon Sep 17 00:00:00 2001 From: Nikhil Kothari Date: Thu, 10 Oct 2024 20:52:19 +0530 Subject: [PATCH] fix: redesign login page --- .../src/components/layout/AuthContainer.tsx | 14 +- frontend/src/pages/auth/ForgotPassword.tsx | 15 +- frontend/src/pages/auth/Login.tsx | 186 +++++++++++------- frontend/src/pages/auth/SignUp.tsx | 32 ++- frontend/src/pages/auth/TwoFactor.tsx | 25 ++- 5 files changed, 174 insertions(+), 98 deletions(-) diff --git a/frontend/src/components/layout/AuthContainer.tsx b/frontend/src/components/layout/AuthContainer.tsx index 159d430ae..c51a49a67 100644 --- a/frontend/src/components/layout/AuthContainer.tsx +++ b/frontend/src/components/layout/AuthContainer.tsx @@ -1,5 +1,5 @@ import { PropsWithChildren, useContext } from 'react' -import { Box, Flex, Text } from '@radix-ui/themes'; +import { Box, Flex, Heading, Text } from '@radix-ui/themes'; import { FullPageLoader } from "./Loaders"; import { Link } from 'react-router-dom'; import { UserContext } from '@/utils/auth/UserProvider'; @@ -10,20 +10,18 @@ const AuthContainer = ({ children, ...props }: PropsWithChildren) => { return ( - + { isLoading ? : - - + + - - raven + + raven - {children} - } diff --git a/frontend/src/pages/auth/ForgotPassword.tsx b/frontend/src/pages/auth/ForgotPassword.tsx index 34a4799d3..3a0de2f71 100644 --- a/frontend/src/pages/auth/ForgotPassword.tsx +++ b/frontend/src/pages/auth/ForgotPassword.tsx @@ -17,9 +17,12 @@ import { SuccessCallout } from "@/components/common/Callouts/SuccessCallout"; import { isEmailValid } from "@/utils/validations"; import { ForgotPasswordInput } from "@/types/Auth/Login"; import AuthContainer from "@/components/layout/AuthContainer"; +import { useTheme } from "@/ThemeProvider"; export const Component = () => { + + const { appearance } = useTheme() const { register, handleSubmit, @@ -60,7 +63,7 @@ export const Component = () => {
- - - diff --git a/frontend/src/pages/auth/Login.tsx b/frontend/src/pages/auth/Login.tsx index 61ec08bef..b95310d6c 100644 --- a/frontend/src/pages/auth/Login.tsx +++ b/frontend/src/pages/auth/Login.tsx @@ -1,8 +1,8 @@ import { useState } from "react"; import { useForm } from "react-hook-form"; -import { BiShow, BiHide, BiLogoGithub, BiLogoGoogle, BiLogoFacebookCircle, BiMailSend } from "react-icons/bi"; +import { BiShow, BiHide, BiLogoGithub, BiLogoFacebookCircle, BiMailSend } from "react-icons/bi"; import { Link } from "react-router-dom"; -import { Box, Button, Flex, IconButton, Text, TextField, Separator, Link as LinkButton } from "@radix-ui/themes"; +import { Box, Button, Flex, IconButton, Text, TextField, Link as LinkButton } from "@radix-ui/themes"; import { FrappeError, useFrappeGetCall, useFrappeAuth, AuthResponse } from "frappe-react-sdk"; import { Loader } from "@/components/common/Loader"; import { ErrorText, Label } from "@/components/common/Form"; @@ -10,14 +10,18 @@ import { LoginInputs, LoginContext } from "@/types/Auth/Login"; import AuthContainer from "@/components/layout/AuthContainer"; import { TwoFactor } from "@/pages/auth/TwoFactor"; import { ErrorBanner } from "@/components/layout/AlertBanner"; +import { DateSeparator } from "@/components/layout/Divider/DateSeparator"; +import { FcGoogle } from "react-icons/fc"; +import { useTheme } from "@/ThemeProvider"; +import { Stack } from "@/components/layout/Stack"; -const SocialProviderIcons = { - "github": , - "google": , - "facebook": +export const SocialProviderIcons = { + "github": , + "google": , + "facebook": } -interface SocialProvider { +export interface SocialProvider { name: 'github' | 'google' | 'facebook' provider_name: string, auth_url: string, @@ -30,14 +34,10 @@ interface SocialProvider { export const Component = () => { - // GET call for Login Context (settings for social logins, email link etc) - const { data: loginContext, mutate } = useFrappeGetCall('raven.api.login.get_context', { - "redirect-to": "/raven" - }, 'raven.api.login.get_context', { - revalidateOnMount: true, - revalidateOnReconnect: false, - revalidateOnFocus: false - }) + + const { appearance } = useTheme() + + const { data: loginContext, mutate } = useLoginContext() const [error, setError] = useState(null) const { login } = useFrappeAuth() @@ -82,7 +82,7 @@ export const Component = () => { - + { name="email" type="text" required + size='3' + color="gray" + variant={appearance === 'dark' ? "soft" : undefined} placeholder="jane@example.com" tabIndex={0} /> {errors?.email && {errors?.email.message}} - + { type={isPasswordOpen ? "text" : "password"} autoComplete="current-password" required - placeholder="***********" > + size='3' + variant={appearance === 'dark' ? "soft" : undefined} + placeholder="***********" + color="gray" > { {errors?.password && {errors.password?.message}} + + + + + Forgot Password? + + + - - - - - - Forgot Password? - - - + - {/* Show Separator only when either Email Link or Social Logins are enabled */} - { - loginContext?.message?.login_with_email_link || loginContext?.message?.social_login ? - - - : null - } - {/* Map all social oauth providers */} - { - loginContext?.message?.social_login ? loginContext?.message?.provider_logins.map((soc: SocialProvider, i: number) => { - return ( - - - - ) - }) : null - } - - { - loginContext?.message?.login_with_email_link ? - - - : null - } +
} + { loginContext?.message?.disable_signup === 0 ? - - Don't have account? + + Don't have an account yet? { ) } +const useLoginContext = () => { + // GET call for Login Context (settings for social logins, email link etc) + return useFrappeGetCall('raven.api.login.get_context', { + "redirect-to": "/raven" + }, 'raven.api.login.get_context', { + revalidateOnMount: true, + revalidateOnReconnect: false, + revalidateOnFocus: false + }) +} + +export const OtherLoginMethods = ({ isSubmitting }: { isSubmitting: boolean }) => { + + const { data: loginContext } = useLoginContext() + + return + {/* Show Separator only when either Email Link or Social Logins are enabled */} + { + loginContext?.message?.login_with_email_link || loginContext?.message?.social_login ? + + + or + + : null + } + {/* Map all social oauth providers */} + { + loginContext?.message?.social_login ? loginContext?.message?.provider_logins.map((soc: SocialProvider, i: number) => { + return ( + + + + ) + }) : null + } + + { + loginContext?.message?.login_with_email_link ? + + + : null + } + + +} + Component.displayName = "LoginPage"; \ No newline at end of file diff --git a/frontend/src/pages/auth/SignUp.tsx b/frontend/src/pages/auth/SignUp.tsx index f87902771..c3c993c5c 100644 --- a/frontend/src/pages/auth/SignUp.tsx +++ b/frontend/src/pages/auth/SignUp.tsx @@ -8,7 +8,7 @@ import { Flex, TextField, Text, - Link as LinkButton + Link as LinkButton, } from "@radix-ui/themes"; import { ErrorText, Label } from "@/components/common/Form"; import { Loader } from "@/components/common/Loader"; @@ -17,6 +17,8 @@ import AuthContainer from '@/components/layout/AuthContainer'; import { CalloutObject } from "@/components/common/Callouts/CustomCallout"; import { SuccessCallout } from "@/components/common/Callouts/SuccessCallout"; import { ErrorBanner } from "@/components/layout/AlertBanner"; +import { useTheme } from "@/ThemeProvider"; +import { OtherLoginMethods } from "./Login"; export type SignUpInputs = { email: string, @@ -25,6 +27,9 @@ export type SignUpInputs = { } export const Component = () => { + + const { appearance } = useTheme() + const { register, handleSubmit, @@ -61,15 +66,20 @@ export const Component = () => {
- - - - + + + - Have an Account? + Already have an account? () const { login } = useFrappeAuth() + const { appearance } = useTheme() async function onSubmit(values: LoginInputs) { setError(null) @@ -46,11 +48,11 @@ export const TwoFactor = ({ loginWithTwoFAResponse, setError, setIsTwoFactorEnab return ( - + { - + {loginWithTwoFAResponse?.verification?.setup ? getVerificationPrompt(loginWithTwoFAResponse?.verification) : `Verification ${VerificationMethods[loginWithTwoFAResponse?.verification?.method]} not sent. Please contact Administrator.`} @@ -65,24 +67,31 @@ export const TwoFactor = ({ loginWithTwoFAResponse, setError, setIsTwoFactorEnab })} name="otp" type="text" + size='3' + variant={appearance === 'dark' ? "soft" : undefined} + color="gray" required placeholder="Verification Code" autoFocus tabIndex={0} /> {errors?.otp && {errors?.otp.message}} - - - - +