Skip to content

Commit 0ae55e2

Browse files
staszekzstaszekz
authored
refactor: Separate atom inputs into separate files for input and text… (#15)
* refactor: Separate atom inputs into separate files for input and textarea * add loading state outside AuthContext * chore: Update loading overlay props in App.tsx and main-layout.tsx * fix color theme in css - removed dark and light for now * add 100% width and footer * chore: Update form wrapper class name in sign-in and sign-up views * add checkbox with remember me text to sign in (no logit yet) * add session persistent to log in
1 parent 3c35d30 commit 0ae55e2

File tree

6 files changed

+111
-76
lines changed

6 files changed

+111
-76
lines changed

‎src/Theme/styles.module.css‎

Lines changed: 70 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -9,75 +9,87 @@
99
transition: box-shadow 0.3s ease;
1010
color: var(--primary);
1111
border-radius: 50px;
12+
1213
&:hover {
1314
box-shadow: 0 10px 20px -15px var(--primary);
1415
background-color: var(--primary);
1516
color: var(--white);
1617
}
17-
}
18-
/* [data-variant='white'] {
19-
background-color: var(--white);
20-
color: var(--secondary);
21-
padding: 8px 24px;
22-
} */
23-
[data-variant='primary'] {
24-
background-color: var(--primary);
25-
color: var(--white);
26-
padding: 8px 24px;
27-
}
28-
[data-variant='danger'] {
29-
background-color: var(--red);
30-
color: var(--white);
31-
}
32-
[data-variant='warning'] {
33-
background-color: var(--warning);
34-
color: var(--white);
35-
}
3618

37-
[data-variant='success'] {
38-
background-color: var(--success);
39-
color: var(--white);
40-
}
41-
[data-variant='notes-transparent'] {
42-
background-color: transparent;
43-
color: var(--primary);
44-
}
45-
[data-variant='notes-transparent-border'] {
46-
background-color: transparent;
47-
color: var(--primary);
48-
border: 1px solid var(--primary);
49-
&:hover {
19+
20+
&[data-variant='primary'] {
5021
background-color: var(--primary);
5122
color: var(--white);
52-
border: 1px solid var(--white);
23+
padding: 8px 24px;
5324
}
54-
}
5525

56-
[data-size='xlarge'] {
57-
height: var(--size-height-large);
58-
width: var(--size-width-large);
59-
box-shadow: var(--box-shadow-secondary);
60-
border: var(--border-large);
61-
}
62-
[data-size='large'] {
63-
box-shadow: var(--box-shadow-primary);
64-
height: var(--size-height-medium);
65-
width: var(--size-width-medium);
66-
border: var(--border-medium);
67-
}
68-
[data-size='medium'] {
69-
height: var(--size-height-small);
70-
width: var(--size-width-medium);
71-
font-size: 1rem;
72-
min-width: fit-content;
73-
}
74-
[data-size='small'] {
75-
height: var(--size-height-small);
76-
font-size: 1rem;
77-
width: var(--size-width-small);
78-
min-width: fit-content;
26+
&[data-variant='notes-danger'] {
27+
background-color: var(--red);
28+
color: var(--white);
29+
30+
&:hover {
31+
background-color: var(--white);
32+
color: var(--red);
33+
}
34+
}
35+
36+
&[data-variant='warning'] {
37+
background-color: var(--warning);
38+
color: var(--white);
39+
}
40+
41+
&[data-variant='success'] {
42+
background-color: var(--success);
43+
color: var(--white);
44+
}
45+
46+
&[data-variant='notes-transparent'] {
47+
background-color: transparent;
48+
color: var(--primary);
49+
}
50+
51+
&[data-variant='notes-transparent-border'] {
52+
background-color: transparent;
53+
color: var(--primary);
54+
border: 1px solid var(--primary);
55+
56+
&:hover {
57+
background-color: var(--primary);
58+
color: var(--white);
59+
border: 1px solid var(--white);
60+
}
61+
}
62+
63+
&[data-size='xlarge'] {
64+
height: var(--size-height-large);
65+
width: var(--size-width-large);
66+
box-shadow: var(--box-shadow-secondary);
67+
border: var(--border-large);
68+
}
69+
70+
&[data-size='large'] {
71+
box-shadow: var(--box-shadow-primary);
72+
height: var(--size-height-medium);
73+
width: var(--size-width-medium);
74+
border: var(--border-medium);
75+
}
76+
77+
&[data-size='medium'] {
78+
height: var(--size-height-small);
79+
width: var(--size-width-medium);
80+
font-size: 1rem;
81+
min-width: fit-content;
82+
}
83+
84+
&[data-size='small'] {
85+
height: var(--size-height-small);
86+
font-size: 1rem;
87+
width: var(--size-width-small);
88+
min-width: fit-content;
89+
}
7990
}
91+
8092
.title {
8193
color: var(--primary);
8294
text-align: center;
83-
}
95+
}

