Admin UI branding hook (#2474)

keystonejs · Apr 16, 2020 · 57e6ce2 · 57e6ce2
1 parent 364ba1c
commit 57e6ce2
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 19 deletions.
diff --git a/.changeset/wild-mice-double.md b/.changeset/wild-mice-double.md
@@ -0,0 +1,5 @@
+---
+'@keystonejs/app-admin-ui': minor
+---
+
+Added a UI hook (`logo`) to display a custom logo on the signin screen.
diff --git a/packages/app-admin-ui/client/pages/Signin.js b/packages/app-admin-ui/client/pages/Signin.js
@@ -15,6 +15,7 @@ import { upcase } from '@keystonejs/utils';
 import KeystoneLogo from '../components/KeystoneLogo';
 
 import { useAdminMeta } from '../providers/AdminMeta';
+import { useUIHooks } from '../providers/Hooks';
 
 const Container = styled.div({
   alignItems: 'center',
@@ -74,6 +75,8 @@ const SignInPage = () => {
     authStrategy: { listKey, identityField, secretField },
   } = useAdminMeta();
 
+  const { logo: getCustomLogo } = useUIHooks();
+
   const [identity, setIdentity] = useState('');
   const [secret, setSecret] = useState('');
   const [reloading, setReloading] = useState(false);
@@ -124,7 +127,7 @@ const SignInPage = () => {
       </Alerts>
       <PageTitle>{siteName}</PageTitle>
       <Form method="post" onSubmit={onSubmit}>
-        <KeystoneLogo />
+        {getCustomLogo ? getCustomLogo() : <KeystoneLogo />}
         <Divider />
         <div>
           <Fields>

diff --git a/packages/app-admin-ui/client/public.js b/packages/app-admin-ui/client/public.js
@@ -11,6 +11,7 @@ import ApolloClient from './apolloClient';
 
 import ConnectivityListener from './components/ConnectivityListener';
 import { AdminMetaProvider, useAdminMeta } from './providers/AdminMeta';
+import { HooksProvider } from './providers/Hooks';
 
 import InvalidRoutePage from './pages/InvalidRoute';
 import SignoutPage from './pages/Signout';
@@ -24,28 +25,30 @@ import SigninPage from './pages/Signin';
 */
 
 const Keystone = () => {
-  const { authStrategy, apiPath, signoutPath } = useAdminMeta();
+  const { authStrategy, apiPath, signoutPath, hooks } = useAdminMeta();
 
   const apolloClient = useMemo(() => new ApolloClient({ uri: apiPath }), [apiPath]);
 
   return (
-    <ApolloProvider client={apolloClient}>
-      <ToastProvider>
-        <ConnectivityListener />
-        <Global styles={globalStyles} />
-
-        {authStrategy ? (
-          <BrowserRouter>
-            <Switch>
-              <Route exact path={signoutPath} render={() => <SignoutPage />} />
-              <Route render={() => <SigninPage />} />
-            </Switch>
-          </BrowserRouter>
-        ) : (
-          <InvalidRoutePage />
-        )}
-      </ToastProvider>
-    </ApolloProvider>
+    <HooksProvider hooks={hooks}>
+      <ApolloProvider client={apolloClient}>
+        <ToastProvider>
+          <ConnectivityListener />
+          <Global styles={globalStyles} />
+
+          {authStrategy ? (
+            <BrowserRouter>
+              <Switch>
+                <Route exact path={signoutPath} render={() => <SignoutPage />} />
+                <Route render={() => <SigninPage />} />
+              </Switch>
+            </BrowserRouter>
+          ) : (
+            <InvalidRoutePage />
+          )}
+        </ToastProvider>
+      </ApolloProvider>
+    </HooksProvider>
   );
 };
 

diff --git a/packages/app-admin-ui/components/index.js b/packages/app-admin-ui/components/index.js
@@ -12,6 +12,7 @@ export { default as DeleteManyItemsModal } from '../client/components/DeleteMany
 export { default as PageLoading } from '../client/components/PageLoading';
 export { default as ToastContainer } from '../client/components/ToastContainer';
 export { default as UpdateManyItemsModal } from '../client/components/UpdateManyItemsModal';
+export { default as KeystoneLogo } from '../client/components/KeystoneLogo';
 export { Popout } from '../client/components/Popout';
 export { useAdminMeta } from '../client/providers/AdminMeta';
 export { default as AddNewItem } from '../client/pages/Item/AddNewItem';