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

refactor(ui): align api naming with core (#1992)

Browse source 
* refactor(ui): align api naming with core

align api naming with core

* fix(ui): fix cr comments

update the reset-password api naming
This commit is contained in:
simeng-li 2022-09-26 15:59:53 +08:00 committed by GitHub
parent af1ccf6ffa
commit 999867ea40
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 126 additions and 107 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -69,8 +69,8 @@ const App = () => {
<Route path="/register/:method" element={<Register />} />
{/* forgot password */}
<Route path="/forgot-password/reset" element={<ResetPassword />} />
<Route path="/forgot-password/:method" element={<ForgotPassword />} />
<Route path="/reset-password" element={<ResetPassword />} />
{/* social sign-in pages */}

11
packages/ui/src/apis/api.test.ts
View file

@ -1,5 +1,8 @@
import {
verifyForgotPasswordEmailPasscode,
verifyForgotPasswordSmsPasscode,
} from './forgot-password';
import { verifyRegisterEmailPasscode, verifyRegisterSmsPasscode } from './register';
import { verifyResetPasswordEmailPasscode, verifyResetPasswordSmsPasscode } from './reset-password';
import { verifySignInEmailPasscode, verifySignInSmsPasscode } from './sign-in';
import { getVerifyPasscodeApi } from './utils';
@ -9,7 +12,9 @@ describe('api', () => {
expect(getVerifyPasscodeApi('register', 'email')).toBe(verifyRegisterEmailPasscode);
expect(getVerifyPasscodeApi('sign-in', 'sms')).toBe(verifySignInSmsPasscode);
expect(getVerifyPasscodeApi('sign-in', 'email')).toBe(verifySignInEmailPasscode);
expect(getVerifyPasscodeApi('reset-password', 'email')).toBe(verifyResetPasswordEmailPasscode);
expect(getVerifyPasscodeApi('reset-password', 'sms')).toBe(verifyResetPasswordSmsPasscode);
expect(getVerifyPasscodeApi('forgot-password', 'email')).toBe(
verifyForgotPasswordEmailPasscode
);
expect(getVerifyPasscodeApi('forgot-password', 'sms')).toBe(verifyForgotPasswordSmsPasscode);
});
});

58
packages/ui/src/apis/forgot-password.ts Normal file
View file

@ -0,0 +1,58 @@
import api from './api';
type Response = {
redirectTo: string;
};
const forgotPasswordApiPrefix = '/api/session/forgot-password';
export const sendForgotPasswordSmsPasscode = async (phone: string) => {
await api
.post(`${forgotPasswordApiPrefix}/sms/send-passcode`, {
json: {
phone,
},
})
.json();
return { success: true };
};
export const verifyForgotPasswordSmsPasscode = async (phone: string, code: string) =>
api
.post(`${forgotPasswordApiPrefix}/sms/verify-passcode`, {
json: {
phone,
code,
},
})
.json<Response>();
export const sendForgotPasswordEmailPasscode = async (email: string) => {
await api
.post(`${forgotPasswordApiPrefix}/email/send-passcode`, {
json: {
email,
},
})
.json();
return { success: true };
};
export const verifyForgotPasswordEmailPasscode = async (email: string, code: string) =>
api
.post(`${forgotPasswordApiPrefix}/email/verify-passcode`, {
json: {
email,
code,
},
})
.json<Response>();
export const resetPassword = async (password: string) =>
api
.post(`${forgotPasswordApiPrefix}/reset`, {
json: { password },
})
.json<Response>();

46
packages/ui/src/apis/index.test.ts
View file

