fix: remove email requirement for the user, and use the username if no email provided (#900)

* fix: remove email requirement for the user, and use the username if no email provided * fix: update translations * fix: remove useless console.log * test: fix user list test * fix: disallow Plex users from changing their email
2025-12-24 02:39:18 -05:00 · 2024-07-29 21:27:31 +02:00
parent 422085523e
commit d5f817e734
10 changed files with 85 additions and 45 deletions
--- a/cypress/e2e/user/user-list.cy.ts
+++ b/cypress/e2e/user/user-list.cy.ts
@@ -1,5 +1,5 @@
 const testUser = {
-  displayName: 'Test User',
+  username: 'Test User',
  emailAddress: 'test@seeerr.dev',
  password: 'test1234',
 };
@@ -32,7 +32,7 @@ describe('User List', () => {

    cy.get('[data-testid=modal-title]').should('contain', 'Create Local User');

-    cy.get('#displayName').type(testUser.displayName);
+    cy.get('#username').type(testUser.username);
    cy.get('#email').type(testUser.emailAddress);
    cy.get('#password').type(testUser.password);

--- a/server/routes/auth.ts
+++ b/server/routes/auth.ts
@@ -320,7 +320,7 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
      // with admin permission
      settings.main.mediaServerType = MediaServerType.JELLYFIN;
      user = new User({
-        email: body.email,
+        email: body.email || account.User.Name,
        jellyfinUsername: account.User.Name,
        jellyfinUserId: account.User.Id,
        jellyfinDeviceId: deviceId,
@@ -328,7 +328,10 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
        permissions: Permission.ADMIN,
        avatar: account.User.PrimaryImageTag
          ? `${jellyfinHost}/Users/${account.User.Id}/Images/Primary/?tag=${account.User.PrimaryImageTag}&quality=90`
-          : gravatarUrl(body.email ?? '', { default: 'mm', size: 200 }),
+          : gravatarUrl(body.email || account.User.Name, {
+              default: 'mm',
+              size: 200,
+            }),
        userType: UserType.JELLYFIN,
      });

@@ -371,7 +374,7 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
      if (account.User.PrimaryImageTag) {
        user.avatar = `${jellyfinHost}/Users/${account.User.Id}/Images/Primary/?tag=${account.User.PrimaryImageTag}&quality=90`;
      } else {
-        user.avatar = gravatarUrl(user.email, {
+        user.avatar = gravatarUrl(user.email || account.User.Name, {
          default: 'mm',
          size: 200,
        });
@@ -413,10 +416,6 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
        }
      );

-      if (!body.email) {
-        throw new Error('add_email');
-      }
-
      user = new User({
        email: body.email,
        jellyfinUsername: account.User.Name,
@@ -426,7 +425,10 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
        permissions: settings.main.defaultPermissions,
        avatar: account.User.PrimaryImageTag
          ? `${jellyfinHost}/Users/${account.User.Id}/Images/Primary/?tag=${account.User.PrimaryImageTag}&quality=90`
-          : gravatarUrl(body.email, { default: 'mm', size: 200 }),
+          : gravatarUrl(body.email || account.User.Name, {
+              default: 'mm',
+              size: 200,
+            }),
        userType: UserType.JELLYFIN,
      });
      //initialize Jellyfin/Emby users with local login
--- a/server/routes/user/index.ts
+++ b/server/routes/user/index.ts
@@ -41,7 +41,19 @@ router.get('/', async (req, res, next) => {
        break;
      case 'displayname':
        query = query.orderBy(
-          "(CASE WHEN (user.username IS NULL OR user.username = '') THEN (CASE WHEN (user.plexUsername IS NULL OR user.plexUsername = '') THEN user.email ELSE LOWER(user.plexUsername) END) ELSE LOWER(user.username) END)",
+          `CASE WHEN (user.username IS NULL OR user.username = '') THEN (
+             CASE WHEN (user.plexUsername IS NULL OR user.plexUsername = '') THEN (
+               CASE WHEN (user.jellyfinUsername IS NULL OR user.jellyfinUsername = '') THEN
+                 user.email
+               ELSE
+                 LOWER(user.jellyfinUsername)
+               END)
+             ELSE
+               LOWER(user.jellyfinUsername)
+             END)
+           ELSE
+             LOWER(user.username)
+           END`,
          'ASC'
        );
        break;
@@ -90,12 +102,13 @@ router.post(
      const settings = getSettings();

      const body = req.body;
+      const email = body.email || body.username;
      const userRepository = getRepository(User);

      const existingUser = await userRepository
        .createQueryBuilder('user')
        .where('user.email = :email', {
-          email: body.email.toLowerCase(),
+          email: email.toLowerCase(),
        })
        .getOne();

@@ -108,7 +121,7 @@ router.post(
      }

      const passedExplicitPassword = body.password && body.password.length > 0;
-      const avatar = gravatarUrl(body.email, { default: 'mm', size: 200 });
+      const avatar = gravatarUrl(email, { default: 'mm', size: 200 });

      if (
        !passedExplicitPassword &&
@@ -118,9 +131,9 @@ router.post(
      }

      const user = new User({
+        email,
        avatar: body.avatar ?? avatar,
        username: body.username,
-        email: body.email,
        password: body.password,
        permissions: settings.main.defaultPermissions,
        plexToken: '',
--- a/server/routes/user/usersettings.ts
+++ b/server/routes/user/usersettings.ts
@@ -98,7 +98,9 @@ userSettingsRoutes.post<
    }

    user.username = req.body.username;
-    user.email = req.body.email ?? user.email;
+    if (user.jellyfinUsername) {
+      user.email = req.body.email || user.jellyfinUsername || user.email;
+    }

    // Update quota values only if the user has the correct permissions
    if (
--- a/src/components/Layout/UserDropdown/index.tsx
+++ b/src/components/Layout/UserDropdown/index.tsx
@@ -90,9 +90,11 @@ const UserDropdown = () => {
                  <span className="truncate text-xl font-semibold text-gray-200">
                    {user?.displayName}
                  </span>
-                  <span className="truncate text-sm text-gray-400">
-                    {user?.email}
-                  </span>
+                  {user?.displayName?.toLowerCase() !== user?.email && (
+                    <span className="truncate text-sm text-gray-400">
+                      {user?.email}
+                    </span>
+                  )}
                </div>
              </div>
              {user && <MiniQuotaDisplay userId={user?.id} />}
--- a/src/components/UserList/JellyfinImportModal.tsx
+++ b/src/components/UserList/JellyfinImportModal.tsx
@@ -78,7 +78,7 @@ const JellyfinImportModal: React.FC<JellyfinImportProps> = ({
        }),
      });
      if (!res.ok) throw new Error();
-      const { data: createdUsers } = await res.json();
+      const createdUsers = await res.json();

      if (!createdUsers.length) {
        throw new Error('No users were imported from Jellyfin.');
--- a/src/components/UserList/index.tsx
+++ b/src/components/UserList/index.tsx
@@ -68,14 +68,15 @@ const messages = defineMessages('components.UserList', {
  usercreatedfailedexisting:
    'The provided email address is already in use by another user.',
  usercreatedsuccess: 'User created successfully!',
-  displayName: 'Display Name',
+  username: 'Username',
  email: 'Email Address',
  password: 'Password',
  passwordinfodescription:
    'Configure an application URL and enable email notifications to allow automatic password generation.',
  autogeneratepassword: 'Automatically Generate Password',
  autogeneratepasswordTip: 'Email a server-generated password to the user',
-  validationEmail: 'You must provide a valid email address',
+  validationUsername: 'You must provide an username',
+  validationEmail: 'Email required',
  sortCreated: 'Join Date',
  sortDisplayName: 'Display Name',
  sortRequests: 'Request Count',
@@ -208,9 +209,10 @@ const UserList = () => {
  }

  const CreateUserSchema = Yup.object().shape({
-    email: Yup.string()
-      .required(intl.formatMessage(messages.validationEmail))
-      .email(intl.formatMessage(messages.validationEmail)),
+    username: Yup.string().required(
+      intl.formatMessage(messages.validationUsername)
+    ),
+    email: Yup.string().email(intl.formatMessage(messages.validationEmail)),
    password: Yup.lazy((value) =>
      !value
        ? Yup.string()
@@ -258,7 +260,7 @@ const UserList = () => {
            setDeleteModal({ isOpen: false, user: deleteModal.user })
          }
          title={intl.formatMessage(messages.deleteuser)}
-          subTitle={deleteModal.user?.displayName}
+          subTitle={deleteModal.user?.username}
        >
          {intl.formatMessage(messages.deleteconfirm)}
        </Modal>
@@ -276,7 +278,7 @@ const UserList = () => {
      >
        <Formik
          initialValues={{
-            displayName: '',
+            username: '',
            email: '',
            password: '',
            genpassword: false,
@@ -290,7 +292,7 @@ const UserList = () => {
                  'Content-Type': 'application/json',
                },
                body: JSON.stringify({
-                  username: values.displayName,
+                  username: values.username,
                  email: values.email,
                  password: values.genpassword ? null : values.password,
                }),
@@ -370,23 +372,24 @@ const UserList = () => {
                  )}
                <Form className="section">
                  <div className="form-row">
-                    <label htmlFor="displayName" className="text-label">
-                      {intl.formatMessage(messages.displayName)}
+                    <label htmlFor="username" className="text-label">
+                      {intl.formatMessage(messages.username)}
+                      <span className="label-required">*</span>
                    </label>
                    <div className="form-input-area">
                      <div className="form-input-field">
-                        <Field
-                          id="displayName"
-                          name="displayName"
-                          type="text"
-                        />
+                        <Field id="username" name="username" type="text" />
                      </div>
+                      {errors.username &&
+                        touched.username &&
+                        typeof errors.username === 'string' && (
+                          <div className="error">{errors.username}</div>
+                        )}
                    </div>
                  </div>
                  <div className="form-row">
                    <label htmlFor="email" className="text-label">
                      {intl.formatMessage(messages.email)}
-                      <span className="label-required">*</span>
                    </label>
                    <div className="form-input-area">
                      <div className="form-input-field">
@@ -645,9 +648,16 @@ const UserList = () => {
                      className="text-base font-bold leading-5 transition duration-300 hover:underline"
                      data-testid="user-list-username-link"
                    >
-                      {user.displayName}
+                      {user.username ||
+                        user.jellyfinUsername ||
+                        user.plexUsername ||
+                        user.email}
                    </Link>
-                    {user.displayName.toLowerCase() !== user.email && (
+                    {(
+                      user.username ||
+                      user.jellyfinUsername ||
+                      user.plexUsername
+                    )?.toLowerCase() !== user.email && (
                      <div className="text-sm leading-5 text-gray-300">
                        {user.email}
                      </div>
--- a/src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx
+++ b/src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx
@@ -93,9 +93,14 @@ const UserGeneralSettings = () => {
  );

  const UserGeneralSettingsSchema = Yup.object().shape({
-    email: Yup.string()
-      .email(intl.formatMessage(messages.validationemailformat))
-      .required(intl.formatMessage(messages.validationemailrequired)),
+    email:
+      user?.id === 1
+        ? Yup.string()
+            .email(intl.formatMessage(messages.validationemailformat))
+            .required(intl.formatMessage(messages.validationemailrequired))
+        : Yup.string().email(
+            intl.formatMessage(messages.validationemailformat)
+          ),
    discordId: Yup.string()
      .nullable()
      .matches(/^\d{17,19}$/, intl.formatMessage(messages.validationDiscordId)),
@@ -134,7 +139,7 @@ const UserGeneralSettings = () => {
      <Formik
        initialValues={{
          displayName: data?.username ?? '',
-          email: data?.email ?? '',
+          email: data?.email?.includes('@') ? data.email : '',
          discordId: data?.discordId ?? '',
          locale: data?.locale,
          region: data?.region,
@@ -157,7 +162,8 @@ const UserGeneralSettings = () => {
              },
              body: JSON.stringify({
                username: values.displayName,
-                email: values.email,
+                email:
+                  values.email || user?.jellyfinUsername || user?.plexUsername,
                discordId: values.discordId,
                locale: values.locale,
                region: values.region,
@@ -264,7 +270,9 @@ const UserGeneralSettings = () => {
                      name="displayName"
                      type="text"
                      placeholder={
-                        user?.plexUsername ? user.plexUsername : user?.email
+                        user?.username ||
+                        user?.jellyfinUsername ||
+                        user?.plexUsername
                      }
                    />
                  </div>
@@ -289,6 +297,7 @@ const UserGeneralSettings = () => {
                      name="email"
                      type="text"
                      placeholder="example@domain.com"
+                      disabled={user?.plexUsername}
                      className={
                        user?.warnings.find((w) => w === 'userEmailRequired')
                          ? 'border-2 border-red-400 focus:border-blue-600'
--- a/src/hooks/useUser.ts
+++ b/src/hooks/useUser.ts
@@ -12,6 +12,7 @@ export interface User {
  id: number;
  warnings: string[];
  plexUsername?: string;
+  jellyfinUsername?: string;
  username?: string;
  displayName: string;
  email: string;
--- a/src/i18n/locale/en.json
+++ b/src/i18n/locale/en.json
@@ -1111,7 +1111,6 @@
  "components.UserList.creating": "Creating…",
  "components.UserList.deleteconfirm": "Are you sure you want to delete this user? All of their request data will be permanently removed.",
  "components.UserList.deleteuser": "Delete User",
-  "components.UserList.displayName": "Display Name",
  "components.UserList.edituser": "Edit User Permissions",
  "components.UserList.email": "Email Address",
  "components.UserList.importedfromJellyfin": "<strong>{userCount}</strong> {mediaServerName} {userCount, plural, one {user} other {users}} imported successfully!",
@@ -1145,9 +1144,11 @@
  "components.UserList.userdeleteerror": "Something went wrong while deleting the user.",
  "components.UserList.userfail": "Something went wrong while saving user permissions.",
  "components.UserList.userlist": "User List",
+  "components.UserList.username": "Username",
  "components.UserList.users": "Users",
  "components.UserList.userssaved": "User permissions saved successfully!",
-  "components.UserList.validationEmail": "You must provide a valid email address",
+  "components.UserList.validationEmail": "Email required",
+  "components.UserList.validationUsername": "You must provide an username",
  "components.UserList.validationpasswordminchars": "Password is too short; should be a minimum of 8 characters",
  "components.UserProfile.ProfileHeader.joindate": "Joined {joindate}",
  "components.UserProfile.ProfileHeader.profile": "View Profile",