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

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.');

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>