fix(plex): do not fail to import Plex users when Plex Home has managed users (#1699)

* fix(plex): do not fail to import Plex users when Plex Home has managed users

* fix: default display name to email when user has no username

also, do not set username or plexUsername when it is the same as the user's email address

* fix(ui): user display name placeholder should reflect fallback logic if username is not set

* fix(ui): hide email addresses of other users if logged-in user does not have Manage Users permission

* fix: always set Plex username even if same as user's email

* fix: remove unnecessary permission check

* fix: transform email addresses to lowercase

src/components/RequestModal/AdvancedRequester/index.tsx

@@ -522,9 +522,12 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
                           <span className="block ml-3">
                             {selectedUser.displayName}
                           </span>
-                          <span className="ml-1 text-gray-400 truncate">
-                            ({selectedUser.email})
-                          </span>
+                          {selectedUser.displayName.toLowerCase() !==
+                            selectedUser.email && (
+                            <span className="ml-1 text-gray-400 truncate">
+                              ({selectedUser.email})
+                            </span>
+                          )}
                         </span>
                         <span className="absolute inset-y-0 right-0 flex items-center pr-2 text-gray-500 pointer-events-none">
                           <ChevronDownIcon className="w-5 h-5" />
@@ -569,9 +572,12 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
                                   <span className="flex-shrink-0 block ml-3">
                                     {user.displayName}
                                   </span>
-                                  <span className="ml-1 text-gray-400 truncate">
-                                    ({user.email})
-                                  </span>
+                                  {user.displayName.toLowerCase() !==
+                                    user.email && (
+                                    <span className="ml-1 text-gray-400 truncate">
+                                      ({user.email})
+                                    </span>
+                                  )}
                                 </span>
                                 {selected && (
                                   <span

src/components/UserList/index.tsx

@@ -602,9 +602,11 @@ const UserList: React.FC = () => {
                         {user.displayName}
                       </a>
                     </Link>
-                    <div className="text-sm leading-5 text-gray-300">
-                      {user.email}
-                    </div>
+                    {user.displayName.toLowerCase() !== user.email && (
+                      <div className="text-sm leading-5 text-gray-300">
+                        {user.email}
+                      </div>
+                    )}
                   </div>
                 </div>
               </Table.TD>

src/components/UserProfile/ProfileHeader/index.tsx

@@ -65,7 +65,7 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
                 {user.displayName}
               </a>
             </Link>
-            {user.email && (
+            {user.email && user.displayName.toLowerCase() !== user.email && (
               <span className="text-sm text-gray-400 sm:text-lg sm:ml-2">
                 ({user.email})
               </span>

src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx

@@ -188,7 +188,9 @@ const UserGeneralSettings: React.FC = () => {
                       id="displayName"
                       name="displayName"
                       type="text"
-                      placeholder={user?.displayName}
+                      placeholder={
+                        user?.plexUsername ? user.plexUsername : user?.email
+                      }
                     />
                   </div>
                   {errors.displayName && touched.displayName && (