refactor: improve username change form

refactor: enforce username change for new users

src/components/users/account/ProfileEditForm.tsx

@@ -5,17 +5,11 @@ import * as Yup from 'yup'
 import { getUserProfile, updateUserProfile } from '../../../js/auth/CurrentUserClient'
 import TextField from '../../ui/TextField'
 import { IWritableUserMetadata } from '../../../js/types/User'
-import { doesUsernameExist } from '../../../js/userApi/user'
-import { checkUsername, checkWebsiteUrl } from '../../../js/utils'
+import { checkWebsiteUrl } from '../../../js/utils'
 import { revalidateUserHomePage } from '../../../js/stores/media'
 import { toast } from 'react-toastify'
 
 const UserProfileSchema = Yup.object().shape({
-  nick: Yup.string()
-    .min(2, 'Minimum 2 characters')
-    .max(30, 'Maximum 30 characters')
-    .required('Minimum 2 characters')
-    .test('special-rules', 'Must start and end with a letter or a number.', checkUsername),
   name: Yup.string()
     .max(50, 'Maximum 50 characters.'),
   bio: Yup.string()
@@ -45,8 +39,6 @@ const UserProfileSchema = Yup.object().shape({
  * attributes present on the user's profile.
  */
 export default function ProfileEditForm (): ReactElement {
-  const [loadingName, setLoadingUser] = useState(false)
-  const [isChanged, setChanged] = useState(false)
   const [profile, setProfile] = useState<IWritableUserMetadata>({
     name: '',
     nick: '',
@@ -80,32 +72,6 @@ export default function ProfileEditForm (): ReactElement {
     }
   }, [])
 
-  /**
-   * Usernames are globally unique in the openbeta environment, so we check
-   * ahead of time if the user has filled out a taken username.
-   */
-  const checkUsernameHandler = useCallback(async (value: string|undefined) => {
-    setLoadingUser(true)
-    if (value == null) {
-      setLoadingUser(false) // reset to default state
-      return undefined
-    }
-
-    if (profile.nick !== value) {
-      setChanged(true) // if username has changed
-    } else {
-      setChanged(false) // if not, prompt user to change username
-    }
-
-    // only check if nick has changed from the original
-    if (profile.nick !== value && await doesUsernameExist(value)) {
-      setLoadingUser(false)
-      return 'User name is already taken!'
-    }
-    setLoadingUser(false)
-    return undefined
-  }, [profile.nick])
-
   return (
     <div data-lpignore='true'>
       <h3 className='text-center mb-6'>
@@ -119,27 +85,9 @@ export default function ProfileEditForm (): ReactElement {
         enableReinitialize
       >{({ isValid, isSubmitting, dirty }) => (
         <Form>
-          <div className='flex relative justify-end'>
-            <TextField
-              name='nick'
-              label='Username'
-              validate={checkUsernameHandler}
-              isChanged={isChanged}
-              validateImmediately
-            />
-
-            {loadingName && (
-              <div className='absolute bg-ob-primary p-1 rounded-full text-white -right-2 top-2 animate-spin'>
-                <svg xmlns='http://www.w3.org/2000/svg' className='h-4 w-4' fill='none' viewBox='0 0 24 24' stroke='currentColor' strokeWidth={2}>
-                  <path strokeLinecap='round' strokeLinejoin='round' d='M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15' />
-                </svg>
-              </div>
-            )}
-          </div>
-
-          <TextField name='name' label='Display Name' isChanged />
-          <TextField name='bio' label='Bio' multiline rows={3} spellcheck isChanged />
-          <TextField name='website' label='Website (optional)' isChanged />
+          <TextField name='name' label='Display Name' />
+          <TextField name='bio' label='Bio' multiline rows={3} spellcheck />
+          <TextField name='website' label='Website (optional)' />
 
           <div className='flex justify-end pt-4'>
             <button