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

Commitea7e55f

Browse files
refactor(site): Adjust icon sizes and show password btn in login page (#5992)
1 parent9ff313a commitea7e55f

File tree

4 files changed

+27
-16
lines changed

4 files changed

+27
-16
lines changed

‎site/src/components/SignInForm/OAuthSignInForm.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,10 @@ type OAuthSignInFormProps = {
1414
authMethods?:AuthMethods
1515
}
1616

17-
constuseStyles=makeStyles(()=>({
17+
constuseStyles=makeStyles((theme)=>({
1818
buttonIcon:{
19-
width:14,
20-
height:14,
19+
width:theme.spacing(2),
20+
height:theme.spacing(2),
2121
},
2222
}))
2323

@@ -62,8 +62,7 @@ export const OAuthSignInForm: FC<OAuthSignInFormProps> = ({
6262
<img
6363
alt="Open ID Connect icon"
6464
src={authMethods.oidc.iconUrl}
65-
width="24"
66-
height="24"
65+
className={styles.buttonIcon}
6766
/>
6867
) :(
6968
<KeyIconclassName={styles.buttonIcon}/>

‎site/src/components/SignInForm/SignInForm.tsx

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import{makeStyles}from"@material-ui/core/styles"
2-
importTypographyfrom"@material-ui/core/Typography"
32
import{FormikTouched}from"formik"
43
import{FC,useState}from"react"
54
import{AuthMethods}from"../../api/typesGenerated"
@@ -8,6 +7,8 @@ import { Maybe } from "../Conditionals/Maybe"
87
import{PasswordSignInForm}from"./PasswordSignInForm"
98
import{OAuthSignInForm}from"./OAuthSignInForm"
109
import{BuiltInAuthFormValues}from"./SignInForm.types"
10+
importButtonfrom"@material-ui/core/Button"
11+
importEmailIconfrom"@material-ui/icons/EmailOutlined"
1112

1213
exportenumLoginErrors{
1314
AUTH_ERROR="authError",
@@ -66,11 +67,9 @@ const useStyles = makeStyles((theme) => ({
6667
fontSize:12,
6768
letterSpacing:1,
6869
},
69-
showPasswordLink:{
70-
cursor:"pointer",
71-
fontSize:12,
72-
color:theme.palette.text.secondary,
73-
marginTop:12,
70+
icon:{
71+
width:theme.spacing(2),
72+
height:theme.spacing(2),
7473
},
7574
}))
7675

@@ -131,13 +130,22 @@ export const SignInForm: FC<React.PropsWithChildren<SignInFormProps>> = ({
131130
authMethods={authMethods}
132131
/>
133132
</Maybe>
133+
134134
<Maybecondition={!showPasswordAuth}>
135-
<Typography
136-
className={styles.showPasswordLink}
135+
<divclassName={styles.divider}>
136+
<divclassName={styles.dividerLine}/>
137+
<divclassName={styles.dividerLabel}>Or</div>
138+
<divclassName={styles.dividerLine}/>
139+
</div>
140+
141+
<Button
142+
fullWidth
137143
onClick={()=>setShowPasswordAuth(true)}
144+
variant="contained"
145+
startIcon={<EmailIconclassName={styles.icon}/>}
138146
>
139147
{loginPageTranslation.t("showPassword")}
140-
</Typography>
148+
</Button>
141149
</Maybe>
142150
</div>
143151
)

‎site/src/i18n/en/loginPage.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
22
"signInTo":"Sign in to",
3-
"showPassword":"Show password login"
3+
"showPassword":"Email and password"
44
}

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@ import {
1111
import{server}from"../../testHelpers/server"
1212
import{LoginPage}from"./LoginPage"
1313
import*asTypesGenfrom"api/typesGenerated"
14+
import{i18n}from"i18n"
15+
16+
const{ t}=i18n
1417

1518
describe("LoginPage",()=>{
1619
beforeEach(()=>{
@@ -143,7 +146,8 @@ describe("LoginPage", () => {
143146
expect(screen.queryByText(Language.passwordSignIn)).not.toBeInTheDocument()
144147
awaitscreen.findByText(Language.githubSignIn)
145148

146-
constshowPasswordAuthLink=screen.getByText("Show password login")
149+
constshowPasswordLabel=t("showPassword",{ns:"loginPage"})
150+
constshowPasswordAuthLink=screen.getByText(showPasswordLabel)
147151
awaituserEvent.click(showPasswordAuthLink)
148152

149153
awaitscreen.findByText(Language.passwordSignIn)

0 commit comments

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