Login: strip whitespace around username, strip leading @

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/auth_login/components/login_form.tsx

@@ -40,6 +40,7 @@ const LoginForm: React.FC<ILoginForm> = ({ isLoading, handleSubmit }) => {
               autoComplete='off'
               autoCorrect='off'
               autoCapitalize='off'
+              pattern='^[@a-zA-Z\d_-]+$'
               required
             />
           </FormGroup>

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

@@ -128,10 +128,14 @@ 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'
+                pattern='^[@a-zA-Z\d_-]+$'
               />
 
               <Input
@@ -141,6 +145,9 @@ const Header = () => {
                 type='password'
                 placeholder={intl.formatMessage(messages.password)}
                 className='max-w-[200px]'
+                autoComplete='off'
+                autoCorrect='off'
+                autoCapitalize='off'
               />
 
               <Link to='/reset-password'>