‎src/Theme/theme.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,6 @@ export const theme = {
4343
components: {
4444
Button: Button.extend({
4545
classNames: {
46-
...classes,
4746
root: classes.buttonRoot,
4847
},
4948
}),

‎src/components/molecules/modals.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export const openDeleteModal = (id: string, deleteFn) => {
2929
confirm: 'Delete',
3030
cancel: 'Cancel'
3131
},
32-
confirmProps: { bg: 'red', c: 'white', fz: 'md' },
32+
confirmProps: { fz: 'md', variant: 'notes-danger' },
3333
cancelProps: { fz: 'md' },
3434
onConfirm: () => deleteFn(id)
3535
});

‎src/context/auth-context.tsx‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,35 @@ import {
77
createUserWithEmailAndPassword,
88
updateProfile,
99
signOut,
10-
getAuth
10+
getAuth,
11+
inMemoryPersistence,
12+
setPersistence
1113
} from 'firebase/auth';
1214

1315
export const AuthContext = createContext<TContextAuth | undefined>(undefined);
1416

1517
export function AuthProvider({ children }) {
1618
const [user, setUser] = useState<User | null>(getAuth().currentUser);
19+
const [rememberMe, setRememberMe] = useState(false);
1720
const [loading, setLoading] = useState(true);
18-
1921
function setLoadingState(loading: boolean) {
2022
setLoading(loading);
2123
}
22-
function signIn(email: string, password: string) {
23-
return signInWithEmailAndPassword(auth, email, password);
24+
async function signIn(email: string, password: string) {
25+
if (!rememberMe) {
26+
try {
27+
await setPersistence(auth, inMemoryPersistence);
28+
return signInWithEmailAndPassword(auth, email, password);
29+
} catch (error) {
30+
if (error instanceof Error) {
31+
throw new Error(error.message);
32+
} else {
33+
throw new Error('An unknown error occurred');
34+
}
35+
}
36+
} else {
37+
return signInWithEmailAndPassword(auth, email, password);
38+
}
2439
}
2540

2641
async function signUp(email: string, password: string, displayName: string) {
@@ -50,7 +65,7 @@ export function AuthProvider({ children }) {
5065
return unsubscribe;
5166
}, []);
5267

53-
const value: TContextAuth = { user, signIn, signUp, signUserOut, loading, setLoadingState };
68+
const value: TContextAuth = { user, signIn, signUp, signUserOut, loading, setLoadingState, setRememberMe };
5469

5570
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
5671
}

‎src/types/contexts.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,5 @@ export type TContextAuth = {
77
loading: boolean;
88
setLoadingState: (loading: boolean) => void;
99
signUserOut: () => Promise<void>;
10+
setRememberMe: React.Dispatch<React.SetStateAction<boolean>>
1011
};

‎src/views/auth/sign-in.tsx‎

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useForm } from '@tanstack/react-form';
22
import { zodValidator } from '@tanstack/zod-form-adapter';
3-
import { Box, Button, Flex, TextInput, Title } from '@mantine/core';
3+
import { Button, Checkbox, Flex, TextInput, Title, Text } from '@mantine/core';
44
import { z } from 'zod';
55
import { IconLogin, IconLogin2 } from '@tabler/icons-react';
66
import { useAuthContext } from 'src/hooks/use-auth-context';
@@ -17,7 +17,7 @@ export const SignIn = () => {
1717
email: '',
1818
password: ''
1919
};
20-
const { signIn, setLoadingState } = useAuthContext();
20+
const { signIn, setLoadingState, setRememberMe } = useAuthContext();
2121
const navigate = useNavigate();
2222

2323
const { Field, Subscribe, handleSubmit, state } = useForm({
@@ -38,6 +38,7 @@ export const SignIn = () => {
3838
alert((err as Error).message);
3939
}
4040
};
41+
4142
return (
4243
<>
4344
<form
@@ -98,11 +99,18 @@ export const SignIn = () => {
9899
);
99100
}}
100101
/>
101-
<Subscribe
102-
selector={state => [state.canSubmit, state.isSubmitting]}
103-
children={([canSubmit, isSubmitting]) => {
104-
return (
105-
<Flex justify={'flex-end'}>
102+
<Flex justify={'space-between'} align={'center'}>
103+
<Checkbox
104+
ml="sm"
105+
label={<Text c="var(--primary)">Remember me</Text>}
106+
color="var(--primary"
107+
variant="outline"
108+
onChange={e => setRememberMe(e.target.checked)}
109+
/>
110+
<Subscribe
111+
selector={state => [state.canSubmit, state.isSubmitting]}
112+
children={([canSubmit, isSubmitting]) => {
113+
return (
106114
<Button
107115
size="medium"
108116
right={0}
@@ -113,10 +121,10 @@ export const SignIn = () => {
113121
>
114122
<IconLogin2 stroke={1.5} />
115123
</Button>
116-
</Flex>
117-
);
118-
}}
119-
/>
124+
);
125+
}}
126+
/>
127+
</Flex>
120128
<Button
121129
component={Link}
122130
variant="light"

0 commit comments

Comments
 (0)