Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-02-24 22:05:56 -05:00
Code Issues Activity

refactor(console): the swap icon should be fixed in the sign-in method item (#2361)

Browse source
This commit is contained in:
Xiao Yijun 2022-11-09 19:34:44 +08:00 • committed by GitHub
parent 23315de00f
commit d1a5592872
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/console/src/components/Checkbox/index.tsx
View file

@ -1,3 +1,4 @@
import classNames from 'classnames';
import { nanoid } from 'nanoid'; import { nanoid } from 'nanoid';
import type { ReactNode } from 'react'; import type { ReactNode } from 'react';
import { useState } from 'react'; import { useState } from 'react';
@ -12,13 +13,14 @@ type Props = {
label?: ReactNode; label?: ReactNode;
// eslint-disable-next-line react/boolean-prop-naming // eslint-disable-next-line react/boolean-prop-naming
disabled: boolean; disabled: boolean;
className?: string;
}; };
const Checkbox = ({ value, onChange, label, disabled }: Props) => { const Checkbox = ({ value, onChange, label, disabled, className }: Props) => {
const [id, setId] = useState(nanoid()); const [id, setId] = useState(nanoid());
return ( return (
<div className={styles.checkbox}> <div className={classNames(styles.checkbox, className)}>
<input <input
id={id} id={id}
type="checkbox" type="checkbox"

3
packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SignInMethodEditBox/SignInMethodItem.tsx
View file

@ -53,6 +53,7 @@ const SignInMethodItem = ({
)} )}
> >
<Checkbox <Checkbox
className={styles.checkBox}
label={t('sign_in_exp.sign_up_and_sign_in.sign_in.password_auth')} label={t('sign_in_exp.sign_up_and_sign_in.sign_in.password_auth')}
value={password} value={password}
disabled={!isPasswordCheckable} disabled={!isPasswordCheckable}
@ -63,6 +64,7 @@ const SignInMethodItem = ({
{identifier !== SignInIdentifier.Username && ( {identifier !== SignInIdentifier.Username && (
<> <>
<IconButton <IconButton
className={styles.swapButton}
tooltip="sign_in_exp.sign_up_and_sign_in.sign_in.auth_swap_tip" tooltip="sign_in_exp.sign_up_and_sign_in.sign_in.auth_swap_tip"
onClick={() => { onClick={() => {
onToggleVerificationPrimary(identifier); onToggleVerificationPrimary(identifier);
@ -71,6 +73,7 @@ const SignInMethodItem = ({
<SwitchArrowIcon /> <SwitchArrowIcon />
</IconButton> </IconButton>
<Checkbox <Checkbox
className={styles.checkBox}
label={t('sign_in_exp.sign_up_and_sign_in.sign_in.verification_code_auth')} label={t('sign_in_exp.sign_up_and_sign_in.sign_in.verification_code_auth')}
value={verificationCode} value={verificationCode}
disabled={!isVerificationCodeCheckable} disabled={!isVerificationCodeCheckable}

9
packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SignInMethodEditBox/index.module.scss
View file

@ -36,6 +36,15 @@
padding: 0 _.unit(2); padding: 0 _.unit(2);
flex-grow: 1; flex-grow: 1;
.checkBox {
flex-grow: 1;
width: 100%;
}
.swapButton {
margin-right: _.unit(4);
}
&.verifyCodePrimary { &.verifyCodePrimary {
flex-direction: row-reverse; flex-direction: row-reverse;
} }