Implement the template
This commit is contained in:
Joseph Garrone
parent
f92488b80d
commit
292881532a
@ -45,7 +45,7 @@ export function generateFtlFilesCodeFactory(
|
||||
return;
|
||||
}
|
||||
|
||||
$(element).attr(attrName, "${url.resourcesPath}" + href);
|
||||
$(element).attr(attrName, "${url.resourcesPath}/build" + href);
|
||||
|
||||
})
|
||||
);
|
||||
|
||||
@ -7,6 +7,9 @@ import {
|
||||
replaceImportFromStaticInJsCode
|
||||
} from "./replaceImportFromStatic";
|
||||
import { generateFtlFilesCodeFactory } from "./generateFtl";
|
||||
import { keycloakBuiltinThemesAndThirdPartyExamplesThemsUrl } from "../download-sample-keycloak-themes";
|
||||
import { downloadAndUnzip } from "../tools/downloadAndUnzip";
|
||||
import * as child_process from "child_process";
|
||||
|
||||
export const ftlValuesGlobalName = "keycloakPagesContext";
|
||||
|
||||
@ -25,7 +28,7 @@ export function generateKeycloakThemeResources(
|
||||
let allCssGlobalsToDefine: Record<string, string> = {};
|
||||
|
||||
transformCodebase({
|
||||
"destDirPath": pathJoin(themeDirPath, "resources"),
|
||||
"destDirPath": pathJoin(themeDirPath, "resources", "build"),
|
||||
"srcDirPath": reactAppBuildDirPath,
|
||||
"transformSourceCodeString": ({ filePath, sourceCode }) => {
|
||||
|
||||
@ -79,9 +82,31 @@ export function generateKeycloakThemeResources(
|
||||
|
||||
});
|
||||
|
||||
{
|
||||
|
||||
const destDirPath = pathJoin(themeDirPath, "..", "tmp_xxKdLpdIdLd");
|
||||
|
||||
downloadAndUnzip({
|
||||
"url": keycloakBuiltinThemesAndThirdPartyExamplesThemsUrl,
|
||||
destDirPath
|
||||
});
|
||||
|
||||
child_process.execSync(
|
||||
[
|
||||
"mv",
|
||||
pathJoin("keycloak", "common"),
|
||||
pathJoin("..", "common")
|
||||
].join(" "),
|
||||
{ "cwd": destDirPath }
|
||||
);
|
||||
|
||||
child_process.execSync(`rm -r ${destDirPath}`);
|
||||
|
||||
}
|
||||
|
||||
fs.writeFileSync(
|
||||
pathJoin(themeDirPath, "theme.properties"),
|
||||
Buffer.from("parent=base\n", "utf8")
|
||||
Buffer.from(`import=common/${themeName}\n`, "utf8")
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
@ -12,7 +12,7 @@ export function replaceImportFromStaticInJsCode(
|
||||
|
||||
const fixedJsCode = jsCode!.replace(
|
||||
/"static\//g,
|
||||
`window.${ftlValuesGlobalName}.url.resourcesPath.replace(/^\\//,"") + "/" + "static/`
|
||||
`window.${ftlValuesGlobalName}.url.resourcesPath.replace(/^\\//,"") + "/build/static/`
|
||||
);
|
||||
|
||||
return { fixedJsCode };
|
||||
@ -75,7 +75,7 @@ export function generateCssCodeToDefineGlobals(
|
||||
`--${cssVariableName}:`,
|
||||
[
|
||||
"url(",
|
||||
"${url.resourcesPath}" +
|
||||
"${url.resourcesPath}/build" +
|
||||
cssGlobalsToDefine[cssVariableName].match(/^url\(([^)]+)\)$/)![1],
|
||||
")"
|
||||
].join("")
|
||||
|
||||
288
src/lib/Template.tsx
Normal file
288
src/lib/Template.tsx
Normal file
@ -0,0 +1,288 @@
|
||||
|
||||
import type { ReactNode } from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useKeycloakThemeTranslation } from "./i18n/useKeycloakTranslation";
|
||||
import { keycloakPagesContext } from "./keycloakFtlValues";
|
||||
import { assert } from "evt/tools/typeSafety/assert";
|
||||
import { cx } from "tss-react";
|
||||
import { useKeycloakLanguage, AvailableLanguages } from "./i18n/useKeycloakLanguage";
|
||||
import { getLanguageLabel } from "./i18n/getLanguageLabel";
|
||||
import { useCallbackFactory } from "powerhooks";
|
||||
import { appendLinkInHead } from "./tools/appendLinkInHead";
|
||||
import { appendScriptInHead } from "./tools/appendScriptInHead";
|
||||
import { join as pathJoin } from "path";
|
||||
import { useConstCallback } from "powerhooks";
|
||||
|
||||
type KcClasses<T extends string> = { [key in T]?: string[] | string };
|
||||
|
||||
|
||||
export type Props = {
|
||||
displayInfo?: boolean;
|
||||
displayMessage: boolean;
|
||||
displayRequiredFields: boolean;
|
||||
displayWide: boolean;
|
||||
showAnotherWayIfPresent: boolean;
|
||||
properties?: {
|
||||
stylesCommon?: string[];
|
||||
styles?: string[];
|
||||
scripts?: string[];
|
||||
} & KcClasses<
|
||||
"kcLoginClass" |
|
||||
"kcHeaderClass" |
|
||||
"kcHeaderWrapperClass" |
|
||||
"kcFormCardClass" |
|
||||
"kcFormCardAccountClass" |
|
||||
"kcFormHeaderClass" |
|
||||
"kcLocaleWrapperClass" |
|
||||
"kcContentWrapperClass" |
|
||||
"kcLabelWrapperClass" |
|
||||
"kcContentWrapperClass" |
|
||||
"kcLabelWrapperClass" |
|
||||
"kcFormGroupClass" |
|
||||
"kcResetFlowIcon" |
|
||||
"kcResetFlowIcon" |
|
||||
"kcFeedbackSuccessIcon" |
|
||||
"kcFeedbackWarningIcon" |
|
||||
"kcFeedbackErrorIcon" |
|
||||
"kcFeedbackInfoIcon" |
|
||||
"kcContentWrapperClass" |
|
||||
"kcFormSocialAccountContentClass" |
|
||||
"kcFormSocialAccountClass" |
|
||||
"kcSignUpClass" |
|
||||
"kcInfoAreaWrapperClass"
|
||||
>;
|
||||
headerNode: ReactNode;
|
||||
showUsernameNode: ReactNode;
|
||||
formNode: ReactNode;
|
||||
displayInfoNode: ReactNode;
|
||||
};
|
||||
|
||||
export function Template(props: Props) {
|
||||
|
||||
const {
|
||||
displayInfo = false,
|
||||
displayMessage = true,
|
||||
displayRequiredFields = false,
|
||||
displayWide = false,
|
||||
showAnotherWayIfPresent = true,
|
||||
properties = {},
|
||||
headerNode,
|
||||
showUsernameNode,
|
||||
formNode,
|
||||
displayInfoNode
|
||||
} = props;
|
||||
|
||||
const { t } = useKeycloakThemeTranslation();
|
||||
|
||||
const { keycloakLanguage, setKeycloakLanguage } = useKeycloakLanguage();
|
||||
|
||||
const onChangeLanguageClickFactory = useCallbackFactory(
|
||||
([languageTag]: [AvailableLanguages]) =>
|
||||
setKeycloakLanguage(languageTag)
|
||||
);
|
||||
|
||||
const onTryAnotherWayClick = useConstCallback(() => {
|
||||
|
||||
document.forms["kc-select-try-another-way-form" as never].submit();
|
||||
|
||||
return false;
|
||||
|
||||
});
|
||||
|
||||
const [{ realm, locale, auth, url, message, isAppInitiatedAction }] = useState(() => {
|
||||
|
||||
assert(keycloakPagesContext !== undefined);
|
||||
|
||||
return keycloakPagesContext;
|
||||
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
properties.stylesCommon?.forEach(
|
||||
relativePath =>
|
||||
appendLinkInHead(
|
||||
{ "href": pathJoin(url.resourcesCommonPath, relativePath) }
|
||||
)
|
||||
);
|
||||
|
||||
properties.styles?.forEach(
|
||||
relativePath =>
|
||||
appendLinkInHead(
|
||||
{ "href": pathJoin(url.resourcesPath, relativePath) }
|
||||
)
|
||||
);
|
||||
|
||||
properties.scripts?.forEach(
|
||||
relativePath =>
|
||||
appendScriptInHead(
|
||||
{ "src": pathJoin(url.resourcesPath, relativePath) }
|
||||
)
|
||||
);
|
||||
|
||||
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className={cx(properties.kcLoginClass)}>
|
||||
|
||||
<div id="kc-header" className={cx(properties.kcHeaderClass)}>
|
||||
<div id="kc-header-wrapper" className={cx(properties.kcHeaderWrapperClass)}>
|
||||
{t("loginTitleHtml", realm.displayNameHtml)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={cx("kcFormCardClass", displayWide && properties.kcFormCardAccountClass)}>
|
||||
<header className={cx(properties.kcFormHeaderClass)}>
|
||||
{
|
||||
(
|
||||
realm.internationalizationEnabled &&
|
||||
(assert(locale !== undefined), true) &&
|
||||
locale.supported.length > 1
|
||||
) &&
|
||||
<div id="kc-locale">
|
||||
<div id="kc-locale-wrapper" className={cx(properties.kcLocaleWrapperClass)}>
|
||||
<div className="kc-dropdown" id="kc-locale-dropdown">
|
||||
<a href="#" id="kc-current-locale-link">
|
||||
{getLanguageLabel(keycloakLanguage)}
|
||||
</a>
|
||||
<ul>
|
||||
{
|
||||
locale.supported.map(
|
||||
({ languageTag }) =>
|
||||
<li className="kc-dropdown-item">
|
||||
<a href="#" onClick={onChangeLanguageClickFactory(languageTag)}>
|
||||
{getLanguageLabel(languageTag)}
|
||||
</a>
|
||||
|
||||
</li>
|
||||
)
|
||||
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
}
|
||||
{
|
||||
(
|
||||
auth !== undefined &&
|
||||
auth.showUsername &&
|
||||
!auth.showResetCredentials
|
||||
) ?
|
||||
(
|
||||
displayRequiredFields ?
|
||||
(
|
||||
|
||||
<div className={cx(properties.kcContentWrapperClass)}>
|
||||
<div className={cx(properties.kcLabelWrapperClass, "subtitle")}>
|
||||
<span className="subtitle">
|
||||
<span className="required">*</span>
|
||||
{t("requiredFields")}
|
||||
</span>
|
||||
</div>
|
||||
<div className="col-md-10">
|
||||
<h1 id="kc-page-title">{headerNode}</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
)
|
||||
:
|
||||
(
|
||||
|
||||
<h1 id="kc-page-title">{headerNode}</h1>
|
||||
|
||||
)
|
||||
) : (
|
||||
displayRequiredFields ? (
|
||||
<div className={cx(properties.kcContentWrapperClass)}>
|
||||
<div className={cx(properties.kcLabelWrapperClass, "subtitle")}>
|
||||
<span className="subtitle"><span className="required">*</span> {t("requiredFields")}</span>
|
||||
</div>
|
||||
<div className="col-md-10">
|
||||
{showUsernameNode}
|
||||
<div className={cx(properties.kcFormGroupClass)}>
|
||||
<div id="kc-username">
|
||||
<label id="kc-attempted-username">{auth?.attemptedUsername}</label>
|
||||
<a id="reset-login" href={url.loginRestartFlowUrl}>
|
||||
<div className="kc-login-tooltip">
|
||||
<i className={cx(properties.kcResetFlowIcon)}></i>
|
||||
<span className="kc-tooltip-text">{t("restartLoginTooltip")}</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{showUsernameNode}
|
||||
<div className={cx(properties.kcFormGroupClass)}>
|
||||
<div id="kc-username">
|
||||
<label id="kc-attempted-username">{auth?.attemptedUsername}</label>
|
||||
<a id="reset-login" href={url.loginRestartFlowUrl}>
|
||||
<div className="kc-login-tooltip">
|
||||
<i className={cx(properties.kcResetFlowIcon)}></i>
|
||||
<span className="kc-tooltip-text">{t("restartLoginTooltip")}</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
)
|
||||
}
|
||||
</header>
|
||||
<div id="kc-content">
|
||||
<div id="kc-content-wrapper">
|
||||
{/* App-initiated actions should not see warning messages about the need to complete the action during login. */}
|
||||
{
|
||||
(
|
||||
displayMessage &&
|
||||
message !== undefined &&
|
||||
(
|
||||
message.type !== "warning" ||
|
||||
!isAppInitiatedAction
|
||||
)
|
||||
) &&
|
||||
<div className={cx("alert", `alert-${message.type}`)}>
|
||||
{message.type === "success" && <span className={cx(properties.kcFeedbackSuccessIcon)}></span>}
|
||||
{message.type === "warning" && <span className={cx(properties.kcFeedbackWarningIcon)}></span>}
|
||||
{message.type === "error" && <span className={cx(properties.kcFeedbackErrorIcon)}></span>}
|
||||
{message.type === "info" && <span className={cx(properties.kcFeedbackInfoIcon)}></span>}
|
||||
<span className="kc-feedback-text">{message.summary}</span>
|
||||
</div>
|
||||
}
|
||||
{formNode}
|
||||
{
|
||||
(
|
||||
auth !== undefined &&
|
||||
auth.showTryAnotherWayLink &&
|
||||
showAnotherWayIfPresent
|
||||
) &&
|
||||
|
||||
<form id="kc-select-try-another-way-form" action={url.loginAction} method="post" className={cx(displayWide && properties.kcContentWrapperClass)} >
|
||||
<div className={cx(displayWide && [properties.kcFormSocialAccountContentClass, properties.kcFormSocialAccountClass])} >
|
||||
<div className={cx(properties.kcFormGroupClass)}>
|
||||
<input type="hidden" name="tryAnotherWay" value="on" />
|
||||
<a href="#" id="try-another-way" onClick={onTryAnotherWayClick}>{t("doTryAnotherWay")}</a>
|
||||
</div>
|
||||
</div >
|
||||
</form>
|
||||
}
|
||||
{
|
||||
displayInfo &&
|
||||
|
||||
<div id="kc-info" className={cx(properties.kcSignUpClass)}>
|
||||
<div id="kc-info-wrapper" className={cx(properties.kcInfoAreaWrapperClass)}>
|
||||
{displayInfoNode}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div >
|
||||
</div >
|
||||
</div >
|
||||
</div >
|
||||
);
|
||||
}
|
||||
@ -1,211 +0,0 @@
|
||||
|
||||
import { useState } from "react";
|
||||
import { useKeycloakThemeTranslation } from "./i18n/useKeycloakTranslation";
|
||||
import { keycloakPagesContext } from "./keycloakFtlValues";
|
||||
import { assert } from "evt/tools/typeSafety/assert";
|
||||
import { cx } from "tss-react";
|
||||
import { useKeycloakLanguage, AvailableLanguages } from "./i18n/useKeycloakLanguage";
|
||||
import { getLanguageLabel } from "./i18n/getLanguageLabel";
|
||||
import { useCallbackFactory } from "powerhooks";
|
||||
|
||||
export type Props = {
|
||||
displayInfo?: boolean;
|
||||
displayMessage: boolean;
|
||||
displayRequiredFields: boolean;
|
||||
displayWide: boolean;
|
||||
showAnotherWayIfPresent: boolean;
|
||||
};
|
||||
|
||||
export function Template(props: Props) {
|
||||
|
||||
const {
|
||||
displayInfo = false,
|
||||
displayMessage = true,
|
||||
displayRequiredFields = false,
|
||||
displayWide = false,
|
||||
showAnotherWayIfPresent = true
|
||||
} = props;
|
||||
|
||||
const { t } = useKeycloakThemeTranslation();
|
||||
|
||||
const { keycloakLanguage, setKeycloakLanguage } = useKeycloakLanguage();
|
||||
|
||||
const onChangeLanguageClickFactory = useCallbackFactory(
|
||||
([languageTag]: [AvailableLanguages]) =>
|
||||
setKeycloakLanguage(languageTag)
|
||||
);
|
||||
|
||||
const [{ realm, locale, auth }] = useState(() => {
|
||||
|
||||
assert(keycloakPagesContext !== undefined);
|
||||
|
||||
return keycloakPagesContext;
|
||||
|
||||
});
|
||||
//<div className="kcBodyClass"></div>
|
||||
|
||||
return (
|
||||
|
||||
<div className="kcLoginClass">
|
||||
<div id="kc-header" className="kcHeaderClass">
|
||||
<div id="kc-header-wrapper" className="kcHeaderWrapperClass">
|
||||
{t("loginTitleHtml", realm.displayNameHtml)}
|
||||
</div>
|
||||
</div>
|
||||
<div className={cx("kcFormCardClass", displayWide && "kcFormCardAccountClass")}>
|
||||
<header className="kcFormHeaderClass">
|
||||
|
||||
{
|
||||
(
|
||||
realm.internationalizationEnabled &&
|
||||
(assert(locale !== undefined), true) &&
|
||||
locale.supported.length > 1
|
||||
) && (
|
||||
<div id="kc-locale">
|
||||
<div id="kc-locale-wrapper" className="kcLocaleWrapperClass">
|
||||
<div className="kc-dropdown" id="kc-locale-dropdown">
|
||||
<a href="#" id="kc-current-locale-link">
|
||||
{getLanguageLabel(keycloakLanguage)}
|
||||
</a>
|
||||
<ul>
|
||||
{
|
||||
locale.supported.map(
|
||||
({ languageTag }) =>
|
||||
<li className="kc-dropdown-item">
|
||||
<a href="#" onClick={onChangeLanguageClickFactory(languageTag)}>
|
||||
{getLanguageLabel(languageTag)}
|
||||
</a>
|
||||
|
||||
</li>
|
||||
)
|
||||
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
{
|
||||
(
|
||||
auth !== undefined &&
|
||||
auth.showUsername &&
|
||||
!auth.showResetCredentials
|
||||
) ?
|
||||
(
|
||||
displayRequiredFields ?
|
||||
(
|
||||
|
||||
<div className="kcContentWrapperClass">
|
||||
<div className="kcLabelWrapperClass subtitle">
|
||||
<span className="subtitle">
|
||||
<span className="required">*</span>
|
||||
{t("requiredFields")}
|
||||
</span>
|
||||
</div>
|
||||
<div className="col-md-10">
|
||||
<h1 id="kc-page-title"><#nested "header"></h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
)
|
||||
:
|
||||
(
|
||||
|
||||
<h1 id="kc-page-title"><#nested "header"></h1>
|
||||
|
||||
)
|
||||
)
|
||||
:
|
||||
(
|
||||
displayRequiredFields ? (
|
||||
<div className="kcContentWrapperClass">
|
||||
<div class="${properties.kcLabelWrapperClass!} subtitle">
|
||||
<span class="subtitle"><span class="required">*</span> ${msg("requiredFields")}</span>
|
||||
</div>
|
||||
<div class="col-md-10">
|
||||
<#nested "show-username">
|
||||
<div class="${properties.kcFormGroupClass!}">
|
||||
<div id="kc-username">
|
||||
<label id="kc-attempted-username">${auth.attemptedUsername}</label>
|
||||
<a id="reset-login" href="${url.loginRestartFlowUrl}">
|
||||
<div class="kc-login-tooltip">
|
||||
<i class="${properties.kcResetFlowIcon!}"></i>
|
||||
<span class="kc-tooltip-text">${msg("restartLoginTooltip")}</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
|
||||
<#nested "show-username">
|
||||
<div class="${properties.kcFormGroupClass!}">
|
||||
<div id="kc-username">
|
||||
<label id="kc-attempted-username">${auth.attemptedUsername}</label>
|
||||
<a id="reset-login" href="${url.loginRestartFlowUrl}">
|
||||
<div class="kc-login-tooltip">
|
||||
<i class="${properties.kcResetFlowIcon!}"></i>
|
||||
<span class="kc-tooltip-text">${msg("restartLoginTooltip")}</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
</header>
|
||||
<div id="kc-content">
|
||||
<div id="kc-content-wrapper">
|
||||
|
||||
<#-- App-initiated actions should not see warning messages about the need to complete the action -->
|
||||
<#-- during login. -->
|
||||
<#if displayMessage && message?has_content && (message.type != 'warning' || !isAppInitiatedAction??)>
|
||||
<div class="alert alert-${message.type}">
|
||||
<#if message.<span class="${properties.kcFeedbackSuccessIcon!}"></span></#if>
|
||||
<#if message.<span class="${properties.kcFeedbackWarningIcon!}"></span></#if>
|
||||
<#if message.<span class="${properties.kcFeedbackErrorIcon!}"></span></#if>
|
||||
<#if message.<span class="${properties.kcFeedbackInfoIcon!}"></span></#if>
|
||||
<span class="kc-feedback-text">${kcSanitize(message.summary) ? no_esc}</span>
|
||||
</div >
|
||||
</#if >
|
||||
|
||||
<#nested "form" >
|
||||
|
||||
<#if auth?has_content && auth.showTryAnotherWayLink() && showAnotherWayIfPresent >
|
||||
<form id="kc-select-try-another-way-form" action="${url.loginAction}" method="post" <#if displayWide>class="${properties.kcContentWrapperClass!}"</#if> >
|
||||
<div <#if displayWide>class="${properties.kcFormSocialAccountContentClass!} ${properties.kcFormSocialAccountClass!}"</#if> >
|
||||
<div class="${properties.kcFormGroupClass!}">
|
||||
<input type="hidden" name="tryAnotherWay" value="on" />
|
||||
<a href="#" id="try-another-way" onclick="document.forms['kc-select-try-another-way-form'].submit();return false;">${msg("doTryAnotherWay")}</a>
|
||||
</div>
|
||||
</div >
|
||||
</form >
|
||||
</#if >
|
||||
|
||||
<#if displayInfo>
|
||||
<div id="kc-info" class="${properties.kcSignUpClass!}">
|
||||
<div id="kc-info-wrapper" class="${properties.kcInfoAreaWrapperClass!}">
|
||||
<#nested "info">
|
||||
</div>
|
||||
</div>
|
||||
</#if>
|
||||
</div >
|
||||
</div >
|
||||
|
||||
</div >
|
||||
</div >
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
);
|
||||
|
||||
}
|
||||
24
src/lib/tools/appendLinkInHead.ts
Normal file
24
src/lib/tools/appendLinkInHead.ts
Normal file
@ -0,0 +1,24 @@
|
||||
|
||||
export function appendLinkInHead(
|
||||
props: {
|
||||
href: string;
|
||||
}
|
||||
) {
|
||||
|
||||
const { href } = props;
|
||||
|
||||
var link = document.createElement("link");
|
||||
|
||||
Object.assign(
|
||||
link,
|
||||
{
|
||||
href,
|
||||
"type": "text/css",
|
||||
"rel": "stylesheet",
|
||||
"media": "screen,print"
|
||||
}
|
||||
);
|
||||
|
||||
document.getElementsByTagName("head")[0].appendChild(link);
|
||||
|
||||
}
|
||||
22
src/lib/tools/appendScriptInHead.ts
Normal file
22
src/lib/tools/appendScriptInHead.ts
Normal file
@ -0,0 +1,22 @@
|
||||
|
||||
export function appendScriptInHead(
|
||||
props: {
|
||||
src: string;
|
||||
}
|
||||
) {
|
||||
|
||||
const { src } = props;
|
||||
|
||||
var script = document.createElement("script");
|
||||
|
||||
Object.assign(
|
||||
script,
|
||||
{
|
||||
src,
|
||||
"type": "text/javascript",
|
||||
}
|
||||
);
|
||||
|
||||
document.getElementsByTagName("head")[0].appendChild(script);
|
||||
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user