Update email verification UI and functionality

Updated the user interface for the email verification component, refining the visual organization and style through updates to `verify_mail.tsx` and `VerifyMail.css`. Also, improved the functionality by enforcing a condition that validation code input must be numeric and not more than six characters long. Additionally, added more files to .gitignore to ignore debug files.

.gitignore

@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+**/DEBUG
+**/DEBUG*

src/components/verify_email/VerifyMail.css

@@ -1,5 +1,30 @@
-form {
+.container {
-    max-width: 600px;
+    flex-grow: 1;
-    margin: auto;
+    display: flex;
-    padding: 20px;
+    flex-direction: column;
-}
+    justify-content: center;
+    align-items: center;
+}
+
+.content {
+    max-width: 800px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.verification-code-input {
+    text-align: center;
+    max-width: 80px;
+    width: fit-content;
+}
+
+.submit-button {
+    margin-top: 20px;
+}
+
+header {
+    font-size: xx-large;
+    font-weight: bolder;
+}

src/components/verify_email/verify_mail.tsx

@@ -1,5 +1,6 @@
 import {FC, useState} from "react";
 import {useLocation, useNavigate} from "react-router-dom";
+import './VerifyMail.css';
 
 interface VerificationData {
     eMail: string;
@@ -66,16 +67,24 @@ const VerifyMail: FC = () => {
 
     return (
         <div className="container">
-            <p>Hi, you just completed a form and need to verify your email ({email}).</p>
+            <header>Email validation</header>
-            <p>Please check your email for a verification code and enter it below:</p>
+            <div className="content">
-            <input
+                <p>Hi, you just completed a form and need to verify your email ({email}).</p>
-                type="text"
+                <p>Please check your email for a verification code and enter it below:</p>
-                value={code}
+                <input
-                onChange={(e) => setCode(e.target.value)}
+                    type="text"
-                className="verification-code-input"
+                    value={code}
-            />
+                    onChange={(e) => {
-            <button onClick={handleCodeSubmit} className="submit-button">Submit Code</button>
+                        if (/^\d{0,6}$/.test(e.target.value)) {
-
+                            setCode(e.target.value);
+                        }
+                    }}
+                    pattern="\d{6}"
+                    maxLength={6}
+                    className="verification-code-input"
+                />
+                <button onClick={handleCodeSubmit} className="submit-button">Submit Code</button>
+            </div>
         </div>
     )
 }