0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-16 20:26:19 -05:00

feat(core): update the OIDC post signout page (#3183)

This commit is contained in:
simeng-li 2023-02-24 10:20:53 +08:00 committed by GitHub
parent af66760a42
commit ab4b98d14d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 211 additions and 0 deletions

View file

@ -3,7 +3,9 @@
import { readFileSync } from 'fs';
import { userClaims } from '@logto/core-kit';
import type { I18nKey } from '@logto/phrases';
import { CustomClientMetadataKey, demoAppApplicationId } from '@logto/schemas';
import i18next from 'i18next';
import Provider, { errors, ResourceServer } from 'oidc-provider';
import snakecaseKeys from 'snakecase-keys';
@ -37,6 +39,7 @@ export default function initOidc(envSet: EnvSet, queries: Queries, libraries: Li
const { findUserScopesForResourceIndicator } = libraries.users;
const { findApplicationScopesForResourceIndicator } = libraries.applications;
const logoutSource = readFileSync('static/html/logout.html', 'utf8');
const logoutSuccessSource = readFileSync('static/html/post-logout/index.html', 'utf8');
const cookieConfig = Object.freeze({
sameSite: 'lax',
@ -76,6 +79,13 @@ export default function initOidc(envSet: EnvSet, queries: Queries, libraries: Li
// eslint-disable-next-line no-template-curly-in-string
ctx.body = logoutSource.replace('${form}', form);
},
postLogoutSuccessSource(ctx) {
ctx.body = logoutSuccessSource.replace(
// eslint-disable-next-line no-template-curly-in-string
'${message}',
i18next.t<string, I18nKey>('oidc.logout_success')
);
},
},
// https://github.com/panva/node-oidc-provider/blob/main/docs/README.md#featuresresourceindicators
resourceIndicators: {

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View file

@ -0,0 +1,145 @@
<!-- https://github.com/panva/node-oidc-provider/blob/main/docs/README.md#logoutsource -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="./favicon.ico" />
<title>Sign Out</title>
</head>
<body>
<div class="viewBox">
<div class="container">
<div class="placeHolder"></div>
<main>
<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg" id="success">
<circle cx="39.9999" cy="40" r="26.6667" fill="#68BE6C"/>
<g filter="url(#filter0_d_694_17138)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M25.8563 36.6664C24.5545 37.9682 24.5545 40.0787 25.8563 41.3805L35.2834 50.8075L35.2844 50.8085C36.5861 52.1103 38.6967 52.1103 39.9984 50.8086C40.0217 50.7853 40.0445 50.7618 40.067 50.738L54.1396 36.6654C55.4413 35.3637 55.4413 33.2531 54.1396 31.9514C52.8378 30.6496 50.7273 30.6496 49.4255 31.9514L37.6404 43.7365L30.5703 36.6664C29.2686 35.3647 27.158 35.3647 25.8563 36.6664Z" fill="url(#paint0_linear_694_17138)"/>
</g>
<defs>
<filter id="filter0_d_694_17138" x="19.8799" y="27.6417" width="40.236" height="30.8098" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1.66667"/>
<feGaussianBlur stdDeviation="2.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.209219 0 0 0 0 0.4875 0 0 0 0 0.221061 0 0 0 0.1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_694_17138"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_694_17138" result="shape"/>
</filter>
<linearGradient id="paint0_linear_694_17138" x1="47.4984" y1="27.5" x2="33.3318" y2="50.8333" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#E9F2E9"/>
</linearGradient>
</defs>
</svg>
<div class="message">${message}</div>
<div class="signature">
Powered By
<svg viewBox="0 0 53 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.8" clip-path="url(#clip0_1301_6891)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 4.5299C1.5 4.15639 1.5 3.96963 1.56856 3.81931C1.62899 3.68684 1.72616 3.57457 1.84851 3.49586C1.98735 3.40655 2.17193 3.38004 2.5411 3.32702L7.8061 2.57085C8.284 2.50221 8.52295 2.46789 8.70864 2.54035C8.87165 2.60396 9.00768 2.72206 9.09369 2.87463C9.19167 3.04844 9.19167 3.2902 9.19167 3.77374V14.2263C9.19167 14.7098 9.19167 14.9516 9.09369 15.1254C9.00768 15.2779 8.87165 15.396 8.70864 15.4596C8.52296 15.5321 8.284 15.4978 7.80611 15.4291H7.8061L2.5411 14.673L2.54108 14.673L2.54106 14.673C2.17192 14.62 1.98734 14.5934 1.84851 14.5041C1.72616 14.4254 1.62899 14.3132 1.56856 14.1807C1.5 14.0304 1.5 13.8436 1.5 13.4701V4.5299ZM6.80838 8.07075C6.80838 7.959 6.80838 7.90312 6.82939 7.85895C6.8479 7.82005 6.87758 7.78756 6.91464 7.76561C6.95672 7.74068 7.01237 7.73562 7.12366 7.7255L7.62199 7.6802H7.622C7.75312 7.66828 7.81868 7.66232 7.8693 7.68419C7.91378 7.7034 7.95053 7.73696 7.97369 7.77951C8.00005 7.82795 8.00005 7.89378 8.00005 8.02544V9.97456C8.00005 10.1062 8.00005 10.1721 7.97369 10.2205C7.95053 10.263 7.91378 10.2966 7.8693 10.3158C7.81868 10.3377 7.75312 10.3317 7.62199 10.3198L7.12366 10.2745C7.01237 10.2644 6.95672 10.2593 6.91464 10.2344C6.87758 10.2124 6.8479 10.1799 6.82939 10.141C6.80838 10.0969 6.80838 10.041 6.80838 9.92925V8.07075ZM10.6866 3.58339H9.94997V14.4167H10.6866C11.1113 14.4167 11.3237 14.4167 11.4859 14.3341C11.6286 14.2614 11.7446 14.1454 11.8173 14.0027C11.9 13.8405 11.9 13.6281 11.9 13.2034V4.79673C11.9 4.37202 11.9 4.15967 11.8173 3.99745C11.7446 3.85476 11.6286 3.73875 11.4859 3.66605C11.3237 3.58339 11.1113 3.58339 10.6866 3.58339Z" fill="#928F9A"/>
</g>
<path d="M25.8045 13.8726C25.0568 13.8726 24.4112 13.7173 23.8674 13.4066C23.3237 13.0959 22.9062 12.6638 22.6149 12.1103C22.3236 11.5472 22.1779 10.8966 22.1779 10.1587C22.1779 9.40134 22.3284 8.74594 22.6294 8.19249C22.9304 7.63904 23.3528 7.20696 23.8965 6.89625C24.45 6.58555 25.0957 6.43019 25.8336 6.43019C26.5813 6.43019 27.2221 6.58555 27.7561 6.89625C28.2999 7.20696 28.7222 7.63904 29.0232 8.19249C29.3242 8.74594 29.4747 9.39649 29.4747 10.1441C29.4747 10.8821 29.3194 11.5326 29.0087 12.0958C28.7077 12.6589 28.2853 13.0959 27.7416 13.4066C27.1978 13.7076 26.5521 13.8629 25.8045 13.8726ZM25.819 12.4599C26.2269 12.4599 26.5764 12.3579 26.8677 12.154C27.159 11.9501 27.3823 11.6734 27.5377 11.3239C27.7027 10.9743 27.7853 10.5811 27.7853 10.1441C27.7853 9.69748 27.7076 9.29939 27.5522 8.94984C27.3969 8.6003 27.1735 8.32843 26.8823 8.13423C26.591 7.93033 26.2414 7.82838 25.8336 7.82838C25.4452 7.82838 25.1005 7.93033 24.7995 8.13423C24.4985 8.33814 24.2655 8.61486 24.1004 8.96441C23.9451 9.31395 23.8626 9.70719 23.8528 10.1441C23.8528 10.5908 23.9305 10.9889 24.0859 11.3384C24.2412 11.688 24.4694 11.9647 24.7704 12.1686C25.0714 12.3628 25.421 12.4599 25.819 12.4599Z" fill="#928F9A"/>
<path d="M36.9997 6.69551C36.9997 6.65355 36.9656 6.61953 36.9237 6.61953H35.4299C35.3879 6.61953 35.3539 6.65355 35.3539 6.69551V14.1494C35.3539 14.6445 35.1694 14.9521 34.8004 15.224C34.4412 15.4958 34.0371 15.5847 33.4642 15.5944C33.0661 15.5847 32.6926 15.5493 32.3625 15.4425C32.0528 15.3514 31.714 15.2176 31.3606 15.041C31.3221 15.0218 31.2752 15.0378 31.257 15.0767L30.72 16.2212C30.7045 16.2543 30.7146 16.2938 30.7448 16.3144C30.9086 16.4259 31.1002 16.5255 31.3195 16.6132C31.5623 16.7103 31.8099 16.788 32.0623 16.8462C32.3245 16.9142 32.5953 16.9709 32.8284 17C33.0711 17.0292 33.3003 17.0331 33.4459 17.0331C34.1839 17.0331 34.815 16.9166 35.3393 16.6836C35.8733 16.4505 36.2811 16.1204 36.5627 15.6932C36.854 15.266 36.9997 14.7562 36.9997 14.1639V6.69551ZM35.8106 11.5197C35.7884 11.4671 35.718 11.4568 35.6805 11.4999C35.3946 11.8287 35.1045 12.0615 34.8296 12.2123C34.5383 12.3773 34.2033 12.4599 33.8246 12.4599C33.4362 12.4599 33.0964 12.3628 32.8051 12.1686C32.5235 11.9647 32.3099 11.688 32.1643 11.3384C32.0186 10.9889 31.9458 10.5859 31.9458 10.1296C31.9458 9.69263 32.0186 9.30424 32.1643 8.96441C32.3099 8.61486 32.5235 8.33814 32.8051 8.13423C33.0964 7.93033 33.4411 7.82838 33.8392 7.82838C34.2081 7.82838 34.4994 7.90606 34.8004 8.06141C35.0814 8.20191 35.3805 8.52276 35.6379 8.85786C35.6737 8.90455 35.747 8.89586 35.77 8.84166L36.1834 7.86647C36.1934 7.84272 36.1908 7.81552 36.1761 7.79436C35.6547 7.04597 34.7725 6.43019 33.7681 6.43019C33.0399 6.43019 32.4653 6.58555 31.9312 6.89625C31.3972 7.20696 30.9845 7.63904 30.6933 8.19249C30.4117 8.74594 30.2709 9.39163 30.2709 10.1296C30.2709 10.8869 30.4117 11.5472 30.6933 12.1103C30.9748 12.6638 31.3778 13.0959 31.9021 13.4066C32.4361 13.7173 33.0673 13.8726 33.7955 13.8726C34.0673 13.8726 34.3489 13.8192 34.6402 13.7124C34.9412 13.6153 35.2325 13.4697 35.5141 13.2755C35.7835 13.0897 36.0218 12.8683 36.229 12.6115C36.2463 12.5899 36.2502 12.5606 36.2394 12.5351L35.8106 11.5197Z" fill="#928F9A"/>
<path d="M42.4866 6.75377C42.4866 6.71181 42.4526 6.67779 42.4106 6.67779H40.7857C40.7437 6.67779 40.7097 6.64377 40.7097 6.60181V4.61525C40.7097 4.57328 40.6757 4.53926 40.6337 4.53926H39.1545C39.1125 4.53926 39.0785 4.57328 39.0785 4.61525V6.60181C39.0785 6.64377 39.0445 6.67779 39.0025 6.67779H38.0129C37.9707 6.67779 37.9365 6.71229 37.937 6.75457L37.9499 7.98623C37.9504 8.02788 37.9843 8.06141 38.0259 8.06141H39.0025C39.0445 8.06141 39.0785 8.09543 39.0785 8.13739V11.5714C39.0785 12.0861 39.1805 12.523 39.3844 12.8822C39.598 13.2318 39.8893 13.4988 40.2582 13.6833C40.6272 13.8678 41.0738 13.96 41.5982 13.96C41.7438 13.96 41.8992 13.9406 42.0642 13.9018C42.239 13.8629 42.4079 13.822 42.5535 13.7638C42.6835 13.715 42.9369 13.5879 43.066 13.513C43.1004 13.4931 43.111 13.4497 43.0916 13.4151L42.4905 12.3555C42.4717 12.3219 42.4307 12.3078 42.3946 12.3216C42.2975 12.3586 42.1971 12.3891 42.0933 12.413C41.9671 12.4422 41.8409 12.4567 41.7147 12.4567C41.3748 12.4567 41.1224 12.421 40.9573 12.1977C40.7923 11.9647 40.7097 11.6685 40.7097 11.3093V8.13739C40.7097 8.09543 40.7437 8.06141 40.7857 8.06141H42.4106C42.4526 8.06141 42.4866 8.02739 42.4866 7.98543V6.75377Z" fill="#928F9A"/>
<path d="M46.9063 13.8726C46.1587 13.8726 45.513 13.7173 44.9693 13.4066C44.4255 13.0959 44.008 12.6638 43.7167 12.1103C43.4254 11.5472 43.2798 10.8966 43.2798 10.1587C43.2798 9.40134 43.4303 8.74594 43.7313 8.19249C44.0323 7.63904 44.4546 7.20696 44.9984 6.89625C45.5518 6.58555 46.1975 6.43019 46.9355 6.43019C47.6831 6.43019 48.3239 6.58555 48.858 6.89625C49.4017 7.20696 49.8241 7.63904 50.1251 8.19249C50.4261 8.74594 50.5766 9.39649 50.5766 10.1441C50.5766 10.8821 50.4212 11.5326 50.1105 12.0958C49.8095 12.6589 49.3871 13.0959 48.8434 13.4066C48.2997 13.7076 47.654 13.8629 46.9063 13.8726ZM46.9209 12.4599C47.3287 12.4599 47.6782 12.3579 47.9695 12.154C48.2608 11.9501 48.4841 11.6734 48.6395 11.3239C48.8046 10.9743 48.8871 10.5811 48.8871 10.1441C48.8871 9.69748 48.8094 9.29939 48.6541 8.94984C48.4987 8.6003 48.2754 8.32843 47.9841 8.13423C47.6928 7.93033 47.3433 7.82838 46.9355 7.82838C46.5471 7.82838 46.2024 7.93033 45.9014 8.13423C45.6004 8.33814 45.3674 8.61486 45.2023 8.96441C45.0469 9.31395 44.9644 9.70719 44.9547 10.1441C44.9547 10.5908 45.0324 10.9889 45.1877 11.3384C45.3431 11.688 45.5713 11.9647 45.8723 12.1686C46.1733 12.3628 46.5228 12.4599 46.9209 12.4599Z" fill="#928F9A"/>
<path d="M21.5537 12.4016C21.5537 12.3597 21.5196 12.3256 21.4777 12.3256H17.5674C17.5254 12.3256 17.4914 12.2916 17.4914 12.2497V4.23534C17.4914 4.19338 17.4574 4.15936 17.4154 4.15936H15.9507C15.9088 4.15936 15.8748 4.19338 15.8748 4.23534V13.7966C15.8748 13.8386 15.9088 13.8726 15.9507 13.8726H21.4777C21.5196 13.8726 21.5537 13.8386 21.5537 13.7966V12.4016Z" fill="#928F9A"/>
<defs>
<clipPath id="clip0_1301_6891">
<rect width="10.4" height="13" fill="white" transform="translate(1.5 2.5)"/>
</clipPath>
</defs>
</svg>
</div>
</main>
<div class="placeHolder"></div>
</body>
</div>
</div>
<style>
body {
background-color: #e5e1ec;
font-family: -apple-system,
system-ui,
'BlinkMacSystemFont',
'Segoe UI',
'Roboto',
'Arial',
sans-serif;
color: #191C1D
}
.viewBox {
position: absolute;
inset: 0;
overflow: auto;
}
.container {
min-height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.message {
margin-top: 4px;
font-size: 18px/26px;
font-weight: 600;
}
.signature {
display: flex;
align-items: center;
margin-top: 20px;
font-size: 14px/20px;
font-weight: 500;
color: #928F9A;
}
.signature svg {
margin-left: 4px;
height: 20px;
}
.placeHolder {
flex: 1;
min-height: 20px;
}
main {
position: relative;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
@media (max-width: 480px) {
main {
flex: 1;
align-self: stretch;
padding: 16px 20px;
position: relative;
}
.placeHolder {
display: none;
}
}
@media (min-width: 480px) {
main {
width: 640px;
min-height: 640px;
padding: 36px 24px;
border-radius: 16px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 2%);
}
}
</style>
</html>

View file

@ -1,9 +1,11 @@
import admin_console from './admin-console/index.js';
import demo_app from './demo-app.js';
import oidc from './oidc.js';
const translation = {
admin_console,
demo_app,
oidc,
};
export default translation;

View file

@ -0,0 +1,5 @@
const oidc = {
logout_success: 'You have successfully signed out.', // UNTRANSLATED
};
export default oidc;

View file

@ -1,9 +1,11 @@
import admin_console from './admin-console/index.js';
import demo_app from './demo-app.js';
import oidc from './oidc.js';
const translation = {
admin_console,
demo_app,
oidc,
};
export default translation;

View file

@ -0,0 +1,5 @@
const oidc = {
logout_success: 'You have successfully signed out.',
};
export default oidc;

View file

@ -1,9 +1,11 @@
import admin_console from './admin-console/index.js';
import demo_app from './demo-app.js';
import oidc from './oidc.js';
const translation = {
admin_console,
demo_app,
oidc,
};
export default translation;

View file

@ -0,0 +1,5 @@
const oidc = {
logout_success: 'You have successfully signed out.', // UNTRANSLATED
};
export default oidc;

View file

@ -1,9 +1,11 @@
import admin_console from './admin-console/index.js';
import demo_app from './demo-app.js';
import oidc from './oidc.js';
const translation = {
admin_console,
demo_app,
oidc,
};
export default translation;

View file

@ -0,0 +1,5 @@
const oidc = {
logout_success: 'You have successfully signed out.', // UNTRANSLATED
};
export default oidc;

View file

@ -1,9 +1,11 @@
import admin_console from './admin-console/index.js';
import demo_app from './demo-app.js';
import oidc from './oidc.js';
const translation = {
admin_console,
demo_app,
oidc,
};
export default translation;

View file

@ -0,0 +1,5 @@
const oidc = {
logout_success: 'You have successfully signed out.', // UNTRANSLATED
};
export default oidc;

View file

@ -1,9 +1,11 @@
import admin_console from './admin-console/index.js';
import demo_app from './demo-app.js';
import oidc from './oidc.js';
const translation = {
admin_console,
demo_app,
oidc,
};
export default translation;

View file

@ -0,0 +1,5 @@
const oidc = {
logout_success: 'You have successfully signed out.', // UNTRANSLATED
};
export default oidc;

View file

@ -1,9 +1,11 @@
import admin_console from './admin-console/index.js';
import demo_app from './demo-app.js';
import oidc from './oidc.js';
const translation = {
admin_console,
demo_app,
oidc,
};
export default translation;

View file

@ -0,0 +1,5 @@
const oidc = {
logout_success: 'You have successfully signed out.', // UNTRANSLATED
};
export default oidc;

View file

@ -1,9 +1,11 @@
import admin_console from './admin-console/index.js';
import demo_app from './demo-app.js';
import oidc from './oidc.js';
const translation = {
admin_console,
demo_app,
oidc,
};
export default translation;

View file

@ -0,0 +1,5 @@
const oidc = {
logout_success: 'You have successfully signed out.',
};
export default oidc;