Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-06 20:40:08 -05:00
Code Issues Activity

refactor(console): add buttons in sie sign-up and sign-in form (#2276)

Browse source
This commit is contained in:
Xiao Yijun 2022-10-31 18:14:06 +08:00 committed by GitHub
parent d81c497751
commit 30f2f44706
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 20 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SignInMethodEditBox/AddSignInMethodButton.tsx
View file

@ -19,11 +19,6 @@ const AddSignInMethodButton = ({ options, onSelected }: Props) => {
return null;
}
const candidates = options.map((identifier) => ({
value: identifier,
title: t('sign_in_exp.sign_up_and_sign_in.identifiers', { context: snakeCase(identifier) }),
}));
return (
<ActionMenu
buttonProps={{
@ -34,14 +29,14 @@ const AddSignInMethodButton = ({ options, onSelected }: Props) => {
dropdownHorizontalAlign="start"
dropDownClassName={styles.addSignInMethodDropdown}
>
{candidates.map(({ value, title }) => (
{options.map((identifier) => (
<DropdownItem
key={value}
key={identifier}
onClick={() => {
onSelected(value);
onSelected(identifier);
}}
>
{title}
{t('sign_in_exp.sign_up_and_sign_in.identifiers', { context: snakeCase(identifier) })}
</DropdownItem>
))}
</ActionMenu>

5
packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SocialConnectorEditBox/AddButton.module.scss
View file

@ -16,11 +16,6 @@
margin-right: _.unit(3);
width: 20px;
height: 20px;
img {
width: 20px;
height: 20px;
}
}
.name {

39
packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SocialConnectorEditBox/AddButton.tsx
View file

@ -19,26 +19,6 @@ const AddButton = ({ options, onSelected, hasSelectedConnectors }: Props) => {
return null;
}
const candidates = options.map(({ target, logo, name, connectors }) => ({
value: target,
title: (
<div className={styles.title}>
<div className={styles.logo}>
<img src={logo} alt={target} />
</div>
<UnnamedTrans resource={name} className={styles.name} />
{connectors.length > 1 &&
connectors
.filter(({ enabled }) => enabled)
.map(({ platform }) => (
<div key={platform} className={styles.icon}>
{platform && <ConnectorPlatformIcon platform={platform} />}
</div>
))}
</div>
),
}));
const addSocialConnectorButtonProps: ButtonProps = {
type: 'default',
size: 'medium',
@ -58,14 +38,25 @@ const AddButton = ({ options, onSelected, hasSelectedConnectors }: Props) => {
dropdownHorizontalAlign="start"
dropDownClassName={styles.dropdown}
>
{candidates.map(({ value, title }) => (
{options.map(({ target, logo, name, connectors }) => (
<DropdownItem
key={value}
key={target}
onClick={() => {
onSelected(value);
onSelected(target);
}}
>
{title}
<div className={styles.title}>
<img src={logo} alt={target} className={styles.logo} />
<UnnamedTrans resource={name} className={styles.name} />
{connectors.length > 1 &&
connectors
.filter(({ enabled }) => enabled)
.map(({ platform }) => (
<div key={platform} className={styles.icon}>
{platform && <ConnectorPlatformIcon platform={platform} />}
</div>
))}
</div>
</DropdownItem>
))}
</ActionMenu>

5
packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SocialConnectorEditBox/SelectedConnectorItem.module.scss
View file

@ -26,11 +26,6 @@
margin: auto _.unit(3);
width: 20px;
height: 20px;
img {
width: 20px;
height: 20px;
}
}
.name {

4
packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SocialConnectorEditBox/SelectedConnectorItem.tsx
View file

@ -17,9 +17,7 @@ const SelectedConnectorItem = ({ data: { logo, target, name, connectors }, onDel
<div className={styles.item}>
<div className={styles.info}>
<Draggable className={styles.draggableIcon} />
<div className={styles.logo}>
<img src={logo} alt={target} />
</div>
<img src={logo} alt={target} className={styles.logo} />
<UnnamedTrans resource={name} className={styles.name} />
{connectors.length > 1 &&
connectors