Ensure self-hosted instance can use SendGrid (#318)

backend/src/admin/router.ts

@@ -8,7 +8,7 @@ import config from '../config';
 import { isLicenced } from '../security/is-licenced';
 import {
   AdminChangePasswordPayload,
-  SelfHostingPayload,
+  BackendCapabilities,
 } from '@retrospected/common';
 import { getIdentityFromRequest, hashPassword } from '../utils';
 import csurf from 'csurf';
@@ -18,7 +18,7 @@ const csrfProtection = csurf();
 
 router.get('/self-hosting', async (_, res) => {
   const licence = await isLicenced();
-  const payload: SelfHostingPayload = {
+  const payload: BackendCapabilities = {
     adminEmail: config.SELF_HOSTED_ADMIN,
     selfHosted: config.SELF_HOSTED,
     licenced: !!licence,

backend/src/security/is-licenced.ts

@@ -77,10 +77,16 @@ async function isLicencedBase(): Promise<LicenceMetadata | null> {
       const result = (await response.json()) as LicenceMetadata;
       return result;
     } else {
-      console.error(
-        'Could not contact the licence server. If you have a valid licence, please contact [email protected] for support.'
-      );
-      console.log(response.status, response.statusText);
+      if (response.status === 403) {
+        console.error(
+          'The licence key is not recognised. If you have a valid licence, please contact [email protected] for support.'
+        );
+      } else {
+        console.error(
+          'Could not contact the licence server. If you have a valid licence, please contact [email protected] for support.'
+        );
+        console.log(response.status, response.statusText);
+      }
     }
   } catch (err) {
     console.error(

common/src/payloads.ts

@@ -50,7 +50,7 @@ export interface SelfHostedCheckPayload {
   key: string;
 }
 
-export interface SelfHostingPayload {
+export interface BackendCapabilities {
   selfHosted: boolean;
   sendGridAvailable: boolean;
   adminEmail: string;

frontend/src/Layout.tsx

@@ -16,8 +16,8 @@ import { HomeOutlined } from '@mui/icons-material';
 import ProPill from './components/ProPill';
 import { CodeSplitLoader } from './CodeSplitLoader';
 import useSidePanel from './views/panel/useSidePanel';
-import useIsLicenced from './global/useIsLicenced';
 import { Alert, AlertTitle } from '@mui/material';
+import useBackendCapabilities from './global/useBackendCapabilities';
 
 const Home = lazy(() => import('./views/Home' /* webpackChunkName: "home" */));
 const Game = lazy(() => import('./views/Game' /* webpackChunkName: "game" */));
@@ -85,7 +85,7 @@ const Title = styled(Typography)`
 
 function App() {
   const history = useHistory();
-  const licenced = useIsLicenced();
+  const backend = useBackendCapabilities();
   const isCompatible = useIsCompatibleBrowser();
   const { toggle: togglePanel } = useSidePanel();
   const isInitialised = useIsInitialised();
@@ -102,7 +102,7 @@ function App() {
   }, [history]);
   return (
     <div>
-      {!licenced ? (
+      {!backend.licenced ? (
         <Alert title="Unlicenced" severity="error">
           <AlertTitle>Retrospected is Unlicenced</AlertTitle>
           This software is unlicenced. You can obtain a licence{' '}

frontend/src/api/index.ts

@@ -8,7 +8,7 @@ import {
   ResetChangePasswordPayload,
   FullUser,
   Product,
-  SelfHostingPayload,
+  BackendCapabilities,
 } from '@retrospected/common';
 import config from '../utils/getConfig';
 import { v4 } from 'uuid';
@@ -223,8 +223,8 @@ export async function getGiphyUrl(giphyId: string): Promise<string | null> {
   }
 }
 
-export async function fetchSelfHostingInfo(): Promise<SelfHostingPayload | null> {
-  return await fetchGet<SelfHostingPayload | null>(
+export async function fetchBackendCapabilities(): Promise<BackendCapabilities | null> {
+  return await fetchGet<BackendCapabilities | null>(
     '/api/admin/self-hosting',
     null
   );

frontend/src/auth/modal/account/LostPassword.tsx

@@ -7,16 +7,14 @@ import Input from '../../../components/Input';
 import { Email } from '@mui/icons-material';
 import { resetPassword } from '../../../api';
 import { Link } from 'react-router-dom';
-import useAdminEmail from '../../../global/useAdminEmail';
-import useIsSendGridAvailable from '../../../global/useIsSendGridAvailable';
+import useBackendCapabilities from '../../../global/useBackendCapabilities';
 
 const LostPassword = () => {
   const { ResetPassword: translations, AuthCommon: authTranslations } =
     useTranslations();
   const [email, setEmail] = useState('');
   const [done, setDone] = useState(false);
-  const adminEmail = useAdminEmail();
-  const canUseSendgrid = useIsSendGridAvailable();
+  const backend = useBackendCapabilities();
   const handleForgotPassword = useCallback(() => {
     async function reset() {
       await resetPassword(email);
@@ -25,12 +23,12 @@ const LostPassword = () => {
     reset();
   }, [email]);
 
-  if (!canUseSendgrid) {
+  if (!backend.sendGridAvailable) {
     return (
       <Alert severity="info">
-        You are using a Self-Hosted version of Retrospected. In order to reset
-        your password, ask your admin ({adminEmail}) to access the admin page to
-        do that:&nbsp;
+        You are using a Self-Hosted version of Retrospected, without email
+        support. In order to reset your password, ask your admin (
+        {backend.adminEmail}) to access the admin page to do that:&nbsp;
         <Link to="/admin">Admin Panel</Link>
       </Alert>
     );

frontend/src/auth/useIsPro.ts

@@ -1,12 +1,10 @@
-import useIsLicenced from '../global/useIsLicenced';
-import useIsSelfHosted from '../global/useIsSelfHosted';
+import useBackendCapabilities from '../global/useBackendCapabilities';
 import useUser from './useUser';
 
 export default function useIsPro() {
   const user = useUser();
-  const isSelfHosted = useIsSelfHosted();
-  const isLicenced = useIsLicenced();
-  if (isSelfHosted && isLicenced) {
+  const backend = useBackendCapabilities();
+  if (backend.selfHosted && backend.licenced) {
     return true;
   }
   const activeTrial = user && user.trial && new Date(user.trial) > new Date();

frontend/src/global/GlobalProvider.tsx

@@ -1,33 +1,22 @@
 import { useEffect } from 'react';
-import { fetchSelfHostingInfo } from '../api';
+import { fetchBackendCapabilities } from '../api';
 import { useSetRecoilState } from 'recoil';
-import {
-  adminEmailState,
-  isLicencedState,
-  oauthAvailabilitiesState,
-  selfHostedState,
-} from './state';
+import { backendCapabilitiesState } from './state';
 import { loadCsrfToken } from '../api/fetch';
 
 const GlobalProvider: React.FC = ({ children }) => {
-  const setEmail = useSetRecoilState(adminEmailState);
-  const setLicenced = useSetRecoilState(isLicencedState);
-  const setSelfHosted = useSetRecoilState(selfHostedState);
-  const setOAuth = useSetRecoilState(oauthAvailabilitiesState);
+  const setBackendCapabilities = useSetRecoilState(backendCapabilitiesState);
 
   useEffect(() => {
     async function loadGlobal() {
       await loadCsrfToken(); // Make sure the CSRF token is loaded before anything else
-      const infos = await fetchSelfHostingInfo();
+      const infos = await fetchBackendCapabilities();
       if (infos) {
-        setEmail(infos.adminEmail);
-        setLicenced(infos.licenced);
-        setSelfHosted(infos.selfHosted);
-        setOAuth(infos.oAuth);
+        setBackendCapabilities(infos);
       }
     }
     loadGlobal();
-  }, [setEmail, setLicenced, setSelfHosted, setOAuth]);
+  }, [setBackendCapabilities]);
 
   return <>{children}</>;
 };

frontend/src/global/state.ts

@@ -1,30 +1,20 @@
 import { atom } from 'recoil';
-import { OAuthAvailabilities } from '@retrospected/common';
+import { BackendCapabilities } from '@retrospected/common';
 
-export const adminEmailState = atom<string | null>({
-  key: 'ADMIN_EMAIL',
-  default: null,
-});
-export const isLicencedState = atom<boolean>({
-  key: 'LICENCED',
-  default: true,
-});
-export const selfHostedState = atom<boolean>({
-  key: 'SELF-HOSTED',
-  default: false,
-});
-export const oauthAvailabilitiesState = atom<OAuthAvailabilities>({
-  key: 'OAuthAvailabilities',
+export const backendCapabilitiesState = atom<BackendCapabilities>({
+  key: 'BACKEND_CAPABILITIES',
   default: {
-    google: false,
-    github: false,
-    twitter: false,
-    microsoft: false,
-    slack: false,
-    okta: false,
+    adminEmail: '',
+    licenced: true,
+    selfHosted: false,
+    oAuth: {
+      google: false,
+      github: false,
+      twitter: false,
+      microsoft: false,
+      slack: false,
+      okta: false,
+    },
+    sendGridAvailable: false,
   },
 });
-export const isSendGridAvailableState = atom<boolean>({
-  key: 'SENDGRID_AVAILABLE',
-  default: false,
-});

frontend/src/global/useBackendCapabilities.ts

@@ -0,0 +1,7 @@
+import { BackendCapabilities } from '@retrospected/common';
+import { useRecoilValue } from 'recoil';
+import { backendCapabilitiesState } from './state';
+
+export default function useBackendCapabilities(): BackendCapabilities {
+  return useRecoilValue(backendCapabilitiesState);
+}

frontend/src/global/useOAuthAvailabilities.ts

@@ -1,9 +1,9 @@
 import { some, values } from 'lodash';
-import { useRecoilValue } from 'recoil';
-import { oauthAvailabilitiesState } from './state';
+import useBackendCapabilities from './useBackendCapabilities';
 
 export default function useOAuthAvailabilities() {
-  const details = useRecoilValue(oauthAvailabilitiesState);
+  const backend = useBackendCapabilities();
+  const details = backend.oAuth;
   return {
     any: some(values(details)),
     details,

frontend/src/views/admin/AdminPage.tsx

@@ -2,17 +2,15 @@ import { Alert } from '@mui/material';
 import { DataGrid, GridColDef } from '@mui/x-data-grid';
 import { FullUser } from '@retrospected/common';
 import useUser from '../../auth/useUser';
-import useAdminEmail from '../../global/useAdminEmail';
 import useStateFetch from '../../hooks/useStateFetch';
 import { useMemo } from 'react';
 import styled from '@emotion/styled';
 import ChangePassword from './ChangePassword';
-import useIsSelfHosted from '../../global/useIsSelfHosted';
+import useBackendCapabilities from '../../global/useBackendCapabilities';
 
 export default function AdminPage() {
   const user = useUser();
-  const adminEmail = useAdminEmail();
-  const isSelfHosted = useIsSelfHosted();
+  const backend = useBackendCapabilities();
   const [users] = useStateFetch<FullUser[]>('/api/admin/users', []);
 
   const columns: GridColDef[] = useMemo(() => {
@@ -28,16 +26,16 @@ export default function AdminPage() {
     ] as GridColDef[];
   }, []);
 
-  if (!isSelfHosted) {
+  if (!backend.selfHosted) {
     <Alert severity="error">
       This page is only accessible for self-hosted instances.
     </Alert>;
   }
-  if (!user || user.email !== adminEmail) {
+  if (!user || user.email !== backend.adminEmail) {
     return (
       <Alert severity="error">
         This page is only accessible for the Self-Hosted Administrator (
-        {adminEmail}).
+        {backend.adminEmail}).
       </Alert>
     );
   }