added form validation, server.js

This commit is contained in:
slawk0
2024-09-26 17:59:51 +02:00
parent 6e103e9aee
commit 24ab80244f
13 changed files with 330 additions and 96 deletions

View File

@@ -1,6 +0,0 @@
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
</profile>
</component>

View File

Before

Width:  |  Height:  |  Size: 6.5 KiB

After

Width:  |  Height:  |  Size: 6.5 KiB

BIN
client/assets/icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

100
client/package-lock.json generated
View File

@@ -9,6 +9,7 @@
"version": "0.0.0",
"dependencies": {
"@tailwindcss/forms": "^0.5.9",
"axios": "^1.7.7",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-hook-form": "^7.53.0",
@@ -1748,6 +1749,12 @@
"dev": true,
"license": "Python-2.0"
},
"node_modules/asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
"license": "MIT"
},
"node_modules/autoprefixer": {
"version": "10.4.20",
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
@@ -1786,6 +1793,17 @@
"postcss": "^8.1.0"
}
},
"node_modules/axios": {
"version": "1.7.7",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
"integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
"license": "MIT",
"dependencies": {
"follow-redirects": "^1.15.6",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
},
"node_modules/balanced-match": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -1968,6 +1986,18 @@
"dev": true,
"license": "MIT"
},
"node_modules/combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"license": "MIT",
"dependencies": {
"delayed-stream": "~1.0.0"
},
"engines": {
"node": ">= 0.8"
}
},
"node_modules/commander": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -2049,6 +2079,15 @@
"dev": true,
"license": "MIT"
},
"node_modules/delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
"license": "MIT",
"engines": {
"node": ">=0.4.0"
}
},
"node_modules/didyoumean": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -2529,6 +2568,26 @@
"dev": true,
"license": "ISC"
},
"node_modules/follow-redirects": {
"version": "1.15.9",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
"integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
"funding": [
{
"type": "individual",
"url": "https://github.com/sponsors/RubenVerborgh"
}
],
"license": "MIT",
"engines": {
"node": ">=4.0"
},
"peerDependenciesMeta": {
"debug": {
"optional": true
}
}
},
"node_modules/foreground-child": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
@@ -2545,6 +2604,20 @@
"url": "https://github.com/sponsors/isaacs"
}
},
"node_modules/form-data": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"license": "MIT",
"dependencies": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/fraction.js": {
"version": "4.3.7",
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -3005,6 +3078,27 @@
"node": ">=8.6"
}
},
"node_modules/mime-db": {
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
"license": "MIT",
"engines": {
"node": ">= 0.6"
}
},
"node_modules/mime-types": {
"version": "2.1.35",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"license": "MIT",
"dependencies": {
"mime-db": "1.52.0"
},
"engines": {
"node": ">= 0.6"
}
},
"node_modules/mini-svg-data-uri": {
"version": "1.4.4",
"resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
@@ -3456,6 +3550,12 @@
"url": "https://github.com/prettier/prettier?sponsor=1"
}
},
"node_modules/proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
"license": "MIT"
},
"node_modules/punycode": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",

View File

