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

Merge branch 'master' into gao-refactor-log-types

Browse source
This commit is contained in:
Gao Sun 2022-12-17 19:06:20 +08:00
commit 981ca84b9b
No known key found for this signature in database
GPG key ID: 13EBE123E4773688
83 changed files with 1613 additions and 543 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,7 +2,7 @@ import classNames from 'classnames';
import type { ReactNode } from 'react';
import { useRef, useState } from 'react';
import type { HorizontalAlignment } from '@/hooks/use-position';
import type { HorizontalAlignment } from '@/types/positioning';
import type { Props as ButtonProps } from '../Button';
import Dropdown from '../Dropdown';

2
packages/console/src/components/Dropdown/index.tsx
View file

@ -3,8 +3,8 @@ import type { ReactNode, RefObject } from 'react';
import { useRef } from 'react';
import ReactModal from 'react-modal';
import type { HorizontalAlignment } from '@/hooks/use-position';
import usePosition from '@/hooks/use-position';
import type { HorizontalAlignment } from '@/types/positioning';
import { onKeyDownHandler } from '@/utilities/a11y';
import * as styles from './index.module.scss';

2
packages/console/src/components/FormField/index.tsx
View file

@ -29,7 +29,7 @@ const FormField = ({ title, children, isRequired, className, tip, headlineClassN
<div className={classNames(styles.headline, headlineClassName)}>
<div className={styles.title}>{typeof title === 'string' ? t(title) : title}</div>
{tip && (
<ToggleTip anchorClassName={styles.toggleTipButton} content={tip}>
<ToggleTip anchorClassName={styles.toggleTipButton} content={tip} horizontalAlign="start">
<IconButton size="small">
<Tip />
</IconButton>

52
packages/console/src/components/Tip/TipBubble/index.module.scss
View file

@ -1,15 +1,19 @@
@use '@/scss/underscore' as _;
.tipBubble {
position: relative;
position: absolute;
border-radius: 8px;
background: var(--color-tooltip-background);
color: var(--color-tooltip-text);
box-shadow: var(--shadow-1);
box-shadow: var(--shadow-2);
padding: _.unit(2) _.unit(3);
font: var(--font-body-medium);
max-width: 300px;
&.invisible {
opacity: 0%;
}
a {
color: #cabeff;
@ -18,8 +22,7 @@
}
}
&::after {
content: '';
.arrow {
display: block;
position: absolute;
width: 10px;
@ -29,34 +32,29 @@
transform: translate(-50%, -50%) rotate(45deg);
}
&.top::after {
top: 100%;
&.top {
.arrow {
top: 100%;
}
}
&.right::after {
top: 50%;
left: 0%;
&.right {
.arrow {
top: 50%;
left: 0%;
}
}
&.bottom::after {
top: 0%;
&.bottom {
.arrow {
top: 0%;
}
}
&.left::after {
top: 50%;
left: 100%;
}
&.start::after {
left: _.unit(10);
}
&.center::after {
left: 50%;
}
&.end::after {
right: _.unit(7.5);
&.left {
.arrow {
top: 50%;
left: 100%;
}
}
}

43
packages/console/src/components/Tip/TipBubble/index.tsx
View file

@ -1,41 +1,64 @@
import { conditional } from '@silverhand/essentials';
import classNames from 'classnames';
import { forwardRef } from 'react';
import type { ForwardedRef, ReactNode, HTMLProps } from 'react';
import type { ForwardedRef, ReactNode, HTMLProps, RefObject } from 'react';
import type { HorizontalAlignment } from '@/hooks/use-position';
import type { HorizontalAlignment, Position } from '@/types/positioning';
import * as styles from './index.module.scss';
export type TipBubblePosition = 'top' | 'right' | 'bottom' | 'left';
export type TipBubblePlacement = 'top' | 'right' | 'bottom' | 'left';
type Props = HTMLProps<HTMLDivElement> & {
children: ReactNode;
position?: TipBubblePosition;
position?: Position;
anchorRef: RefObject<Element>;
placement?: TipBubblePlacement;
horizontalAlignment?: HorizontalAlignment;
className?: string;
};
const supportHorizontalAlignmentPositions = new Set<TipBubblePosition>(['top', 'bottom']);
const supportHorizontalAlignmentPlacements = new Set<TipBubblePlacement>(['top', 'bottom']);
const TipBubble = (
{ children, position = 'bottom', horizontalAlignment = 'center', className, ...rest }: Props,
{
children,
position,
placement = 'bottom',
horizontalAlignment = 'center',
className,
anchorRef,
...rest
}: Props,
reference: ForwardedRef<HTMLDivElement>
) => {
if (!anchorRef.current) {
return null;
}
const anchorRect = anchorRef.current.getBoundingClientRect();
const arrowPosition = conditional(
supportHorizontalAlignmentPlacements.has(placement) &&
position && {
left: anchorRect.x + anchorRect.width / 2 - Number(position.left),
}
);
return (
<div
{...rest}
ref={reference}
className={classNames(
styles.tipBubble,
styles[position],
conditional(
supportHorizontalAlignmentPositions.has(position) && styles[horizontalAlignment]
),
styles[placement],
!position && styles.invisible,
className
)}
style={{ ...position }}
>
{children}
<div className={styles.arrow} style={{ ...arrowPosition }} />
</div>
);
};

22
packages/console/src/components/Tip/TipBubble/utils.ts
View file

@ -1,9 +1,9 @@
import type { HorizontalAlignment, VerticalAlignment } from '@/hooks/use-position';
import type { HorizontalAlignment, VerticalAlignment } from '@/types/positioning';
import type { TipBubblePosition } from '.';
import type { TipBubblePlacement } from '.';
export const getVerticalOffset = (position: TipBubblePosition) => {
switch (position) {
export const getVerticalOffset = (placement: TipBubblePlacement) => {
switch (placement) {
case 'top':
return -16;
case 'bottom':
@ -14,10 +14,10 @@ export const getVerticalOffset = (position: TipBubblePosition) => {
};
export const getHorizontalOffset = (
tooltipPosition: TipBubblePosition,
placement: TipBubblePlacement,
horizontalAlignment: HorizontalAlignment
): number => {
if (tooltipPosition === 'top' || tooltipPosition === 'bottom') {
if (placement === 'top' || placement === 'bottom') {
switch (horizontalAlignment) {
case 'start':
return -32;
@ -27,12 +27,12 @@ export const getHorizontalOffset = (
return 0;
}
} else {
return tooltipPosition === 'left' ? -32 : 32;
return placement === 'left' ? -32 : 32;
}
};
export const getVerticalAlignment = (position: TipBubblePosition): VerticalAlignment => {
switch (position) {
export const getVerticalAlignment = (placement: TipBubblePlacement): VerticalAlignment => {
switch (placement) {
case 'top':
return 'top';
case 'bottom':
@ -43,10 +43,10 @@ export const getVerticalAlignment = (position: TipBubblePosition): VerticalAlign
};
export const getHorizontalAlignment = (
position: TipBubblePosition,
placement: TipBubblePlacement,
fallback: HorizontalAlignment
): HorizontalAlignment => {
switch (position) {
switch (placement) {
case 'right':
return 'start';
case 'left':

17
packages/console/src/components/Tip/ToggleTip/index.module.scss
View file

@ -1,16 +1,15 @@
@use '@/scss/underscore' as _;
.content {
box-shadow: var(--shadow-2);
position: absolute;
&:focus {
outline: none;
}
}
.overlay {
background: transparent;
position: fixed;
inset: 0;
.content {
position: relative;
&:focus {
outline: none;
}
}
}

32
packages/console/src/components/Tip/ToggleTip/index.tsx
View file

@ -2,11 +2,11 @@ import type { ReactNode } from 'react';
import { useCallback, useState, useRef } from 'react';
import ReactModal from 'react-modal';
import type { HorizontalAlignment } from '@/hooks/use-position';
import usePosition from '@/hooks/use-position';
import type { HorizontalAlignment } from '@/types/positioning';
import { onKeyDownHandler } from '@/utilities/a11y';
import type { TipBubblePosition } from '../TipBubble';
import type { TipBubblePlacement } from '../TipBubble';
import TipBubble from '../TipBubble';
import {
getVerticalAlignment,
@ -20,7 +20,7 @@ export type Props = {
children: ReactNode;
className?: string;
anchorClassName?: string;
position?: TipBubblePosition;
placement?: TipBubblePlacement;
horizontalAlign?: HorizontalAlignment;
content?: ((closeTip: () => void) => ReactNode) | ReactNode;
};
@ -29,11 +29,11 @@ const ToggleTip = ({
children,
className,
anchorClassName,
position = 'top',
placement = 'top',
horizontalAlign = 'center',
content,
}: Props) => {
const overlayRef = useRef<HTMLDivElement>(null);
const tipBubbleRef = useRef<HTMLDivElement>(null);
const anchorRef = useRef<HTMLDivElement>(null);
const [isOpen, setIsOpen] = useState(false);
@ -47,14 +47,14 @@ const ToggleTip = ({
positionState,
mutate,
} = usePosition({
verticalAlign: getVerticalAlignment(position),
horizontalAlign: getHorizontalAlignment(position, horizontalAlign),
verticalAlign: getVerticalAlignment(placement),
horizontalAlign: getHorizontalAlignment(placement, horizontalAlign),
offset: {
vertical: getVerticalOffset(position),
horizontal: getHorizontalOffset(position, horizontalAlign),
vertical: getVerticalOffset(placement),
horizontal: getHorizontalOffset(placement, horizontalAlign),
},
anchorRef,
overlayRef,
overlayRef: tipBubbleRef,
});
return (
@ -77,20 +77,16 @@ const ToggleTip = ({
shouldCloseOnOverlayClick
shouldCloseOnEsc
isOpen={isOpen}
style={{
content: {
...(!layoutPosition && { opacity: 0 }),
...layoutPosition,
},
}}
className={styles.content}
overlayClassName={styles.overlay}
onRequestClose={onClose}
onAfterOpen={mutate}
>
<TipBubble
ref={overlayRef}
position={position}
ref={tipBubbleRef}
anchorRef={anchorRef}
position={layoutPosition}
placement={placement}
className={className}
horizontalAlignment={positionState.horizontalAlign}
>

8
packages/console/src/components/Tip/Tooltip/index.module.scss
View file

@ -1,9 +1,5 @@
@use '@/scss/underscore' as _;
.tooltip {
position: absolute;
.content {
@include _.multi-line-ellipsis(6);
}
.content {
@include _.multi-line-ellipsis(6);
}

43
packages/console/src/components/Tip/Tooltip/index.tsx
View file

@ -2,11 +2,11 @@ import type { ReactNode } from 'react';
import { useEffect, useLayoutEffect, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import type { HorizontalAlignment } from '@/hooks/use-position';
import usePosition from '@/hooks/use-position';
import type { HorizontalAlignment } from '@/types/positioning';
import TipBubble from '../TipBubble';
import type { TipBubblePosition } from '../TipBubble';
import type { TipBubblePlacement } from '../TipBubble';
import {
getVerticalAlignment,
getHorizontalAlignment,
@ -18,7 +18,7 @@ import * as styles from './index.module.scss';
type Props = {
className?: string;
isKeepOpen?: boolean;
position?: TipBubblePosition;
placement?: TipBubblePlacement;
horizontalAlign?: HorizontalAlignment;
anchorClassName?: string;
children?: ReactNode;
@ -28,7 +28,7 @@ type Props = {
const Tooltip = ({
className,
isKeepOpen = false,
position = 'top',
placement = 'top',
horizontalAlign = 'center',
anchorClassName,
children,
@ -38,16 +38,12 @@ const Tooltip = ({
const anchorRef = useRef<HTMLDivElement>(null);
const tooltipRef = useRef<HTMLDivElement>(null);
const {
position: layoutPosition,
positionState,
mutate,
} = usePosition({
verticalAlign: getVerticalAlignment(position),
horizontalAlign: getHorizontalAlignment(position, horizontalAlign),
const { position, positionState, mutate } = usePosition({
verticalAlign: getVerticalAlignment(placement),
horizontalAlign: getHorizontalAlignment(placement, horizontalAlign),
offset: {
vertical: getVerticalOffset(position),
horizontal: getHorizontalOffset(position, horizontalAlign),
vertical: getVerticalOffset(placement),
horizontal: getHorizontalOffset(placement, horizontalAlign),
},
anchorRef,
overlayRef: tooltipRef,
@ -132,17 +128,16 @@ const Tooltip = ({
{tooltipDom &&
content &&
createPortal(
<div className={styles.tooltip}>
<TipBubble
ref={tooltipRef}
className={className}
style={{ ...(!layoutPosition && { opacity: 0 }), ...layoutPosition }}
position={position}
horizontalAlignment={positionState.horizontalAlign}
>
<div className={styles.content}>{content}</div>
</TipBubble>
</div>,
<TipBubble
ref={tooltipRef}
anchorRef={anchorRef}
className={className}
position={position}
placement={placement}
horizontalAlignment={positionState.horizontalAlign}
>
<div className={styles.content}>{content}</div>
</TipBubble>,
tooltipDom
)}
</>

14
packages/console/src/hooks/use-position.ts
View file

@ -1,14 +1,7 @@
import type { RefObject } from 'react';
import { useCallback, useEffect, useState } from 'react';
export type VerticalAlignment = 'top' | 'middle' | 'bottom';
export type HorizontalAlignment = 'start' | 'center' | 'end';
type Offset = {
vertical: number;
horizontal: number;
};
import type { HorizontalAlignment, Offset, Position, VerticalAlignment } from '@/types/positioning';
type Props = {
verticalAlign: VerticalAlignment;
@ -18,11 +11,6 @@ type Props = {
overlayRef: RefObject<Element>;
};
type Position = {
top: number;
left: number;
};
// Leave space for box-shadow effect.
const windowSafePadding = 12;

2
packages/console/src/pages/Applications/components/GuideHeader/index.tsx
View file

@ -63,7 +63,7 @@ const GuideHeader = ({ appName, selectedSdk, isCompact = false, onClose }: Props
/>
<Spacer />
<Tooltip
position="bottom"
placement="bottom"
anchorClassName={styles.githubToolTipAnchor}
content={t('applications.guide.get_sample_file')}
>

35
packages/console/src/pages/SignInExperience/tabs/Others/TermsForm.tsx
View file

@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next';
import Card from '@/components/Card';
import FormField from '@/components/FormField';
import Switch from '@/components/Switch';
import TextInput from '@/components/TextInput';
import { uriValidator } from '@/utilities/validator';
@ -13,38 +12,26 @@ import * as styles from '../index.module.scss';
const TermsForm = () => {
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
const {
watch,
register,
formState: { errors },
} = useFormContext<SignInExperienceForm>();
const enabled = watch('termsOfUse.enabled');
return (
<Card>
<div className={styles.title}>{t('sign_in_exp.others.terms_of_use.title')}</div>
<FormField title="sign_in_exp.others.terms_of_use.enable">
<Switch
{...register('termsOfUse.enabled')}
label={t('sign_in_exp.others.terms_of_use.description')}
<FormField
title="sign_in_exp.others.terms_of_use.terms_of_use"
tip={t('sign_in_exp.others.terms_of_use.terms_of_use_tip')}
>
<TextInput
{...register('termsOfUseUrl', {
validate: (value) => !value || uriValidator(value) || t('errors.invalid_uri_format'),
})}
hasError={Boolean(errors.termsOfUseUrl)}
errorMessage={errors.termsOfUseUrl?.message}
placeholder={t('sign_in_exp.others.terms_of_use.terms_of_use_placeholder')}
/>
</FormField>
{enabled && (
<FormField
isRequired
title="sign_in_exp.others.terms_of_use.terms_of_use"
tip={t('sign_in_exp.others.terms_of_use.terms_of_use_tip')}
>
<TextInput
{...register('termsOfUse.contentUrl', {
required: true,
validate: (value) => !value || uriValidator(value) || t('errors.invalid_uri_format'),
})}
hasError={Boolean(errors.termsOfUse)}
errorMessage={errors.termsOfUse?.contentUrl?.message}
placeholder={t('sign_in_exp.others.terms_of_use.terms_of_use_placeholder')}
/>
</FormField>
)}
</Card>
);
};

11
packages/console/src/pages/SignInExperience/utils/form.ts
View file

@ -113,12 +113,5 @@ export const getSignUpAndSignInErrorCount = (
return signUpErrorCount + signInMethodErrorCount;
};
export const getOthersErrorCount = (
errors: FieldErrorsImpl<DeepRequired<SignInExperienceForm>>
) => {
const { termsOfUse } = errors;
const termsOfUseErrorCount = termsOfUse ? Object.keys(termsOfUse).length : 0;
return termsOfUseErrorCount;
};
export const getOthersErrorCount = (errors: FieldErrorsImpl<DeepRequired<SignInExperienceForm>>) =>
errors.termsOfUseUrl ? 1 : 0;

13
packages/console/src/types/positioning.ts Normal file
View file

@ -0,0 +1,13 @@
export type Position = {
top: number;
left: number;
};
export type Offset = {
horizontal: number;
vertical: number;
};
export type HorizontalAlignment = 'start' | 'center' | 'end';
export type VerticalAlignment = 'top' | 'middle' | 'bottom';

80
packages/core/src/__mocks__/sign-in-experience.ts
View file

@ -2,13 +2,48 @@ import type {
Branding,
LanguageInfo,
SignInExperience,
TermsOfUse,
Color,
SignUp,
SignIn,
} from '@logto/schemas';
import { BrandingStyle, SignInMode, SignInIdentifier } from '@logto/schemas';
export const mockColor: Color = {
primaryColor: '#000',
isDarkModeEnabled: true,
darkPrimaryColor: '#fff',
};
export const mockBranding: Branding = {
style: BrandingStyle.Logo_Slogan,
logoUrl: 'http://silverhand.png',
slogan: 'Silverhand.',
};
export const mockTermsOfUseUrl = 'http://silverhand.com/terms';
export const mockLanguageInfo: LanguageInfo = {
autoDetect: true,
fallbackLanguage: 'en',
};
export const mockSignUp: SignUp = {
identifiers: [SignInIdentifier.Username],
password: true,
verify: false,
};
export const mockSignInMethod: SignIn['methods'][0] = {
identifier: SignInIdentifier.Username,
password: true,
verificationCode: false,
isPasswordPrimary: true,
};
export const mockSignIn = {
methods: [mockSignInMethod],
};
export const mockSignInExperience: SignInExperience = {
id: 'foo',
color: {
@ -21,9 +56,7 @@ export const mockSignInExperience: SignInExperience = {
logoUrl: 'http://logto.png',
slogan: 'logto',
},
termsOfUse: {
enabled: false,
},
termsOfUseUrl: mockTermsOfUseUrl,
languageInfo: {
autoDetect: true,
fallbackLanguage: 'en',
@ -58,42 +91,3 @@ export const mockSignInExperience: SignInExperience = {
socialSignInConnectorTargets: ['github', 'facebook', 'wechat'],
signInMode: SignInMode.SignInAndRegister,
};
export const mockColor: Color = {
primaryColor: '#000',
isDarkModeEnabled: true,
darkPrimaryColor: '#fff',
};
export const mockBranding: Branding = {
style: BrandingStyle.Logo_Slogan,
logoUrl: 'http://silverhand.png',
slogan: 'Silverhand.',
};
export const mockTermsOfUse: TermsOfUse = {
enabled: true,
contentUrl: 'http://silverhand.com/terms',
};
export const mockLanguageInfo: LanguageInfo = {
autoDetect: true,
fallbackLanguage: 'en',
};
export const mockSignUp: SignUp = {
identifiers: [SignInIdentifier.Username],
password: true,
verify: false,
};
export const mockSignInMethod: SignIn['methods'][0] = {
identifier: SignInIdentifier.Username,
password: true,
verificationCode: false,
isPasswordPrimary: true,
};
export const mockSignIn = {
methods: [mockSignInMethod],
};

18
packages/core/src/libraries/sign-in-experience/index.test.ts
View file

@ -35,12 +35,8 @@ const { findDefaultSignInExperience, updateDefaultSignInExperience } = mockEsm(
})
);
const {
validateBranding,
validateTermsOfUse,
validateLanguageInfo,
removeUnavailableSocialConnectorTargets,
} = await import('./index.js');
const { validateBranding, validateLanguageInfo, removeUnavailableSocialConnectorTargets } =
await import('./index.js');
beforeEach(() => {
jest.clearAllMocks();
@ -139,16 +135,6 @@ describe('validate language info', () => {
});
});
describe('validate terms of use', () => {
test('should throw when terms of use is enabled and content URL is empty', () => {
expect(() => {
validateTermsOfUse({
enabled: true,
});
}).toMatchError(new RequestError('sign_in_experiences.empty_content_url_of_terms_of_use'));
});
});
describe('remove unavailable social connector targets', () => {
test('should remove unavailable social connector targets in sign-in experience', async () => {
const mockSocialConnectorTargets = mockSocialConnectors.map(

10
packages/core/src/libraries/sign-in-experience/index.ts
View file

@ -1,5 +1,5 @@
import { builtInLanguages } from '@logto/phrases-ui';
import type { Branding, LanguageInfo, SignInExperience, TermsOfUse } from '@logto/schemas';
import type { Branding, LanguageInfo, SignInExperience } from '@logto/schemas';
import { SignInMode, ConnectorType, BrandingStyle } from '@logto/schemas';
import {
adminConsoleApplicationId,
@ -42,13 +42,6 @@ export const validateLanguageInfo = async (languageInfo: LanguageInfo) => {
);
};
export const validateTermsOfUse = (termsOfUse: TermsOfUse) => {
assertThat(
!termsOfUse.enabled || termsOfUse.contentUrl,
'sign_in_experiences.empty_content_url_of_terms_of_use'
);
};
export const removeUnavailableSocialConnectorTargets = async () => {
const connectors = await getLogtoConnectors();
const availableSocialConnectorTargets = deduplicate(
@ -78,6 +71,7 @@ export const getSignInExperienceForApplication = async (
...adminConsoleSignInExperience.branding,
slogan: i18next.t('admin_console.welcome.title'),
},
termsOfUseUrl: signInExperience.termsOfUseUrl,
languageInfo: signInExperience.languageInfo,
signInMode: (await hasActiveUsers()) ? SignInMode.SignIn : SignInMode.Register,
socialSignInConnectorTargets: [],

14
packages/core/src/queries/sign-in-experience.test.ts
View file

@ -28,7 +28,7 @@ describe('sign-in-experience query', () => {
...mockSignInExperience,
color: JSON.stringify(mockSignInExperience.color),
branding: JSON.stringify(mockSignInExperience.branding),
termsOfUse: JSON.stringify(mockSignInExperience.termsOfUse),
termsOfUseUrl: mockSignInExperience.termsOfUseUrl,
languageInfo: JSON.stringify(mockSignInExperience.languageInfo),
signIn: JSON.stringify(mockSignInExperience.signIn),
signUp: JSON.stringify(mockSignInExperience.signUp),
@ -38,7 +38,7 @@ describe('sign-in-experience query', () => {
it('findDefaultSignInExperience', async () => {
/* eslint-disable sql/no-unsafe-query */
const expectSql = `
select "id", "color", "branding", "language_info", "terms_of_use", "sign_in", "sign_up", "social_sign_in_connector_targets", "sign_in_mode"
select "id", "color", "branding", "language_info", "terms_of_use_url", "sign_in", "sign_up", "social_sign_in_connector_targets", "sign_in_mode"
from "sign_in_experiences"
where "id"=$1
`;
@ -55,14 +55,12 @@ describe('sign-in-experience query', () => {
});
it('updateDefaultSignInExperience', async () => {
const termsOfUse = {
enabled: false,
};
const { termsOfUseUrl } = mockSignInExperience;
/* eslint-disable sql/no-unsafe-query */
const expectSql = `
update "sign_in_experiences"
set "terms_of_use"=$1
set "terms_of_use_url"=$1
where "id"=$2
returning *
`;
@ -70,11 +68,11 @@ describe('sign-in-experience query', () => {
mockQuery.mockImplementationOnce(async (sql, values) => {
expectSqlAssert(sql, expectSql);
expect(values).toEqual([JSON.stringify(termsOfUse), id]);
expect(values).toEqual([termsOfUseUrl, id]);
return createMockQueryResult([dbvalue]);
});
await expect(updateDefaultSignInExperience({ termsOfUse })).resolves.toEqual(dbvalue);
await expect(updateDefaultSignInExperience({ termsOfUseUrl })).resolves.toEqual(dbvalue);
});
});

6
packages/core/src/routes/connector.ts
View file

@ -208,12 +208,14 @@ export default function connectorRoutes<T extends AuthedRouter>(router: T) {
const { type, validateConfig, metadata: originalMetadata } = await getLogtoConnectorById(id);
assertThat(
originalMetadata.isStandard !== true || metadata?.target === originalMetadata.target,
originalMetadata.isStandard !== true ||
!metadata ||
metadata.target === originalMetadata.target,
'connector.can_not_modify_target'
);
assertThat(
originalMetadata.isStandard === true || metadata === undefined,
originalMetadata.isStandard === true || !metadata,
'connector.cannot_overwrite_metadata_for_non_standard_connector'
);

49
packages/core/src/routes/connector.update.test.ts
View file

@ -108,7 +108,54 @@ describe('connector PATCH routes', () => {
expect(response).toHaveProperty('statusCode', 400);
});
it('successfully updates connector configs', async () => {
it('throws when updates non-standard connector metadata', async () => {
getLogtoConnectors.mockResolvedValue([
{
dbEntry: mockConnector,
metadata: { ...mockMetadata },
type: ConnectorType.Social,
...mockLogtoConnector,
},
]);
const response = await connectorRequest.patch('/connectors/id').send({
metadata: {
target: 'connector',
name: { en: 'connector_name', fr: 'connector_name' },
logo: 'new_logo.png',
},
});
expect(response).toHaveProperty('statusCode', 400);
});
it('successfully updates connector config', async () => {
getLogtoConnectors.mockResolvedValue([
{
dbEntry: mockConnector,
metadata: { ...mockMetadata, isStandard: true },
type: ConnectorType.Social,
...mockLogtoConnector,
},
]);
updateConnector.mockResolvedValueOnce({
...mockConnector,
config: { cliend_id: 'client_id', client_secret: 'client_secret' },
});
const response = await connectorRequest.patch('/connectors/id').send({
config: { cliend_id: 'client_id', client_secret: 'client_secret' },
});
expect(response).toHaveProperty('statusCode', 200);
expect(updateConnector).toHaveBeenCalledWith(
expect.objectContaining({
where: { id: 'id' },
set: {
config: { cliend_id: 'client_id', client_secret: 'client_secret' },
},
jsonbMode: 'replace',
})
);
});
it('successfully updates connector config and metadata', async () => {
getLogtoConnectors.mockResolvedValue([
{
dbEntry: mockConnector,

6
packages/core/src/routes/profile.test.ts
View file

@ -15,6 +15,7 @@ import { createRequester } from '#src/utils/test-utils.js';
const { jest } = import.meta;
const mockUserProfileResponse = { ...mockUserResponse, hasPasswordSet: true };
const getLogtoConnectorById = jest.fn(async () => ({
dbEntry: { enabled: true },
metadata: { id: 'connectorId', target: 'mock_social' },
@ -105,7 +106,7 @@ describe('session -> profileRoutes', () => {
it('should return current user data', async () => {
const response = await sessionRequest.get(profileRoute);
expect(response.statusCode).toEqual(200);
expect(response.body).toEqual(mockUserResponse);
expect(response.body).toEqual(mockUserProfileResponse);
});
it('should throw when the user is not authenticated', async () => {
@ -170,8 +171,7 @@ describe('session -> profileRoutes', () => {
.patch(`${profileRoute}/username`)
.send({ username: newUsername });
expect(response.statusCode).toEqual(200);
expect(response.body).toEqual({ ...mockUserResponse, username: newUsername });
expect(response.statusCode).toEqual(204);
});
it('should throw when username is already in use', async () => {

10
packages/core/src/routes/profile.ts
View file

@ -28,7 +28,11 @@ export default function profileRoutes<T extends AnonymousRouter>(router: T, prov
const user = await findUserById(userId);
ctx.body = pick(user, ...userInfoSelectFields);
ctx.body = {
...pick(user, ...userInfoSelectFields),
hasPasswordSet: Boolean(user.passwordEncrypted),
};
ctx.status = 200;
return next();
@ -69,9 +73,9 @@ export default function profileRoutes<T extends AnonymousRouter>(router: T, prov
const { username } = ctx.guard.body;
await checkIdentifierCollision({ username }, userId);
await updateUserById(userId, { username }, 'replace');
const user = await updateUserById(userId, { username }, 'replace');
ctx.body = pick(user, ...userInfoSelectFields);
ctx.status = 204;
return next();
}

43
packages/core/src/routes/sign-in-experience.guard.test.ts
View file

@ -9,7 +9,6 @@ import {
mockGoogleConnector,
mockLanguageInfo,
mockSignInExperience,
mockTermsOfUse,
} from '#src/__mocks__/index.js';
const { jest } = import.meta;
@ -59,44 +58,20 @@ beforeEach(() => {
jest.clearAllMocks();
});
describe('terms of use', () => {
describe('enabled', () => {
test.each(validBooleans)('%p should success', async (enabled) => {
const signInExperience = { termsOfUse: { ...mockTermsOfUse, enabled } };
await expectPatchResponseStatus(signInExperience, 200);
});
test.each(invalidBooleans)('%p should fail', async (enabled) => {
const signInExperience = { termsOfUse: { ...mockTermsOfUse, enabled } };
await expectPatchResponseStatus(signInExperience, 400);
});
});
describe('contentUrl', () => {
test.each([undefined, 'http://silverhand.com/terms', 'https://logto.dev/terms'])(
describe('terms of use url', () => {
describe('termsOfUseUrl', () => {
test.each([undefined, null, '', 'http://silverhand.com/terms', 'https://logto.dev/terms'])(
'%p should success',
async (contentUrl) => {
const signInExperience = { termsOfUse: { ...mockTermsOfUse, enabled: false, contentUrl } };
async (termsOfUseUrl) => {
const signInExperience = {
termsOfUseUrl,
};
await expectPatchResponseStatus(signInExperience, 200);
}
);
test.each([null, ' \t\n\r', 'non-url'])('%p should fail', async (contentUrl) => {
const signInExperience = { termsOfUse: { ...mockTermsOfUse, enabled: false, contentUrl } };
await expectPatchResponseStatus(signInExperience, 400);
});
test('should allow empty contentUrl if termsOfUse is disabled', async () => {
const signInExperience = {
termsOfUse: { ...mockTermsOfUse, enabled: false, contentUrl: '' },
};
await expectPatchResponseStatus(signInExperience, 200);
});
test('should not allow empty contentUrl if termsOfUse is enabled', async () => {
const signInExperience = {
termsOfUse: { ...mockTermsOfUse, enabled: true, contentUrl: '' },
};
test.each([' \t\n\r', 'non-url'])('%p should fail', async (termsOfUseUrl) => {
const signInExperience = { termsOfUseUrl };
await expectPatchResponseStatus(signInExperience, 400);
});
});

29
packages/core/src/routes/sign-in-experience.test.ts
View file

@ -1,4 +1,4 @@
import type { SignInExperience, CreateSignInExperience, TermsOfUse } from '@logto/schemas';
import type { SignInExperience, CreateSignInExperience } from '@logto/schemas';
import { mockEsm, mockEsmWithActual, pickDefault } from '@logto/shared/esm';
import {
@ -13,24 +13,19 @@ import {
mockSignIn,
mockLanguageInfo,
mockAliyunSmsConnector,
mockTermsOfUseUrl,
} from '#src/__mocks__/index.js';
import { createRequester } from '#src/utils/test-utils.js';
const { jest } = import.meta;
const {
validateBranding,
validateLanguageInfo,
validateTermsOfUse,
validateSignIn,
validateSignUp,
} = await mockEsmWithActual('#src/libraries/sign-in-experience/index.js', () => ({
validateBranding: jest.fn(),
validateLanguageInfo: jest.fn(),
validateTermsOfUse: jest.fn(),
validateSignIn: jest.fn(),
validateSignUp: jest.fn(),
}));
const { validateBranding, validateLanguageInfo, validateSignIn, validateSignUp } =
await mockEsmWithActual('#src/libraries/sign-in-experience/index.js', () => ({
validateBranding: jest.fn(),
validateLanguageInfo: jest.fn(),
validateSignIn: jest.fn(),
validateSignUp: jest.fn(),
}));
const logtoConnectors = [
mockFacebookConnector,
@ -106,14 +101,13 @@ describe('PATCH /sign-in-exp', () => {
});
it('should succeed to update when the input is valid', async () => {
const termsOfUse: TermsOfUse = { enabled: false };
const socialSignInConnectorTargets = ['github', 'facebook', 'wechat'];
const response = await signInExperienceRequester.patch('/sign-in-exp').send({
color: mockColor,
branding: mockBranding,
languageInfo: mockLanguageInfo,
termsOfUse,
termsOfUseUrl: mockTermsOfUseUrl,
socialSignInConnectorTargets,
signUp: mockSignUp,
signIn: mockSignIn,
@ -121,7 +115,6 @@ describe('PATCH /sign-in-exp', () => {
expect(validateBranding).toHaveBeenCalledWith(mockBranding);
expect(validateLanguageInfo).toHaveBeenCalledWith(mockLanguageInfo);
expect(validateTermsOfUse).toHaveBeenCalledWith(termsOfUse);
expect(validateSignUp).toHaveBeenCalledWith(mockSignUp, logtoConnectors);
expect(validateSignIn).toHaveBeenCalledWith(mockSignIn, mockSignUp, logtoConnectors);
@ -131,7 +124,7 @@ describe('PATCH /sign-in-exp', () => {
...mockSignInExperience,
color: mockColor,
branding: mockBranding,
termsOfUse,
termsOfUseUrl: mockTermsOfUseUrl,
socialSignInConnectorTargets,
signIn: mockSignIn,
},

17
packages/core/src/routes/sign-in-experience.ts
View file

@ -1,10 +1,10 @@
import { ConnectorType, SignInExperiences } from '@logto/schemas';
import { literal, object, string } from 'zod';
import { getLogtoConnectors } from '#src/connectors/index.js';
import {
validateBranding,
validateLanguageInfo,
validateTermsOfUse,
validateSignUp,
validateSignIn,
} from '#src/libraries/sign-in-experience/index.js';
@ -30,11 +30,18 @@ export default function signInExperiencesRoutes<T extends AuthedRouter>(router:
router.patch(
'/sign-in-exp',
koaGuard({
body: SignInExperiences.createGuard.omit({ id: true }).partial(),
body: SignInExperiences.createGuard
.omit({ id: true, termsOfUseUrl: true })
.merge(
object({
termsOfUseUrl: string().url().optional().nullable().or(literal('')),
})
)
.partial(),
}),
async (ctx, next) => {
const { socialSignInConnectorTargets, ...rest } = ctx.guard.body;
const { branding, languageInfo, termsOfUse, signUp, signIn } = rest;
const { branding, languageInfo, signUp, signIn } = rest;
if (branding) {
validateBranding(branding);
@ -44,10 +51,6 @@ export default function signInExperiencesRoutes<T extends AuthedRouter>(router:
await validateLanguageInfo(languageInfo);
}
if (termsOfUse) {
validateTermsOfUse(termsOfUse);
}
const connectors = await getLogtoConnectors();
// Remove unavailable connectors

1
packages/core/src/routes/well-known.test.ts
View file

@ -108,6 +108,7 @@ describe('GET /.well-known/sign-in-exp', () => {
...adminConsoleSignInExperience.branding,
slogan: 'admin_console.welcome.title',
},
termsOfUseUrl: mockSignInExperience.termsOfUseUrl,
languageInfo: mockSignInExperience.languageInfo,
socialConnectors: [],
signInMode: SignInMode.SignIn,

4
packages/integration-tests/src/tests/api/connector.test.ts
View file

@ -77,9 +77,7 @@ test('connector set-up flow', async () => {
connectorId: mockStandardEmailConnectorId,
metadata: { target: 'mock-standard-mail' },
});
await updateConnectorConfig(id, mockStandardEmailConnectorConfig, {
target: 'mock-standard-mail',
});
await updateConnectorConfig(id, mockStandardEmailConnectorConfig);
connectorIdMap.set(mockStandardEmailConnectorId, id);
const currentConnectors = await listConnectors();
expect(

280
packages/integration-tests/src/tests/api/interaction/register-with-identifier.test.ts Normal file
View file

@ -0,0 +1,280 @@
import { ConnectorType, Event, SignInIdentifier } from '@logto/schemas';
import { assert } from '@silverhand/essentials';
import {
sendVerificationPasscode,
putInteraction,
patchInteraction,
deleteUser,
} from '#src/api/index.js';
import { readPasscode, expectRejects } from '#src/helpers.js';
import { initClient, processSession, logoutClient } from './utils/client.js';
import { clearConnectorsByTypes, setEmailConnector, setSmsConnector } from './utils/connector.js';
import {
enableAllPasscodeSignInMethods,
enableAllPasswordSignInMethods,
} from './utils/sign-in-experience.js';
import { generateNewUserProfile, generateNewUser } from './utils/user.js';
describe('Register with username and password', () => {
it('register with username and password', async () => {
await enableAllPasswordSignInMethods({
identifiers: [SignInIdentifier.Username],
password: true,
verify: false,
});
const { username, password } = generateNewUserProfile({ username: true, password: true });
const client = await initClient();
assert(client.interactionCookie, new Error('Session not found'));
const { redirectTo } = await putInteraction(
{
event: Event.Register,
profile: {
username,
password,
},
},
client.interactionCookie
);
const id = await processSession(client, redirectTo);
await logoutClient(client);
await deleteUser(id);
});
});
describe('Register with passwordless identifier', () => {
beforeAll(async () => {
await clearConnectorsByTypes([ConnectorType.Email, ConnectorType.Sms]);
await setEmailConnector();
await setSmsConnector();
});
afterAll(async () => {
await clearConnectorsByTypes([ConnectorType.Email, ConnectorType.Sms]);
});
it('register with email', async () => {
await enableAllPasscodeSignInMethods({
identifiers: [SignInIdentifier.Email],
password: false,
verify: true,
});
const { primaryEmail } = generateNewUserProfile({ primaryEmail: true });
const client = await initClient();
assert(client.interactionCookie, new Error('Session not found'));
await expect(
sendVerificationPasscode(
{
event: Event.Register,
email: primaryEmail,
},
client.interactionCookie
)
).resolves.not.toThrow();
const passcodeRecord = await readPasscode();
expect(passcodeRecord).toMatchObject({
address: primaryEmail,
type: Event.Register,
});
const { code } = passcodeRecord;
const { redirectTo } = await putInteraction(
{
event: Event.Register,
identifier: {
email: primaryEmail,
passcode: code,
},
profile: {
email: primaryEmail,
},
},
client.interactionCookie
);
const id = await processSession(client, redirectTo);
await logoutClient(client);
await deleteUser(id);
});
it('register with phone', async () => {
await enableAllPasscodeSignInMethods({
identifiers: [SignInIdentifier.Sms],
password: false,
verify: true,
});
const { primaryPhone } = generateNewUserProfile({ primaryPhone: true });
const client = await initClient();
assert(client.interactionCookie, new Error('Session not found'));
await expect(
sendVerificationPasscode(
{
event: Event.Register,
phone: primaryPhone,
},
client.interactionCookie
)
).resolves.not.toThrow();
const passcodeRecord = await readPasscode();
expect(passcodeRecord).toMatchObject({
phone: primaryPhone,
type: Event.Register,
});
const { code } = passcodeRecord;
const { redirectTo } = await putInteraction(
{
event: Event.Register,
identifier: {
phone: primaryPhone,
passcode: code,
},
profile: {
phone: primaryPhone,
},
},
client.interactionCookie
);
const id = await processSession(client, redirectTo);
await logoutClient(client);
await deleteUser(id);
});
it('register with exiting email', async () => {
const {
user,
userProfile: { primaryEmail },
} = await generateNewUser({ primaryEmail: true });
await enableAllPasscodeSignInMethods({
identifiers: [SignInIdentifier.Email],
password: false,
verify: true,
});
const client = await initClient();
assert(client.interactionCookie, new Error('Session not found'));
await expect(
sendVerificationPasscode(
{
event: Event.Register,
email: primaryEmail,
},
client.interactionCookie
)
).resolves.not.toThrow();
const passcodeRecord = await readPasscode();
expect(passcodeRecord).toMatchObject({
address: primaryEmail,
type: Event.Register,
});
const { code } = passcodeRecord;
await expectRejects(
putInteraction(
{
event: Event.Register,
identifier: {
email: primaryEmail,
passcode: code,
},
profile: {
email: primaryEmail,
},
},
client.interactionCookie
),
'user.email_already_in_use'
);
const { redirectTo } = await patchInteraction(
{
event: Event.SignIn,
},
client.interactionCookie
);
await processSession(client, redirectTo);
await logoutClient(client);
await deleteUser(user.id);
});
it('register with exiting phone', async () => {
const {
user,
userProfile: { primaryPhone },
} = await generateNewUser({ primaryPhone: true });
await enableAllPasscodeSignInMethods({
identifiers: [SignInIdentifier.Sms],
password: false,
verify: true,
});
const client = await initClient();
assert(client.interactionCookie, new Error('Session not found'));
await expect(
sendVerificationPasscode(
{
event: Event.Register,
phone: primaryPhone,
},
client.interactionCookie
)
).resolves.not.toThrow();
const passcodeRecord = await readPasscode();
expect(passcodeRecord).toMatchObject({
phone: primaryPhone,
type: Event.Register,
});
const { code } = passcodeRecord;
await expectRejects(
putInteraction(
{
event: Event.Register,
identifier: {
phone: primaryPhone,
passcode: code,
},
profile: {
phone: primaryPhone,
},
},
client.interactionCookie
),
'user.phone_already_in_use'
);
const { redirectTo } = await patchInteraction(
{
event: Event.SignIn,
},
client.interactionCookie
);
await processSession(client, redirectTo);
await logoutClient(client);
await deleteUser(user.id);
});
});

36
packages/integration-tests/src/tests/api/interaction/sign-in-with-passcode-identifier.test.ts
View file

@ -8,10 +8,10 @@ import {
deleteUser,
updateSignInExperience,
} from '#src/api/index.js';
import { readPasscode } from '#src/helpers.js';
import { expectRejects, readPasscode } from '#src/helpers.js';
import { generateEmail, generatePhone } from '#src/utils.js';
import { initClient, processSessionAndLogout } from './utils/client.js';
import { initClient, processSession, logoutClient } from './utils/client.js';
import { clearConnectorsByTypes, setEmailConnector, setSmsConnector } from './utils/connector.js';
import { enableAllPasscodeSignInMethods } from './utils/sign-in-experience.js';
import { generateNewUser } from './utils/user.js';
@ -62,8 +62,8 @@ describe('Sign-In flow using passcode identifiers', () => {
client.interactionCookie
);
await processSessionAndLogout(client, redirectTo);
await processSession(client, redirectTo);
await logoutClient(client);
await deleteUser(user.id);
});
@ -102,8 +102,8 @@ describe('Sign-In flow using passcode identifiers', () => {
client.interactionCookie
);
await processSessionAndLogout(client, redirectTo);
await processSession(client, redirectTo);
await logoutClient(client);
await deleteUser(user.id);
});
@ -132,8 +132,7 @@ describe('Sign-In flow using passcode identifiers', () => {
const { code } = passcodeRecord;
// TODO: @simeng use expectRequestError after https://github.com/logto-io/logto/pull/2639/ PR merged
await expect(
await expectRejects(
putInteraction(
{
event: Event.SignIn,
@ -143,8 +142,9 @@ describe('Sign-In flow using passcode identifiers', () => {
},
},
client.interactionCookie
)
).rejects.toThrow();
),
'user.user_not_exist'
);
const { redirectTo } = await patchInteraction(
{
@ -156,7 +156,9 @@ describe('Sign-In flow using passcode identifiers', () => {
client.interactionCookie
);
await processSessionAndLogout(client, redirectTo);
const id = await processSession(client, redirectTo);
await logoutClient(client);
await deleteUser(id);
});
it('sign-in with non-exist phone account with passcode', async () => {
@ -184,8 +186,7 @@ describe('Sign-In flow using passcode identifiers', () => {
const { code } = passcodeRecord;
// TODO: @simeng use expectRequestError after https://github.com/logto-io/logto/pull/2639/ PR merged
await expect(
await expectRejects(
putInteraction(
{
event: Event.SignIn,
@ -195,8 +196,9 @@ describe('Sign-In flow using passcode identifiers', () => {
},
},
client.interactionCookie
)
).rejects.toThrow();
),
'user.user_not_exist'
);
const { redirectTo } = await patchInteraction(
{
@ -208,6 +210,8 @@ describe('Sign-In flow using passcode identifiers', () => {
client.interactionCookie
);
await processSessionAndLogout(client, redirectTo);
const id = await processSession(client, redirectTo);
await logoutClient(client);
await deleteUser(id);
});
});

44
packages/integration-tests/src/tests/api/interaction/sign-in-with-password-identifier.test.ts
View file

@ -2,8 +2,8 @@ import { Event } from '@logto/schemas';
import { assert } from '@silverhand/essentials';
import { putInteraction, deleteUser } from '#src/api/index.js';
import MockClient from '#src/client/index.js';
import { initClient, processSession, logoutClient } from './utils/client.js';
import { enableAllPasswordSignInMethods } from './utils/sign-in-experience.js';
import { generateNewUser } from './utils/user.js';
@ -13,9 +13,8 @@ describe('Sign-In flow using password identifiers', () => {
});
it('sign-in with username and password', async () => {
const { userProfile, user } = await generateNewUser({ username: true });
const client = new MockClient();
await client.initSession();
const { userProfile, user } = await generateNewUser({ username: true, password: true });
const client = await initClient();
assert(client.interactionCookie, new Error('Session not found'));
const { redirectTo } = await putInteraction(
@ -29,21 +28,15 @@ describe('Sign-In flow using password identifiers', () => {
client.interactionCookie
);
await client.processSession(redirectTo);
await expect(client.isAuthenticated()).resolves.toBe(true);
await client.signOut();
await expect(client.isAuthenticated()).resolves.toBe(false);
await processSession(client, redirectTo);
await logoutClient(client);
await deleteUser(user.id);
});
it('sign-in with email and password', async () => {
const { userProfile, user } = await generateNewUser({ primaryEmail: true });
const client = new MockClient();
await client.initSession();
const { userProfile, user } = await generateNewUser({ primaryEmail: true, password: true });
const client = await initClient();
assert(client.interactionCookie, new Error('Session not found'));
const { redirectTo } = await putInteraction(
@ -57,21 +50,15 @@ describe('Sign-In flow using password identifiers', () => {
client.interactionCookie
);
await client.processSession(redirectTo);
await expect(client.isAuthenticated()).resolves.toBe(true);
await client.signOut();
await expect(client.isAuthenticated()).resolves.toBe(false);
await processSession(client, redirectTo);
await logoutClient(client);
await deleteUser(user.id);
});
it('sign-in with phone and password', async () => {
const { userProfile, user } = await generateNewUser({ primaryPhone: true });
const client = new MockClient();
await client.initSession();
const { userProfile, user } = await generateNewUser({ primaryPhone: true, password: true });
const client = await initClient();
assert(client.interactionCookie, new Error('Session not found'));
const { redirectTo } = await putInteraction(
@ -85,13 +72,8 @@ describe('Sign-In flow using password identifiers', () => {
client.interactionCookie
);
await client.processSession(redirectTo);
await expect(client.isAuthenticated()).resolves.toBe(true);
await client.signOut();
await expect(client.isAuthenticated()).resolves.toBe(false);
await processSession(client, redirectTo);
await logoutClient(client);
await deleteUser(user.id);
});

8
packages/integration-tests/src/tests/api/interaction/utils/client.ts
View file

@ -7,11 +7,17 @@ export const initClient = async () => {
return client;
};
export const processSessionAndLogout = async (client: MockClient, redirectTo: string) => {
export const processSession = async (client: MockClient, redirectTo: string) => {
await client.processSession(redirectTo);
await expect(client.isAuthenticated()).resolves.toBe(true);
const { sub } = await client.getIdTokenClaims();
return sub;
};
export const logoutClient = async (client: MockClient) => {
await client.signOut();
await expect(client.isAuthenticated()).resolves.toBe(false);

18
packages/integration-tests/src/tests/api/interaction/utils/user.ts
View file

@ -9,31 +9,39 @@ import {
export type NewUserProfileOptions = {
username?: true;
password?: true;
name?: true;
primaryEmail?: true;
primaryPhone?: true;
};
export const generateNewUser = async <T extends NewUserProfileOptions>({
export const generateNewUserProfile = <T extends NewUserProfileOptions>({
username,
password,
name,
primaryEmail,
primaryPhone,
}: T) => {
type UserProfile = {
password: string;
name: string;
} & {
[K in keyof T]: T[K] extends true ? string : never;
};
// @ts-expect-error - TS can't map the type of userProfile to the UserProfile defined above
const userProfile: UserProfile = {
password: generatePassword(),
name: generateName(),
...(username ? { username: generateUsername() } : {}),
...(password ? { password: generatePassword() } : {}),
...(name ? { name: generateName() } : {}),
...(primaryEmail ? { primaryEmail: generateEmail() } : {}),
...(primaryPhone ? { primaryPhone: generatePhone() } : {}),
};
return userProfile;
};
export const generateNewUser = async <T extends NewUserProfileOptions>(options: T) => {
const userProfile = generateNewUserProfile(options);
const user = await createUser(userProfile);
return { user, userProfile };

5
packages/integration-tests/src/tests/api/sign-in-experience.test.ts
View file

@ -22,10 +22,7 @@ describe('admin console sign-in experience', () => {
logoUrl: 'https://logto.io/new-logo.png',
darkLogoUrl: 'https://logto.io/new-dark-logo.png',
},
termsOfUse: {
enabled: true,
contentUrl: 'https://logto.io/terms',
},
termsOfUseUrl: 'https://logto.io/terms',
};
const updatedSignInExperience = await updateSignInExperience(newSignInExperience);

31
packages/phrases-ui/src/locales/de.ts
View file

@ -85,6 +85,37 @@ const translation = {
'For added security, please link your email or phone with the account.', // UNTRANSLATED
continue_with_more_information: 'For added security, please complete below account details.', // UNTRANSLATED
},
profile: {
title: 'Account Settings', // UNTRANSLATED
description:
'Change your account settings and manage your personal information here to ensure your account security.', // UNTRANSLATED
settings: {
title: 'PROFILE SETTINGS', // UNTRANSLATED
profile_information: 'Profile Information', // UNTRANSLATED
avatar: 'Avatar', // UNTRANSLATED
name: 'Name', // UNTRANSLATED
username: 'Username', // UNTRANSLATED
},
password: {
title: 'PASSWORD', // UNTRANSLATED
reset_password: 'Reset Password', // UNTRANSLATED
reset_password_sc: 'Reset password', // UNTRANSLATED
},
link_account: {
title: 'LINK ACCOUNT', // UNTRANSLATED
email_phone_sign_in: 'Email / Phone Sign-In', // UNTRANSLATED
email: 'Email', // UNTRANSLATED
phone: 'Phone', // UNTRANSLATED
phone_sc: 'Phone number', // UNTRANSLATED
social: 'Social Sign-In', // UNTRANSLATED
social_sc: 'Social accounts', // UNTRANSLATED
},
not_set: 'Not set', // UNTRANSLATED
edit: 'Edit', // UNTRANSLATED
change: 'Change', // UNTRANSLATED
link: 'Link', // UNTRANSLATED
unlink: 'Unlink', // UNTRANSLATED
},
error: {
username_password_mismatch: 'Benutzername oder Passwort ist falsch',
username_required: 'Benutzername ist erforderlich',

31
packages/phrases-ui/src/locales/en.ts
View file

@ -81,6 +81,37 @@ const translation = {
'For added security, please link your email or phone with the account.',
continue_with_more_information: 'For added security, please complete below account details.',
},
profile: {
title: 'Account Settings',
description:
'Change your account settings and manage your personal information here to ensure your account security.',
settings: {
title: 'PROFILE SETTINGS',
profile_information: 'Profile Information',
avatar: 'Avatar',
name: 'Name',
username: 'Username',
},
password: {
title: 'PASSWORD',
reset_password: 'Reset Password',
reset_password_sc: 'Reset password',
},
link_account: {
title: 'LINK ACCOUNT',
email_phone_sign_in: 'Email / Phone Sign-In',
email: 'Email',
phone: 'Phone',
phone_sc: 'Phone number',
social: 'Social Sign-In',
social_sc: 'Social accounts',
},
not_set: 'Not set',
edit: 'Edit',
change: 'Change',
link: 'Link',
unlink: 'Unlink',
},
error: {
username_password_mismatch: 'Username and password do not match',
username_required: 'Username is required',

31
packages/phrases-ui/src/locales/fr.ts
View file

@ -85,6 +85,37 @@ const translation = {
'For added security, please link your email or phone with the account.', // UNTRANSLATED
continue_with_more_information: 'For added security, please complete below account details.', // UNTRANSLATED
},
profile: {
title: 'Account Settings', // UNTRANSLATED
description:
'Change your account settings and manage your personal information here to ensure your account security.', // UNTRANSLATED
settings: {
title: 'PROFILE SETTINGS', // UNTRANSLATED
profile_information: 'Profile Information', // UNTRANSLATED
avatar: 'Avatar', // UNTRANSLATED
name: 'Name', // UNTRANSLATED
username: 'Username', // UNTRANSLATED
},
password: {
title: 'PASSWORD', // UNTRANSLATED
reset_password: 'Reset Password', // UNTRANSLATED
reset_password_sc: 'Reset password', // UNTRANSLATED
},
link_account: {
title: 'LINK ACCOUNT', // UNTRANSLATED
email_phone_sign_in: 'Email / Phone Sign-In', // UNTRANSLATED
email: 'Email', // UNTRANSLATED
phone: 'Phone', // UNTRANSLATED
phone_sc: 'Phone number', // UNTRANSLATED
social: 'Social Sign-In', // UNTRANSLATED
social_sc: 'Social accounts', // UNTRANSLATED
},
not_set: 'Not set', // UNTRANSLATED
edit: 'Edit', // UNTRANSLATED
change: 'Change', // UNTRANSLATED
link: 'Link', // UNTRANSLATED
unlink: 'Unlink', // UNTRANSLATED
},
error: {
username_password_mismatch: "Le nom d'utilisateur et le mot de passe ne correspondent pas",
username_required: "Le nom d'utilisateur est requis",

31
packages/phrases-ui/src/locales/ko.ts
View file

@ -81,6 +81,37 @@ const translation = {
'For added security, please link your email or phone with the account.', // UNTRANSLATED
continue_with_more_information: 'For added security, please complete below account details.', // UNTRANSLATED
},
profile: {
title: 'Account Settings', // UNTRANSLATED
description:
'Change your account settings and manage your personal information here to ensure your account security.', // UNTRANSLATED
settings: {
title: 'PROFILE SETTINGS', // UNTRANSLATED
profile_information: 'Profile Information', // UNTRANSLATED
avatar: 'Avatar', // UNTRANSLATED
name: 'Name', // UNTRANSLATED
username: 'Username', // UNTRANSLATED
},
password: {
title: 'PASSWORD', // UNTRANSLATED
reset_password: 'Reset Password', // UNTRANSLATED
reset_password_sc: 'Reset password', // UNTRANSLATED
},
link_account: {
title: 'LINK ACCOUNT', // UNTRANSLATED
email_phone_sign_in: 'Email / Phone Sign-In', // UNTRANSLATED
email: 'Email', // UNTRANSLATED
phone: 'Phone', // UNTRANSLATED
phone_sc: 'Phone number', // UNTRANSLATED
social: 'Social Sign-In', // UNTRANSLATED
social_sc: 'Social accounts', // UNTRANSLATED
},
not_set: 'Not set', // UNTRANSLATED
edit: 'Edit', // UNTRANSLATED
change: 'Change', // UNTRANSLATED
link: 'Link', // UNTRANSLATED
unlink: 'Unlink', // UNTRANSLATED
},
error: {
username_password_mismatch: '사용자 이름 또는 비밀번호가 일치하지 않아요.',
username_required: '사용자 이름은 필수예요.',

31
packages/phrases-ui/src/locales/pt-br.ts
View file

@ -83,6 +83,37 @@ const translation = {
'Para maior segurança, vincule seu e-mail ou telefone à conta.',
continue_with_more_information: 'Para maior segurança, preencha os detalhes da conta abaixo.',
},
profile: {
title: 'Account Settings', // UNTRANSLATED
description:
'Change your account settings and manage your personal information here to ensure your account security.', // UNTRANSLATED
settings: {
title: 'PROFILE SETTINGS', // UNTRANSLATED
profile_information: 'Profile Information', // UNTRANSLATED
avatar: 'Avatar', // UNTRANSLATED
name: 'Name', // UNTRANSLATED
username: 'Username', // UNTRANSLATED
},
password: {
title: 'PASSWORD', // UNTRANSLATED
reset_password: 'Reset Password', // UNTRANSLATED
reset_password_sc: 'Reset password', // UNTRANSLATED
},
link_account: {
title: 'LINK ACCOUNT', // UNTRANSLATED
email_phone_sign_in: 'Email / Phone Sign-In', // UNTRANSLATED
email: 'Email', // UNTRANSLATED
phone: 'Phone', // UNTRANSLATED
phone_sc: 'Phone number', // UNTRANSLATED
social: 'Social Sign-In', // UNTRANSLATED
social_sc: 'Social accounts', // UNTRANSLATED
},
not_set: 'Not set', // UNTRANSLATED
edit: 'Edit', // UNTRANSLATED
change: 'Change', // UNTRANSLATED
link: 'Link', // UNTRANSLATED
unlink: 'Unlink', // UNTRANSLATED
},
error: {
username_password_mismatch: 'Usuário e senha não correspondem',
username_required: 'Nome de usuário é obrigatório',

31
packages/phrases-ui/src/locales/pt-pt.ts
View file

@ -81,6 +81,37 @@ const translation = {
'For added security, please link your email or phone with the account.', // UNTRANSLATED
continue_with_more_information: 'For added security, please complete below account details.', // UNTRANSLATED
},
profile: {
title: 'Account Settings', // UNTRANSLATED
description:
'Change your account settings and manage your personal information here to ensure your account security.', // UNTRANSLATED
settings: {
title: 'PROFILE SETTINGS', // UNTRANSLATED
profile_information: 'Profile Information', // UNTRANSLATED
avatar: 'Avatar', // UNTRANSLATED
name: 'Name', // UNTRANSLATED
username: 'Username', // UNTRANSLATED
},
password: {
title: 'PASSWORD', // UNTRANSLATED
reset_password: 'Reset Password', // UNTRANSLATED
reset_password_sc: 'Reset password', // UNTRANSLATED
},
link_account: {
title: 'LINK ACCOUNT', // UNTRANSLATED
email_phone_sign_in: 'Email / Phone Sign-In', // UNTRANSLATED
email: 'Email', // UNTRANSLATED
phone: 'Phone', // UNTRANSLATED
phone_sc: 'Phone number', // UNTRANSLATED
social: 'Social Sign-In', // UNTRANSLATED
social_sc: 'Social accounts', // UNTRANSLATED
},
not_set: 'Not set', // UNTRANSLATED
edit: 'Edit', // UNTRANSLATED
change: 'Change', // UNTRANSLATED
link: 'Link', // UNTRANSLATED
unlink: 'Unlink', // UNTRANSLATED
},
error: {
username_password_mismatch: 'O Utilizador e a password não correspondem',
username_required: 'Utilizador necessário',

31
packages/phrases-ui/src/locales/tr-tr.ts
View file

@ -82,6 +82,37 @@ const translation = {
'For added security, please link your email or phone with the account.', // UNTRANSLATED
continue_with_more_information: 'For added security, please complete below account details.', // UNTRANSLATED
},
profile: {
title: 'Account Settings', // UNTRANSLATED
description:
'Change your account settings and manage your personal information here to ensure your account security.', // UNTRANSLATED
settings: {
title: 'PROFILE SETTINGS', // UNTRANSLATED
profile_information: 'Profile Information', // UNTRANSLATED
avatar: 'Avatar', // UNTRANSLATED
name: 'Name', // UNTRANSLATED
username: 'Username', // UNTRANSLATED
},
password: {
title: 'PASSWORD', // UNTRANSLATED
reset_password: 'Reset Password', // UNTRANSLATED
reset_password_sc: 'Reset password', // UNTRANSLATED
},
link_account: {
title: 'LINK ACCOUNT', // UNTRANSLATED
email_phone_sign_in: 'Email / Phone Sign-In', // UNTRANSLATED
email: 'Email', // UNTRANSLATED
phone: 'Phone', // UNTRANSLATED
phone_sc: 'Phone number', // UNTRANSLATED
social: 'Social Sign-In', // UNTRANSLATED
social_sc: 'Social accounts', // UNTRANSLATED
},
not_set: 'Not set', // UNTRANSLATED
edit: 'Edit', // UNTRANSLATED
change: 'Change', // UNTRANSLATED
link: 'Link', // UNTRANSLATED
unlink: 'Unlink', // UNTRANSLATED
},
error: {
username_password_mismatch: 'Kullanıcı adı ve şifre eşleşmiyor.',
username_required: 'Kullanıcı adı gerekli.',

31
packages/phrases-ui/src/locales/zh-cn.ts
View file

@ -77,6 +77,37 @@ const translation = {
link_email_or_phone_description: '绑定邮箱或手机号以保障您的账号安全',
continue_with_more_information: '为保障您的账号安全，需要您补充以下信息。',
},
profile: {
title: 'Account Settings', // UNTRANSLATED
description:
'Change your account settings and manage your personal information here to ensure your account security.', // UNTRANSLATED
settings: {
title: 'PROFILE SETTINGS', // UNTRANSLATED
profile_information: 'Profile Information', // UNTRANSLATED
avatar: 'Avatar', // UNTRANSLATED
name: 'Name', // UNTRANSLATED
username: 'Username', // UNTRANSLATED
},
password: {
title: 'PASSWORD', // UNTRANSLATED
reset_password: 'Reset Password', // UNTRANSLATED
reset_password_sc: 'Reset password', // UNTRANSLATED
},
link_account: {
title: 'LINK ACCOUNT', // UNTRANSLATED
email_phone_sign_in: 'Email / Phone Sign-In', // UNTRANSLATED
email: 'Email', // UNTRANSLATED
phone: 'Phone', // UNTRANSLATED
phone_sc: 'Phone number', // UNTRANSLATED
social: 'Social Sign-In', // UNTRANSLATED
social_sc: 'Social accounts', // UNTRANSLATED
},
not_set: 'Not set', // UNTRANSLATED
edit: 'Edit', // UNTRANSLATED
change: 'Change', // UNTRANSLATED
link: 'Link', // UNTRANSLATED
unlink: 'Unlink', // UNTRANSLATED
},
error: {
username_password_mismatch: '用户名和密码不匹配',
username_required: '用户名必填',

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

@ -98,8 +98,6 @@ const sign_in_exp = {
others: {
terms_of_use: {
title: 'NUTZUNGSBEDINGUNGEN',
enable: 'Aktiviere Nutzungsbedingungen',
description: 'Füge die rechtlichen Vereinbarungen für die Nutzung deines Produkts hinzu',
terms_of_use: 'Nutzungsbedingungen',
terms_of_use_placeholder: 'https://beispiel.de/nutzungsbedingungen',
terms_of_use_tip: 'URL zu den Nutzungsbedingungen',

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

@ -96,8 +96,6 @@ const sign_in_exp = {
others: {
terms_of_use: {
title: 'TERMS OF USE',
enable: 'Enable terms of use',
description: 'Add the legal agreements for the use of your product',
terms_of_use: 'Terms of use',
terms_of_use_placeholder: 'https://your.terms.of.use/',
terms_of_use_tip: 'Terms of use URL',

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

@ -98,8 +98,6 @@ const sign_in_exp = {
others: {
terms_of_use: {
title: "CONDITIONS D'UTILISATION",
enable: "Activer les conditions d'utilisation",
description: "Ajouter les accords juridiques pour l'utilisation de votre produit",
terms_of_use: "Conditions d'utilisation",
terms_of_use_placeholder: 'https://vos.conditions.utilisation/',
terms_of_use_tip: "Conditions d'utilisation URL",

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

@ -93,8 +93,6 @@ const sign_in_exp = {
others: {
terms_of_use: {
title: '이용 약관',
enable: '이용 약관 활성화',
description: '서비스 사용을 위한 이용 약관을 추가해보세요.',
terms_of_use: '이용 약관',
terms_of_use_placeholder: 'https://your.terms.of.use/',
terms_of_use_tip: '이용 약관 URL',

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

@ -98,8 +98,6 @@ const sign_in_exp = {
others: {
terms_of_use: {
title: 'TERMOS DE USO',
enable: 'Habilitar termos de uso',
description: 'Adicione os acordos legais para o uso do seu produto',
terms_of_use: 'Termos de uso',
terms_of_use_placeholder: 'https://your.terms.of.use/',
terms_of_use_tip: 'URL dos termos de uso',

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

@ -96,8 +96,6 @@ const sign_in_exp = {
others: {
terms_of_use: {
title: 'TERMOS DE USO',
enable: 'Ativar termos de uso',
description: 'Adicione os termos legais para uso do seu produto',
terms_of_use: 'Termos de uso',
terms_of_use_placeholder: 'https://your.terms.of.use/',
terms_of_use_tip: 'URL dos termos de uso',

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

@ -97,8 +97,6 @@ const sign_in_exp = {
others: {
terms_of_use: {
title: 'KULLANIM KOŞULLARI',
enable: 'Kullanım koşullarını etkinleştir',
description: 'Ürününüzün kullanımına ilişkin yasal anlaşmaları ekleyin',
terms_of_use: 'Kullanım koşulları',
terms_of_use_placeholder: 'https://your.terms.of.use/',
terms_of_use_tip: 'Kullanım koşulları URLi',

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

@ -89,8 +89,6 @@ const sign_in_exp = {
others: {
terms_of_use: {
title: '使用条款',
enable: '开启使用条款',
description: '添加使用产品的法律协议。',
terms_of_use: '使用条款',
terms_of_use_placeholder: 'https://your.terms.of.use/',
terms_of_use_tip: '使用条款 URL',

86
packages/schemas/alterations/next-1671080370-terms-of-use.ts Normal file
View file

@ -0,0 +1,86 @@
import type { DatabaseTransactionConnection } from 'slonik';
import { sql } from 'slonik';
import type { AlterationScript } from '../lib/types/alteration.js';
type DeprecatedTermsOfUse = {
enabled: boolean;
contentUrl?: string;
};
type DeprecatedSignInExperience = {
id: string;
termsOfUse: DeprecatedTermsOfUse;
};
type SignInExperience = {
id: string;
termsOfUseUrl?: string | null;
};
const alterTermsOfUse = async (
signInExperience: DeprecatedSignInExperience,
pool: DatabaseTransactionConnection
) => {
const {
id,
termsOfUse: { enabled, contentUrl },
} = signInExperience;
if (enabled && contentUrl) {
await pool.query(
sql`update sign_in_experiences set terms_of_use_url = ${contentUrl} where id = ${id}`
);
}
};
const rollbackTermsOfUse = async (
signInExperience: SignInExperience,
pool: DatabaseTransactionConnection
) => {
const { id, termsOfUseUrl } = signInExperience;
const termsOfUse: DeprecatedTermsOfUse = {
enabled: Boolean(termsOfUseUrl),
contentUrl: termsOfUseUrl ?? '',
};
await pool.query(
sql`update sign_in_experiences set terms_of_use = ${JSON.stringify(
termsOfUse
)} where id = ${id}`
);
};
const alteration: AlterationScript = {
up: async (pool) => {
const rows = await pool.many<DeprecatedSignInExperience>(
sql`select * from sign_in_experiences`
);
await pool.query(sql`
alter table sign_in_experiences add column terms_of_use_url varchar(2048)
`);
await Promise.all(rows.map(async (row) => alterTermsOfUse(row, pool)));
await pool.query(sql`
alter table sign_in_experiences drop column terms_of_use
`);
},
down: async (pool) => {
const rows = await pool.many<SignInExperience>(sql`select * from sign_in_experiences`);
await pool.query(sql`
alter table sign_in_experiences add column terms_of_use jsonb not null default '{}'::jsonb
`);
await Promise.all(rows.map(async (row) => rollbackTermsOfUse(row, pool)));
await pool.query(sql`
alter table sign_in_experiences drop column terms_of_use_url
`);
},
};
export default alteration;

7
packages/schemas/src/foundations/jsonb-types.ts
View file

@ -117,13 +117,6 @@ export const brandingGuard = z.object({
export type Branding = z.infer<typeof brandingGuard>;
export const termsOfUseGuard = z.object({
enabled: z.boolean(),
contentUrl: z.string().url().optional().or(z.literal('')),
});
export type TermsOfUse = z.infer<typeof termsOfUseGuard>;
export const languageInfoGuard = z.object({
autoDetect: z.boolean(),
fallbackLanguage: languageTagGuard,

4
packages/schemas/src/seeds/sign-in-experience.ts
View file

@ -22,9 +22,7 @@ export const defaultSignInExperience: Readonly<CreateSignInExperience> = {
autoDetect: true,
fallbackLanguage: 'en',
},
termsOfUse: {
enabled: false,
},
termsOfUseUrl: null,
signUp: {
identifiers: [SignInIdentifier.Username],
password: true,

2
packages/schemas/src/types/user.ts
View file

@ -21,6 +21,8 @@ export type UserInfo<Keys extends keyof CreateUser = typeof userInfoSelectFields
Keys
>;
export type UserProfileResponse = UserInfo & { hasPasswordSet: boolean };
export enum UserRole {
Admin = 'admin',
}

2
packages/schemas/tables/sign_in_experiences.sql
View file

@ -5,7 +5,7 @@ create table sign_in_experiences (
color jsonb /* @use Color */ not null,
branding jsonb /* @use Branding */ not null,
language_info jsonb /* @use LanguageInfo */ not null,
terms_of_use jsonb /* @use TermsOfUse */ not null,
terms_of_use_url varchar(2048),
sign_in jsonb /* @use SignIn */ not null,
sign_up jsonb /* @use SignUp */ not null,
social_sign_in_connector_targets jsonb /* @use ConnectorTargets */ not null default '[]'::jsonb,

96
packages/ui/src/App.tsx
View file

@ -2,6 +2,7 @@ import { SignInMode } from '@logto/schemas';
import { useEffect } from 'react';
import { Route, Routes, BrowserRouter, Navigate } from 'react-router-dom';
import AppBoundary from './containers/AppBoundary';
import AppContent from './containers/AppContent';
import LoadingLayerProvider from './containers/LoadingLayerProvider';
import usePageContext from './hooks/use-page-context';
@ -15,6 +16,7 @@ import ErrorPage from './pages/ErrorPage';
import ForgotPassword from './pages/ForgotPassword';
import Passcode from './pages/Passcode';
import PasswordRegisterWithUsername from './pages/PasswordRegisterWithUsername';
import Profile from './pages/Profile';
import Register from './pages/Register';
import ResetPassword from './pages/ResetPassword';
import SecondaryRegister from './pages/SecondaryRegister';
@ -57,60 +59,66 @@ const App = () => {
const isSignInOnly = experienceSettings.signInMode === SignInMode.SignIn;
return (
<Provider value={context}>
<AppContent>
<BrowserRouter>
<BrowserRouter>
<Provider value={context}>
<AppBoundary>
<Routes>
<Route path="/" element={<Navigate replace to="/sign-in" />} />
<Route path="/sign-in/consent" element={<Consent />} />
<Route
path="/unknown-session"
element={<ErrorPage message="error.invalid_session" />}
/>
<Route element={<LoadingLayerProvider />}>
{/* Sign-in */}
<Route path="/profile" element={<Profile />} />
<Route element={<AppContent />}>
<Route path="/" element={<Navigate replace to="/sign-in" />} />
<Route path="/sign-in/consent" element={<Consent />} />
<Route
path="/sign-in"
element={isRegisterOnly ? <Navigate replace to="/register" /> : <SignIn />}
path="/unknown-session"
element={<ErrorPage message="error.invalid_session" />}
/>
<Route path="/sign-in/social/:connector" element={<SocialSignIn />} />
<Route path="/sign-in/:method" element={<SecondarySignIn />} />
<Route path="/sign-in/:method/password" element={<SignInPassword />} />
{/* Register */}
<Route
path="/register"
element={isSignInOnly ? <Navigate replace to="/sign-in" /> : <Register />}
/>
<Route
path="/register/username/password"
element={<PasswordRegisterWithUsername />}
/>
<Route path="/register/:method" element={<SecondaryRegister />} />
<Route element={<LoadingLayerProvider />}>
{/* Sign-in */}
<Route
path="/sign-in"
element={isRegisterOnly ? <Navigate replace to="/register" /> : <SignIn />}
/>
<Route path="/sign-in/social/:connector" element={<SocialSignIn />} />
<Route path="/sign-in/:method" element={<SecondarySignIn />} />
<Route path="/sign-in/:method/password" element={<SignInPassword />} />
{/* Forgot password */}
<Route path="/forgot-password/reset" element={<ResetPassword />} />
<Route path="/forgot-password/:method" element={<ForgotPassword />} />
{/* Register */}
<Route
path="/register"
element={isSignInOnly ? <Navigate replace to="/sign-in" /> : <Register />}
/>
<Route
path="/register/username/password"
element={<PasswordRegisterWithUsername />}
/>
<Route path="/register/:method" element={<SecondaryRegister />} />
{/* Continue set up missing profile */}
<Route path="/continue/email-or-sms/:method" element={<ContinueWithEmailOrPhone />} />
<Route path="/continue/:method" element={<Continue />} />
{/* Forgot password */}
<Route path="/forgot-password/reset" element={<ResetPassword />} />
<Route path="/forgot-password/:method" element={<ForgotPassword />} />
{/* Social sign-in pages */}
<Route path="/callback/:connector" element={<Callback />} />
<Route path="/social/register/:connector" element={<SocialRegister />} />
<Route path="/social/landing/:connector" element={<SocialLanding />} />
{/* Continue set up missing profile */}
<Route
path="/continue/email-or-sms/:method"
element={<ContinueWithEmailOrPhone />}
/>
<Route path="/continue/:method" element={<Continue />} />
{/* Always keep route path with param as the last one */}
<Route path="/:type/:method/passcode-validation" element={<Passcode />} />
{/* Social sign-in pages */}
<Route path="/callback/:connector" element={<Callback />} />
<Route path="/social/register/:connector" element={<SocialRegister />} />
<Route path="/social/landing/:connector" element={<SocialLanding />} />
{/* Always keep route path with param as the last one */}
<Route path="/:type/:method/passcode-validation" element={<Passcode />} />
</Route>
<Route path="*" element={<ErrorPage />} />
</Route>
<Route path="*" element={<ErrorPage />} />
</Routes>
</BrowserRouter>
</AppContent>
</Provider>
</AppBoundary>
</Provider>
</BrowserRouter>
);
};

7
packages/ui/src/__mocks__/logto.tsx
View file

@ -192,10 +192,7 @@ export const mockSignInExperience: SignInExperience = {
logoUrl: 'http://logto.png',
slogan: 'logto',
},
termsOfUse: {
enabled: true,
contentUrl: 'http://terms.of.use/',
},
termsOfUseUrl: 'http://terms.of.use/',
languageInfo: {
autoDetect: true,
fallbackLanguage: 'en',
@ -216,7 +213,7 @@ export const mockSignInExperienceSettings: SignInExperienceResponse = {
id: mockSignInExperience.id,
color: mockSignInExperience.color,
branding: mockSignInExperience.branding,
termsOfUse: mockSignInExperience.termsOfUse,
termsOfUseUrl: mockSignInExperience.termsOfUseUrl,
languageInfo: mockSignInExperience.languageInfo,
signIn: mockSignInExperience.signIn,
signUp: {

8
packages/ui/src/apis/profile.ts Normal file
View file

@ -0,0 +1,8 @@
import type { UserProfileResponse } from '@logto/schemas';
import api from './api';
const profileApiPrefix = '/api/profile';
export const getUserProfile = async (): Promise<UserProfileResponse> =>
api.get(profileApiPrefix).json<UserProfileResponse>();

3
packages/ui/src/assets/icons/arrow-next.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.2448 10.3488L9.05651 5.16959C8.97129 5.08367 8.86991 5.01547 8.7582 4.96894C8.6465 4.9224 8.52669 4.89844 8.40567 4.89844C8.28466 4.89844 8.16485 4.9224 8.05315 4.96894C7.94144 5.01547 7.84006 5.08367 7.75484 5.16959C7.58411 5.34133 7.48828 5.57367 7.48828 5.81584C7.48828 6.05801 7.58411 6.29034 7.75484 6.46209L12.2923 11.0454L7.75484 15.5829C7.58411 15.7547 7.48828 15.987 7.48828 16.2292C7.48828 16.4713 7.58411 16.7037 7.75484 16.8754C7.83974 16.962 7.94098 17.0309 8.0527 17.0781C8.16442 17.1253 8.28439 17.1499 8.40567 17.1504C8.52696 17.1499 8.64693 17.1253 8.75865 17.0781C8.87037 17.0309 8.97161 16.962 9.05651 16.8754L14.2448 11.6963C14.3379 11.6104 14.4121 11.5062 14.4629 11.3903C14.5137 11.2743 14.5399 11.1491 14.5399 11.0225C14.5399 10.8959 14.5137 10.7707 14.4629 10.6547C14.4121 10.5388 14.3379 10.4346 14.2448 10.3488Z" fill="currentcolor"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 977 B

3
packages/ui/src/assets/icons/nav-close.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.4099 12.0002L17.7099 7.71019C17.8982 7.52188 18.004 7.26649 18.004 7.00019C18.004 6.73388 17.8982 6.47849 17.7099 6.29019C17.5216 6.10188 17.2662 5.99609 16.9999 5.99609C16.7336 5.99609 16.4782 6.10188 16.2899 6.29019L11.9999 10.5902L7.70994 6.29019C7.52164 6.10188 7.26624 5.99609 6.99994 5.99609C6.73364 5.99609 6.47824 6.10188 6.28994 6.29019C6.10164 6.47849 5.99585 6.73388 5.99585 7.00019C5.99585 7.26649 6.10164 7.52188 6.28994 7.71019L10.5899 12.0002L6.28994 16.2902C6.19621 16.3831 6.12182 16.4937 6.07105 16.6156C6.02028 16.7375 5.99414 16.8682 5.99414 17.0002C5.99414 17.1322 6.02028 17.2629 6.07105 17.3848C6.12182 17.5066 6.19621 17.6172 6.28994 17.7102C6.3829 17.8039 6.4935 17.8783 6.61536 17.9291C6.73722 17.9798 6.86793 18.006 6.99994 18.006C7.13195 18.006 7.26266 17.9798 7.38452 17.9291C7.50638 17.8783 7.61698 17.8039 7.70994 17.7102L11.9999 13.4102L16.2899 17.7102C16.3829 17.8039 16.4935 17.8783 16.6154 17.9291C16.7372 17.9798 16.8679 18.006 16.9999 18.006C17.132 18.006 17.2627 17.9798 17.3845 17.9291C17.5064 17.8783 17.617 17.8039 17.7099 17.7102C17.8037 17.6172 17.8781 17.5066 17.9288 17.3848C17.9796 17.2629 18.0057 17.1322 18.0057 17.0002C18.0057 16.8682 17.9796 16.7375 17.9288 16.6156C17.8781 16.4937 17.8037 16.3831 17.7099 16.2902L13.4099 12.0002Z" fill="currentcolor"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

8
packages/ui/src/components/NavBar/index.module.scss
View file

@ -18,9 +18,9 @@
}
}
.backButton {
.navButton {
position: absolute;
left: _.unit(-2);
left: 0;
top: 50%;
transform: translateY(-50%);
font: var(--font-label-2);
@ -29,13 +29,13 @@
}
:global(body.mobile) {
.backButton > span {
.navButton > span {
display: none;
}
}
:global(body.desktop) {
.backButton {
.navButton {
&:hover {
text-decoration: underline;
}

28
packages/ui/src/components/NavBar/index.tsx
View file

@ -2,35 +2,41 @@ import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import ArrowPrev from '@/assets/icons/arrow-prev.svg';
import NavClose from '@/assets/icons/nav-close.svg';
import { onKeyDownHandler } from '@/utils/a11y';
import * as styles from './index.module.scss';
type Props = {
title?: string;
type?: 'back' | 'close';
};
const NavBar = ({ title }: Props) => {
const NavBar = ({ title, type = 'back' }: Props) => {
const navigate = useNavigate();
const { t } = useTranslation();
const isClosable = type === 'close';
const clickHandler = () => {
if (isClosable) {
window.close();
}
navigate(-1);
};
return (
<div className={styles.navBar}>
<div
role="button"
tabIndex={0}
className={styles.backButton}
onKeyDown={onKeyDownHandler(() => {
navigate(-1);
})}
onClick={() => {
navigate(-1);
}}
className={styles.navButton}
onKeyDown={onKeyDownHandler(clickHandler)}
onClick={clickHandler}
>
<ArrowPrev />
<span>{t('action.nav_back')}</span>
{isClosable ? <NavClose /> : <ArrowPrev />}
{!isClosable && <span>{t('action.nav_back')}</span>}
</div>
{title && <div className={styles.title}>{title}</div>}
</div>
);

22
packages/ui/src/containers/AppBoundary/index.module.scss Normal file
View file

@ -0,0 +1,22 @@
@use '@/scss/colors' as colors;
@use '@/scss/underscore' as _;
body {
&.light {
@include colors.light;
}
&.dark {
@include colors.dark;
}
}
:global(body.mobile) {
--max-width: 360px;
background: var(--color-bg-body);
}
:global(body.desktop) {
--max-width: 400px;
background: var(--color-bg-float-base);
}

48
packages/ui/src/containers/AppBoundary/index.tsx Normal file
View file

@ -0,0 +1,48 @@
import { conditionalString } from '@silverhand/essentials';
import type { ReactNode } from 'react';
import { useCallback, useContext, useEffect } from 'react';
import Toast from '@/components/Toast';
import useColorTheme from '@/hooks/use-color-theme';
import { PageContext } from '@/hooks/use-page-context';
import useTheme from '@/hooks/use-theme';
import ConfirmModalProvider from '../ConfirmModalProvider';
import * as styles from './index.module.scss';
type Props = {
children: ReactNode;
};
const AppBoundary = ({ children }: Props) => {
// Set Primary Color
useColorTheme();
const theme = useTheme();
const { platform, toast, setToast } = useContext(PageContext);
// Set Theme Mode
useEffect(() => {
document.body.classList.remove(conditionalString(styles.light), conditionalString(styles.dark));
document.body.classList.add(conditionalString(styles[theme]));
}, [theme]);
// Apply Platform Style
useEffect(() => {
document.body.classList.remove('desktop', 'mobile');
document.body.classList.add(platform === 'mobile' ? 'mobile' : 'desktop');
}, [platform]);
// Prevent internal eventListener rebind
const hideToast = useCallback(() => {
setToast('');
}, [setToast]);
return (
<ConfirmModalProvider>
<Toast message={toast} callback={hideToast} />
{children}
</ConfirmModalProvider>
);
};
export default AppBoundary;

38
packages/ui/src/containers/AppContent/index.module.scss
View file

@ -1,6 +1,4 @@
@use '@/scss/underscore' as _;
@use '@/scss/colors' as colors;
@use '@/scss/fonts' as fonts;
/* Preview Settings */
.preview {
@ -13,30 +11,10 @@
}
}
/* Foundation */
body {
--radius: 8px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: auto;
word-break: break-word;
@include colors.static;
&.light {
@include colors.light;
}
&.dark {
@include colors.dark;
}
@include fonts.fonts;
}
/* Main Layout */
.container {
position: absolute;
inset: 0;
color: var(--color-type-primary);
overflow: auto;
@include _.flex_column(center, normal);
}
@ -51,14 +29,6 @@ body {
}
:global(body.mobile) {
--max-width: 360px;
background: var(--color-bg-body);
.container {
background: var(--color-bg-body);
font: var(--font-body-2);
}
.main {
flex: 1;
align-self: stretch;
@ -69,14 +39,6 @@ body {
}
:global(body.desktop) {
--max-width: 400px;
background: var(--color-bg-float-base);
.container {
background: var(--color-bg-float-base);
font: var(--font-body-2);
}
.main {
width: 640px;
min-height: 640px;

53
packages/ui/src/containers/AppContent/index.tsx
View file

@ -1,52 +1,21 @@
import { conditionalString } from '@silverhand/essentials';
import type { ReactNode } from 'react';
import { useEffect, useCallback, useContext } from 'react';
import { useContext } from 'react';
import { Outlet } from 'react-router-dom';
import Toast from '@/components/Toast';
import ConfirmModalProvider from '@/containers/ConfirmModalProvider';
import useColorTheme from '@/hooks/use-color-theme';
import { PageContext } from '@/hooks/use-page-context';
import useTheme from '@/hooks/use-theme';
import * as styles from './index.module.scss';
export type Props = {
children: ReactNode;
};
const AppContent = ({ children }: Props) => {
const theme = useTheme();
const { toast, platform, setToast } = useContext(PageContext);
// Prevent internal eventListener rebind
const hideToast = useCallback(() => {
setToast('');
}, [setToast]);
// Set Primary Color
useColorTheme();
// Set Theme Mode
useEffect(() => {
document.body.classList.remove(conditionalString(styles.light), conditionalString(styles.dark));
document.body.classList.add(conditionalString(styles[theme]));
}, [theme]);
// Apply Platform Style
useEffect(() => {
document.body.classList.remove('desktop', 'mobile');
document.body.classList.add(platform === 'mobile' ? 'mobile' : 'desktop');
}, [platform]);
const AppContent = () => {
const { platform } = useContext(PageContext);
return (
<ConfirmModalProvider>
<div className={styles.container}>
{platform === 'web' && <div className={styles.placeHolder} />}
<main className={styles.main}>{children}</main>
{platform === 'web' && <div className={styles.placeHolder} />}
<Toast message={toast} callback={hideToast} />
</div>
</ConfirmModalProvider>
<div className={styles.container}>
{platform === 'web' && <div className={styles.placeHolder} />}
<main className={styles.main}>
<Outlet />
</main>
{platform === 'web' && <div className={styles.placeHolder} />}
</div>
);
};

7
packages/ui/src/containers/TermsOfUse/TermsOfUseConfirmModalContent/index.tsx
View file

@ -2,6 +2,7 @@ import { useContext } from 'react';
import { useTranslation, Trans } from 'react-i18next';
import TextLink from '@/components/TextLink';
import type { Props as TextLinkProps } from '@/components/TextLink';
import type { ModalContentRenderProps } from '@/hooks/use-confirm-modal';
import { PageContext } from '@/hooks/use-page-context';
import usePlatform from '@/hooks/use-platform';
@ -9,19 +10,19 @@ import { ConfirmModalMessage } from '@/types';
const TermsOfUseConfirmModalContent = ({ cancel }: ModalContentRenderProps) => {
const { experienceSettings } = useContext(PageContext);
const { termsOfUse } = experienceSettings ?? {};
const { termsOfUseUrl } = experienceSettings ?? {};
const { t } = useTranslation();
const { isMobile } = usePlatform();
const linkProps = isMobile
const linkProps: TextLinkProps = isMobile
? {
onClick: () => {
cancel(ConfirmModalMessage.SHOW_TERMS_DETAIL_MODAL);
},
}
: {
href: termsOfUse?.contentUrl,
href: termsOfUseUrl ?? undefined,
target: '_blank',
};

6
packages/ui/src/containers/TermsOfUse/index.tsx
View file

@ -7,11 +7,11 @@ type Props = {
};
const TermsOfUse = ({ className }: Props) => {
const { termsAgreement, setTermsAgreement, termsSettings, termsOfUseIframeModalHandler } =
const { termsAgreement, setTermsAgreement, termsOfUseUrl, termsOfUseIframeModalHandler } =
useTerms();
const { isMobile } = usePlatform();
if (!termsSettings?.enabled || !termsSettings.contentUrl) {
if (!termsOfUseUrl) {
return null;
}
@ -19,7 +19,7 @@ const TermsOfUse = ({ className }: Props) => {
<TermsOfUseComponent
className={className}
name="termsAgreement"
termsUrl={termsSettings.contentUrl}
termsUrl={termsOfUseUrl}
isChecked={termsAgreement}
onChange={(checked) => {
setTermsAgreement(checked);

12
packages/ui/src/hooks/use-terms.ts
View file

@ -12,12 +12,12 @@ const useTerms = () => {
const { termsAgreement, setTermsAgreement, experienceSettings } = useContext(PageContext);
const { show } = useConfirmModal();
const { termsOfUse } = experienceSettings ?? {};
const { termsOfUseUrl } = experienceSettings ?? {};
const termsOfUseIframeModalHandler = useCallback(async () => {
const [result] = await show({
className: styles.iframeModal,
ModalContent: () => createIframeConfirmModalContent(termsOfUse?.contentUrl),
ModalContent: () => createIframeConfirmModalContent(termsOfUseUrl ?? undefined),
confirmText: 'action.agree',
});
@ -27,7 +27,7 @@ const useTerms = () => {
}
return result;
}, [setTermsAgreement, show, termsOfUse?.contentUrl]);
}, [setTermsAgreement, show, termsOfUseUrl]);
const termsOfUseConfirmModalHandler = useCallback(async () => {
const [result, data] = await show({
@ -51,15 +51,15 @@ const useTerms = () => {
}, [setTermsAgreement, show, termsOfUseIframeModalHandler]);
const termsValidation = useCallback(async () => {
if (termsAgreement || !termsOfUse?.enabled || !termsOfUse.contentUrl) {
if (termsAgreement || !termsOfUseUrl) {
return true;
}
return termsOfUseConfirmModalHandler();
}, [termsAgreement, termsOfUse, termsOfUseConfirmModalHandler]);
}, [termsAgreement, termsOfUseUrl, termsOfUseConfirmModalHandler]);
return {
termsSettings: termsOfUse,
termsOfUseUrl,
termsAgreement,
termsValidation,
setTermsAgreement,

31
packages/ui/src/pages/Profile/components/FormCard/index.module.scss Normal file
View file

@ -0,0 +1,31 @@
@use '@/scss/underscore' as _;
.container {
padding: _.unit(6) _.unit(8);
display: flex;
margin-top: _.unit(4);
background: var(--color-bg-layer-1);
border-radius: 12px;
}
.title {
width: 405px;
flex-shrink: 0;
color: var(--color-neutral-variant-60);
font: var(--font-subhead-cap);
}
.content {
flex-grow: 1;
}
@media screen and (max-width: 1080px) {
.container {
flex-direction: column;
.content {
margin-top: _.unit(4);
flex-grow: unset;
}
}
}

23
packages/ui/src/pages/Profile/components/FormCard/index.tsx Normal file
View file

@ -0,0 +1,23 @@
import type { I18nKey } from '@logto/phrases-ui';
import type { ReactNode } from 'react';
import { useTranslation } from 'react-i18next';
import * as styles from './index.module.scss';
type Props = {
title: I18nKey;
children: ReactNode;
};
const FormCard = ({ title, children }: Props) => {
const { t } = useTranslation();
return (
<div className={styles.container}>
<div className={styles.title}>{t(title)}</div>
<div className={styles.content}>{children}</div>
</div>
);
};
export default FormCard;

53
packages/ui/src/pages/Profile/components/NavItem/index.module.scss Normal file
View file

@ -0,0 +1,53 @@
@use '@/scss/underscore' as _;
.container {
display: flex;
flex-direction: column;
width: 100%;
margin-top: _.unit(3);
background: var(--color-bg-layer-1);
.item {
padding-left: _.unit(5);
.wrapper {
display: flex;
flex: 1;
align-items: center;
padding: _.unit(3) 0;
}
&:active {
background: var(--color-overlay-neutral-pressed);
}
}
.item + .item {
.wrapper {
border-top: 1px solid var(--color-line-divider);
}
}
.content {
flex: 1;
display: flex;
flex-direction: column;
.label {
font: var(--font-body-1);
}
.value {
font: var(--font-body-2);
color: var(--color-type-secondary);
margin-top: _.unit(0.5);
}
}
.action {
display: flex;
align-items: center;
padding: 0 _.unit(4) 0 _.unit(3);
color: var(--color-type-secondary);
}
}

51
packages/ui/src/pages/Profile/components/NavItem/index.tsx Normal file
View file

@ -0,0 +1,51 @@
import type { I18nKey } from '@logto/phrases-ui';
import type { Nullable } from '@silverhand/essentials';
import { useTranslation } from 'react-i18next';
import ArrowNext from '@/assets/icons/arrow-next.svg';
import { onKeyDownHandler } from '@/utils/a11y';
import * as styles from './index.module.scss';
type Item = {
label: I18nKey;
value?: Nullable<string>;
onTap: () => void;
};
type Props = {
data: Item[];
};
const NavItem = ({ data }: Props) => {
const { t } = useTranslation();
return (
<div className={styles.container}>
{data.map(({ label, value, onTap }) => (
<div
key={label}
className={styles.item}
role="button"
tabIndex={0}
onClick={onTap}
onKeyDown={onKeyDownHandler({
Enter: onTap,
})}
>
<div className={styles.wrapper}>
<div className={styles.content}>
<div className={styles.label}>{t(label)}</div>
{value && <div className={styles.value}>{value}</div>}
</div>
<div className={styles.action}>
<ArrowNext />
</div>
</div>
</div>
))}
</div>
);
};
export default NavItem;

30
packages/ui/src/pages/Profile/components/Table/index.module.scss Normal file
View file

@ -0,0 +1,30 @@
@use '@/scss/underscore' as _;
.container {
width: 100%;
.title {
font: var(--font-label-2);
margin-bottom: _.unit(1);
}
table {
width: 100%;
border-spacing: 0;
border: 1px solid var(--color-neutral-variant-90);
border-radius: 8px;
td {
padding: _.unit(6);
border-bottom: 1px solid var(--color-neutral-variant-90);
&:first-child {
width: 35%;
}
}
tr:last-child td {
border-bottom: none;
}
}
}

44
packages/ui/src/pages/Profile/components/Table/index.tsx Normal file
View file

@ -0,0 +1,44 @@
import type { I18nKey } from '@logto/phrases-ui';
import type { ReactNode } from 'react';
import { useTranslation } from 'react-i18next';
import * as styles from './index.module.scss';
export type Row = {
label: I18nKey;
value: unknown;
renderer?: (value: unknown) => ReactNode;
};
type Props = {
title: I18nKey;
data: Row[];
};
const defaultRenderer = (value: unknown) => (value ? String(value) : '-');
const Table = ({ title, data }: Props) => {
const { t } = useTranslation();
if (data.length === 0) {
return null;
}
return (
<div className={styles.container}>
<div className={styles.title}>{t(title)}</div>
<table>
<tbody>
{data.map(({ label, value, renderer = defaultRenderer }) => (
<tr key={label}>
<td>{t(label)}</td>
<td>{renderer(value)}</td>
</tr>
))}
</tbody>
</table>
</div>
);
};
export default Table;

51
packages/ui/src/pages/Profile/containers/DesktopView/index.tsx Normal file
View file

@ -0,0 +1,51 @@
import type { UserProfileResponse } from '@logto/schemas';
import { useTranslation } from 'react-i18next';
import FormCard from '../../components/FormCard';
import Table from '../../components/Table';
type Props = {
profile: UserProfileResponse;
};
const DesktopView = ({ profile }: Props) => {
const { t } = useTranslation();
const { avatar, name, username, primaryEmail, primaryPhone, hasPasswordSet } = profile;
return (
<>
<FormCard title="profile.settings.title">
<Table
title="profile.settings.profile_information"
data={[
{ label: 'profile.settings.avatar', value: avatar },
{ label: 'profile.settings.name', value: name },
{ label: 'profile.settings.username', value: username },
]}
/>
</FormCard>
<FormCard title="profile.password.title">
<Table
title="profile.password.reset_password"
data={[
{
label: 'profile.password.reset_password',
value: hasPasswordSet ? '******' : t('profile.not_set'),
},
]}
/>
</FormCard>
<FormCard title="profile.link_account.title">
<Table
title="profile.link_account.email_phone_sign_in"
data={[
{ label: 'profile.link_account.email', value: primaryEmail },
{ label: 'profile.link_account.phone', value: primaryPhone },
]}
/>
</FormCard>
</>
);
};
export default DesktopView;

71
packages/ui/src/pages/Profile/containers/MobileView/index.tsx Normal file
View file

@ -0,0 +1,71 @@
import type { UserProfileResponse } from '@logto/schemas';
import { useTranslation } from 'react-i18next';
import NavItem from '../../components/NavItem';
type Props = {
profile: UserProfileResponse;
};
const MobileView = ({ profile }: Props) => {
const { t } = useTranslation();
const { username, primaryEmail, primaryPhone, hasPasswordSet, identities } = profile;
const socialConnectorNames = identities?.length
? Object.keys(identities).join(', ')
: t('profile.not_set');
return (
<>
<NavItem
data={[
{
label: 'profile.settings.username',
value: username ?? t('profile.not_set'),
onTap: () => {
console.log('username');
},
},
]}
/>
<NavItem
data={[
{
label: 'profile.password.reset_password_sc',
value: hasPasswordSet ? '******' : t('profile.not_set'),
onTap: () => {
console.log('password');
},
},
]}
/>
<NavItem
data={[
{
label: 'profile.link_account.email',
value: primaryEmail ?? t('profile.not_set'),
onTap: () => {
console.log('email');
},
},
{
label: 'profile.link_account.phone_sc',
value: primaryPhone ?? t('profile.not_set'),
onTap: () => {
console.log('phone');
},
},
{
label: 'profile.link_account.social_sc',
value: socialConnectorNames,
onTap: () => {
console.log('social accounts');
},
},
]}
/>
</>
);
};
export default MobileView;

52
packages/ui/src/pages/Profile/index.module.scss Normal file
View file

@ -0,0 +1,52 @@
@use '@/scss/underscore' as _;
.container {
@include _.flex-column(center, normal);
position: absolute;
inset: 0;
overflow-y: auto;
.wrapper {
@include _.flex-column(normal, normal);
width: 100%;
max-width: 1200px;
flex: 1;
padding: _.unit(4);
.header {
margin-top: _.unit(2);
.title {
font: var(--font-title-1);
margin-bottom: _.unit(1);
}
.subtitle {
font: var(--font-body-2);
color: var(--color-type-secondary);
}
}
}
}
:global(body.mobile) {
.container {
background: var(--color-bg-body-base);
.wrapper {
padding: 0;
.header {
margin: 0;
padding: 0 _.unit(4);
background: var(--color-bg-layer-1);
}
}
}
}
:global(body.desktop) {
.container {
background: var(--color-surface);
}
}

46
packages/ui/src/pages/Profile/index.tsx Normal file
View file

@ -0,0 +1,46 @@
import { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { getUserProfile } from '@/apis/profile';
import LoadingLayer from '@/components/LoadingLayer';
import NavBar from '@/components/NavBar';
import useApi from '@/hooks/use-api';
import usePlatform from '@/hooks/use-platform';
import DesktopView from './containers/DesktopView';
import MobileView from './containers/MobileView';
import * as styles from './index.module.scss';
const Profile = () => {
const { t } = useTranslation();
const { isMobile } = usePlatform();
const { run: asyncGetProfile, result: profile } = useApi(getUserProfile);
const ContainerView = isMobile ? MobileView : DesktopView;
useEffect(() => {
void asyncGetProfile();
}, [asyncGetProfile]);
if (!profile) {
return <LoadingLayer />;
}
return (
<div className={styles.container}>
<div className={styles.wrapper}>
<div className={styles.header}>
{isMobile && <NavBar type="close" title={t('profile.title')} />}
{!isMobile && (
<>
<div className={styles.title}>{t('profile.title')}</div>
<div className={styles.subtitle}>{t('profile.description')}</div>
</>
)}
</div>
<ContainerView profile={profile} />
</div>
</div>
);
};
export default Profile;

7
packages/ui/src/scss/_colors.scss
View file

@ -55,6 +55,7 @@
/* Background */
--color-bg-body-base: var(--color-neutral-95);
--color-bg-body: var(--color-neutral-100);
--color-bg-layer-1: var(--color-static-white);
--color-bg-layer-2: var(--color-neutral-95);
--color-bg-body-overlay: var(--color-neutral-100);
--color-bg-float-base: var(--color-neutral-variant-90);
@ -93,6 +94,8 @@
--color-overlay-brand-hover: rgba(93, 52, 242, 8%); // 8% --color-brand-default
--color-overlay-brand-pressed: rgba(93, 52, 242, 12%); // 12% --color-brand-default
--color-overlay-brand-focused: rgba(93, 52, 242, 16%); // 16% --color-brand-default
--color-surface: var(--color-neutral-99);
}
@mixin dark {
@ -156,6 +159,10 @@
--color-bg-body-base: var(--color-neutral-100);
--color-bg-body: var(--color-surface);
--color-bg-body-overlay: var(--color-surface-2);
--color-bg-layer-1:
linear-gradient(0deg, rgba(202, 190, 255, 8%), rgba(202, 190, 255, 8%)),
linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)),
#191c1d;
--color-bg-layer-2: var(--color-surface-4);
--color-bg-float-base: var(--color-neutral-100);
--color-bg-float: var(--color-surface-2);

2
packages/ui/src/scss/_fonts.scss
View file

@ -24,4 +24,6 @@ $font-family:
--font-body-1: 400 16px/24px #{$font-family};
--font-body-2: 400 14px/20px #{$font-family};
--font-body-3: 400 12px/16px #{$font-family};
--font-subhead-cap: 700 12px/16px #{$font-family};
}

13
packages/ui/src/scss/normalized.scss
View file

@ -1,7 +1,18 @@
@use '@/scss/colors' as colors;
@use '@/scss/fonts' as fonts;
body {
@include colors.static;
@include fonts.fonts;
--radius: 8px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: auto;
margin: 0;
padding: 0;
font-family: sans-serif;
word-break: break-word;
color: var(--color-type-primary);
font: var(--font-body-2);
}
* {

2
packages/ui/src/utils/sign-in-experience.test.ts
View file

@ -16,7 +16,7 @@ describe('getSignInExperienceSettings', () => {
expect(settings.branding).toEqual(mockSignInExperience.branding);
expect(settings.languageInfo).toEqual(mockSignInExperience.languageInfo);
expect(settings.termsOfUse).toEqual(mockSignInExperience.termsOfUse);
expect(settings.termsOfUseUrl).toEqual(mockSignInExperience.termsOfUseUrl);
expect(settings.signUp.identifiers).toContain('username');
expect(settings.signIn.methods).toHaveLength(3);
});