Updated register page

src/pages/login/login.tsx

@@ -94,7 +94,7 @@ const Login = () => {
             </button>
           </form>
           <h3 style={{textAlign: "center"}}>
-            <a href="http://localhost:5173/register" className="login-link">Create account</a>
+            <a href={`/register?to=${redirectPath}`} className="login-link">Create account</a>
           </h3>
         </div>
         <div className="login-links-block">

src/pages/register/register.css

@@ -0,0 +1,60 @@
+.register {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  max-width:100%;
+}
+
+.register-background {
+  opacity: 0.6;
+  position: absolute;
+  z-index: -1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+
+.register-block {
+  display: flex;
+  margin: auto;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+
+.register-button {
+  margin-top: "10px";
+  padding: 16px 32px;
+  font-size: 16px;
+  border-radius: 12px;
+  background-color: var(--buttons-main-color);
+  color: var(--text_dark);
+  border: none;
+  cursor: pointer;
+  text-align: center;
+  text-decoration: none;
+}
+
+.register-button:hover {
+  background-color: var(--buttons-hover-color);
+  color: var(--text_dark);
+}
+
+.register-button:active {
+  background-color: var(--buttons-press-color);
+  color: var(--text_dark);
+}
+
+
+.register-link {
+  color: var(--links-main-color);
+  text-decoration: none;
+}
+
+.register-link:hover {
+  color: var(--links-hover-color);
+  text-decoration: none;
+}

src/pages/register/register.tsx

@@ -1,7 +1,86 @@
+import { useState } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+
+import { toast } from "react-toastify"
+
+import useAuth from "../../auth/auth";
+
+import FormField from "../../components/FormField"
+import "./register.css"
+
+
 const Register = () => {
+  const { setToken } = useAuth();
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+
+  const navigate = useNavigate();
+  const location = useLocation();
+  const searchPath = new URLSearchParams(location.search);
+  const redirectPath = searchPath.get('to') || "/";
+
+  const [usernameEmpty, setUsernameEmpty] = useState(false);
+  const [passwordEmpty, setPasswordEmpty] = useState(false);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    setUsernameEmpty(!username);
+    setPasswordEmpty(!password);
+
+    if (!username || !password) {
+      return;
+    }
+
+    // TODO: request to API
+    if (username === "cat" && password === "cat") {
+      const token = "newusertodo.jwt.token";
+      setToken(token);
+      navigate(redirectPath, { replace: true });
+    } else {
+      toast.error("Wrong login or password");
+    }
+  };
+
   return (
-    <div>
+    <div className="register">
-      <h2>Register</h2>
+      <img className="register-background" src="mountains.jpg"></img>
+      <div className="register-block">
+        <form onSubmit={handleSubmit}
+          style={{
+            flexDirection: "column",
+            display: "flex",
+            gap: "10px",
+            alignItems: "center",
+          }}
+          noValidate
+        >
+          <FormField
+            type="text"
+            placeholder="Username"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            required
+            showError={usernameEmpty}
+            errorMessage="Please enter the username you want"
+          />
+          <FormField
+            type="password"
+            placeholder="Password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+            showError={passwordEmpty}
+            errorMessage="Please enter the password you want"
+          />
+          <button type="submit" className="register-button">
+            Create account
+          </button>
+          <h4>
+            <a href={`/login?to=${redirectPath}`} className="register-link">Back to login</a>
+          </h4>
+        </form>
+      </div>
     </div>
   )
 }