@@ -11,6 +11,7 @@
},
"dependencies": {
"@tailwindcss/forms": "^0.5.9",
"axios": "^1.7.7",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-hook-form": "^7.53.0",

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1009 B

View File

@@ -3,7 +3,7 @@ import { createRoot } from "react-dom/client";
import App from "./App.tsx";
import Login from "./pages/Login.tsx";
import Signup from "./pages/Signup.tsx";
import Lost from "./pages/404.tsx";
import "./index.css";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
@@ -20,6 +20,10 @@ const router = createBrowserRouter([
path: "/signup",
element: <Signup />,
},
{
path: "*",
element: <Lost />,
},
]);
createRoot(document.getElementById("root")!).render(

9
client/src/pages/404.tsx Normal file
View File

@@ -0,0 +1,9 @@
import gif from "../../assets/404.gif";
function Lost() {
return (
<div className="flex items-center justify-center h-screen ">
<img src={gif} alt="Lost" draggable="false" />
</div>
);
}
export default Lost;

View File

@@ -0,0 +1,9 @@
function Chat() {
return (
<>
<h1>Chat</h1>
</>
);
}
export default Chat;

View File

@@ -1,23 +1,38 @@
import { useform, SubmitHandler } from "react-hook-form";
import icon from '../assets/icon.png'
export default function Login() {
import { useForm, SubmitHandler } from "react-hook-form";
import axios from "axios";
import icon from "../../assets/icon.png";
import { Link, useNavigate } from "react-router-dom";
type Inputs = {
username: string;
password: string;
};
export default function Login() {
const { register, handleSubmit } = useForm<Inputs>();
const navigate = useNavigate();
const onSubmit: SubmitHandler<Inputs> = (data) => {
axios
.post("http://localhost:3000/api/login", { data })
.then(() => {
navigate("/lost");
})
.catch((err) => {
console.error(err);
});
};
return (
<>
<div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
<div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8 h-screen">
<div className="sm:mx-auto sm:w-full sm:max-w-sm">
<img
alt="chat"
src={icon}
className="mx-auto h-10 w-auto"
/>
<img alt="chat" src={icon} className="mx-auto h-10 w-auto" />
<h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
Sign in to your account
Log in to your account
</h2>
</div>
<div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
<form className="space-y-6">
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
<div>
<label
htmlFor="username"
@@ -25,8 +40,13 @@ export default function Login() {
>
Username
</label>
<div className="mt-2">
<div>
<input
{...register("username", {
maxLength: 20,
minLength: 4,
pattern: /^[A-Za-z0-9_.]+$/i,
})}
id="username"
name="username"
type="username"
@@ -46,8 +66,9 @@ export default function Login() {
Password
</label>
</div>
<div className="mt-2">
<div>
<input
{...register("password", { maxLength: 128, minLength: 8 })}
id="password"
name="password"
type="password"
@@ -67,6 +88,15 @@ export default function Login() {
</button>
</div>
</form>
<p className="mt-10 text-center text-sm text-gray-500">
Dont have account?{" "}
<Link
to="/signup"
className="font-semibold leading-6 text-indigo-600 hover:text-indigo-500"
>
Sign up
</Link>
</p>
</div>
</div>
</>

View File

@@ -1,9 +0,0 @@
function Lost() {
return (
<>
<img src="../assets/404.gif" alt="Lost" />
</>
);
}
export default Lost;

View File

@@ -1,72 +1,144 @@
import icon from '../assets/icon.png'
import icon from "../../assets/icon.png";
import { useForm, SubmitHandler } from "react-hook-form";
import { Link, useNavigate } from "react-router-dom";
import axios from "axios";
type Inputs = {
username: string;
password: string;
sPassword: string;
};
export default function Signup() {
const {
register,
handleSubmit,
formState: { errors },
} = useForm<Inputs>();
const navigate = useNavigate();
const onSubmit: SubmitHandler<Inputs> = (data) => {
axios
.post("http://localhost:3000/api/signup", { data })
.then(() => {
navigate("/chat");
})
.catch((err) => {
console.error(err);
});
};
return (
<>
<div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
<div className="sm:mx-auto sm:w-full sm:max-w-sm">
<img
alt="chat"
src={icon}
className="mx-auto h-10 w-auto"
/>
<h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
Sign up to your account
</h2>
</div>
<div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
<form className="space-y-6">
<div>
<label
htmlFor="username"
className="block text-sm font-medium leading-6 text-gray-900"
>
Username
</label>
<div className="mt-2">
<input
id="username"
name="username"
type="username"
required
autoComplete="username"
className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
/>
</div>
</div>
<div>
<div className="flex items-center justify-between">
<label
htmlFor="password"
className="block text-sm font-medium leading-6 text-gray-900"
>
Password
</label>
</div>
<div className="mt-2">
<input
id="password"
name="password"
type="password"
required
autoComplete="current-password"
className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
/>
</div>
</div>
<div>
<button
type="submit"
className="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
>
Sign in
</button>
</div>
</form>
</div>
<>
<div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8 h-screen">
<div className="sm:mx-auto sm:w-full sm:max-w-sm">
<img alt="chat" src={icon} className="mx-auto h-10 w-auto" />
<h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
Sign up to your account
</h2>
</div>
</>
<div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
<div>
<label
htmlFor="username"
className="block text-sm font-medium leading-6 text-gray-900"
>
Username
</label>
<div>
<input
{...register("username", {
maxLength: 20,
minLength: 4,
pattern: /^[A-Za-z0-9_]+$/i,
})}
id="username"
name="username"
type="username"
required
autoComplete="username"
className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
/>
{errors?.username?.type === "maxLength" && (
<p>First name cannot exceed 20 characters</p>
)}
{errors?.username?.type === "minLength" && (
<p>Username must be between 4 and 20 characters</p>
)}
{errors?.username?.type === "pattern" && (
<p>
Username can only contain letters, numbers and underscores
</p>
)}
</div>
</div>
<div>
<div className="flex items-center justify-between">
<label
htmlFor="password"
className="block text-sm font-medium leading-6 text-gray-900"
>
Password
</label>
</div>
<div>
<input
{...register("password", {
maxLength: 128,
minLength: 8,
})}
id="password"
name="password"
type="password"
required
className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
/>
</div>
</div>
<div>
<div className="flex items-center justify-between">
<label
htmlFor="password"
className="block text-sm font-medium leading-6 text-gray-900"
>
Repeat password
</label>
</div>
<div>
<input
{...register("sPassword")}
id="sPassword"
name="sPassword"
type="password"
required
className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
/>
</div>
</div>
<div>
<button
type="submit"
className="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
>
Sign in
</button>
</div>
</form>
<p className="mt-10 text-center text-sm text-gray-500">
Already have account?{" "}
<Link
to="/login"
className="font-semibold leading-6 text-indigo-600 hover:text-indigo-500"
>
Log in
</Link>
</p>
</div>
</div>
</>
);
}

24
server/server.js Normal file
View File

@@ -0,0 +1,24 @@
const express = require("express");
const cors = require("cors");
const app = express();
const port = 3000;
const corsOptions = {
origin: "http://localhost:5173",
optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204
};
// Apply CORS middleware
app.use(cors(corsOptions));
app.post("/api/login", (req, res) => {
res.status(200).send("Hello from the server!");
});
app.post("/api/signup", (req, res) => {
res.status(200).send("git");
});
app.listen(port, () => {
console.log(`Example app listening on port ${port}`);
});