feat(uesrprofile): email requirement and validation

package.json

@@ -37,6 +37,7 @@
     "country-flag-icons": "^1.4.21",
     "csurf": "^1.11.0",
     "email-templates": "^8.0.10",
+    "email-validator": "^2.0.4",
     "express": "^4.17.3",
     "express-openapi-validator": "^4.13.6",
     "express-rate-limit": "^6.3.0",
@@ -84,6 +85,7 @@
     "@babel/cli": "^7.17.6",
     "@commitlint/cli": "^16.2.1",
     "@commitlint/config-conventional": "^16.2.1",
+    "@next/eslint-plugin-next": "^12.1.6",
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/commit-analyzer": "^9.0.2",
     "@semantic-release/exec": "^6.0.3",

server/entity/User.ts

@@ -137,6 +137,8 @@ export class User {
   @UpdateDateColumn()
   public updatedAt: Date;
 
+  public warnings: string[] = [];
+
   constructor(init?: Partial<User>) {
     Object.assign(this, init);
   }

server/lib/settings.ts

@@ -134,6 +134,7 @@ interface FullPublicSettings extends PublicSettings {
   enablePushRegistration: boolean;
   locale: string;
   emailEnabled: boolean;
+  userEmailRequired: boolean;
   newPlexLogin: boolean;
 }
 
@@ -159,6 +160,7 @@ export interface NotificationAgentSlack extends NotificationAgentConfig {
 
 export interface NotificationAgentEmail extends NotificationAgentConfig {
   options: {
+    userEmailRequired: boolean;
     emailFrom: string;
     smtpHost: string;
     smtpPort: number;
@@ -335,6 +337,7 @@ class Settings {
           email: {
             enabled: false,
             options: {
+              userEmailRequired: false,
               emailFrom: '',
               smtpHost: '',
               smtpPort: 587,
@@ -529,6 +532,8 @@ class Settings {
       enablePushRegistration: this.data.notifications.agents.webpush.enabled,
       locale: this.data.main.locale,
       emailEnabled: this.data.notifications.agents.email.enabled,
+      userEmailRequired:
+        this.data.notifications.agents.email.options.userEmailRequired,
       newPlexLogin: this.data.main.newPlexLogin,
     };
   }

server/routes/auth.ts

@@ -9,6 +9,7 @@ import { Permission } from '../lib/permissions';
 import { getSettings } from '../lib/settings';
 import logger from '../logger';
 import { isAuthenticated } from '../middleware/auth';
+import * as EmailValidator from 'email-validator';
 
 const authRoutes = Router();
 
@@ -24,6 +25,16 @@ authRoutes.get('/me', isAuthenticated(), async (req, res) => {
     where: { id: req.user.id },
   });
 
+  // check if email is required in settings and if user has an valid email
+  const settings = await getSettings();
+  if (
+    settings.notifications.agents.email.options.userEmailRequired &&
+    !EmailValidator.validate(user.email)
+  ) {
+    user.warnings.push('userEmailRequired');
+    logger.warn(`User ${user.username} has no valid email address`);
+  }
+
   return res.status(200).json(user);
 });
 

src/components/Layout/Sidebar/index.tsx

@@ -14,6 +14,7 @@ import useClickOutside from '../../../hooks/useClickOutside';
 import { Permission, useUser } from '../../../hooks/useUser';
 import Transition from '../../Transition';
 import VersionStatus from '../VersionStatus';
+import UserWarnings from '../UserWarnings';
 
 const messages = defineMessages({
   dashboard: 'Discover',
@@ -177,6 +178,10 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
                         );
                       })}
                     </nav>
+                    <div className="px-2">
+                      <UserWarnings onClick={() => setClosed()} />
+                    </div>
+
                     {hasPermission(Permission.ADMIN) && (
                       <div className="px-2">
                         <VersionStatus onClick={() => setClosed()} />
@@ -236,6 +241,9 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
                   );
                 })}
               </nav>
