Skip to content

Commit 0768fcd

Browse files
oliviertassinarioliviertassinari
authored
[docs] Fix Sign-in template form experience (#43838)
1 parent 63892da commit 0768fcd

File tree

8 files changed

+256
-251
lines changed

8 files changed

+256
-251
lines changed

‎docs/data/material/getting-started/templates/sign-in-side/SignInCard.js

+5-3
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,10 @@ export default function SignInCard() {
5050
};
5151

5252
const handleSubmit = (event) => {
53-
event.preventDefault();
53+
if (emailError || passwordError) {
54+
event.preventDefault();
55+
return;
56+
}
5457
const data = new FormData(event.currentTarget);
5558
console.log({
5659
email: data.get('email'),
@@ -126,6 +129,7 @@ export default function SignInCard() {
126129
<FormLabel htmlFor="password">Password</FormLabel>
127130
<Link
128131
component="button"
132+
type="button"
129133
onClick={handleClickOpen}
130134
variant="body2"
131135
sx={{ alignSelf: 'baseline' }}
@@ -172,7 +176,6 @@ export default function SignInCard() {
172176
<Divider>or</Divider>
173177
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
174178
<Button
175-
type="submit"
176179
fullWidth
177180
variant="outlined"
178181
onClick={() => alert('Sign in with Google')}
@@ -181,7 +184,6 @@ export default function SignInCard() {
181184
Sign in with Google
182185
</Button>
183186
<Button
184-
type="submit"
185187
fullWidth
186188
variant="outlined"
187189
onClick={() => alert('Sign in with Facebook')}

‎docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,10 @@ export default function SignInCard() {
5050
};
5151

5252
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
53-
event.preventDefault();
53+
if (emailError || passwordError) {
54+
event.preventDefault();
55+
return;
56+
}
5457
const data = new FormData(event.currentTarget);
5558
console.log({
5659
email: data.get('email'),
@@ -126,6 +129,7 @@ export default function SignInCard() {
126129
<FormLabel htmlFor="password">Password</FormLabel>
127130
<Link
128131
component="button"
132+
type="button"
129133
onClick={handleClickOpen}
130134
variant="body2"
131135
sx={{ alignSelf: 'baseline' }}
@@ -172,7 +176,6 @@ export default function SignInCard() {
172176
<Divider>or</Divider>
173177
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
174178
<Button
175-
type="submit"
176179
fullWidth
177180
variant="outlined"
178181
onClick={() => alert('Sign in with Google')}
@@ -181,7 +184,6 @@ export default function SignInCard() {
181184
Sign in with Google
182185
</Button>
183186
<Button
184-
type="submit"
185187
fullWidth
186188
variant="outlined"
187189
onClick={() => alert('Sign in with Facebook')}

‎docs/data/material/getting-started/templates/sign-in-side/SignInSide.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ export default function SignInSide() {
7070
sx={{
7171
justifyContent: 'center',
7272
gap: { xs: 6, sm: 12 },
73-
p: 2,
73+
p: { xs: 2, sm: 4 },
7474
m: 'auto',
7575
}}
7676
>

‎docs/data/material/getting-started/templates/sign-in-side/SignInSide.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ export default function SignInSide() {
7070
sx={{
7171
justifyContent: 'center',
7272
gap: { xs: 6, sm: 12 },
73-
p: 2,
73+
p: { xs: 2, sm: 4 },
7474
m: 'auto',
7575
}}
7676
>

‎docs/data/material/getting-started/templates/sign-in/SignIn.js

+10-5
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,11 @@ const Card = styled(MuiCard)(({ theme }) => ({
3838
}));
3939

4040
const SignInContainer = styled(Stack)(({ theme }) => ({
41-
padding: 20,
42-
marginTop: '10vh',
41+
minHeight: '100%',
42+
padding: theme.spacing(2),
43+
[theme.breakpoints.up('sm')]: {
44+
padding: theme.spacing(4),
45+
},
4346
'&::before': {
4447
content: '""',
4548
display: 'block',
@@ -72,7 +75,10 @@ export default function SignIn(props) {
7275
};
7376

7477
const handleSubmit = (event) => {
75-
event.preventDefault();
78+
if (emailError || passwordError) {
79+
event.preventDefault();
80+
return;
81+
}
7682
const data = new FormData(event.currentTarget);
7783
console.log({
7884
email: data.get('email'),
@@ -155,6 +161,7 @@ export default function SignIn(props) {
155161
<FormLabel htmlFor="password">Password</FormLabel>
156162
<Link
157163
component="button"
164+
type="button"
158165
onClick={handleClickOpen}
159166
variant="body2"
160167
sx={{ alignSelf: 'baseline' }}
@@ -206,7 +213,6 @@ export default function SignIn(props) {
206213
<Divider>or</Divider>
207214
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
208215
<Button
209-
type="submit"
210216
fullWidth
211217
variant="outlined"
212218
onClick={() => alert('Sign in with Google')}
@@ -215,7 +221,6 @@ export default function SignIn(props) {
215221
Sign in with Google
216222
</Button>
217223
<Button
218-
type="submit"
219224
fullWidth
220225
variant="outlined"
221226
onClick={() => alert('Sign in with Facebook')}

‎docs/data/material/getting-started/templates/sign-in/SignIn.tsx

+10-5
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,11 @@ const Card = styled(MuiCard)(({ theme }) => ({
3838
}));
3939

4040
const SignInContainer = styled(Stack)(({ theme }) => ({
41-
padding: 20,
42-
marginTop: '10vh',
41+
minHeight: '100%',
42+
padding: theme.spacing(2),
43+
[theme.breakpoints.up('sm')]: {
44+
padding: theme.spacing(4),
45+
},
4346
'&::before': {
4447
content: '""',
4548
display: 'block',
@@ -72,7 +75,10 @@ export default function SignIn(props: { disableCustomTheme?: boolean }) {
7275
};
7376

7477
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
75-
event.preventDefault();
78+
if (emailError || passwordError) {
79+
event.preventDefault();
80+
return;
81+
}
7682
const data = new FormData(event.currentTarget);
7783
console.log({
7884
email: data.get('email'),
@@ -155,6 +161,7 @@ export default function SignIn(props: { disableCustomTheme?: boolean }) {
155161
<FormLabel htmlFor="password">Password</FormLabel>
156162
<Link
157163
component="button"
164+
type="button"
158165
onClick={handleClickOpen}
159166
variant="body2"
160167
sx={{ alignSelf: 'baseline' }}
@@ -206,7 +213,6 @@ export default function SignIn(props: { disableCustomTheme?: boolean }) {
206213
<Divider>or</Divider>
207214
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
208215
<Button
209-
type="submit"
210216
fullWidth
211217
variant="outlined"
212218
onClick={() => alert('Sign in with Google')}
@@ -215,7 +221,6 @@ export default function SignIn(props: { disableCustomTheme?: boolean }) {
215221
Sign in with Google
216222
</Button>
217223
<Button
218-
type="submit"
219224
fullWidth
220225
variant="outlined"
221226
onClick={() => alert('Sign in with Facebook')}

0 commit comments

Comments
 (0)