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

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

View File

@ -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>

View File

@ -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',

View File

@ -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}
/>
);
};

View File

@ -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(),

View File

@ -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}

View File

@ -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">

View File

@ -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>}