Move frontend components forward to new implementation

This commit is contained in:
Eero Holmala 2025-08-11 13:14:25 +03:00
parent 3e618cb4c9
commit 03a3f4a6f2
17 changed files with 128 additions and 85 deletions

View File

@ -1,2 +1,10 @@
# Wretched Machines
## Pages
### Tools
There should be a tools page for downloading programs. It should contain info on them i.e. when was this uploaded/last updated and there needs so be some sort of verifiable metadata.

View File

@ -1,31 +0,0 @@

Microsoft Visual Studio Solution File, Format Version 12.00
# Visual Studio Version 17
VisualStudioVersion = 17.5.002.0
MinimumVisualStudioVersion = 10.0.40219.1
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "DataAccess", "DataAccess\DataAccess.csproj", "{5CDDA6D2-BB0B-42A3-B73D-35BAD118D857}"
EndProject
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "WretchedMachines", "WretchedMachines\WretchedMachines.csproj", "{98C5D04A-56C5-4E44-B05F-CD2F77EB97C1}"
EndProject
Global
GlobalSection(SolutionConfigurationPlatforms) = preSolution
Debug|Any CPU = Debug|Any CPU
Release|Any CPU = Release|Any CPU
EndGlobalSection
GlobalSection(ProjectConfigurationPlatforms) = postSolution
{5CDDA6D2-BB0B-42A3-B73D-35BAD118D857}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
{5CDDA6D2-BB0B-42A3-B73D-35BAD118D857}.Debug|Any CPU.Build.0 = Debug|Any CPU
{5CDDA6D2-BB0B-42A3-B73D-35BAD118D857}.Release|Any CPU.ActiveCfg = Release|Any CPU
{5CDDA6D2-BB0B-42A3-B73D-35BAD118D857}.Release|Any CPU.Build.0 = Release|Any CPU
{98C5D04A-56C5-4E44-B05F-CD2F77EB97C1}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
{98C5D04A-56C5-4E44-B05F-CD2F77EB97C1}.Debug|Any CPU.Build.0 = Debug|Any CPU
{98C5D04A-56C5-4E44-B05F-CD2F77EB97C1}.Release|Any CPU.ActiveCfg = Release|Any CPU
{98C5D04A-56C5-4E44-B05F-CD2F77EB97C1}.Release|Any CPU.Build.0 = Release|Any CPU
EndGlobalSection
GlobalSection(SolutionProperties) = preSolution
HideSolutionNode = FALSE
EndGlobalSection
GlobalSection(ExtensibilityGlobals) = postSolution
SolutionGuid = {F5986BE1-F9CB-46E5-A886-A8625FC0D28F}
EndGlobalSection
EndGlobal

16
html/about.html Normal file
View File

@ -0,0 +1,16 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Wretched Machines | About</title>
<link rel="stylesheet" href="./style.css" asp-append-version="true" />
<link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
<link rel="manifest" href="./site.webmanifest">
</head>
<body>
</body>
<script src="./script.js"></script>
</html>

View File

@ -14,7 +14,7 @@
<body>
<header>
<nav>
<a href="/"></a>
<a href="/about.html">About</a>
</nav>
</header>
<main>
@ -36,4 +36,5 @@
</footer>
</body>
<script src="./script.js"></script>
</html>

3
html/script.js Normal file
View File

@ -0,0 +1,3 @@
(function() {
console.log("init");
})()

View File

@ -1,7 +0,0 @@
{
"$schema": "./node_modules/@openapitools/openapi-generator-cli/config.schema.json",
"spaces": 2,
"generator-cli": {
"version": "7.12.0"
}
}

22
package-lock.json generated
View File

@ -1,22 +0,0 @@
{
"name": "WretchedMachines",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"dependencies": {
"tailwind-merge": "^3.3.0"
}
},
"node_modules/tailwind-merge": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.3.0.tgz",
"integrity": "sha512-fyW/pEfcQSiigd5SNn0nApUOxx0zB/dm6UDU/rEwc2c3sX2smWUNbapHv+QRqLGVp9GWX3THIa7MUGPo+YkDzQ==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/dcastil"
}
}
}
}

View File

@ -1,5 +0,0 @@
{
"dependencies": {
"tailwind-merge": "^3.3.0"
}
}

View File

@ -1,7 +1,6 @@
import * as React from "react"
import { cn } from "@/lib/utils"
import { cn } from "../../lib/utils"
const Card = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>

View File

