From fb45d62d708c56db9d708d394b5855d56cdda6e8 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 18 Jul 2022 21:50:02 -0500
Subject: [PATCH 1/2] Login: strip whitespace around username, strip leading @

---
 app/soapbox/actions/auth.ts                          | 12 +++++++++++-
 .../features/auth_login/components/login_form.tsx    |  1 +
 .../features/public_layout/components/header.tsx     |  9 ++++++++-
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/actions/auth.ts b/app/soapbox/actions/auth.ts
index e21974116..d3252e7fb 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/auth_login/components/login_form.tsx b/app/soapbox/features/auth_login/components/login_form.tsx
index 64145453c..948a6bc31 100644
--- a/app/soapbox/features/auth_login/components/login_form.tsx
+++ b/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>
diff --git a/app/soapbox/features/public_layout/components/header.tsx b/app/soapbox/features/public_layout/components/header.tsx
index 1813c7d8a..6ba216ee6 100644
--- a/app/soapbox/features/public_layout/components/header.tsx
+++ b/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'>

From 0a74c64bb7db57c219bd487c442b3679292802f7 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 18 Jul 2022 21:52:27 -0500
Subject: [PATCH 2/2] Actually, remove pattern from login inputs (it can be an
 email too)

---
 app/soapbox/features/auth_login/components/login_form.tsx | 1 -
 app/soapbox/features/public_layout/components/header.tsx  | 1 -
 2 files changed, 2 deletions(-)

diff --git a/app/soapbox/features/auth_login/components/login_form.tsx b/app/soapbox/features/auth_login/components/login_form.tsx
index 948a6bc31..64145453c 100644
--- a/app/soapbox/features/auth_login/components/login_form.tsx
+++ b/app/soapbox/features/auth_login/components/login_form.tsx
@@ -40,7 +40,6 @@ const LoginForm: React.FC<ILoginForm> = ({ isLoading, handleSubmit }) => {
               autoComplete='off'
               autoCorrect='off'
               autoCapitalize='off'
-              pattern='^[@a-zA-Z\d_-]+$'
               required
             />
           </FormGroup>
diff --git a/app/soapbox/features/public_layout/components/header.tsx b/app/soapbox/features/public_layout/components/header.tsx
index 6ba216ee6..ed52d3ddf 100644
--- a/app/soapbox/features/public_layout/components/header.tsx
+++ b/app/soapbox/features/public_layout/components/header.tsx
@@ -135,7 +135,6 @@ const Header = () => {
                 autoComplete='off'
                 autoCorrect='off'
                 autoCapitalize='off'
-                pattern='^[@a-zA-Z\d_-]+$'
               />
 
               <Input