diff --git a/src/Theme/styles.module.css b/src/Theme/styles.module.css index 1c1d21c..a143d46 100644 --- a/src/Theme/styles.module.css +++ b/src/Theme/styles.module.css @@ -9,75 +9,87 @@ transition: box-shadow 0.3s ease; color: var(--primary); border-radius: 50px; + &:hover { box-shadow: 0 10px 20px -15px var(--primary); background-color: var(--primary); color: var(--white); } -} -/* [data-variant='white'] { - background-color: var(--white); - color: var(--secondary); - padding: 8px 24px; -} */ -[data-variant='primary'] { - background-color: var(--primary); - color: var(--white); - padding: 8px 24px; -} -[data-variant='danger'] { - background-color: var(--red); - color: var(--white); -} -[data-variant='warning'] { - background-color: var(--warning); - color: var(--white); -} -[data-variant='success'] { - background-color: var(--success); - color: var(--white); -} -[data-variant='notes-transparent'] { - background-color: transparent; - color: var(--primary); -} -[data-variant='notes-transparent-border'] { - background-color: transparent; - color: var(--primary); - border: 1px solid var(--primary); - &:hover { + + &[data-variant='primary'] { background-color: var(--primary); color: var(--white); - border: 1px solid var(--white); + padding: 8px 24px; } -} -[data-size='xlarge'] { - height: var(--size-height-large); - width: var(--size-width-large); - box-shadow: var(--box-shadow-secondary); - border: var(--border-large); -} -[data-size='large'] { - box-shadow: var(--box-shadow-primary); - height: var(--size-height-medium); - width: var(--size-width-medium); - border: var(--border-medium); -} -[data-size='medium'] { - height: var(--size-height-small); - width: var(--size-width-medium); - font-size: 1rem; - min-width: fit-content; -} -[data-size='small'] { - height: var(--size-height-small); - font-size: 1rem; - width: var(--size-width-small); - min-width: fit-content; + &[data-variant='notes-danger'] { + background-color: var(--red); + color: var(--white); + + &:hover { + background-color: var(--white); + color: var(--red); + } + } + + &[data-variant='warning'] { + background-color: var(--warning); + color: var(--white); + } + + &[data-variant='success'] { + background-color: var(--success); + color: var(--white); + } + + &[data-variant='notes-transparent'] { + background-color: transparent; + color: var(--primary); + } + + &[data-variant='notes-transparent-border'] { + background-color: transparent; + color: var(--primary); + border: 1px solid var(--primary); + + &:hover { + background-color: var(--primary); + color: var(--white); + border: 1px solid var(--white); + } + } + + &[data-size='xlarge'] { + height: var(--size-height-large); + width: var(--size-width-large); + box-shadow: var(--box-shadow-secondary); + border: var(--border-large); + } + + &[data-size='large'] { + box-shadow: var(--box-shadow-primary); + height: var(--size-height-medium); + width: var(--size-width-medium); + border: var(--border-medium); + } + + &[data-size='medium'] { + height: var(--size-height-small); + width: var(--size-width-medium); + font-size: 1rem; + min-width: fit-content; + } + + &[data-size='small'] { + height: var(--size-height-small); + font-size: 1rem; + width: var(--size-width-small); + min-width: fit-content; + } } + .title { color: var(--primary); text-align: center; -} +} \ No newline at end of file diff --git a/src/Theme/theme.ts b/src/Theme/theme.ts index 5ab1660..11ef6e2 100644 --- a/src/Theme/theme.ts +++ b/src/Theme/theme.ts @@ -43,7 +43,6 @@ export const theme = { components: { Button: Button.extend({ classNames: { - ...classes, root: classes.buttonRoot, }, }), diff --git a/src/components/molecules/modals.tsx b/src/components/molecules/modals.tsx index 118265e..7e89ae0 100644 --- a/src/components/molecules/modals.tsx +++ b/src/components/molecules/modals.tsx @@ -29,7 +29,7 @@ export const openDeleteModal = (id: string, deleteFn) => { confirm: 'Delete', cancel: 'Cancel' }, - confirmProps: { bg: 'red', c: 'white', fz: 'md' }, + confirmProps: { fz: 'md', variant: 'notes-danger' }, cancelProps: { fz: 'md' }, onConfirm: () => deleteFn(id) }); diff --git a/src/context/auth-context.tsx b/src/context/auth-context.tsx index 7cfae3e..60108a5 100644 --- a/src/context/auth-context.tsx +++ b/src/context/auth-context.tsx @@ -7,20 +7,35 @@ import { createUserWithEmailAndPassword, updateProfile, signOut, - getAuth + getAuth, + inMemoryPersistence, + setPersistence } from 'firebase/auth'; export const AuthContext = createContext(undefined); export function AuthProvider({ children }) { const [user, setUser] = useState(getAuth().currentUser); + const [rememberMe, setRememberMe] = useState(false); const [loading, setLoading] = useState(true); - function setLoadingState(loading: boolean) { setLoading(loading); } - function signIn(email: string, password: string) { - return signInWithEmailAndPassword(auth, email, password); + async function signIn(email: string, password: string) { + if (!rememberMe) { + try { + await setPersistence(auth, inMemoryPersistence); + return signInWithEmailAndPassword(auth, email, password); + } catch (error) { + if (error instanceof Error) { + throw new Error(error.message); + } else { + throw new Error('An unknown error occurred'); + } + } + } else { + return signInWithEmailAndPassword(auth, email, password); + } } async function signUp(email: string, password: string, displayName: string) { @@ -50,7 +65,7 @@ export function AuthProvider({ children }) { return unsubscribe; }, []); - const value: TContextAuth = { user, signIn, signUp, signUserOut, loading, setLoadingState }; + const value: TContextAuth = { user, signIn, signUp, signUserOut, loading, setLoadingState, setRememberMe }; return {children}; } diff --git a/src/types/contexts.ts b/src/types/contexts.ts index 0bef804..37ab652 100644 --- a/src/types/contexts.ts +++ b/src/types/contexts.ts @@ -7,4 +7,5 @@ export type TContextAuth = { loading: boolean; setLoadingState: (loading: boolean) => void; signUserOut: () => Promise; + setRememberMe: React.Dispatch> }; \ No newline at end of file diff --git a/src/views/auth/sign-in.tsx b/src/views/auth/sign-in.tsx index d96864d..90bffa5 100644 --- a/src/views/auth/sign-in.tsx +++ b/src/views/auth/sign-in.tsx @@ -1,6 +1,6 @@ import { useForm } from '@tanstack/react-form'; import { zodValidator } from '@tanstack/zod-form-adapter'; -import { Box, Button, Flex, TextInput, Title } from '@mantine/core'; +import { Button, Checkbox, Flex, TextInput, Title, Text } from '@mantine/core'; import { z } from 'zod'; import { IconLogin, IconLogin2 } from '@tabler/icons-react'; import { useAuthContext } from 'src/hooks/use-auth-context'; @@ -17,7 +17,7 @@ export const SignIn = () => { email: '', password: '' }; - const { signIn, setLoadingState } = useAuthContext(); + const { signIn, setLoadingState, setRememberMe } = useAuthContext(); const navigate = useNavigate(); const { Field, Subscribe, handleSubmit, state } = useForm({ @@ -38,6 +38,7 @@ export const SignIn = () => { alert((err as Error).message); } }; + return ( <>
{ ); }} /> - [state.canSubmit, state.isSubmitting]} - children={([canSubmit, isSubmitting]) => { - return ( - + + Remember me} + color="var(--primary" + variant="outline" + onChange={e => setRememberMe(e.target.checked)} + /> + [state.canSubmit, state.isSubmitting]} + children={([canSubmit, isSubmitting]) => { + return ( - - ); - }} - /> + ); + }} + /> +