dce-expresskit
Version:
Shared functions, helpers, and tools for Harvard DCE Express-based servers
145 lines (130 loc) • 3.72 kB
text/typescript
// Import dce-reactkit
import { ReactKitErrorCode } from 'dce-reactkit';
// Import shared types
import ExpressKitErrorCode from '../types/ExpressKitErrorCode';
/**
* Generate a static error page
* @author Gabe Abrams
* @param opts object containing all arguments
* @param [opts.title=An Error Occurred] title of the error box
* @param [opts.description=An unknown server error occurred. Please contact support.]
* a human-readable description of the error
* @param [opts.code=ReactKitErrorCode.NoCode] error code to show
* @param [opts.pageTitle=opts.title] title of the page/tab if it differs from
* the title of the error
* @returns html of the page
*/
const genErrorPage = (
opts: {
title?: string,
description?: string,
code?: string,
pageTitle?: string,
} = {},
): string => {
const title = (opts.title ?? 'An Error Occurred');
const pageTitle = (opts.pageTitle ?? title);
const description = (
opts.description
?? 'An unknown server error occurred. Please contact support.'
);
const code = (opts.code ?? ReactKitErrorCode.NoCode);
return `
<head>
<!-- Metadata -->
<meta
name="viewport"
content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0"
>
<!-- Title -->
<title>${pageTitle}</title>
<!-- Bootstrap -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/css/bootstrap.min.css"
integrity="sha512-siwe/oXMhSjGCwLn+scraPOWrJxHlUgMBMZXdPe2Tnk3I0x3ESCoLz7WZ5NTH6SZrywMY+PB1cjyqJ5jAluCOg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/js/bootstrap.min.js"
integrity="sha512-vyRAVI0IEm6LI/fVSv/Wq/d0KUfrg3hJq2Qz5FlfER69sf3ZHlOrsLriNm49FxnpUGmhx+TaJKwJ+ByTLKT+Yg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<!-- FontAwesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<!-- Style -->
<style>
.DCEReactKit-pop-in {
animation-name: DCEReactKit-pop-in;
animation-duration: 0.5s;
animation-iteration-count: 1;
animation-timing-function: ease-out;
animation-fill-mode: both;
transform-origin: center;
}
@keyframes DCEReactKit-pop-in {
0% {
opacity: 0;
transform: scale(0.9);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.DCEReactKit-slide-in {
animation-name: DCEReactKit-slide-in;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-out;
animation-fill-mode: both;
animation-delay: 0.2s;
}
@keyframes DCEReactKit-slide-in {
0% {
opacity: 0;
transform: translate(0, 0.3em);
}
100% {
opacity: 1;
transform: translate(0, 0);
}
}
</style>
</head>
<!-- Body -->
<body class="bg-dark text-center pt-3 ps-3 pe-3">
<!-- Alert -->
<div
class="DCEReactKit-pop-in alert alert-warning d-inline-block"
style="width: 50em; max-width: 100%"
>
<!-- Title -->
<h2>
<i class="me-1 fa-solid fa-triangle-exclamation"></i>
${title}
</h2>
<!-- Description -->
<div>
${description}
</div>
</div>
<!-- Error Code -->
<div class="DCEReactKit-slide-in text-light">
<strong>
Error Code:
</strong>
${code}
</div>
</body>
`;
};
export default genErrorPage;