feat(userprofile): email requirement and validation

.gitignore

@@ -53,3 +53,6 @@ config/db/db.sqlite3-journal
 
 # VS Code
 .vscode/launch.json
+
+# Webstorm
+.idea

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/notifications/agents/email.ts

@@ -13,6 +13,7 @@ import {
   NotificationAgentKey,
 } from '../../settings';
 import { BaseAgent, NotificationAgent, NotificationPayload } from './agent';
+import * as EmailValidator from 'email-validator';
 
 class EmailAgent
   extends BaseAgent<NotificationAgentEmail>
@@ -215,14 +216,23 @@ class EmailAgent
             this.getSettings(),
             payload.notifyUser.settings?.pgpKey
           );
-          await email.send(
-            this.buildMessage(
-              type,
-              payload,
-              payload.notifyUser.email,
-              payload.notifyUser.displayName
-            )
-          );
+          if (EmailValidator.validate(payload.notifyUser.email)) {
+            await email.send(
+              this.buildMessage(
+                type,
+                payload,
+                payload.notifyUser.email,
+                payload.notifyUser.displayName
+              )
+            );
+          } else {
+            logger.warn('Invalid email address provided for user', {
+              label: 'Notifications',
+              recipient: payload.notifyUser.displayName,
+              type: Notification[type],
+              subject: payload.subject,
+            });
+          }
         } catch (e) {
           logger.error('Error sending email notification', {
             label: 'Notifications',
@@ -268,9 +278,18 @@ class EmailAgent
                 this.getSettings(),
                 user.settings?.pgpKey
               );
-              await email.send(
-                this.buildMessage(type, payload, user.email, user.displayName)
-              );
+              if (EmailValidator.validate(user.email)) {
+                await email.send(
+                  this.buildMessage(type, payload, user.email, user.displayName)
+                );
+              } else {
+                logger.warn('Invalid email address provided for user', {
+                  label: 'Notifications',
+                  recipient: user.displayName,
+                  type: Notification[type],
+                  subject: payload.subject,
+                });
+              }
             } catch (e) {
               logger.error('Error sending email notification', {
                 label: 'Notifications',

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);
 });
 

server/routes/user/index.ts

@@ -492,61 +492,46 @@ router.post(
       );
       jellyfinClient.setUserId(admin.jellyfinUserId ?? '');
 
-      const jellyfinUsersResponse = await jellyfinClient.getUsers();
+      //const jellyfinUsersResponse = await jellyfinClient.getUsers();
       const createdUsers: User[] = [];
       const { hostname, externalHostname } = getSettings().jellyfin;
       const jellyfinHost =
         externalHostname && externalHostname.length > 0
           ? externalHostname
           : hostname;
-      for (const account of jellyfinUsersResponse.users) {
-        if (account.Name) {
-          const user = await userRepository
-            .createQueryBuilder('user')
-            .where('user.jellyfinUserId = :id', { id: account.Id })
-            .orWhere('user.email = :email', {
-              email: account.Name,
-            })
-            .getOne();
 
-          const avatar = account.PrimaryImageTag
-            ? `${jellyfinHost}/Users/${account.Id}/Images/Primary/?tag=${account.PrimaryImageTag}&quality=90`
-            : '/os_logo_square.png';
+      jellyfinClient.setUserId(admin.jellyfinUserId ?? '');
+      const jellyfinUsers = await jellyfinClient.getUsers();
 
-          if (user) {
-            // Update the user's avatar with their Jellyfin thumbnail, in case it changed
-            user.avatar = avatar;
-            user.email = account.Name;
-            user.jellyfinUsername = account.Name;
+      for (const jellyfinUserId of body.jellyfinUserIds) {
+        const jellyfinUser = jellyfinUsers.users.find(
+          (user) => user.Id === jellyfinUserId
+        );
 
-            // In case the user was previously a local account
-            if (user.userType === UserType.LOCAL) {
-              user.userType = UserType.JELLYFIN;
-              user.jellyfinUserId = account.Id;
-            }
-            await userRepository.save(user);
-          } else if (!body || body.jellyfinUserIds.includes(account.Id)) {
-            // logger.error('CREATED USER', {
-            //   label: 'API',
-            // });
-
-            const newUser = new User({
-              jellyfinUsername: account.Name,
-              jellyfinUserId: account.Id,
-              jellyfinDeviceId: Buffer.from(
-                `BOT_overseerr_${account.Name ?? ''}`
-              ).toString('base64'),
-              email: account.Name,
-              permissions: settings.main.defaultPermissions,
-              avatar,
-              userType: UserType.JELLYFIN,
-            });
-            await userRepository.save(newUser);
-            createdUsers.push(newUser);
-          }
+        const user = await userRepository.findOne({
+          select: ['id', 'jellyfinUserId'],
+          where: { jellyfinUserId: jellyfinUserId },
+        });
+
+        if (!user) {
+          const newUser = new User({
+            jellyfinUsername: jellyfinUser?.Name,
+            jellyfinUserId: jellyfinUser?.Id,
+            jellyfinDeviceId: Buffer.from(
+              `BOT_jellyseerr_${jellyfinUser?.Name ?? ''}`
+            ).toString('base64'),
+            email: jellyfinUser?.Name,
+            permissions: settings.main.defaultPermissions,
+            avatar: jellyfinUser?.PrimaryImageTag
+              ? `${jellyfinHost}/Users/${jellyfinUser.Id}/Images/Primary/?tag=${jellyfinUser.PrimaryImageTag}&quality=90`
+              : '/os_logo_square.png',
+            userType: UserType.JELLYFIN,
+          });
+
+          await userRepository.save(newUser);
+          createdUsers.push(newUser);
         }
       }
-
       return res.status(201).json(User.filterMany(createdUsers));
     } catch (e) {
       next({ status: 500, message: e.message });

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)}

src/components/Setup/LoginWithPlex.tsx

@@ -5,7 +5,7 @@ import { useUser } from '../../hooks/useUser';
 import PlexLoginButton from '../PlexLoginButton';
 
 const messages = defineMessages({
-  welcome: 'Welcome to Overseerr',
+  welcome: 'Welcome to Jellyseerr',
   signinMessage: 'Get started by signing in with your Plex account',
 });