@ -1,6 +1,13 @@
import ky from 'ky';
import { consent } from './consent';
import {
verifyForgotPasswordEmailPasscode,
verifyForgotPasswordSmsPasscode,
sendForgotPasswordEmailPasscode,
sendForgotPasswordSmsPasscode,
resetPassword,
} from './forgot-password';
import {
register,
sendRegisterEmailPasscode,
@ -8,12 +15,6 @@ import {
verifyRegisterEmailPasscode,
verifyRegisterSmsPasscode,
} from './register';
import {
verifyResetPasswordEmailPasscode,
verifyResetPasswordSmsPasscode,
sendResetPasswordEmailPasscode,
sendResetPasswordSmsPasscode,
} from './reset-password';
import {
signInBasic,
sendSignInSmsPasscode,
@ -185,18 +186,18 @@ describe('api', () => {
});
});
it('sendResetPasswordSmsPasscode', async () => {
await sendResetPasswordSmsPasscode(phone);
expect(ky.post).toBeCalledWith('/api/session/reset-password/sms/send-passcode', {
it('sendForgotPasswordSmsPasscode', async () => {
await sendForgotPasswordSmsPasscode(phone);
expect(ky.post).toBeCalledWith('/api/session/forgot-password/sms/send-passcode', {
json: {
phone,
},
});
});
it('verifyResetPasswordSmsPasscode', async () => {
await verifyResetPasswordSmsPasscode(phone, code);
expect(ky.post).toBeCalledWith('/api/session/reset-password/sms/verify-passcode', {
it('verifyForgotPasswordSmsPasscode', async () => {
await verifyForgotPasswordSmsPasscode(phone, code);
expect(ky.post).toBeCalledWith('/api/session/forgot-password/sms/verify-passcode', {
json: {
phone,
code,
@ -204,18 +205,18 @@ describe('api', () => {
});
});
it('sendResetPasswordEmailPasscode', async () => {
await sendResetPasswordEmailPasscode(email);
expect(ky.post).toBeCalledWith('/api/session/reset-password/email/send-passcode', {
it('sendForgotPasswordEmailPasscode', async () => {
await sendForgotPasswordEmailPasscode(email);
expect(ky.post).toBeCalledWith('/api/session/forgot-password/email/send-passcode', {
json: {
email,
},
});
});
it('verifyResetPasswordEmailPasscode', async () => {
await verifyResetPasswordEmailPasscode(email, code);
expect(ky.post).toBeCalledWith('/api/session/reset-password/email/verify-passcode', {
it('verifyForgotPasswordEmailPasscode', async () => {
await verifyForgotPasswordEmailPasscode(email, code);
expect(ky.post).toBeCalledWith('/api/session/forgot-password/email/verify-passcode', {
json: {
email,
code,
@ -274,4 +275,13 @@ describe('api', () => {
},
});
});
it('resetPassword', async () => {
await resetPassword('password');
expect(ky.post).toBeCalledWith('/api/session/forgot-password/reset', {
json: {
password: 'password',
},
});
});
});

12
packages/ui/src/apis/register.ts
View file

@ -1,12 +1,14 @@
import api from './api';
const registerApiPrefix = '/api/session/register';
export const register = async (username: string, password: string) => {
type Response = {
redirectTo: string;
};
return api
.post('/api/session/register/username-password', {
.post(`${registerApiPrefix}/username-password`, {
json: {
username,
password,
@ -17,7 +19,7 @@ export const register = async (username: string, password: string) => {
export const sendRegisterSmsPasscode = async (phone: string) => {
await api
.post('/api/session/register/passwordless/sms/send-passcode', {
.post(`${registerApiPrefix}/passwordless/sms/send-passcode`, {
json: {
phone,
},
@ -33,7 +35,7 @@ export const verifyRegisterSmsPasscode = async (phone: string, code: string) =>
};
return api
.post('/api/session/register/passwordless/sms/verify-passcode', {
.post(`${registerApiPrefix}/passwordless/sms/verify-passcode`, {
json: {
phone,
code,
@ -44,7 +46,7 @@ export const verifyRegisterSmsPasscode = async (phone: string, code: string) =>
export const sendRegisterEmailPasscode = async (email: string) => {
await api
.post('/api/session/register/passwordless/email/send-passcode', {
.post(`${registerApiPrefix}/passwordless/email/send-passcode`, {
json: {
email,
},
@ -60,7 +62,7 @@ export const verifyRegisterEmailPasscode = async (email: string, code: string) =
};
return api
.post('/api/session/register/passwordless/email/verify-passcode', {
.post(`${registerApiPrefix}/passwordless/email/verify-passcode`, {
json: {
email,
code,

56
packages/ui/src/apis/reset-password.ts
View file

@ -1,56 +0,0 @@
import api from './api';
type Response = {
redirectTo: string;
};
export const sendResetPasswordSmsPasscode = async (phone: string) => {
await api
.post('/api/session/reset-password/sms/send-passcode', {
json: {
phone,
},
})
.json();
return { success: true };
};
export const verifyResetPasswordSmsPasscode = async (phone: string, code: string) =>
api
.post('/api/session/reset-password/sms/verify-passcode', {
json: {
phone,
code,
},
})
.json<Response>();
export const sendResetPasswordEmailPasscode = async (email: string) => {
await api
.post('/api/session/reset-password/email/send-passcode', {
json: {
email,
},
})
.json();
return { success: true };
};
export const verifyResetPasswordEmailPasscode = async (email: string, code: string) =>
api
.post('/api/session/reset-password/email/verify-passcode', {
json: {
email,
code,
},
})
.json<Response>();
export const resetPassword = async (password: string) =>
api
.post('/api/session/reset-password', {
json: { password },
})
.json<Response>();

28
packages/ui/src/apis/utils.ts
View file

@ -1,17 +1,17 @@
import { UserFlow } from '@/types';
import {
sendForgotPasswordEmailPasscode,
sendForgotPasswordSmsPasscode,
verifyForgotPasswordEmailPasscode,
verifyForgotPasswordSmsPasscode,
} from './forgot-password';
import {
verifyRegisterEmailPasscode,
verifyRegisterSmsPasscode,
sendRegisterEmailPasscode,
sendRegisterSmsPasscode,
} from './register';
import {
sendResetPasswordEmailPasscode,
sendResetPasswordSmsPasscode,
verifyResetPasswordEmailPasscode,
verifyResetPasswordSmsPasscode,
} from './reset-password';
import {
verifySignInEmailPasscode,
verifySignInSmsPasscode,
@ -25,12 +25,12 @@ export const getSendPasscodeApi = (
type: UserFlow,
method: PasscodeChannel
): ((_address: string) => Promise<{ success: boolean }>) => {
if (type === 'reset-password' && method === 'email') {
return sendResetPasswordEmailPasscode;
if (type === 'forgot-password' && method === 'email') {
return sendForgotPasswordEmailPasscode;
}
if (type === 'reset-password' && method === 'sms') {
return sendResetPasswordSmsPasscode;
if (type === 'forgot-password' && method === 'sms') {
return sendForgotPasswordSmsPasscode;
}
if (type === 'sign-in' && method === 'email') {
@ -52,12 +52,12 @@ export const getVerifyPasscodeApi = (
type: UserFlow,
method: PasscodeChannel
): ((_address: string, code: string, socialToBind?: string) => Promise<{ redirectTo: string }>) => {
if (type === 'reset-password' && method === 'email') {
return verifyResetPasswordEmailPasscode;
if (type === 'forgot-password' && method === 'email') {
return verifyForgotPasswordEmailPasscode;
}
if (type === 'reset-password' && method === 'sms') {
return verifyResetPasswordSmsPasscode;
if (type === 'forgot-password' && method === 'sms') {
return verifyForgotPasswordSmsPasscode;
}
if (type === 'sign-in' && method === 'email') {

4
packages/ui/src/containers/ResetPassword/index.test.tsx
View file

@ -1,11 +1,11 @@
import { fireEvent, act, waitFor } from '@testing-library/react';
import renderWithPageContext from '@/__mocks__/RenderWithPageContext';
import { resetPassword } from '@/apis/reset-password';
import { resetPassword } from '@/apis/forgot-password';
import ResetPassword from '.';
jest.mock('@/apis/reset-password', () => ({
jest.mock('@/apis/forgot-password', () => ({
resetPassword: jest.fn(async () => ({ redirectTo: '/' })),
}));

2
packages/ui/src/containers/ResetPassword/index.tsx
View file

@ -2,7 +2,7 @@ import classNames from 'classnames';
import { useEffect, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { resetPassword } from '@/apis/reset-password';
import { resetPassword } from '@/apis/forgot-password';
import Button from '@/components/Button';
import Input from '@/components/Input';
import useApi from '@/hooks/use-api';

4
packages/ui/src/pages/ForgotPassword/index.tsx
View file

@ -18,11 +18,11 @@ const ForgotPassword = () => {
const forgotPasswordForm = useMemo(() => {
if (method === 'sms') {
return <PhonePasswordless autoFocus hasSwitch type="reset-password" hasTerms={false} />;
return <PhonePasswordless autoFocus hasSwitch type="forgot-password" hasTerms={false} />;
}
if (method === 'email') {
return <EmailPasswordless autoFocus hasSwitch type="reset-password" hasTerms={false} />;
return <EmailPasswordless autoFocus hasSwitch type="forgot-password" hasTerms={false} />;
}
}, [method]);

6
packages/ui/src/pages/ResetPassword/index.test.tsx
View file

@ -4,11 +4,11 @@ import { MemoryRouter, Routes, Route } from 'react-router-dom';
import ResetPassword from '.';
describe('ForgotPassword', () => {
it('render reset-password page properly', () => {
it('render forgot-password page properly', () => {
const { queryByText } = render(
<MemoryRouter initialEntries={['/reset-password']}>
<MemoryRouter initialEntries={['/forgot-password']}>
<Routes>
<Route path="/reset-password" element={<ResetPassword />} />
<Route path="/forgot-password" element={<ResetPassword />} />
</Routes>
</MemoryRouter>
);

2
packages/ui/src/types/guard.ts
View file

@ -14,5 +14,5 @@ export const passcodeMethodGuard = s.union([s.literal('email'), s.literal('sms')
export const userFlowGuard = s.union([
s.literal('sign-in'),
s.literal('register'),
s.literal('reset-password'),
s.literal('forgot-password'),
]);

2
packages/ui/src/types/index.ts
View file

@ -1,7 +1,7 @@
import type { LanguageKey } from '@logto/core-kit';
import { SignInExperience, ConnectorMetadata, AppearanceMode } from '@logto/schemas';
export type UserFlow = 'sign-in' | 'register' | 'reset-password';
export type UserFlow = 'sign-in' | 'register' | 'forgot-password';
export type SignInMethod = 'username' | 'email' | 'sms' | 'social';
export type LocalSignInMethod = Exclude<SignInMethod, 'social'>;