Merge pull request #1057 from jetstreamapp/feat/add-email-verificatio…

…n-banner

Add email verification warning banner

apps/jetstream/src/app/app.tsx

@@ -14,8 +14,9 @@ import { AppRoutes } from './AppRoutes';
 import AppInitializer from './components/core/AppInitializer';
 import AppStateResetOnOrgChange from './components/core/AppStateResetOnOrgChange';
 import LogInitializer from './components/core/LogInitializer';
-import NotificationsRequestModal from './components/core/NotificationsRequestModal';
 import './components/core/monaco-loader';
+import NotificationsRequestModal from './components/core/NotificationsRequestModal';
+import { UnverifiedEmailAlert } from './components/core/UnverifiedEmailAlert';
 
 /**
  * TODO: disabled socket from browser until we have a solid use-case for it
@@ -52,6 +53,7 @@ export const App = () => {
                     <HeaderNavbar userProfile={userProfile} featureFlags={featureFlags} />
                   </div>
                   <div className="app-container slds-p-horizontal_xx-small slds-p-vertical_xx-small" data-testid="content">
+                    <UnverifiedEmailAlert userProfile={userProfile} />
                     <Suspense fallback={<AppLoading />}>
                       <ErrorBoundary FallbackComponent={ErrorBoundaryFallback}>
                         <AppRoutes featureFlags={featureFlags} userProfile={userProfile} />

apps/jetstream/src/app/components/core/UnverifiedEmailAlert.tsx

@@ -0,0 +1,31 @@
+import { Maybe, UserProfileUi } from '@jetstream/types';
+import { Alert } from '@jetstream/ui';
+import { useState } from 'react';
+
+interface UnverifiedEmailAlertProps {
+  userProfile: Maybe<UserProfileUi>;
+}
+
+const LS_KEY = 'unverified_email_dismissed';
+
+export function UnverifiedEmailAlert({ userProfile }: UnverifiedEmailAlertProps) {
+  const [dismissed, setDismissed] = useState(() => localStorage.getItem(LS_KEY) === 'true');
+
+  if (!userProfile || userProfile.email_verified || dismissed) {
+    return null;
+  }
+
+  return (
+    <Alert
+      type="warning"
+      leadingIcon="warning"
+      allowClose
+      onClose={() => {
+        localStorage.setItem(LS_KEY, 'true');
+        setDismissed(true);
+      }}
+    >
+      We will soon be enabling two-factor authentication via email for all users. Verify your email address to avoid any interruptions.
+    </Alert>
+  );
+}