@ -1,4 +1,4 @@
import { cn } from "@/lib/utils"
import { cn } from "../../lib/utils"
interface ContentBoxProps {
title: string,

View File

@ -1,5 +1,4 @@
import { cn } from "@/lib/utils";
import { cn } from "../../lib/utils"
type FooterProps = {
children?: React.ReactNode;
};

View File

@ -1,5 +1,4 @@
import { cn } from "@/lib/utils"
import { cn } from "../../lib/utils"
interface FormTextInputProps {
value: string,
name: string,

View File

@ -1,5 +1,5 @@
import React from "react"
import { cn } from "@/lib/utils"
import { cn } from "../../lib/utils"
interface FormProps {
children: React.ReactNode,

View File

@ -1,6 +1,5 @@
import Link from "next/link";
import { cn } from "@/lib/utils"
import { Link }from "react-router";
import { cn } from "../../lib/utils"
const Break = ()=> <hr className={cn("w-100")}></hr>
@ -49,22 +48,22 @@ const Navbar = ()=>{
</div>
<div className="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
<div className="text-md lg:flex-grow">
<Link href="/" className="block mt-4 lg:inline-block lg:mt-0 text-gray-200 hover:text-white mr-4">
<Link to="/" className="block mt-4 lg:inline-block lg:mt-0 text-gray-200 hover:text-white mr-4">
Home
</Link>
<Link href="/blog" className="block mt-4 lg:inline-block lg:mt-0 text-gray-200 hover:text-white mr-4">
<Link to="/blog" className="block mt-4 lg:inline-block lg:mt-0 text-gray-200 hover:text-white mr-4">
Blog
</Link>
<Link href="/tools" className="block mt-4 lg:inline-block lg:mt-0 text-gray-200 hover:text-white mr-4">
<Link to="/tools" className="block mt-4 lg:inline-block lg:mt-0 text-gray-200 hover:text-white mr-4">
Tools
</Link>
<Link href="/demos" className="block mt-4 lg:inline-block lg:mt-0 text-gray-200 hover:text-white mr-4">
<Link to="/demos" className="block mt-4 lg:inline-block lg:mt-0 text-gray-200 hover:text-white mr-4">
Demos
</Link>
</div>
<div>
<Link href="/login" className="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0">Login</Link>
<Link href="/register" className="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0">Register</Link>
<Link to="/login" className="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0">Login</Link>
<Link to="/register" className="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0">Register</Link>
</div>
</div>
</nav>

View File

@ -1,5 +1,4 @@
import { cn } from "@/lib/utils"
import { cn } from "../../lib/utils"
interface PageTitleProps {
title: string
}

View File

@ -4,5 +4,6 @@ export default [
index("routes/home.tsx"),
...prefix("auth",[
index("./routes/auth/login.tsx"),
route("register", "./routes/auth/register.tsx")
])
] satisfies RouteConfig;

View File

@ -0,0 +1,84 @@
import Form from "../../components/ui/form";
import { FormLabel, FormSubmitInput, FormTextInput } from "../../components/ui/form-input";
import PageTitle from "../../components/ui/page-title";
import { type ChangeEvent, useState } from "react";
const Register = () => {
const [inputData, setInputData] = useState({
"email": "",
"username": "",
"password": "",
"confirmPassword": ""
});
const [error, setError] = useState("");
const handleAction = async (formData: FormData) => {
const email= formData.get("email")!.toString();
const password = formData.get("password")!.toString();
const username = formData.get("username")!.toString();
const res = await fetch("http://127.0.0.1/", {
method: "POST",
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
"email": btoa(email),
"username": btoa(username),
"password": btoa(password),
})
});
if(!res.ok)
{
setError(`${res.statusText}`);
}
return await res.json();
}
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
e.preventDefault();
setInputData({
...inputData,
[e.target.name]: e.target.value
});
}
return (
<main className="flex min-h-screen flex-col items-center justify-stretch p-24">
<PageTitle title="Register"></PageTitle>
<div className="w-full max-w-xs">
<Form className="shadow-md rounded px-8 pt-6 pb-8 mb-4" formAction={handleAction}>
<div className="mb-4">
<FormLabel className="block text-eth text-sm font-bold mb-2" name={"email"}></FormLabel>
<FormTextInput className="shadow appearance-none border rounded w-full py-2 px-3 text-eth leading-tight focus:outline-none focus:shadow-outline" placeholder="E-Mail..." type="email" name="email" value={inputData.email} onChangeHandler={handleChange}></FormTextInput>
</div>
<div className="mb-4">
<FormLabel className="block text-eth text-sm font-bold mb-2" name={"username"}></FormLabel>
<FormTextInput className="shadow appearance-none border rounded w-full py-2 px-3 text-eth leading-tight focus:outline-none focus:shadow-outline" placeholder="Username..." type="text" name="username" value={inputData.username} onChangeHandler={handleChange}></FormTextInput>
</div>
<div className="mb-4">
<FormLabel className="block text-eth text-sm font-bold mb-2" name={"password"}></FormLabel>
<FormTextInput className="shadow appearance-none border rounded w-full py-2 px-3 text-eth leading-tight focus:outline-none focus:shadow-outline" placeholder="Password..." type="password" name="password" value={inputData.password} onChangeHandler={handleChange}></FormTextInput>
</div>
<div className="mb-6">
<FormLabel className="block text-eth text-sm font-bold mb-2" name={"confirmPassword"} title={"Confirm Password"}></FormLabel>
<FormTextInput className="shadow appearance-none border rounded w-full py-2 px-3 text-eth leading-tight focus:outline-none focus:shadow-outline" placeholder="Confirm Password..." type="password" name="confirmPassword" value={inputData.confirmPassword} onChangeHandler={handleChange}></FormTextInput>
<p className="text-red-500 text-xs italic">Please choose a password.</p>
</div>
<div className="flex items-center justify-between">
<FormSubmitInput className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" name="submit" onSubmitHandler={undefined} value={"Register"}></FormSubmitInput>
</div>
</Form>
</div>
</main>
);
}
export default Register;