From 164b76fad806b078aad8c537ba9bdcfbfc757dca Mon Sep 17 00:00:00 2001
From: physcik <mynameisgennadiy@vk.com>
Date: Tue, 5 May 2026 11:39:54 +0500
Subject: css changes + error handling

---
 front/src/App.tsx                          | 10 ++++++--
 front/src/Authentication/ForbiddenPage.tsx | 15 ++++++++++++
 front/src/Authentication/LoginPage.tsx     | 18 ++++++++-------
 front/src/Authentication/RegisterPage.tsx  | 17 ++++++++++----
 front/src/Authentication/style.css         | 32 ++++++++++++++++++++++++++
 front/src/Emelents/Elements.css            |  1 -
 front/src/ErrorHandler.tsx                 | 37 ++++++++++++++++++++++++++++++
 front/src/Fonts.css                        |  5 ++++
 front/src/Locales/en_US.ts                 |  5 ++++
 front/src/Locales/ru_RU.ts                 |  9 +++++++-
 front/src/Pages/RangedWeapon.tsx           | 15 ++++++++++--
 11 files changed, 145 insertions(+), 19 deletions(-)
 create mode 100644 front/src/Authentication/ForbiddenPage.tsx
 create mode 100644 front/src/Authentication/style.css
 create mode 100644 front/src/ErrorHandler.tsx

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>
+    );
+}
-- 
cgit v1.3