+              <div className="px-2">
+                <UserWarnings />
+              </div>
               {hasPermission(Permission.ADMIN) && (
                 <div className="px-2">
                   <VersionStatus />

src/components/Layout/UserWarnings/index.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import Link from 'next/link';
+import { ExclamationIcon } from '@heroicons/react/outline';
+import { defineMessages, useIntl } from 'react-intl';
+import { useUser } from '../../../hooks/useUser';
+
+const messages = defineMessages({
+  emailRequired: 'An email address is required.',
+  emailInvalid: 'Email address is invalid.',
+  passwordRequired: 'A password is required.',
+});
+
+interface UserWarningsProps {
+  onClick?: () => void;
+}
+
+const UserWarnings: React.FC<UserWarningsProps> = ({ onClick }) => {
+  const intl = useIntl();
+  const { user } = useUser();
+  if (!user) {
+    return null;
+  }
+
+  let res = null;
+
+  //check if a user has warnings
+  if (user.warnings.length > 0) {
+    user.warnings.forEach((warning) => {
+      let link = '';
+      let warningText = '';
+      let warningTitle = '';
+      switch (warning) {
+        case 'userEmailRequired':
+          link = '/profile/settings/';
+          warningTitle = 'Profile is incomplete';
+          warningText = intl.formatMessage(messages.emailRequired);
+      }
+
+      res = (
+        <Link href={link}>
+          <a
+            onClick={onClick}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && onClick) {
+                onClick();
+              }
+            }}
+            role="button"
+            tabIndex={0}
+            className="mx-2 mb-2 flex items-center rounded-lg bg-yellow-500 p-2 text-xs text-white ring-1 ring-gray-700 transition duration-300 hover:bg-yellow-400"
+          >
+            <ExclamationIcon className="h-6 w-6" />
+            <div className="flex min-w-0 flex-1 flex-col truncate px-2 last:pr-0">
+              <span className="font-bold">{warningTitle}</span>
+              <span className="truncate">{warningText}</span>
+            </div>
+          </a>
+        </Link>
+      );
+    });
+  }
+
+  return res;
+};
+
+export default UserWarnings;

src/components/Layout/index.tsx

@@ -50,6 +50,7 @@ const Layout: React.FC = ({ children }) => {
       <div className="absolute top-0 h-64 w-full bg-gradient-to-bl from-gray-800 to-gray-900">
         <div className="relative inset-0 h-full w-full bg-gradient-to-t from-gray-900 to-transparent" />
       </div>
+
       <Sidebar open={isSidebarOpen} setClosed={() => setSidebarOpen(false)} />
 
       <div className="relative mb-16 flex w-0 min-w-0 flex-1 flex-col lg:ml-64">

src/components/Settings/Notifications/NotificationsEmail.tsx

@@ -16,6 +16,7 @@ const messages = defineMessages({
   validationSmtpHostRequired: 'You must provide a valid hostname or IP address',
   validationSmtpPortRequired: 'You must provide a valid port number',
   agentenabled: 'Enable Agent',
+  userEmailRequired: 'Require user email',
   emailsender: 'Sender Address',
   smtpHost: 'SMTP Host',
   smtpPort: 'SMTP Port',
@@ -125,6 +126,7 @@ const NotificationsEmail: React.FC = () => {
     <Formik
       initialValues={{
         enabled: data.enabled,
+        userEmailRequired: data.options.userEmailRequired,
         emailFrom: data.options.emailFrom,
         smtpHost: data.options.smtpHost,
         smtpPort: data.options.smtpPort ?? 587,
@@ -148,6 +150,7 @@ const NotificationsEmail: React.FC = () => {
           await axios.post('/api/v1/settings/notifications/email', {
             enabled: values.enabled,
             options: {
+              userEmailRequired: values.userEmailRequired,
               emailFrom: values.emailFrom,
               smtpHost: values.smtpHost,
               smtpPort: Number(values.smtpPort),
@@ -241,6 +244,18 @@ const NotificationsEmail: React.FC = () => {
                 <Field type="checkbox" id="enabled" name="enabled" />
               </div>
             </div>
+            <div className="form-row">
+              <label htmlFor="userEmailRequired" className="checkbox-label">
+                {intl.formatMessage(messages.userEmailRequired)}
+              </label>
+              <div className="form-input-area">
+                <Field
+                  type="checkbox"
+                  id="userEmailRequired"
+                  name="userEmailRequired"
+                />
+              </div>
+            </div>
             <div className="form-row">
               <label htmlFor="senderName" className="text-label">
                 {intl.formatMessage(messages.senderName)}