Merge branch 'normalize-username' into 'develop'

Login: strip whitespace around username, strip leading @

See merge request soapbox-pub/soapbox-fe!1655

app/soapbox/actions/auth.ts

@@ -207,9 +207,19 @@ export const loadCredentials = (token: string, accountUrl: string) =>
     })
     .catch(() => dispatch(verifyCredentials(token, accountUrl)));
 
+/** Trim the username and strip the leading @. */
+const normalizeUsername = (username: string): string => {
+  const trimmed = username.trim();
+  if (trimmed[0] === '@') {
+    return trimmed.slice(1);
+  } else {
+    return trimmed;
+  }
+};
+
 export const logIn = (username: string, password: string) =>
   (dispatch: AppDispatch) => dispatch(getAuthApp()).then(() => {
-    return dispatch(createUserToken(username, password));
+    return dispatch(createUserToken(normalizeUsername(username), password));
   }).catch((error: AxiosError) => {
     if ((error.response?.data as any).error === 'mfa_required') {
       // If MFA is required, throw the error and handle it in the component.

app/soapbox/features/public_layout/components/header.tsx

@@ -128,10 +128,13 @@ const Header = () => {
               <Input
                 required
                 value={username}
-                onChange={(event) => setUsername(event.target.value)}
+                onChange={(event) => setUsername(event.target.value.trim())}
                 type='text'
                 placeholder={intl.formatMessage(messages.username)}
                 className='max-w-[200px]'
+                autoComplete='off'
+                autoCorrect='off'
+                autoCapitalize='off'
               />
 
               <Input
@@ -141,6 +144,9 @@ const Header = () => {
                 type='password'
                 placeholder={intl.formatMessage(messages.password)}
                 className='max-w-[200px]'
+                autoComplete='off'
+                autoCorrect='off'
+                autoCapitalize='off'
               />
 
               <Link to='/reset-password'>