gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Disable "Login with Netlify Identity" button until Netlify identity is initialized

Browse Source
This commit is contained in:
Daniel Lautzenheiser 2023-04-06 12:13:47 -04:00
parent 93d1f50c68
commit 4264218439
7 changed files with 41 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/core/dev-test/backends/git-gateway/index.html
View File

@ -2,6 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8" /> <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> <title>Static CMS - Git Gateway Development Test</title>
</head> </head>

1
packages/core/dev-test/index.js
View File

@ -232,7 +232,6 @@ CMS.registerShortcode('youtube', {
return [src]; return [src];
}, },
control: ({ src, onChange, theme }) => { control: ({ src, onChange, theme }) => {
console.log('[SHORTCUT] shortcut theme', theme);
return h('span', {}, [ return h('span', {}, [
h('input', { h('input', {
key: 'control-input', key: 'control-input',

37
packages/core/src/backends/git-gateway/AuthenticationPage.tsx
View File

@ -32,6 +32,42 @@ const GitGatewayAuthenticationPage = ({ onLogin, t }: GitGatewayAuthenticationPa
password?: string; 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(() => { useEffect(() => {
if (!loggedIn && window.netlifyIdentity && window.netlifyIdentity.currentUser()) { if (!loggedIn && window.netlifyIdentity && window.netlifyIdentity.currentUser()) {
setLoggingIn(true); setLoggingIn(true);
@ -119,6 +155,7 @@ const GitGatewayAuthenticationPage = ({ onLogin, t }: GitGatewayAuthenticationPa
label={t('auth.loginWithNetlifyIdentity')} label={t('auth.loginWithNetlifyIdentity')}
inProgress={loggingIn} inProgress={loggingIn}
error={errorContent} error={errorContent}
disabled={!initialized}
/> />
); );
}; };

22
packages/core/src/backends/git-gateway/implementation.tsx
View File

@ -106,27 +106,6 @@ function getEndpoint(endpoint: string, netlifySiteURL: string | null) {
return endpoint; 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 { interface NetlifyUser extends Credentials {
jwt: () => Promise<string>; jwt: () => Promise<string>;
email: string; email: string;
@ -222,7 +201,6 @@ export default class GitGateway implements BackendClass {
if (this.authClient) { if (this.authClient) {
return this.authClient; return this.authClient;
} }
await initPromise;
this.authClient = { this.authClient = {
logout: () => window.netlifyIdentity?.logout(), logout: () => window.netlifyIdentity?.logout(),
currentUser: () => window.netlifyIdentity?.currentUser(), currentUser: () => window.netlifyIdentity?.currentUser(),

5
packages/core/src/components/entry-editor/EditorInterface.tsx
View File

@ -136,16 +136,13 @@ const EditorInterface = ({
}, []); }, []);
const [showPreviewToggle, previewInFrame] = useMemo(() => { const [showPreviewToggle, previewInFrame] = useMemo(() => {
console.log('[PREVIEW] collection', collection);
let preview = collection.editor?.preview ?? true; let preview = collection.editor?.preview ?? true;
console.log('[PREVIEW] preview', preview);
let frame = collection.editor?.frame ?? true; let frame = collection.editor?.frame ?? true;
if ('files' in collection) { if ('files' in collection) {
const file = getFileFromSlug(collection, entry.slug); const file = getFileFromSlug(collection, entry.slug);
if (file?.editor?.preview !== undefined) { if (file?.editor?.preview !== undefined) {
preview = file.editor.preview; preview = file.editor.preview;
console.log('[PREVIEW] preview file', preview);
} }
if (file?.editor?.frame !== undefined) { if (file?.editor?.frame !== undefined) {
@ -247,8 +244,6 @@ const EditorInterface = ({
); );
const breadcrumbs = useBreadcrumbs(collection, nestedFieldPath, { isNewEntry, summary, t }); const breadcrumbs = useBreadcrumbs(collection, nestedFieldPath, { isNewEntry, summary, t });
console.log('[PREVIEW] showPreviewToggle', showPreviewToggle);
return ( return (
<MainView <MainView
breadcrumbs={breadcrumbs} breadcrumbs={breadcrumbs}

7
packages/core/src/components/entry-editor/EditorToolbar.tsx
View File

@ -108,13 +108,6 @@ const EditorToolbar = ({
return items; return items;
}, [canCreate, isPublished, onDuplicate, onPersist, onPersistAndDuplicate, onPersistAndNew, t]); }, [canCreate, isPublished, onDuplicate, onPersist, onPersistAndDuplicate, onPersistAndNew, t]);
console.log(
'[PREVIEW] showI18nToggle || showPreviewToggle || showDelete',
showI18nToggle,
showPreviewToggle,
canDelete,
);
return useMemo( return useMemo(
() => ( () => (
<div className="flex gap-2"> <div className="flex gap-2">

4
packages/core/src/components/login/Login.tsx
View File

@ -16,6 +16,7 @@ export interface LoginProps {
icon?: FC<{ className?: string | undefined }>; icon?: FC<{ className?: string | undefined }>;
label?: string; label?: string;
error?: ReactNode; error?: ReactNode;
disabled?: boolean;
} }
const Login = ({ const Login = ({
@ -24,6 +25,7 @@ const Login = ({
icon, icon,
label, label,
error, error,
disabled = false,
t, t,
}: TranslatedProps<LoginProps>) => { }: TranslatedProps<LoginProps>) => {
const config = useAppSelector(selectConfig); const config = useAppSelector(selectConfig);
@ -53,7 +55,7 @@ const Login = ({
<div>{error}</div> <div>{error}</div>
</div> </div>
) : null} ) : 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')} {inProgress ? t('auth.loggingIn') : label ?? t('auth.login')}
</Button> </Button>
{config?.site_url && <GoBackButton href={config.site_url} t={t}></GoBackButton>} {config?.site_url && <GoBackButton href={config.site_url} t={t}></GoBackButton>}