add email verification & reset notification

src/components/Sidebar/B4aSidebar.react.js

@@ -19,6 +19,7 @@ import AppsMenu from 'components/Sidebar/AppsMenu.react';
 import AppName from 'components/Sidebar/AppName.react';
 import { CurrentApp } from 'context/currentApp';
 import { canAccess } from 'lib/serverInfo';
+import { Link } from 'react-router-dom';
 // let isSidebarFixed = !isMobile();
 let isSidebarCollapsed = undefined;
 
@@ -118,9 +119,42 @@ const B4aSidebar = ({
     }
     return (
       <div className={styles.submenu}>
-        {subsections.map(({name, link, badge}) => {
+        {subsections.map(({ name, link, badge, children: groupChildren }) => {
+          if (groupChildren) {
+            const isGroupActive = subsection === name || groupChildren.some(c => c.name === subsection);
+            const groupLink = link.startsWith('/') ? prefix + link : link;
+            return (
+              <div key={name} className={styles.subgroup}>
+                <Link
+                  className={`${styles.subgroupHeader} ${isGroupActive ? styles.subgroupHeaderActive : ''}`}
+                  to={{ pathname: groupLink }}
+                >
+                  {name}
+                </Link>
+                <div className={styles.subgroupChildren}>
+                  {groupChildren.map(child => {
+                    const childActive = subsection === child.name;
+                    const childLink = child.link.startsWith('/') ? prefix + child.link : child.link;
+                    return (
+                      <SidebarSubItem
+                        key={child.name}
+                        name={child.name}
+                        link={childLink}
+                        action={action || null}
+                        actionHandler={childActive ? actionHandler : null}
+                        active={childActive}
+                        badge={child.badge}
+                      >
+                        {childActive ? children : null}
+                      </SidebarSubItem>
+                    );
+                  })}
+                </div>
+              </div>
+            );
+          }
+
           const active = subsection === name;
-          // If link points to another component, adds the prefix
           link = link.startsWith('/') ? prefix + link : link;
           return (
             <SidebarSubItem

src/components/Sidebar/B4aSidebar.scss

@@ -411,6 +411,44 @@ a.subitem {
   }
 }
 
+.subgroup {
+  margin-bottom: 0.75rem;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.subgroupHeader {
+  @include SoraFont;
+  display: block;
+  color: $light-blue;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 140%;
+  margin-bottom: 0.5rem;
+
+  &:hover {
+    color: white;
+  }
+}
+
+.subgroupHeaderActive {
+  color: white;
+}
+
+.subgroupChildren {
+  padding-left: 12px;
+
+  & > div {
+    margin-bottom: 0.5rem;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
 .action {
   @include InterFont;
   position: absolute;

src/dashboard/Dashboard.js

@@ -79,6 +79,8 @@ const LazyCloudCode = lazy(() => import('./Data/CloudCode/B4ACloudCode.react'));
 const LazyAppPlan = lazy(() => import('./AppPlan/AppPlan.react'));
 const LazyAppSecurityReport = lazy(() => import('./AppSecurityReport/AppSecurityReport.react'));
 const LazyDatabaseProfile = lazy(() => import('./DatabaseProfiler/DatabaseProfiler.react'));
+const LazyEmailVerification = lazy(() => import('./Notification/EmailVerification.react'));
+const LazyEmailPasswordReset = lazy(() => import('./Notification/EmailPasswordReset.react'));
 
 async function fetchHubUser() {
   try {
@@ -487,6 +489,11 @@ class Dashboard extends React.Component {
 
         {/* <Route path="migration" element={<Migration />} /> */}
 
+        <Route path="notification" element={<Navigate replace to="email/verification" />} />
+        <Route path="notification/email" element={<Navigate replace to="verification" />} />
+        <Route path="notification/email/verification" element={<LazyComponentWrapper><LazyEmailVerification /></LazyComponentWrapper>} />
+        <Route path="notification/email/password-reset" element={<LazyComponentWrapper><LazyEmailPasswordReset /></LazyComponentWrapper>} />
+
         <Route path="push" element={<Navigate replace to="new" />} />
         <Route path="push/activity" element={<Navigate replace to="all" />} />
 

src/dashboard/DashboardView.react.js

@@ -334,26 +334,31 @@ export default class DashboardView extends React.Component {
       subsections: apiSubSections
     });
 
-    const pushSubSections = [];
-
-    pushSubSections.push({
-      name: 'Send New Push',
-      link: '/push/new',
-    });
-    pushSubSections.push({
-      name: 'Past Pushes',
-      link: '/push/activity',
-    });
-    pushSubSections.push({
-      name: 'Audiences',
-      link: '/push/audiences',
-    });
+    const notificationSubSections = [
+      {
+        name: 'Email',
+        link: '/notification/email',
+        children: [
+          { name: 'Verification', link: '/notification/email/verification' },
+          { name: 'Password Reset', link: '/notification/email/password-reset' },
+        ],
+      },
+      {
+        name: 'Pushes',
+        link: '/push/new',
+        children: [
+          { name: 'Send New Push', link: '/push/new' },
+          { name: 'Past Pushes', link: '/push/activity' },
+          { name: 'Audiences', link: '/push/audiences' },
+        ],
+      },
+    ];
 
     appSidebarSections.push({
-      name: 'Push Notifications',
+      name: 'Notification',
       icon: 'b4a-push-notification-icon',
-      link: '/push',
-      subsections: pushSubSections
+      link: '/notification',
+      subsections: notificationSubSections,
     });
 
     appSidebarSections.push({

src/dashboard/Notification/EmailLabelSettings.react.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import BaseLabelSettings from 'components/LabelSettings/LabelSettings.react';
+import styles from './EmailSettings.scss';
+
+export default function EmailLabelSettings({ description, ...props }) {
+  const leftAlignedText = props.text ? <span className={styles.labelTextLeft}>{props.text}</span> : props.text;
+  const leftAlignedDescription = description
+    ? <span className={styles.labelDescriptionLeft}>{description}</span>
+    : description;
+
+  return (
+    <BaseLabelSettings
+      {...props}
+      text={leftAlignedText}
+      description={leftAlignedDescription}
+    />
+  );
+}