diff --git a/app/soapbox/actions/auth.ts b/app/soapbox/actions/auth.ts index e219741164..d3252e7fb0 100644 --- a/app/soapbox/actions/auth.ts +++ b/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. diff --git a/app/soapbox/features/public_layout/components/header.tsx b/app/soapbox/features/public_layout/components/header.tsx index 1813c7d8ab..ed52d3ddf8 100644 --- a/app/soapbox/features/public_layout/components/header.tsx +++ b/app/soapbox/features/public_layout/components/header.tsx @@ -128,10 +128,13 @@ const Header = () => { 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' /> { type='password' placeholder={intl.formatMessage(messages.password)} className='max-w-[200px]' + autoComplete='off' + autoCorrect='off' + autoCapitalize='off' />