[frontend] chore: lowercase input

frontend/src/App.css

@@ -1,5 +1,5 @@
 body {
-  font-family: Arial, sans-serif;
+  font-family: Arial, Helvetica, sans-serif;
 }
 
 body {
@@ -9,6 +9,7 @@ body {
   margin: 0px;
   background: linear-gradient(100deg, #83a4d4, #b6fbff);
   background-attachment: fixed;
+
 }
 
 @media (min-width: 600px) {
@@ -59,7 +60,7 @@ body {
   border: 2px solid white;
   border-radius: 20px;
   width: 260px;
-  height: 260px;
+  height: 350px;
   padding: 10px;
 }
 
@@ -170,6 +171,11 @@ input {
   font-size: 16px;
 }
 
+.registration-form-buttons {
+  display: flex;
+  justify-content: center;
+}
+
 textarea {
   height: 100px;
 }
@@ -209,7 +215,7 @@ textarea {
  color: white;
  text-decoration: none;
  margin: 10px;
-
+ max-width: 100px;
 }
 
 .note-form button {
@@ -294,7 +300,7 @@ textarea {
 .registration-form {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+gap: 20px;
 }
 
 .registration-form button {

frontend/src/components/Login.tsx

@@ -44,11 +44,12 @@ const Login: React.FC<LoginProps> = ({ onLogin }) => {
       <div className="login-page-form">
         <form onSubmit={handleSubmit}>
           <h3>Existing users</h3>
+          {errorText !== "" && <span>{errorText}</span>}
           <input
             type="text"
             placeholder="Username"
             value={username}
-            onChange={(e) => setUsername(e.target.value)}
+            onChange={(e) => setUsername(e.target.value.toLowerCase())}
             data-testid="username"
             required
           />
@@ -60,9 +61,7 @@ const Login: React.FC<LoginProps> = ({ onLogin }) => {
             data-testid="password"
             required
           />
-          <button type="submit">Login</button>
-          {isDataLoading && <Spinner />}
-          {errorText !== "" && <span>{errorText}</span>}
+          {isDataLoading ? <Spinner /> : <button type="submit">Login</button>}
         </form>
       </div>
     </div>

frontend/src/components/RegistrationForm.tsx

@@ -21,6 +21,10 @@ const RegistrationForm: React.FC<RegistrationFormProps> = ({ onRegister }) => {
     setForm({ ...form, [e.target.name]: e.target.value });
   };
 
+  const handleChangeUsername = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setForm({ ...form, username: e.target.value.toLowerCase() });
+  };
+
   const handleSubmit = async (e: React.FormEvent) => {
     setForm({ ...form, errorText: "" });
     e.preventDefault();
@@ -45,9 +49,15 @@ const RegistrationForm: React.FC<RegistrationFormProps> = ({ onRegister }) => {
       if (errors instanceof AxiosError) {
         const axiosError = errors as AxiosError;
         if (axiosError.response?.status === 400) {
-          setForm({ ...form, errorText: "Error: Invalid username or password" });
+          setForm({
+            ...form,
+            errorText: "Error: Invalid username or password",
+          });
         } else {
-          setForm({ ...form, errorText: "Error: An error occurred. Please retry" });
+          setForm({
+            ...form,
+            errorText: "Error: An error occurred. Please retry",
+          });
         }
       }
     }
@@ -70,7 +80,7 @@ const RegistrationForm: React.FC<RegistrationFormProps> = ({ onRegister }) => {
             type="text"
             name="username"
             value={form.username}
-            onChange={handleChange}
+            onChange={handleChangeUsername}
             placeholder="Username"
             required
           />
@@ -98,10 +108,13 @@ const RegistrationForm: React.FC<RegistrationFormProps> = ({ onRegister }) => {
             placeholder="Confirm Password"
             required
           />
-          <button type="submit">Register</button>
-          <a className="nav-link" href="/">
-            Close
-          </a>
+                      <button type="submit">Register</button>
+
+          <div className='registration-form-buttons'>
+            <a className="nav-link" href="/">
+              Close
+            </a>
+          </div>
         </form>
       )}
     </div>