Skip to content

Commit 6736185

Browse files
knupelknupel
committed
little move to auth system
1 parent 903d03f commit 6736185

19 files changed

+816
-469
lines changed

‎components/form.tsx

Lines changed: 0 additions & 415 deletions
This file was deleted.

‎components/form/add_animal_form.tsx

Lines changed: 221 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,221 @@
1+
// REACT
2+
import { useState } from 'react';
3+
// MUI
4+
import Box from '@mui/material/Box';
5+
import TextField from '@mui/material/TextField';
6+
import Select, { SelectChangeEvent } from '@mui/material/Select';
7+
import MenuItem from '@mui/material/MenuItem';
8+
import FormControl from '@mui/material/FormControl';
9+
import InputLabel from '@mui/material/InputLabel';
10+
import FormControlLabel from '@mui/material/FormControlLabel';
11+
import Switch, { SwitchProps } from '@mui/material/Switch';
12+
import FormGroup from '@mui/material/FormGroup';
13+
14+
// EMOTION
15+
import styled from '@emotion/styled';
16+
17+
// APP GLOBAL
18+
import theme from '../../src/theme';
19+
import { ButtonSubmit } from './../hc';
20+
21+
22+
23+
24+
/////////////////////////////////////////////////
25+
/////////////////////////////////////////////////
26+
// ADD ANIMAL FORM
27+
/////////////////////////////////////////////////
28+
/////////////////////////////////////////////////
29+
30+
// FAMILLE DICTIONNAIRE
31+
const family_list = [
32+
'mamifère',
33+
'reptile',
34+
'insecte',
35+
'poisson',
36+
'molusque',
37+
'oiseau',
38+
];
39+
40+
// CHECK
41+
function check_data_before_send(name:string, family: string, age:number) {
42+
if(name.length < 1) {
43+
return false;
44+
}
45+
46+
if(family.length < 1) {
47+
return false;
48+
}
49+
50+
if(age < 1) {
51+
return false;
52+
}
53+
return true;
54+
}
55+
56+
// SWITCH LEGENDAIRE
57+
const SwitchLegendary = styled((props: SwitchProps) => (
58+
<Switch focusVisibleClassName=".Mui-focusVisible" disableRipple {...props} />
59+
))(() => ({
60+
width: 42,
61+
height: 26,
62+
padding: 0,
63+
'& .MuiSwitch-switchBase': {
64+
padding: 0,
65+
margin: 2,
66+
transitionDuration: '300ms',
67+
'&.Mui-checked': {
68+
transform: 'translateX(16px)',
69+
color: theme.palette.secondary.light,
70+
'& + .MuiSwitch-track': {
71+
backgroundColor: 'magenta',
72+
// backgroundColor: theme.palette.mode === 'dark' ? '#2ECA45' : '#65C466',
73+
opacity: 1,
74+
border: 0,
75+
},
76+
'&.Mui-disabled + .MuiSwitch-track': {
77+
opacity: 0.5,
78+
},
79+
},
80+
'&.Mui-focusVisible .MuiSwitch-thumb': {
81+
// color: '#33cf4d',
82+
border: '6px solid #fff',
83+
},
84+
'&.Mui-disabled .MuiSwitch-thumb': {
85+
// color: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[600],
86+
color: 'grey'
87+
},
88+
'&.Mui-disabled + .MuiSwitch-track': {
89+
opacity: 0.7,
90+
// opacity: theme.palette.mode === 'light' ? 0.7 : 0.3,
91+
},
92+
},
93+
'& .MuiSwitch-thumb': {
94+
boxSizing: 'border-box',
95+
width: 22,
96+
height: 22,
97+
},
98+
'& .MuiSwitch-track': {
99+
borderRadius: 26 / 2,
100+
backgroundColor: '#E9E9EA',
101+
// backgroundColor: theme.palette.mode === 'light' ? '#E9E9EA' : '#39393D',
102+
opacity: 1,
103+
// transition: theme.transitions.create(['background-color'], {
104+
// duration: 500,
105+
// }),
106+
},
107+
}));
108+
109+
110+
111+
export function AddAnimalForm() {
112+
// input database
113+
const [name, set_name] = useState('');
114+
const [family, set_family] = useState('');
115+
const [age, set_age] = useState(0);
116+
const [mythic, set_mythic] = useState(false);
117+
118+
const handle_change_family = (event: SelectChangeEvent) => {
119+
set_family(event.target.value as string);
120+
};
121+
122+
const handle_change_name = (event: any) => {
123+
set_name(event.target.value as string);
124+
};
125+
126+
const handle_change_age = (event: any) => {
127+
if(isNaN(event.target.value) === false && event.target.value > 0) {
128+
set_age(Number(event.target.value));
129+
}
130+
};
131+
132+
const handle_change_mythic = (event: any) => {
133+
// console.log("mythic",event.target.checked);
134+
set_mythic(event.target.checked as boolean);
135+
};
136+
137+
const handle_submit = async (event:any) => {
138+
event.preventDefault();
139+
let select:boolean = false;
140+
const body = { name, family, age, mythic, select }
141+
try {
142+
const response = await fetch('/api/animal', {
143+
method: 'POST',
144+
headers: { 'Content-Type': 'application/json' },
145+
body: JSON.stringify(body)
146+
})
147+
if (response.status !== 200) {
148+
console.log('something went wrong')
149+
//set an error banner here
150+
} else {
151+
resetForm()
152+
console.log('form submitted successfully !!!')
153+
//set a success banner here
154+
}
155+
console.log("response", response);
156+
console.log("response.status", response.status);
157+
//check response, if success is false, dont take them to success page
158+
} catch (error) {
159+
console.log('there was an error submitting', error)
160+
}
161+
console.log("body", body);
162+
}
163+
164+
const resetForm = () => {
165+
set_name('')
166+
set_family('')
167+
set_age(0)
168+
set_mythic(false)
169+
}
170+
171+
return (
172+
<>
173+
<form action="#" method="POST" onSubmit={(e) => handle_submit(e)}>
174+
<Box sx={{ p:2, bgcolor: theme.palette.secondary.light, margin: 3, borderRadius: 5, border: 5, borderColor: 'purple'}}>
175+
{/* title */}
176+
<Box sx={{p:1, color: theme.palette.primary.main, maxWidth: 190}}>Créez votre créature</Box>
177+
{/* name */}
178+
<Box sx={{p:1}}>
179+
<TextField id="name" label="Nom de la bête" variant="outlined" value={name} onChange={handle_change_name}/>
180+
</Box>
181+
{/* family */}
182+
<Box sx={{p:1, maxWidth: 130}}>
183+
<FormControl fullWidth>
184+
<InputLabel id="family_label">Famille</InputLabel>
185+
<Select labelId="family_label" id="family" label="Famille" value={family} onChange={handle_change_family}>
186+
{family_list.map((elem) => (
187+
<MenuItem
188+
key={elem}
189+
value={elem}>
190+
{elem}
191+
</MenuItem>
192+
193+
))}
194+
</Select>
195+
</FormControl>
196+
</Box>
197+
{/* age */}
198+
<Box sx={{p:1}}>
199+
<TextField id="age" label="Age de la bête" variant="outlined" value={age} onChange={handle_change_age}/>
200+
</Box>
201+
{/* légendaire */}
202+
{/* need FromGroup to put the switch bellow the previous element */}
203+
<Box sx={{p:1}}>
204+
<FormGroup>
205+
<FormControlLabel
206+
control={<SwitchLegendary sx={{ m: 1 }} onChange={handle_change_mythic}/>}
207+
label={mythic === true ? "Légendaire" : "Ordinaire"}
208+
/>
209+
</FormGroup>
210+
</Box>
211+
{/* submit */}
212+
<Box sx={{p:1}}>
213+
{check_data_before_send(name, family, age) === false ? <ButtonSubmit >Ceci n'est pas une bête</ButtonSubmit> : <ButtonSubmit type='submit'>envoyer la bête</ButtonSubmit>}
214+
</Box>
215+
</Box>
216+
</form>
217+
</>
218+
);
219+
}
220+
221+

‎components/form/login_form.tsx

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
// REACT
2+
import { useState } from 'react';
3+
// MUI
4+
import Box from '@mui/material/Box';
5+
import TextField from '@mui/material/TextField';
6+
7+
8+
// APP GLOBAL
9+
import theme from '../../src/theme';
10+
import { ButtonSubmit } from './../hc';
11+
12+
13+
/////////////////////
14+
// LOGIN
15+
////////////////
16+
function check_login_send(pseudo:string, password: string) {
17+
if(pseudo.length < 6) {
18+
return false;
19+
}
20+
if(password.length < 6) {
21+
return false;
22+
}
23+
return true;
24+
}
25+
26+
27+
28+
export function LoginForm() {
29+
const [pseudo, set_pseudo] = useState('');
30+
const [password, set_password] = useState('');
31+
32+
const handle_submit = async (e:any) => {
33+
e.preventDefault();
34+
console.log("submit your login registration");
35+
}
36+
37+
const handle_change_pseudo = (event: any) => {
38+
set_pseudo(event.target.value as string);
39+
};
40+
41+
const handle_change_password = (event: any) => {
42+
set_password(event.target.value as string);
43+
};
44+
45+
46+
return <>
47+
{/* <CssBaseline /> */}
48+
<form action="#" method="POST" onSubmit={(e) => handle_submit(e)}>
49+
<Box sx={{ p:2, bgcolor: theme.palette.secondary.light, margin: 3, borderRadius: 5, border: 5, borderColor: 'purple'}}>
50+
{/* title */}
51+
<Box sx={{p:1, maxWidth: 190, color: theme.palette.primary.main}}>Entrez votre pseudo et mot de passe</Box>
52+
{/* pseudo */}
53+
<Box sx={{p:1}}>
54+
<TextField id="pseuod" label="Pseudo" variant="outlined" value={pseudo} onChange={handle_change_pseudo}/>
55+
</Box>
56+
{/* password */}
57+
<Box sx={{p:1}}>
58+
<TextField id="password" label="Mot de passe" variant="outlined" value={password} onChange={handle_change_password}/>
59+
</Box>
60+
{/* submit */}
61+
<Box sx={{p:1}}>
62+
{check_login_send(pseudo, password) === false ? <ButtonSubmit >au moins six caractères</ButtonSubmit> : <ButtonSubmit type='submit'>validez</ButtonSubmit>}
63+
</Box>
64+
</Box>
65+
</form>
66+
</>
67+
}
68+
69+
70+
71+
72+
73+
74+
75+
76+
77+
78+
79+

0 commit comments

Comments
 (0)