update username

templates/auth/login/index.html

@@ -12,7 +12,7 @@
     id="form"
   >
     <h1 class="form__title">
-      Signin to mCaptcha
+      Sign into mCaptcha
     </h1>
     <label class="sitekey-form__label" for="login">
       Username or email address

templates/auth/register/ts/index.ts

@@ -83,6 +83,10 @@ const registerUser = async (e: Event) => {
 export const index = () => {
   const form = <HTMLFontElement>document.getElementById('form');
   form.addEventListener('submit', registerUser, true);
-  usernameElement.addEventListener('input', userExists, false);
+  usernameElement.addEventListener(
+    'input',
+    async () => await userExists(),
+    false,
+  );
   registerShowPassword();
 };

templates/auth/register/ts/userExists.test.ts

@@ -14,7 +14,6 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
-
 import fetchMock from 'jest-fetch-mock';
 
 import userExists from './userExists';
@@ -39,6 +38,10 @@ it('finds exchange', async () => {
   usernameField.value = 'test';
   expect(await userExists()).toBe(true);
 
+  usernameField.value = 'test';
+  fetchMock.mockResponseOnce(JSON.stringify({exists: true}));
+  expect(await userExists(usernameField)).toBe(true);
+
   fetchMock.mockResponseOnce(JSON.stringify({exists: false}));
   expect(await userExists()).toBe(false);
 });

templates/auth/register/ts/userExists.ts

@@ -20,8 +20,14 @@ import ROUTES from '../../../api/v1/routes';
 import genJsonPayload from '../../../utils/genJsonPayload';
 import createError from '../../../components/error/index';
 
-const userExists = async () => {
-  const username = <HTMLInputElement>document.getElementById('username');
+const userExists = async (element?: HTMLInputElement) => {
+  console.log(element);
+  let username;
+  if (element === undefined) {
+    username = <HTMLInputElement>document.getElementById('username');
+  } else {
+    username = element;
+  }
   const val = username.value;
   const payload = {
     val,

templates/panel/settings/index.html

@@ -17,6 +17,22 @@
 	<h1 class="form__title">
 		<.= PAGE .>
 	</h1>
+      <form class="settings__form" id="settings__username-form"
+        action="<.= crate::V1_API_ROUTES.account.update_username .>" 
+        method="post">
+        <label class="settings-form__label" for="username">
+          Username
+          <input
+            class="settings-form__input"
+            type="text"
+            name="username"
+            id="username"
+			value="<.= username .>"
+          />
+        </label>
+        <button class="settings__submit-btn" type="submit">Update</button>
+      </form>
+
       <form class="settings__form" id="settings__email-form"
         action="<.= crate::V1_API_ROUTES.account.update_email .>" 
         method="post">

templates/panel/settings/index.ts

@@ -20,6 +20,7 @@ import CopyIcon from '../../components/clipboard/';
 import createError from '../../components/error/';
 
 import emailExists from '../../auth/register/ts/emailExists';
+import userExists from '../../auth/register/ts/userExists';
 
 import LazyElement from '../../utils/lazyElement';
 import isBlankString from '../../utils/isBlankString';
@@ -34,18 +35,22 @@ const SECRET_COPY_DONE_ICON = 'settings__secret-copy-done';
 // form IDs
 const DELETE_FORM = 'settings__delete-form';
 const EMAIL_FORM = 'settings__email-form';
+const USERNAME_FORM = 'settings__username-form';
 const SECRET_FORM = 'settings__secret-form';
 
 // form elements
 const deleteForm = new LazyElement(DELETE_FORM);
 const emailForm = new LazyElement(EMAIL_FORM);
+const usernameForm = new LazyElement(USERNAME_FORM);
 const secretForm = new LazyElement(SECRET_FORM);
 
 // field IDs
 const EMAIL = 'email';
+const USERNAME = 'username';
 
 // field elements
 const emailField = new LazyElement(EMAIL);
+const usernameField = new LazyElement(USERNAME);
 
 // form event handlers
 const updateEmail = async (e: Event) => {
@@ -71,6 +76,28 @@ const updateEmail = async (e: Event) => {
   }
 };
 
+const updateUsername = async (e: Event) => {
+  e.preventDefault();
+  const usernameElement = <HTMLInputElement>usernameField.get();
+  const username = usernameElement.value;
+  isBlankString(username, 'username', e);
+  if (await userExists(usernameElement)) {
+    return;
+  } else {
+    const url = getFormUrl(<HTMLFormElement>usernameForm.get());
+    const payload = {
+      username,
+    };
+    const res = await fetch(url, genJsonPayload(payload));
+    if (res.ok) {
+      window.location.reload();
+    } else {
+      const err = await res.json();
+      createError(err.error);
+    }
+  }
+};
+
 const updateSecret = (e: Event) => {
   e.preventDefault();
   const msg =
@@ -93,6 +120,11 @@ const deleteAccount = (e: Event) => {
 const registerForms = () => {
   deleteForm.get().addEventListener('submit', e => deleteAccount(e), true);
   emailForm.get().addEventListener('submit', e => updateEmail(e), true);
+  usernameForm.get().addEventListener('submit', e => updateUsername(e), true);
+  console.log(usernameField.get());
+  usernameField
+    .get()
+    .addEventListener('input', async () => await userExists(), false);
   secretForm.get().addEventListener('submit', e => updateSecret(e), true);
 };
 
@@ -106,7 +138,6 @@ const initCopySecret = () => {
 };
 
 /// TODO email update button should only change if email value has been changed
-
 const index = () => {
   registerShowPassword();
   initCopySecret();