mirror of
https://github.com/logto-io/logto.git
synced 2025-03-31 22:51:25 -05:00
feat(console): add fake social connectors in onboarding (#3455)
This commit is contained in:
Xiao Yijun
GitHub
parent
70709044cc
commit
30ed6ff998
23 changed files with 316 additions and 93 deletions
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.4567 10.6254C15.4655 9.86 15.6684 9.10939 16.0465 8.44382C16.4245 7.77825 16.9652 7.2195 17.6181 6.8199C17.2031 6.22905 16.6568 5.74242 16.0221 5.39821C15.3874 5.05401 14.6816 4.86159 13.9601 4.83606C12.4024 4.67816 10.9207 5.753 10.1315 5.753C9.34171 5.753 8.12245 4.85925 6.8306 4.88391C5.98278 4.90749 5.15562 5.15091 4.43017 5.59032C3.70472 6.02974 3.10587 6.65008 2.69229 7.39057C0.929897 10.4508 2.24244 14.9843 3.95993 17.4673C4.80038 18.6812 5.8022 20.0485 7.11769 19.9987C8.38539 19.9489 8.86385 19.1799 10.3944 19.1799C11.9254 19.1799 12.356 19.9987 13.6952 19.974C15.0581 19.9488 15.9232 18.735 16.7569 17.5166C17.3535 16.6404 17.8197 15.6823 18.1409 14.6721C17.3474 14.3332 16.6704 13.7694 16.1934 13.0503C15.7164 12.3312 15.4603 11.4883 15.4567 10.6254ZM12.9398 3.1933C13.6947 2.308 14.0686 1.16004 13.9801 0C12.8405 0.110543 11.7864 0.652885 11.034 1.51581C10.6585 1.93385 10.3711 2.42321 10.1888 2.95471C10.0065 3.48621 9.93309 4.04897 9.97295 4.60944C10.5431 4.61731 11.1073 4.49364 11.6219 4.24804C12.1364 4.00243 12.5874 3.64151 12.9398 3.1933Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1,17 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_390_81327)">
|
||||
<path d="M9.25 7.74518V12.2452L10 17.0277L19.8925 10.6677L16 8.49518L9.25 7.74518Z" fill="#53B1E0"/>
|
||||
<path d="M22 13.1352L10 20.9177L9.25 19.7452L10 18.4327L20.6675 11.5752L22 13.1352ZM10 -0.924805L9.25 3.9952L10 8.3552L19.8925 10.6677L10 -0.924805Z" fill="url(#paint0_linear_390_81327)"/>
|
||||
<path d="M9.99998 8.35522L3.99998 8.49522L0.107483 10.6677L9.99998 17.0277V8.35522Z" fill="#9CEBFF"/>
|
||||
<path d="M-0.6675 11.5752L10 18.4327V20.9177L-2 13.1352L-0.6675 11.5752ZM0.1075 10.6677L10 8.3552V-0.924805L0.1075 10.6677Z" fill="#50E6FF"/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_390_81327" x1="6.175" y1="1.7952" x2="15.875" y2="16.8452" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#54AEF0"/>
|
||||
<stop offset="1" stop-color="#3499E4"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_390_81327">
|
||||
<rect width="20" height="20" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 995 B |
|
|
@ -0,0 +1,11 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1812_100173)">
|
||||
<path d="M20 10C20 4.47658 15.5234 0 10 0C4.47658 0 0 4.47658 0 10C0 14.9922 3.65625 19.1289 8.4375 19.8789V12.8906H5.89842V10H8.4375V7.79688C8.4375 5.291 9.92971 3.90625 12.2148 3.90625C13.3086 3.90625 14.4531 4.10156 14.4531 4.10156V6.5625H13.1914C11.9492 6.5625 11.5625 7.334 11.5625 8.125V10H14.3359L13.8926 12.8906H11.5625V19.8789C16.3438 19.1289 20 14.9922 20 10Z" fill="#1877F2"/>
|
||||
<path d="M13.8926 12.8906L14.3359 10H11.5625V8.125C11.5625 7.334 11.9492 6.5625 13.1914 6.5625H14.4531V4.10156C14.4531 4.10156 13.3086 3.90625 12.2149 3.90625C9.92973 3.90625 8.43752 5.291 8.43752 7.79687V10H5.89844V12.8906H8.43752V19.8789C8.94727 19.959 9.46877 20 10 20C10.5313 20 11.0528 19.959 11.5625 19.8789V12.8906H13.8926Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1812_100173">
|
||||
<rect width="20" height="20" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 988 B |
|
|
@ -0,0 +1,12 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1812_100162)">
|
||||
<path d="M20 18.4375C20 19.3005 19.3005 20 18.4375 20H1.5625C0.699531 20 0 19.3005 0 18.4375V1.5625C0 0.699531 0.699531 0 1.5625 0H18.4375C19.3005 0 20 0.699531 20 1.5625V18.4375Z" fill="#FFE812"/>
|
||||
<path d="M10 2.8125C5.51266 2.8125 1.875 5.6807 1.875 9.21875C1.875 11.5062 3.39578 13.5133 5.68344 14.6466C5.55898 15.0759 4.88367 17.4079 4.8568 17.5911C4.8568 17.5911 4.84063 17.7287 4.92977 17.7812C5.01891 17.8337 5.12375 17.793 5.12375 17.793C5.37937 17.7573 8.08805 15.8546 8.55688 15.5242C9.02523 15.5905 9.5075 15.625 10 15.625C14.4873 15.625 18.125 12.7569 18.125 9.21875C18.125 5.6807 14.4873 2.8125 10 2.8125Z" fill="black"/>
|
||||
<path d="M5.50781 11.4551C5.2493 11.4551 5.03906 11.2543 5.03906 11.0074V8.22266H4.30766C4.05398 8.22266 3.84766 8.01672 3.84766 7.76367C3.84766 7.51062 4.05406 7.30469 4.30766 7.30469H6.70797C6.96164 7.30469 7.16797 7.51062 7.16797 7.76367C7.16797 8.01672 6.96156 8.22266 6.70797 8.22266H5.97656V11.0074C5.97656 11.2543 5.76633 11.4551 5.50781 11.4551ZM9.61813 11.449C9.42266 11.449 9.27313 11.3696 9.22805 11.242L8.99594 10.6343L7.56656 10.6342L7.3343 11.2423C7.28938 11.3697 7.13992 11.449 6.94445 11.449C6.84164 11.4491 6.74 11.427 6.64648 11.3843C6.51727 11.3247 6.39305 11.1608 6.53539 10.7187L7.65664 7.76742C7.73563 7.54297 7.97555 7.31172 8.28086 7.30477C8.58703 7.31164 8.82695 7.54297 8.90609 7.76789L10.0269 10.7178C10.1695 11.1609 10.0453 11.3249 9.91609 11.3844C9.82255 11.427 9.72093 11.4491 9.61813 11.449ZM8.74945 9.80398L8.28125 8.47391L7.81305 9.80398H8.74945ZM10.7813 11.3867C10.5335 11.3867 10.332 11.1939 10.332 10.957V7.77344C10.332 7.51492 10.5467 7.30469 10.8105 7.30469C11.0744 7.30469 11.2891 7.51492 11.2891 7.77344V10.5273H12.2852C12.5329 10.5273 12.7344 10.7202 12.7344 10.957C12.7344 11.1939 12.5329 11.3867 12.2852 11.3867H10.7813ZM13.3855 11.449C13.127 11.449 12.9167 11.2387 12.9167 10.9802V7.77344C12.9167 7.51492 13.127 7.30469 13.3855 7.30469C13.644 7.30469 13.8542 7.51492 13.8542 7.77344V8.78094L15.162 7.47312C15.2293 7.40586 15.3217 7.36883 15.422 7.36883C15.5391 7.36883 15.6566 7.4193 15.7446 7.50727C15.8267 7.5893 15.8757 7.69484 15.8824 7.80445C15.8892 7.915 15.8524 8.01633 15.779 8.08984L14.7108 9.15789L15.8646 10.6865C15.9019 10.7355 15.929 10.7915 15.9445 10.8511C15.9599 10.9107 15.9634 10.9728 15.9546 11.0337C15.9463 11.0947 15.9259 11.1535 15.8947 11.2065C15.8634 11.2596 15.822 11.306 15.7727 11.3429C15.6917 11.4045 15.5926 11.4377 15.4908 11.4375C15.4182 11.4378 15.3465 11.4212 15.2814 11.3888C15.2164 11.3564 15.1599 11.3093 15.1163 11.2512L14.017 9.79461L13.8544 9.95727V10.98C13.8542 11.1043 13.8048 11.2235 13.7169 11.3114C13.629 11.3994 13.5098 11.4488 13.3855 11.449Z" fill="#FFE812"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1812_100162">
|
||||
<rect width="20" height="20" rx="6" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
|
|
@ -0,0 +1,11 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_390_81345)">
|
||||
<path d="M20 11.5001L19.5 7.00012L18.05 7.95012C16.7 7.10012 15 6.50012 13.1 6.20012C13.1 6.20012 12.15 6.00012 10.9 6.00012C9.65 6.00012 8.5 6.15012 8.5 6.15012C3.65 6.75012 0 9.50012 0 12.8001C0 16.2001 3.75 19.0001 9.5 19.5001V17.5501C5.55 17.0001 3.05 15.1501 3.05 12.8001C3.05 10.6001 5.35 8.75012 8.5 8.15012C8.5 8.15012 10.95 7.60012 13.1 8.25012C14.15 8.50012 15.1 8.85012 15.9 9.35012L14 10.5001L20 11.5001Z" fill="#9E9E9E"/>
|
||||
<path d="M9.49988 2.00006V19.5001L12.4999 18.0001V0.500061L9.49988 2.00006Z" fill="#FF9800"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_390_81345">
|
||||
<rect width="20" height="20" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 778 B |
|
|
@ -0,0 +1,5 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 16.749C0 14.5526 2.09529 6.35844 6.42743 0.867493C3.36944 6.64003 1.59059 10.5486 2.8881 13.5952C3.90742 15.9887 9.14564 15.2284 11.9771 14.271C6.93709 16.5519 1.76495 16.8616 0 16.749Z" fill="#C1272D"/>
|
||||
<path d="M9.38372 0.625C11.2964 1.72319 17.3844 7.62486 20 14.1014C16.5021 8.58144 13.9879 5.09513 10.6861 4.68928C8.09208 4.37043 6.13505 9.26202 5.55304 12.1793C6.08683 6.69817 8.40317 2.08875 9.38372 0.625Z" fill="#C1272D"/>
|
||||
<path d="M18.7766 16.7297C16.864 17.8279 8.68068 20.1205 1.73297 19.1348C8.28881 18.8823 12.5819 18.4601 14.5862 15.8192C16.1609 13.7446 12.8797 9.6133 10.6302 7.65338C15.1365 10.8537 17.9923 15.1534 18.7766 16.7297Z" fill="#C1272D"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 782 B |
|
|
@ -0,0 +1,65 @@
|
|||
@use '@/scss/underscore' as _;
|
||||
|
||||
.item {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 12px;
|
||||
min-height: 80px;
|
||||
padding: _.unit(5);
|
||||
font: var(--font-label-2);
|
||||
user-select: none;
|
||||
background-color: var(--color-layer-1);
|
||||
color: var(--color-text);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
color: var(--color-text-secondary);
|
||||
margin-right: _.unit(4);
|
||||
vertical-align: middle;
|
||||
|
||||
> svg {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.tag {
|
||||
font: var(--font-body-3);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.trailingTag {
|
||||
margin-left: _.unit(1);
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
border-color: var(--color-layer-2);
|
||||
background-color: var(--color-layer-2);
|
||||
|
||||
&:hover {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.disabled).selected {
|
||||
border-color: var(--color-primary);
|
||||
background-color: var(--color-hover-variant);
|
||||
color: var(--color-primary);
|
||||
|
||||
.icon {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.disabled):hover {
|
||||
cursor: pointer;
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
|
||||
.icon {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
import { conditional } from '@silverhand/essentials';
|
||||
import classNames from 'classnames';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { Tooltip } from '@/components/Tip';
|
||||
import { onKeyDownHandler } from '@/utils/a11y';
|
||||
|
||||
import type { MultiCardSelectorOption } from '../types';
|
||||
import * as styles from './CardItem.module.scss';
|
||||
|
||||
type Props = {
|
||||
option: MultiCardSelectorOption;
|
||||
isSelected: boolean;
|
||||
onClick: (value: string) => void;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
const CardItem = ({
|
||||
option: { icon, title, value, tag, trailingTag, isDisabled, disabledTip },
|
||||
isSelected,
|
||||
onClick,
|
||||
className,
|
||||
}: Props) => {
|
||||
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
|
||||
|
||||
return (
|
||||
<Tooltip content={conditional(isDisabled && disabledTip && <>{t(disabledTip)}</>)}>
|
||||
<div
|
||||
key={value}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
className={classNames(
|
||||
styles.item,
|
||||
isDisabled && styles.disabled,
|
||||
isSelected && styles.selected,
|
||||
className
|
||||
)}
|
||||
onClick={() => {
|
||||
if (isDisabled) {
|
||||
return;
|
||||
}
|
||||
onClick(value);
|
||||
}}
|
||||
onKeyDown={onKeyDownHandler(() => {
|
||||
if (isDisabled) {
|
||||
return;
|
||||
}
|
||||
onClick(value);
|
||||
})}
|
||||
>
|
||||
{icon && <span className={styles.icon}>{icon}</span>}
|
||||
<div className={styles.content}>
|
||||
<div>
|
||||
{typeof title === 'string' ? t(title) : title}
|
||||
{trailingTag && (
|
||||
<span className={classNames(styles.tag, styles.trailingTag)}>{t(trailingTag)}</span>
|
||||
)}
|
||||
</div>
|
||||
{tag && <span className={styles.tag}>{t(tag)}</span>}
|
||||
</div>
|
||||
</div>
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
|
||||
export default CardItem;
|
||||
|
|
@ -5,58 +5,3 @@
|
|||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: _.unit(4);
|
||||
}
|
||||
|
||||
.option {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 12px;
|
||||
min-height: 80px;
|
||||
padding: _.unit(5);
|
||||
font: var(--font-label-2);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
background-color: var(--color-layer-1);
|
||||
color: var(--color-text);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
color: var(--color-text-secondary);
|
||||
margin-right: _.unit(4);
|
||||
vertical-align: middle;
|
||||
|
||||
> svg {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.tag {
|
||||
font: var(--font-body-3);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.trailingTag {
|
||||
margin-left: _.unit(1);
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
border-color: var(--color-primary);
|
||||
background-color: var(--color-hover-variant);
|
||||
color: var(--color-primary);
|
||||
|
||||
.icon {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
|
||||
.icon {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
import classNames from 'classnames';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { onKeyDownHandler } from '@/utils/a11y';
|
||||
|
||||
import type { MultiCardSelectorOption } from '../types';
|
||||
import CardItem from './CardItem';
|
||||
import * as styles from './index.module.scss';
|
||||
|
||||
type Props = {
|
||||
|
|
@ -23,8 +21,6 @@ const MultiCardSelector = ({
|
|||
className,
|
||||
optionClassName,
|
||||
}: Props) => {
|
||||
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
|
||||
|
||||
const onToggle = (value: string) => {
|
||||
if (selectedValues.includes(value) && selectedValues.length === 1 && isNotAllowEmpty) {
|
||||
return;
|
||||
|
|
@ -39,34 +35,14 @@ const MultiCardSelector = ({
|
|||
|
||||
return (
|
||||
<div className={classNames(styles.selector, className)}>
|
||||
{options.map(({ icon, title, value, tag, trailingTag }) => (
|
||||
<div
|
||||
key={value}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
className={classNames(
|
||||
styles.option,
|
||||
selectedValues.includes(value) && styles.selected,
|
||||
optionClassName
|
||||
)}
|
||||
onClick={() => {
|
||||
onToggle(value);
|
||||
}}
|
||||
onKeyDown={onKeyDownHandler(() => {
|
||||
onToggle(value);
|
||||
})}
|
||||
>
|
||||
{icon && <span className={styles.icon}>{icon}</span>}
|
||||
<div className={styles.content}>
|
||||
<div>
|
||||
{typeof title === 'string' ? t(title) : title}
|
||||
{trailingTag && (
|
||||
<span className={classNames(styles.tag, styles.trailingTag)}>{t(trailingTag)}</span>
|
||||
)}
|
||||
</div>
|
||||
{tag && <span className={styles.tag}>{t(tag)}</span>}
|
||||
</div>
|
||||
</div>
|
||||
{options.map((option) => (
|
||||
<CardItem
|
||||
key={option.value}
|
||||
option={option}
|
||||
isSelected={selectedValues.includes(option.value)}
|
||||
className={optionClassName}
|
||||
onClick={onToggle}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -12,4 +12,6 @@ export type CardSelectorOption = {
|
|||
export type MultiCardSelectorOption = CardSelectorOption & {
|
||||
tag?: AdminConsoleKey;
|
||||
trailingTag?: AdminConsoleKey;
|
||||
isDisabled?: boolean;
|
||||
disabledTip?: AdminConsoleKey;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@ import useConnectorGroups from '@/hooks/use-connector-groups';
|
|||
import type { MultiCardSelectorOption } from '@/onboarding/components/CardSelector';
|
||||
import { MultiCardSelector } from '@/onboarding/components/CardSelector';
|
||||
|
||||
import { fakeSocialTargetOptions } from '../../options';
|
||||
|
||||
type Props = {
|
||||
value: string[];
|
||||
onChange: (value: string[]) => void;
|
||||
|
|
@ -34,7 +36,13 @@ const SocialSelector = ({ value, onChange }: Props) => {
|
|||
};
|
||||
});
|
||||
|
||||
return <MultiCardSelector options={connectorOptions} value={value} onChange={onChange} />;
|
||||
return (
|
||||
<MultiCardSelector
|
||||
options={[...connectorOptions, ...fakeSocialTargetOptions]}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default SocialSelector;
|
||||
|
|
|
|||
|
|
@ -5,12 +5,20 @@ import Keyboard from '@/assets/images/keyboard.svg';
|
|||
import Label from '@/assets/images/label.svg';
|
||||
import Lock from '@/assets/images/lock.svg';
|
||||
import Mobile from '@/assets/images/mobile.svg';
|
||||
import DangerousRaw from '@/components/DangerousRaw';
|
||||
import type {
|
||||
MultiCardSelectorOption,
|
||||
CardSelectorOption,
|
||||
} from '@/onboarding/components/CardSelector';
|
||||
import { Authentication } from '@/onboarding/types';
|
||||
|
||||
import Apple from '../../assets/images/social-apple.svg';
|
||||
import AzureAd from '../../assets/images/social-azure-ad.svg';
|
||||
import Facebook from '../../assets/images/social-facebook.svg';
|
||||
import Kakao from '../../assets/images/social-kakao.svg';
|
||||
import Oidc from '../../assets/images/social-oidc.svg';
|
||||
import Smal from '../../assets/images/social-smal.svg';
|
||||
|
||||
export const identifierOptions: CardSelectorOption[] = [
|
||||
{
|
||||
icon: <Envelop />,
|
||||
|
|
@ -42,3 +50,54 @@ export const authenticationOptions: MultiCardSelectorOption[] = [
|
|||
trailingTag: 'general.cap_limit',
|
||||
},
|
||||
];
|
||||
|
||||
export const fakeSocialTargetOptions: MultiCardSelectorOption[] = [
|
||||
{
|
||||
icon: <Apple />,
|
||||
title: <DangerousRaw>Apple</DangerousRaw>,
|
||||
value: 'fake-apple',
|
||||
tag: 'cloud.sie.connectors.unlock_later',
|
||||
isDisabled: true,
|
||||
disabledTip: 'cloud.sie.connectors.unlock_later_tip',
|
||||
},
|
||||
{
|
||||
icon: <Facebook />,
|
||||
title: <DangerousRaw>Facebook</DangerousRaw>,
|
||||
value: 'fake-facebook',
|
||||
tag: 'cloud.sie.connectors.unlock_later',
|
||||
isDisabled: true,
|
||||
disabledTip: 'cloud.sie.connectors.unlock_later_tip',
|
||||
},
|
||||
{
|
||||
icon: <AzureAd />,
|
||||
title: <DangerousRaw>Azure Ad</DangerousRaw>,
|
||||
value: 'fake-azure-ad',
|
||||
tag: 'cloud.sie.connectors.unlock_later',
|
||||
isDisabled: true,
|
||||
disabledTip: 'cloud.sie.connectors.unlock_later_tip',
|
||||
},
|
||||
{
|
||||
icon: <Kakao />,
|
||||
title: <DangerousRaw>Kakao</DangerousRaw>,
|
||||
value: 'fake-kakao',
|
||||
tag: 'cloud.sie.connectors.unlock_later',
|
||||
isDisabled: true,
|
||||
disabledTip: 'cloud.sie.connectors.unlock_later_tip',
|
||||
},
|
||||
{
|
||||
icon: <Oidc />,
|
||||
title: <DangerousRaw>OIDC</DangerousRaw>,
|
||||
value: 'fake-oidc',
|
||||
tag: 'cloud.sie.connectors.unlock_later',
|
||||
isDisabled: true,
|
||||
disabledTip: 'cloud.sie.connectors.unlock_later_tip',
|
||||
},
|
||||
{
|
||||
icon: <Smal />,
|
||||
title: <DangerousRaw>SAML</DangerousRaw>,
|
||||
value: 'fake-saml',
|
||||
tag: 'cloud.sie.connectors.unlock_later',
|
||||
isDisabled: true,
|
||||
disabledTip: 'cloud.sie.connectors.unlock_later_tip',
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -89,11 +89,14 @@ export const randomSieConfigTemplate = (
|
|||
randomIndex === lastTemplateIndex ? (randomIndex + 1) % sieConfigTemplates.length : randomIndex;
|
||||
const template = sieConfigTemplates[index] ?? configTemplate1;
|
||||
|
||||
// Take the first two after shuffling.
|
||||
// Get 2 or 3 random social targets
|
||||
const randomCount = Math.floor(Math.random() * 2) + 2;
|
||||
|
||||
// Take the first randomCount after shuffling.
|
||||
const socialTargets = availableSocialTargets
|
||||
.slice()
|
||||
.sort(() => 0.5 - Math.random())
|
||||
.slice(0, 2);
|
||||
.slice(0, randomCount);
|
||||
|
||||
return {
|
||||
template: {
|
||||
|
|
|
|||
|
|
@ -89,8 +89,8 @@ describe('smoke testing for cloud', () => {
|
|||
});
|
||||
|
||||
it('can complete the onboarding user survey process and enter the sie page', async () => {
|
||||
// Select the reason option
|
||||
await expect(page).toClick('div[class$=option]', { text: 'Others' });
|
||||
// Select the first reason option
|
||||
await expect(page).toClick('div[role=button][class$=item]');
|
||||
|
||||
// Click the next button
|
||||
await expect(page).toClick('div[class$=actions] button:first-child');
|
||||
|
|
|
|||
|
|
@ -94,6 +94,11 @@ const cloud = {
|
|||
mobile_tab: 'Mobile', // UNTRANSLATED
|
||||
web_tab: 'Web', // UNTRANSLATED
|
||||
},
|
||||
connectors: {
|
||||
unlock_later: 'Unlock later', // UNTRANSLATED
|
||||
unlock_later_tip:
|
||||
'Once you have completed the onboarding process and entered the product, you will have access to even more social sign-in methods.', // UNTRANSLATED
|
||||
},
|
||||
},
|
||||
broadcast: '📣 You are participating in Logto Cloud Preview', // UNTRANSLATED
|
||||
socialCallback: {
|
||||
|
|
|
|||
|
|
@ -94,6 +94,11 @@ const cloud = {
|
|||
mobile_tab: 'Mobile',
|
||||
web_tab: 'Web',
|
||||
},
|
||||
connectors: {
|
||||
unlock_later: 'Unlock later',
|
||||
unlock_later_tip:
|
||||
'Once you have completed the onboarding process and entered the product, you will have access to even more social sign-in methods.',
|
||||
},
|
||||
},
|
||||
broadcast: '📣 You are participating in Logto Cloud Preview',
|
||||
socialCallback: {
|
||||
|
|
|
|||
|
|
@ -94,6 +94,11 @@ const cloud = {
|
|||
mobile_tab: 'Mobile', // UNTRANSLATED
|
||||
web_tab: 'Web', // UNTRANSLATED
|
||||
},
|
||||
connectors: {
|
||||
unlock_later: 'Unlock later', // UNTRANSLATED
|
||||
unlock_later_tip:
|
||||
'Once you have completed the onboarding process and entered the product, you will have access to even more social sign-in methods.', // UNTRANSLATED
|
||||
},
|
||||
},
|
||||
broadcast: '📣 You are participating in Logto Cloud Preview', // UNTRANSLATED
|
||||
socialCallback: {
|
||||
|
|
|
|||
|
|
@ -94,6 +94,11 @@ const cloud = {
|
|||
mobile_tab: 'Mobile', // UNTRANSLATED
|
||||
web_tab: 'Web', // UNTRANSLATED
|
||||
},
|
||||
connectors: {
|
||||
unlock_later: 'Unlock later', // UNTRANSLATED
|
||||
unlock_later_tip:
|
||||
'Once you have completed the onboarding process and entered the product, you will have access to even more social sign-in methods.', // UNTRANSLATED
|
||||
},
|
||||
},
|
||||
broadcast: '📣 You are participating in Logto Cloud Preview', // UNTRANSLATED
|
||||
socialCallback: {
|
||||
|
|
|
|||
|
|
@ -94,6 +94,11 @@ const cloud = {
|
|||
mobile_tab: 'Mobile', // UNTRANSLATED
|
||||
web_tab: 'Web', // UNTRANSLATED
|
||||
},
|
||||
connectors: {
|
||||
unlock_later: 'Unlock later', // UNTRANSLATED
|
||||
unlock_later_tip:
|
||||
'Once you have completed the onboarding process and entered the product, you will have access to even more social sign-in methods.', // UNTRANSLATED
|
||||
},
|
||||
},
|
||||
broadcast: '📣 You are participating in Logto Cloud Preview', // UNTRANSLATED
|
||||
socialCallback: {
|
||||
|
|
|
|||
|
|
@ -94,6 +94,11 @@ const cloud = {
|
|||
mobile_tab: 'Mobile', // UNTRANSLATED
|
||||
web_tab: 'Web', // UNTRANSLATED
|
||||
},
|
||||
connectors: {
|
||||
unlock_later: 'Unlock later', // UNTRANSLATED
|
||||
unlock_later_tip:
|
||||
'Once you have completed the onboarding process and entered the product, you will have access to even more social sign-in methods.', // UNTRANSLATED
|
||||
},
|
||||
},
|
||||
broadcast: '📣 You are participating in Logto Cloud Preview', // UNTRANSLATED
|
||||
socialCallback: {
|
||||
|
|
|
|||
|
|
@ -94,6 +94,11 @@ const cloud = {
|
|||
mobile_tab: 'Mobile', // UNTRANSLATED
|
||||
web_tab: 'Web', // UNTRANSLATED
|
||||
},
|
||||
connectors: {
|
||||
unlock_later: 'Unlock later', // UNTRANSLATED
|
||||
unlock_later_tip:
|
||||
'Once you have completed the onboarding process and entered the product, you will have access to even more social sign-in methods.', // UNTRANSLATED
|
||||
},
|
||||
},
|
||||
broadcast: '📣 You are participating in Logto Cloud Preview', // UNTRANSLATED
|
||||
socialCallback: {
|
||||
|
|
|
|||
|
|
@ -94,6 +94,11 @@ const cloud = {
|
|||
mobile_tab: 'Mobile', // UNTRANSLATED
|
||||
web_tab: 'Web', // UNTRANSLATED
|
||||
},
|
||||
connectors: {
|
||||
unlock_later: 'Unlock later', // UNTRANSLATED
|
||||
unlock_later_tip:
|
||||
'Once you have completed the onboarding process and entered the product, you will have access to even more social sign-in methods.', // UNTRANSLATED
|
||||
},
|
||||
},
|
||||
broadcast: '📣 You are participating in Logto Cloud Preview', // UNTRANSLATED
|
||||
socialCallback: {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue