Disable "Login with Netlify Identity" button until Netlify identity is initialized
This commit is contained in:
parent
93d1f50c68
commit
4264218439
@ -2,6 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js" async></script>
|
||||
|
||||
<title>Static CMS - Git Gateway Development Test</title>
|
||||
</head>
|
||||
|
@ -232,7 +232,6 @@ CMS.registerShortcode('youtube', {
|
||||
return [src];
|
||||
},
|
||||
control: ({ src, onChange, theme }) => {
|
||||
console.log('[SHORTCUT] shortcut theme', theme);
|
||||
return h('span', {}, [
|
||||
h('input', {
|
||||
key: 'control-input',
|
||||
|
@ -32,6 +32,42 @@ const GitGatewayAuthenticationPage = ({ onLogin, t }: GitGatewayAuthenticationPa
|
||||
password?: string;
|
||||
}>({});
|
||||
|
||||
const [initialized, setInitialized] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (window.netlifyIdentity) {
|
||||
let initialized = false;
|
||||
Promise.race([
|
||||
new Promise<void>(resolve => {
|
||||
window.netlifyIdentity?.on('init', () => {
|
||||
if (!initialized) {
|
||||
initialized = true;
|
||||
resolve();
|
||||
}
|
||||
});
|
||||
}),
|
||||
new Promise<void>(resolve => {
|
||||
const interval = setInterval(() => {
|
||||
if (initialized) {
|
||||
clearInterval(interval);
|
||||
return;
|
||||
}
|
||||
|
||||
if (window.netlifyIdentity) {
|
||||
console.info('Manually initializing identity widget');
|
||||
initialized = true;
|
||||
window.netlifyIdentity.init();
|
||||
clearInterval(interval);
|
||||
resolve();
|
||||
}
|
||||
}, 250);
|
||||
}),
|
||||
]).then(() => {
|
||||
setInitialized(true);
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!loggedIn && window.netlifyIdentity && window.netlifyIdentity.currentUser()) {
|
||||
setLoggingIn(true);
|
||||
@ -119,6 +155,7 @@ const GitGatewayAuthenticationPage = ({ onLogin, t }: GitGatewayAuthenticationPa
|
||||
label={t('auth.loginWithNetlifyIdentity')}
|
||||
inProgress={loggingIn}
|
||||
error={errorContent}
|
||||
disabled={!initialized}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
@ -106,27 +106,6 @@ function getEndpoint(endpoint: string, netlifySiteURL: string | null) {
|
||||
return endpoint;
|
||||
}
|
||||
|
||||
// wait for identity widget to initialize
|
||||
// force init on timeout
|
||||
let initPromise = Promise.resolve() as Promise<unknown>;
|
||||
if (window.netlifyIdentity) {
|
||||
let initialized = false;
|
||||
initPromise = Promise.race([
|
||||
new Promise<void>(resolve => {
|
||||
window.netlifyIdentity?.on('init', () => {
|
||||
initialized = true;
|
||||
resolve();
|
||||
});
|
||||
}),
|
||||
new Promise(resolve => setTimeout(resolve, 2500)).then(() => {
|
||||
if (!initialized) {
|
||||
console.info('Manually initializing identity widget');
|
||||
window.netlifyIdentity?.init();
|
||||
}
|
||||
}),
|
||||
]);
|
||||
}
|
||||
|
||||
interface NetlifyUser extends Credentials {
|
||||
jwt: () => Promise<string>;
|
||||
email: string;
|
||||
@ -222,7 +201,6 @@ export default class GitGateway implements BackendClass {
|
||||
if (this.authClient) {
|
||||
return this.authClient;
|
||||
}
|
||||
await initPromise;
|
||||
this.authClient = {
|
||||
logout: () => window.netlifyIdentity?.logout(),
|
||||
currentUser: () => window.netlifyIdentity?.currentUser(),
|
||||
|
@ -136,16 +136,13 @@ const EditorInterface = ({
|
||||
}, []);
|
||||
|
||||
const [showPreviewToggle, previewInFrame] = useMemo(() => {
|
||||
console.log('[PREVIEW] collection', collection);
|
||||
let preview = collection.editor?.preview ?? true;
|
||||
console.log('[PREVIEW] preview', preview);
|
||||
let frame = collection.editor?.frame ?? true;
|
||||
|
||||
if ('files' in collection) {
|
||||
const file = getFileFromSlug(collection, entry.slug);
|
||||
if (file?.editor?.preview !== undefined) {
|
||||
preview = file.editor.preview;
|
||||
console.log('[PREVIEW] preview file', preview);
|
||||
}
|
||||
|
||||
if (file?.editor?.frame !== undefined) {
|
||||
@ -247,8 +244,6 @@ const EditorInterface = ({
|
||||
);
|
||||
const breadcrumbs = useBreadcrumbs(collection, nestedFieldPath, { isNewEntry, summary, t });
|
||||
|
||||
console.log('[PREVIEW] showPreviewToggle', showPreviewToggle);
|
||||
|
||||
return (
|
||||
<MainView
|
||||
breadcrumbs={breadcrumbs}
|
||||
|
@ -108,13 +108,6 @@ const EditorToolbar = ({
|
||||
return items;
|
||||
}, [canCreate, isPublished, onDuplicate, onPersist, onPersistAndDuplicate, onPersistAndNew, t]);
|
||||
|
||||
console.log(
|
||||
'[PREVIEW] showI18nToggle || showPreviewToggle || showDelete',
|
||||
showI18nToggle,
|
||||
showPreviewToggle,
|
||||
canDelete,
|
||||
);
|
||||
|
||||
return useMemo(
|
||||
() => (
|
||||
<div className="flex gap-2">
|
||||
|
@ -16,6 +16,7 @@ export interface LoginProps {
|
||||
icon?: FC<{ className?: string | undefined }>;
|
||||
label?: string;
|
||||
error?: ReactNode;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
const Login = ({
|
||||
@ -24,6 +25,7 @@ const Login = ({
|
||||
icon,
|
||||
label,
|
||||
error,
|
||||
disabled = false,
|
||||
t,
|
||||
}: TranslatedProps<LoginProps>) => {
|
||||
const config = useAppSelector(selectConfig);
|
||||
@ -53,7 +55,7 @@ const Login = ({
|
||||
<div>{error}</div>
|
||||
</div>
|
||||
) : null}
|
||||
<Button disabled={inProgress} onClick={login} className="mb-6" startIcon={icon}>
|
||||
<Button disabled={inProgress || disabled} onClick={login} className="mb-6" startIcon={icon}>
|
||||
{inProgress ? t('auth.loggingIn') : label ?? t('auth.login')}
|
||||
</Button>
|
||||
{config?.site_url && <GoBackButton href={config.site_url} t={t}></GoBackButton>}
|
||||
|
Loading…
x
Reference in New Issue
Block a user