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

refactor(console): add sign in method button (#2277)

Browse source
This commit is contained in:
Xiao Yijun 2022-10-31 18:41:29 +08:00 • committed by GitHub
parent 2801bf68f9
commit cb46ad9fd6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 100 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
packages/console/src/components/ActionMenu/index.tsx
View file

@ -16,7 +16,8 @@ type Props = {
buttonProps: ButtonProps;
title?: ReactNode;
dropdownHorizontalAlign?: HorizontalAlignment;
dropDownClassName?: string;
dropdownClassName?: string;
isDropdownFullWidth?: boolean;
};
const ActionMenu = ({
@ -24,7 +25,8 @@ const ActionMenu = ({
buttonProps,
title,
dropdownHorizontalAlign,
dropDownClassName,
dropdownClassName,
isDropdownFullWidth = false,
}: Props) => {
const [isOpen, setIsOpen] = useState(false);
const anchorReference = useRef<HTMLDivElement>(null);
@ -42,8 +44,9 @@ const ActionMenu = ({
title={title}
anchorRef={anchorReference}
isOpen={isOpen}
className={classNames(styles.content, dropDownClassName)}
className={classNames(styles.content, dropdownClassName)}
horizontalAlign={dropdownHorizontalAlign}
isFullWidth={isDropdownFullWidth}
onClose={() => {
setIsOpen(false);
}}

63
packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SignInMethodEditBox/AddButton.tsx Normal file
View file

@ -0,0 +1,63 @@
import type { SignInIdentifier } from '@logto/schemas';
import classNames from 'classnames';
import { useTranslation } from 'react-i18next';
import { snakeCase } from 'snake-case';
import Plus from '@/assets/images/plus.svg';
import ActionMenu from '@/components/ActionMenu';
import type { Props as ButtonProps } from '@/components/Button';
import { DropdownItem } from '@/components/Dropdown';
import * as styles from './index.module.scss';
type Props = {
options: SignInIdentifier[];
onSelected: (signInIdentifier: SignInIdentifier) => void;
hasSelectedIdentifiers: boolean;
};
const AddButton = ({ options, onSelected, hasSelectedIdentifiers }: Props) => {
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
if (options.length === 0) {
return null;
}
const addSignInMethodButtonProps: ButtonProps = {
type: 'default',
size: 'medium',
title: 'sign_in_exp.sign_up_and_sign_in.sign_in.add_sign_in_method',
icon: <Plus className={styles.plusIcon} />,
};
const addAnotherButtonProps: ButtonProps = {
type: 'text',
size: 'small',
title: 'general.add_another',
};
return (
<ActionMenu
buttonProps={hasSelectedIdentifiers ? addAnotherButtonProps : addSignInMethodButtonProps}
dropdownHorizontalAlign="start"
dropdownClassName={classNames(
hasSelectedIdentifiers
? styles.addAnotherSignInMethodDropdown
: styles.addSignInMethodDropDown
)}
isDropdownFullWidth={!hasSelectedIdentifiers}
>
{options.map((identifier) => (
<DropdownItem
key={identifier}
onClick={() => {
onSelected(identifier);
}}
>
{t('sign_in_exp.sign_up_and_sign_in.identifiers', { context: snakeCase(identifier) })}
</DropdownItem>
))}
</ActionMenu>
);
};
export default AddButton;

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

@ -1,46 +0,0 @@
import type { SignInIdentifier } from '@logto/schemas';
import { useTranslation } from 'react-i18next';
import { snakeCase } from 'snake-case';
import ActionMenu from '@/components/ActionMenu';
import { DropdownItem } from '@/components/Dropdown';
import * as styles from './index.module.scss';
type Props = {
options: SignInIdentifier[];
onSelected: (signInIdentifier: SignInIdentifier) => void;
};
const AddSignInMethodButton = ({ options, onSelected }: Props) => {
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
if (options.length === 0) {
return null;
}
return (
<ActionMenu
buttonProps={{
type: 'text',
size: 'small',
title: 'general.add_another',
}}
dropdownHorizontalAlign="start"
dropDownClassName={styles.addSignInMethodDropdown}
>
{options.map((identifier) => (
<DropdownItem
key={identifier}
onClick={() => {
onSelected(identifier);
}}
>
{t('sign_in_exp.sign_up_and_sign_in.identifiers', { context: snakeCase(identifier) })}
</DropdownItem>
))}
</ActionMenu>
);
};
export default AddSignInMethodButton;

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

@ -42,6 +42,14 @@
}
}
.addSignInMethodDropdown {
.plusIcon {
color: var(--color-text-secondary);
}
.addAnotherSignInMethodDropdown {
min-width: 208px;
}
.addSignInMethodDropDown {
min-width: unset;
}

8
packages/console/src/pages/SignInExperience/tabs/SignUpAndSignInTab/components/SignInMethodEditBox/index.tsx
View file

@ -7,7 +7,7 @@ import DraggableItem from '@/components/Transfer/DraggableItem';
import { signInIdentifiers, signInIdentifierToRequiredConnectorMapping } from '../../constants';
import ConnectorSetupWarning from '../ConnectorSetupWarning';
import AddSignInMethodButton from './AddSignInMethodButton';
import AddButton from './AddButton';
import SignInMethodItem from './SignInMethodItem';
import type { SignInMethod } from './types';
import {
@ -166,7 +166,11 @@ const SignInMethodEditBox = ({
[]
)}
/>
<AddSignInMethodButton options={signInIdentifierOptions} onSelected={addSignInMethod} />
<AddButton
options={signInIdentifierOptions}
hasSelectedIdentifiers={value.length > 0}
onSelected={addSignInMethod}
/>
</div>
);
};

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

@ -1,6 +1,10 @@
@use '@/scss/underscore' as _;
.dropdown {
min-width: unset;
}
.addAnotherDropdown {
min-width: 208px;
}

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

@ -1,3 +1,5 @@
import classNames from 'classnames';
import Plus from '@/assets/images/plus.svg';
import ActionMenu from '@/components/ActionMenu';
import type { Props as ButtonProps } from '@/components/Button';
@ -36,7 +38,10 @@ const AddButton = ({ options, onSelected, hasSelectedConnectors }: Props) => {
<ActionMenu
buttonProps={hasSelectedConnectors ? addAnotherButtonProps : addSocialConnectorButtonProps}
dropdownHorizontalAlign="start"
dropDownClassName={styles.dropdown}
dropdownClassName={classNames(
hasSelectedConnectors ? styles.addAnotherDropdown : styles.dropdown
)}
isDropdownFullWidth={!hasSelectedConnectors}
>
{options.map(({ target, logo, name, connectors }) => (
<DropdownItem

1
packages/phrases/src/locales/en/translation/admin-console/sign-in-exp.ts
View file

@ -58,6 +58,7 @@ const sign_in_exp = {
sign_in_identifier_and_auth: 'Sign in identifier and authentication',
description:
'Users can use any one of the selected ways to sign in. Drag and drop to define identifier priority regarding the sign in flow. You can also define the password or verification code priority.',
add_sign_in_method: 'Add Sign-in Method',
password_auth: 'Password',
verification_code_auth: 'Verification code',
auth_swap_tip: 'Swap to change the priority',

1
packages/phrases/src/locales/fr/translation/admin-console/sign-in-exp.ts
View file

@ -60,6 +60,7 @@ const sign_in_exp = {
sign_in_identifier_and_auth: 'Sign in identifier and authentication', // UNTRANSLATED
description:
'Users can use any one of the selected ways to sign in. Drag and drop to define identifier priority regarding the sign in flow. You can also define the password or verification code priority.', // UNTRANSLATED
add_sign_in_method: 'Add Sign-in Method', // UNTRANSLATED
password_auth: 'Password', // UNTRANSLATED
verification_code_auth: 'Verification code', // UNTRANSLATED
auth_swap_tip: 'Swap to change the priority', // UNTRANSLATED

1
packages/phrases/src/locales/ko/translation/admin-console/sign-in-exp.ts
View file

@ -55,6 +55,7 @@ const sign_in_exp = {
sign_in_identifier_and_auth: 'Sign in identifier and authentication', // UNTRANSLATED
description:
'Users can use any one of the selected ways to sign in. Drag and drop to define identifier priority regarding the sign in flow. You can also define the password or verification code priority.', // UNTRANSLATED
add_sign_in_method: 'Add Sign-in Method', // UNTRANSLATED
password_auth: 'Password', // UNTRANSLATED
verification_code_auth: 'Verification code', // UNTRANSLATED
auth_swap_tip: 'Swap to change the priority', // UNTRANSLATED

1
packages/phrases/src/locales/pt-pt/translation/admin-console/sign-in-exp.ts
View file

@ -58,6 +58,7 @@ const sign_in_exp = {
sign_in_identifier_and_auth: 'Sign in identifier and authentication', // UNTRANSLATED
description:
'Users can use any one of the selected ways to sign in. Drag and drop to define identifier priority regarding the sign in flow. You can also define the password or verification code priority.', // UNTRANSLATED
add_sign_in_method: 'Add Sign-in Method', // UNTRANSLATED
password_auth: 'Password', // UNTRANSLATED
verification_code_auth: 'Verification code', // UNTRANSLATED
auth_swap_tip: 'Swap to change the priority', // UNTRANSLATED

1
packages/phrases/src/locales/tr-tr/translation/admin-console/sign-in-exp.ts
View file

@ -59,6 +59,7 @@ const sign_in_exp = {
sign_in_identifier_and_auth: 'Sign in identifier and authentication', // UNTRANSLATED
description:
'Users can use any one of the selected ways to sign in. Drag and drop to define identifier priority regarding the sign in flow. You can also define the password or verification code priority.', // UNTRANSLATED
add_sign_in_method: 'Add Sign-in Method', // UNTRANSLATED
password_auth: 'Password', // UNTRANSLATED
verification_code_auth: 'Verification code', // UNTRANSLATED
auth_swap_tip: 'Swap to change the priority', // UNTRANSLATED

1
packages/phrases/src/locales/zh-cn/translation/admin-console/sign-in-exp.ts
View file

@ -56,6 +56,7 @@ const sign_in_exp = {
sign_in_identifier_and_auth: 'Sign in identifier and authentication', // UNTRANSLATED
description:
'Users can use any one of the selected ways to sign in. Drag and drop to define identifier priority regarding the sign in flow. You can also define the password or verification code priority.', // UNTRANSLATED
add_sign_in_method: 'Add Sign-in Method', // UNTRANSLATED
password_auth: 'Password', // UNTRANSLATED
verification_code_auth: 'Verification code', // UNTRANSLATED
auth_swap_tip: 'Swap to change the priority', // UNTRANSLATED