summaryrefslogtreecommitdiff
path: root/front/src
diff options
context:
space:
mode:
Diffstat (limited to 'front/src')
-rw-r--r--front/src/App.tsx10
-rw-r--r--front/src/Authentication/ForbiddenPage.tsx15
-rw-r--r--front/src/Authentication/LoginPage.tsx18
-rw-r--r--front/src/Authentication/RegisterPage.tsx17
-rw-r--r--front/src/Authentication/style.css32
-rw-r--r--front/src/Emelents/Elements.css1
-rw-r--r--front/src/ErrorHandler.tsx37
-rw-r--r--front/src/Fonts.css5
-rw-r--r--front/src/Locales/en_US.ts5
-rw-r--r--front/src/Locales/ru_RU.ts9
-rw-r--r--front/src/Pages/RangedWeapon.tsx15
11 files changed, 145 insertions, 19 deletions
diff --git a/front/src/App.tsx b/front/src/App.tsx
index 7b68f3e..da9cbfd 100644
--- a/front/src/App.tsx
+++ b/front/src/App.tsx
@@ -10,17 +10,19 @@ import { useEffect, useState } from 'react';
import { ReadCurrentLocale, SaveCurrentLocale } from './Locales/Locales';
import LegalNote from './Emelents/LegalNote';
import WeaponsIndex from './Pages/Weapons';
-import RangedWeaponPage from './Pages/RangedWeapon';
-import { AuthContext, Authentication, GetUserInfo } from './Authentication/ContextProvider';
+import { AuthContext, GetUserInfo } from './Authentication/ContextProvider';
import { useCookies } from 'react-cookie';
import LoginPage from './Authentication/LoginPage';
import LogoutPage from './Authentication/LogoutPage';
import { User } from './Authentication/Models';
import RegisterPage from './Authentication/RegisterPage';
+import { EditRangedWeaponPage, RangedWeaponPage } from './Pages/RangedWeapon';
+import ErrorHandler from './ErrorHandler';
const router = createBrowserRouter([
{
index: true,
+ errorElement: (<ErrorHandler />),
element: (<IndexElement />),
},
{
@@ -35,6 +37,10 @@ const router = createBrowserRouter([
path: "/weapons/:id",
element: (<RangedWeaponPage />),
},
+ {
+ path: "/weapons/:id/edit",
+ element: (<EditRangedWeaponPage />),
+ },
// auth
{
diff --git a/front/src/Authentication/ForbiddenPage.tsx b/front/src/Authentication/ForbiddenPage.tsx
new file mode 100644
index 0000000..477940d
--- /dev/null
+++ b/front/src/Authentication/ForbiddenPage.tsx
@@ -0,0 +1,15 @@
+import { useContext } from "react";
+import { LanguageContext } from "../Locales/Context";
+import { GetLocalizedString } from "../Locales/Locales";
+
+function ForbidenPage() {
+ const lang = useContext(LanguageContext);
+ return (
+ <div>
+ <h1> { GetLocalizedString("Forbidden", lang) } </h1>
+ <p> { GetLocalizedString("*forbidden*", lang) } </p>
+ </div>
+ );
+}
+
+export default ForbidenPage;
diff --git a/front/src/Authentication/LoginPage.tsx b/front/src/Authentication/LoginPage.tsx
index e673418..7a555fe 100644
--- a/front/src/Authentication/LoginPage.tsx
+++ b/front/src/Authentication/LoginPage.tsx
@@ -28,20 +28,22 @@ function LoginPage() {
return (
<div>
- <h2> { GetLocalizedString("Username", lang) } </h2>
- <input onChange={ev => setUsername(ev.target.value)} />
- <h2> { GetLocalizedString("Password", lang) } </h2>
- <input onChange={ev => setPassw(ev.target.value)} />
- <button onClick={() => {
+ <p> { GetLocalizedString("*acc-prompt*", lang) } <a href="/register"> { GetLocalizedString("Click here", lang) }. </a> </p>
+ <div className="prompt">
+ <h2> { GetLocalizedString("Username", lang) } </h2>
+ <input onChange={ev => setUsername(ev.target.value)} />
+ </div>
+ <div className="prompt">
+ <h2> { GetLocalizedString("Password", lang) } </h2>
+ <input onChange={ev => setPassw(ev.target.value)} />
+ </div>
+ <button className="authButton" onClick={() => {
Login(username, passw, (data) => {
SetAuthState(data);
navigate("/");
window.location.reload();
});
}}> { GetLocalizedString("Log in", lang) } </button>
-
-
- <p> Don't have an account? <a href="/register"> Click here. </a> </p>
</div>
);
}
diff --git a/front/src/Authentication/RegisterPage.tsx b/front/src/Authentication/RegisterPage.tsx
index 5c818f6..10864cd 100644
--- a/front/src/Authentication/RegisterPage.tsx
+++ b/front/src/Authentication/RegisterPage.tsx
@@ -1,3 +1,4 @@
+import './style.css';
import axios, { AxiosError } from "axios";
import { useContext, useState } from "react";
import { useNavigate } from "react-router";
@@ -30,10 +31,15 @@ function RegisterPage() {
return (
<div>
- <h2> { GetLocalizedString("Username", lang) } </h2>
- <input onChange={ev => setUsername(ev.target.value)} />
- <h2> { GetLocalizedString("Password", lang) } </h2>
- <input onChange={ev => setPassw(ev.target.value)} />
+ <div className="prompt">
+ <h2> { GetLocalizedString("Username", lang) } </h2>
+ <input onChange={ev => setUsername(ev.target.value)} />
+ </div>
+ <p> { GetLocalizedString("*security-warning*", lang) } </p>
+ <div className="prompt">
+ <h2> { GetLocalizedString("Password", lang) } </h2>
+ <input onChange={ev => setPassw(ev.target.value)} />
+ </div>
<button onClick={() => {
Register(username, passw, (data) => {
SetAuthState(data);
@@ -66,7 +72,8 @@ async function Register(username: string, passw: string, onSuccess: (data: Authe
return
}
}
- return "An unexpected error occured"
+ onError("An unexpected error occured");
+ return;
});
}
diff --git a/front/src/Authentication/style.css b/front/src/Authentication/style.css
new file mode 100644
index 0000000..75f9df2
--- /dev/null
+++ b/front/src/Authentication/style.css
@@ -0,0 +1,32 @@
+.prompt {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 10px;
+}
+
+.prompt > h2 {
+ margin-bottom: 0px;
+ margin-top: 0px;
+}
+
+.prompt > input {
+ width: 200px;
+ border: 0px;
+ border-bottom: 1px solid var(--colorscheme-gray);
+}
+
+.prompt > input:focus {
+ outline: none;
+}
+
+.authButton {
+ margin-top: 15px;
+ font-family: "LXGW Marker Gothic", sans-serif;
+ color: var(--colorscheme-gray);
+ padding: 3px;
+ min-width: 100px;
+ border: 2px solid var(--colorscheme-black);
+ background-color: var(--colorscheme-white);
+ cursor: pointer;
+}
diff --git a/front/src/Emelents/Elements.css b/front/src/Emelents/Elements.css
index 7c8c15f..966a138 100644
--- a/front/src/Emelents/Elements.css
+++ b/front/src/Emelents/Elements.css
@@ -39,7 +39,6 @@
.TopbarContents > h2 {
--width: 280px;
min-width: var(--width);
- max-width: var(--width);
min-height: 30px;
padding: 5px;
margin: 0px;
diff --git a/front/src/ErrorHandler.tsx b/front/src/ErrorHandler.tsx
new file mode 100644
index 0000000..177a9d0
--- /dev/null
+++ b/front/src/ErrorHandler.tsx
@@ -0,0 +1,37 @@
+import { useContext } from "react";
+import { useRouteError } from "react-router";
+import { AllowedLanguages, LanguageContext } from "./Locales/Context";
+import { GetLocalizedString } from "./Locales/Locales";
+
+type RouteError = {
+ status: number,
+ statusText: string,
+ internal: boolean,
+ data: string
+};
+
+function ErrorHandler() {
+ const language = useContext(LanguageContext);
+ let error = useRouteError() as RouteError;
+
+ if (error.status == 403)
+ return forbid(language);
+
+ return (
+ <div>
+ <h1> {error.status} {error.statusText} </h1>
+ </div>
+ );
+}
+
+
+function forbid(language: AllowedLanguages) {
+ return (
+ <div>
+ <h1> { GetLocalizedString("Forbidden", language) } </h1>
+ <p> { GetLocalizedString("*forbidden*", language) } </p>
+ </div>
+ );
+}
+
+export default ErrorHandler;
diff --git a/front/src/Fonts.css b/front/src/Fonts.css
index c7f3bb6..8f287f6 100644
--- a/front/src/Fonts.css
+++ b/front/src/Fonts.css
@@ -1,4 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Rubik+Dirt&family=Wix+Madefor+Text:ital,wght@0,400..800;1,400..800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=LXGW+Marker+Gothic&display=swap');
h1, h2 {
font-family: "Rubik Dirt", system-ui;
@@ -9,3 +10,7 @@ h1, h2 {
a {
font-family: "Rubik Dirt", system-ui;
}
+
+p {
+ font-family: "LXGW Marker Gothic", sans-serif;
+}
diff --git a/front/src/Locales/en_US.ts b/front/src/Locales/en_US.ts
index b67eb65..f14a87d 100644
--- a/front/src/Locales/en_US.ts
+++ b/front/src/Locales/en_US.ts
@@ -7,6 +7,11 @@ lang.LocalizedStrings = new Map<string, string>([
["contents", "contents"],
["home", "Home"],
["weapons", "Weapons"],
+
+ // Prompts
+ ["*acc-prompt*", "Don't have an account?"],
+ ["*security-warning*", `Listen, choom. We don't have that military grade ice behind the data fortress. What that means for you is any gonk or AI can probably get in and steal your data. Please don't use a password that you use on any important websites over here! Make a throwaway one!`],
+ ["*forbidden*", "How did you even get here? You don't have access for this"],
]);
export default lang;
diff --git a/front/src/Locales/ru_RU.ts b/front/src/Locales/ru_RU.ts
index 008d852..ba494b2 100644
--- a/front/src/Locales/ru_RU.ts
+++ b/front/src/Locales/ru_RU.ts
@@ -5,13 +5,15 @@ lang.LocalizedStrings = new Map<string, string>([
["index", "Главная"],
["classes", "Классы"],
["home", "Главная"],
+ ["forbidden", "Запрещено"],
+
["contents", "Содержание"],
["classes list", "Список классов"],
["weapons", "Оружие"],
- ["login", "Вход"],
["weapons index", "Список вооружения"],
["ranged weapons", "Дальнобойное оружие"],
+ ["login", "Вход"],
["username", "Имя пользователя"],
["password", "Пароль"],
["log in", "Войти"],
@@ -54,6 +56,11 @@ lang.LocalizedStrings = new Map<string, string>([
// Origins
["corebook", "Книга игрока"],
+ // Prompts
+ ["*acc-prompt*", "Ещё нет аккаунта?"],
+ ["*security-warning*", "Послушай, чум. У нас нет этого хвалёного военного льда за нашей информационной крепостью. Это значит, что любой придурок с улицы или ИИ, скорее всего, сможет проникнуть внутрь и украсть твои данные. Пожалуйста, не используй здесь пароль, который ты используешь на важных сайтах! Придумай одноразовый!"],
+ ["click here", "Нажми сюда"],
+ ["*forbidden*", "Как ты сюда попал? У тебя нет доступа к этой информации"],
]);
export default lang;
diff --git a/front/src/Pages/RangedWeapon.tsx b/front/src/Pages/RangedWeapon.tsx
index 9c578f8..fa61644 100644
--- a/front/src/Pages/RangedWeapon.tsx
+++ b/front/src/Pages/RangedWeapon.tsx
@@ -7,10 +7,11 @@ import { Description } from "../Models/Description";
import { useParams } from "react-router";
import { GetLocalizedString } from "../Locales/Locales";
import "./Weapons.css"
+import { AuthContext } from "../Authentication/ContextProvider";
const RangedWeaponsURL = `${BackendURL}/weapons/ranged`;
-function RangedWeaponPage() {
+export function RangedWeaponPage() {
const { id } = useParams();
const lang = useContext(LanguageContext);
const [weapon, setWeapon] = useState<RangedWeapon | null>(null);
@@ -113,4 +114,14 @@ async function getWeaponDescription(id: string | undefined, lanuage: AllowedLang
}
}
-export default RangedWeaponPage;
+export function EditRangedWeaponPage() {
+ var user = useContext(AuthContext);
+
+ if (user == null || user.Role != "editor") {
+ }
+
+ return (
+ <div>
+ </div>
+ );
+}
Rendered by CGit