fix(invitation): fix name and email splitting regex, and styling

- to support trimming the leading/trailing whitespaces in the input
- set Add Row button to outline variant
- move sx references to Tailwind

client/app/bundles/course/user-invitations/components/forms/IndividualInvitations.tsx

@@ -6,7 +6,7 @@ import {
 } from 'react-hook-form';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { LoadingButton } from '@mui/lab';
-import { Button, Divider, Grid } from '@mui/material';
+import { Button, Divider } from '@mui/material';
 import { ManageCourseUsersPermissions } from 'types/course/courseUsers';
 import {
   IndividualInvite,
@@ -145,23 +145,22 @@ const IndividualInvitations: FC<Props> = (props) => {
         ),
       )}
 
-      <Divider sx={{ margin: '12px 0px' }} />
-      <Grid alignItems="center" container>
+      <Divider className="my-5" />
+      <div className="flex gap-3">
         <LoadingButton
           key="invite-users-individual-form-submit-button"
           className="btn-submit"
           form="invite-users-individual-form"
           loading={isLoading}
-          sx={{ marginRight: '4px' }}
           type="submit"
           variant="contained"
         >
           {intl.formatMessage(translations.invite)}
         </LoadingButton>
-        <Button color="primary" onClick={appendNewRow}>
+        <Button color="primary" onClick={appendNewRow} variant="outlined">
           {intl.formatMessage(translations.appendNewRow)}
         </Button>
-      </Grid>
+      </div>
     </>
   );
 };

client/app/bundles/course/user-invitations/operations.ts

@@ -131,8 +131,11 @@ export function toggleRegistrationCode(shouldEnable: boolean): Operation {
       });
 }
 
+// These characters can only allowed in surrounding quotes
+// ()<>[]:;@\,.
+// https://datatracker.ietf.org/doc/html/rfc5322#section-3.2.3
 const splitNameAndEmailRegex =
-  /^(?:"\s*([^"]+?)\s*"|\s*([^"<]+?))?\s*<\s*([^>\s]+?)\s*>$|^\s*([^"<\s]+@[^\s,;<>]+)\s*$/;
+  /^\s*(?:(?:(?:"(?=.*")(.*)"|([^"()<>[\]:;@\\,.]*?))\s*(?=<)<\s*(?=.+>)(\S+)\s*>)|(.+?))\s*$/;
 const formattedEmailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
 export const splitEntries = (input: string): string[] => {

client/app/bundles/course/user-invitations/pages/InviteUsers/index.tsx

@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from 'react';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
-import { Grid, Typography } from '@mui/material';
+import { Typography } from '@mui/material';
 import { InvitationResult } from 'types/course/userInvitations';
 
 import Page from 'lib/components/core/layouts/Page';
@@ -72,21 +72,18 @@ const InviteUsers: FC<Props> = (props) => {
           />
 
           <Page.PaddedSection>
-            <Grid
-              alignItems="flex-end"
-              container
-              flexDirection="row"
-              justifyContent="space-between"
-              sx={{ margin: '12px 0px' }}
+            <div
+              // replace the attributes using tailwindcss
+              className="flex justify-between items-end mb-5"
             >
               <Typography variant="h5">
                 {intl.formatMessage(translations.inviteUsersHeader)}
               </Typography>
-              <Grid item style={{ display: 'flex', gap: 12 }}>
+              <div className="flex gap-3">
                 <UploadFileButton openResultDialog={openResultDialog} />
                 <RegistrationCodeButton />
-              </Grid>
-            </Grid>
+              </div>
+            </div>
             <IndividualInviteForm openResultDialog={openResultDialog} />
           </Page.PaddedSection>