feat(frontend): handle username in lowercase

When handling usernames for login and registering with local or permissions, this makes sure that the username is always in lowercase.

Signed-off-by: Philip Molares <philip.molares@udo.edu>
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

frontend/src/hooks/common/use-lowercase-on-input-change.spec.tsx

@@ -0,0 +1,28 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { useLowercaseOnInputChange } from './use-lowercase-on-input-change'
+import { fireEvent, render, screen } from '@testing-library/react'
+import React from 'react'
+
+describe('useOnInputChange', () => {
+  it('executes the setter', async () => {
+    const callback = jest.fn()
+    const testValue = 'TEST VALUE'
+
+    const Test: React.FC = () => {
+      const onChange = useLowercaseOnInputChange(callback)
+      return <input data-testid={'input'} type={'text'} onChange={onChange} />
+    }
+
+    render(<Test></Test>)
+
+    const element: HTMLInputElement = await screen.findByTestId('input')
+
+    fireEvent.change(element, { target: { value: testValue } })
+
+    expect(callback).toBeCalledWith('test value')
+  })
+})

frontend/src/hooks/common/use-lowercase-on-input-change.ts

@@ -0,0 +1,20 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { useOnInputChange } from './use-on-input-change'
+import type { ChangeEvent } from 'react'
+import { useCallback } from 'react'
+
+/**
+ * Takes an input change event and sends the lower case event value to a state setter.
+ *
+ * @param setter The setter method for the state.
+ * @return Hook that can be used as callback for onChange.
+ */
+export const useLowercaseOnInputChange = (
+  setter: (value: string) => void
+): ((event: ChangeEvent<HTMLInputElement>) => void) => {
+  return useOnInputChange(useCallback((value) => setter(value.toLowerCase()), [setter]))
+}

frontend/src/hooks/common/use-on-input-change.spec.tsx

@@ -0,0 +1,27 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { useOnInputChange } from './use-on-input-change'
+import { fireEvent, render, screen } from '@testing-library/react'
+import React from 'react'
+
+describe('useOnInputChange', () => {
+  it('executes the setter', async () => {
+    const callback = jest.fn()
+    const testValue = 'testValue'
+
+    const Test: React.FC = () => {
+      const onChange = useOnInputChange(callback)
+      return <input data-testid={'input'} type={'text'} onChange={onChange} />
+    }
+
+    render(<Test></Test>)
+
+    const element: HTMLInputElement = await screen.findByTestId('input')
+    fireEvent.change(element, { target: { value: testValue } })
+
+    expect(callback).toBeCalledWith(testValue)
+  })
+})

frontend/src/hooks/common/use-on-input-change.ts

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -13,10 +13,5 @@ import { useCallback } from 'react'
  * @return Hook that can be used as callback for onChange.
  */
 export const useOnInputChange = (setter: (value: string) => void): ((event: ChangeEvent<HTMLInputElement>) => void) => {
-  return useCallback(
-    (event) => {
-      setter(event.target.value)
-    },
-    [setter]
-  )
+  return useCallback((event) => setter(event.target.value), [setter])
 }