Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit2958685

Browse files
committed
emotion:SignInForm
1 parentf06631b commit2958685

File tree

1 file changed

+32
-33
lines changed

1 file changed

+32
-33
lines changed

‎site/src/pages/LoginPage/SignInForm.tsx

Lines changed: 32 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import{makeStyles}from"@mui/styles";
2-
import{FormikTouched}from"formik";
3-
import{FC,useState}from"react";
4-
import{AuthMethods}from"api/typesGenerated";
1+
import{typeInterpolation,typeTheme}from"@emotion/react";
2+
import{typeFormikTouched}from"formik";
3+
import{typeFC,useState}from"react";
4+
importtype{AuthMethods}from"api/typesGenerated";
55
import{PasswordSignInForm}from"./PasswordSignInForm";
66
import{OAuthSignInForm}from"./OAuthSignInForm";
7-
import{BuiltInAuthFormValues}from"./SignInForm.types";
7+
import{typeBuiltInAuthFormValues}from"./SignInForm.types";
88
importButtonfrom"@mui/material/Button";
99
importEmailIconfrom"@mui/icons-material/EmailOutlined";
1010
import{Alert}from"components/Alert/Alert";
@@ -21,11 +21,11 @@ export const Language = {
2121
oidcSignIn:"OpenID Connect",
2222
};
2323

24-
constuseStyles=makeStyles((theme)=>({
24+
conststyles={
2525
root:{
2626
width:"100%",
2727
},
28-
title:{
28+
title:(theme)=>({
2929
fontSize:theme.spacing(4),
3030
fontWeight:400,
3131
margin:0,
@@ -35,34 +35,34 @@ const useStyles = makeStyles((theme) => ({
3535
"& strong":{
3636
fontWeight:600,
3737
},
38-
},
39-
alert:{
38+
}),
39+
alert:(theme)=>({
4040
marginBottom:theme.spacing(4),
41-
},
42-
divider:{
41+
}),
42+
divider:(theme)=>({
4343
paddingTop:theme.spacing(3),
4444
paddingBottom:theme.spacing(3),
4545
display:"flex",
4646
alignItems:"center",
4747
gap:theme.spacing(2),
48-
},
49-
dividerLine:{
48+
}),
49+
dividerLine:(theme)=>({
5050
width:"100%",
5151
height:1,
5252
backgroundColor:theme.palette.divider,
53-
},
54-
dividerLabel:{
53+
}),
54+
dividerLabel:(theme)=>({
5555
flexShrink:0,
5656
color:theme.palette.text.secondary,
5757
textTransform:"uppercase",
5858
fontSize:12,
5959
letterSpacing:1,
60-
},
61-
icon:{
60+
}),
61+
icon:(theme)=>({
6262
width:theme.spacing(2),
6363
height:theme.spacing(2),
64-
},
65-
}));
64+
}),
65+
}satisfiesRecord<string,Interpolation<Theme>>;
6666

6767
exportinterfaceSignInFormProps{
6868
isSigningIn:boolean;
@@ -90,23 +90,22 @@ export const SignInForm: FC<React.PropsWithChildren<SignInFormProps>> = ({
9090
constpasswordEnabled=authMethods?.password.enabled??true;
9191
// Hide password auth by default if any OAuth method is enabled
9292
const[showPasswordAuth,setShowPasswordAuth]=useState(!oAuthEnabled);
93-
conststyles=useStyles();
9493
constapplicationName=getApplicationName();
9594

9695
return(
97-
<divclassName={styles.root}>
98-
<h1className={styles.title}>
96+
<divcss={styles.root}>
97+
<h1css={styles.title}>
9998
Sign in to<strong>{applicationName}</strong>
10099
</h1>
101100

102101
{Boolean(error)&&(
103-
<divclassName={styles.alert}>
102+
<divcss={styles.alert}>
104103
<ErrorAlerterror={error}/>
105104
</div>
106105
)}
107106

108107
{Boolean(info)&&Boolean(error)&&(
109-
<divclassName={styles.alert}>
108+
<divcss={styles.alert}>
110109
<Alertseverity="info">{info}</Alert>
111110
</div>
112111
)}
@@ -120,10 +119,10 @@ export const SignInForm: FC<React.PropsWithChildren<SignInFormProps>> = ({
120119
)}
121120

122121
{passwordEnabled&&showPasswordAuth&&oAuthEnabled&&(
123-
<divclassName={styles.divider}>
124-
<divclassName={styles.dividerLine}/>
125-
<divclassName={styles.dividerLabel}>Or</div>
126-
<divclassName={styles.dividerLine}/>
122+
<divcss={styles.divider}>
123+
<divcss={styles.dividerLine}/>
124+
<divcss={styles.dividerLabel}>Or</div>
125+
<divcss={styles.dividerLine}/>
127126
</div>
128127
)}
129128

@@ -141,17 +140,17 @@ export const SignInForm: FC<React.PropsWithChildren<SignInFormProps>> = ({
141140

142141
{passwordEnabled&&!showPasswordAuth&&(
143142
<>
144-
<divclassName={styles.divider}>
145-
<divclassName={styles.dividerLine}/>
146-
<divclassName={styles.dividerLabel}>Or</div>
147-
<divclassName={styles.dividerLine}/>
143+
<divcss={styles.divider}>
144+
<divcss={styles.dividerLine}/>
145+
<divcss={styles.dividerLabel}>Or</div>
146+
<divcss={styles.dividerLine}/>
148147
</div>
149148

150149
<Button
151150
fullWidth
152151
size="large"
153152
onClick={()=>setShowPasswordAuth(true)}
154-
startIcon={<EmailIconclassName={styles.icon}/>}
153+
startIcon={<EmailIconcss={styles.icon}/>}
155154
>
156155
Email and password
157156
</Button>

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp