neki/Enshi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Localization | registration

Browse Source
This commit is contained in:
Max 2024-11-20 21:30:01 +03:00
parent 184a47c481
commit 418947022b
10 changed files with 390 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
enshi/src/Pages/LoginRegisterPage/LoginElement/LoginElement.tsx
View File

@ -1,28 +1,43 @@
import * as Form from "@radix-ui/react-form";
import { CrossCircledIcon } from "@radix-ui/react-icons";
import { Button, Card, Heading, Text, TextField } from "@radix-ui/themes";
import { useEffect, useState } from "react";
import { useMutation } from "@tanstack/react-query";
import { t } from "i18next";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { axiosLocalhost } from "../../../api/axios/axios";
import UseCapsLock from "../../../hooks/useCapsLock";
import ShowPasswordButton from "../ShowPasswordButton/ShowPasswordButton";
type TLoginData = {
username: string;
password: string;
};
export default function LoginElement() {
const [showPassword, setShowPassword] = useState(false);
const [isCapsLockOn, setIsCapsLockOn] = useState(false);
const { isCapsLockOn } = UseCapsLock();
const [isError, setIsError] = useState(false);
useEffect(() => {
const f = (e: KeyboardEvent) => {
if (e.getModifierState("CapsLock")) {
setIsCapsLockOn(true);
} else {
setIsCapsLockOn(false);
}
};
const navigate = useNavigate()
document.addEventListener("keydown", f);
const logInMutation = useMutation({
mutationFn: async (data: TLoginData) => {
await axiosLocalhost.post(
"/login",
JSON.stringify(data)
);
},
return () => {
document.removeEventListener("keydown", f);
};
}, []);
onError: (error, _variables, _context) => {
console.log(error);
setIsError(true);
},
onSuccess: () => {
navigate("/")
},
});
return (
<Card
@ -32,16 +47,30 @@ export default function LoginElement() {
translate-x-[-50%] translate-y-[-50%]"
>
<Heading weight={"medium"} className="mb-4 text-center">
Log in form
{t("loginForm")}
</Heading>
<Form.Root>
<Form.Root
onSubmit={(e) => {
e.preventDefault();
let formData = new FormData(
document.querySelector("form") as HTMLFormElement
);
let loginData: TLoginData = {
password: (formData.get("password") as string) || "",
username: (formData.get("username") as string) || "",
};
logInMutation.mutate(loginData);
}}
>
<Form.Field className="mb-2.5 gap-0.5 grid" name="username">
<div className="flex items-baseline justify-between gap-2">
<Form.Label>
<Heading size={"3"}>Username</Heading>
<Text size={"4"}>{t("username")}</Text>
</Form.Label>
<Form.Message match="valueMissing">
<Text color="red">Please enter your username</Text>
<Text color="red">{t("errors.enterUsername")}</Text>
</Form.Message>
</div>
<Form.Control asChild>
@ -70,10 +99,10 @@ export default function LoginElement() {
<Form.Field className="mb-2.5 gap-0.5 grid" name="password">
<div className="flex items-baseline justify-between gap-2">
<Form.Label>
<Heading size={"3"}>Password</Heading>
<Text size={"4"}>{t("password")}</Text>
</Form.Label>
<Form.Message match="valueMissing">
<Text color="red">Please enter your password</Text>
<Text color="red">{t("errors.enterPassword")}</Text>
</Form.Message>
</div>
<Form.Control asChild>
@ -103,60 +132,17 @@ export default function LoginElement() {
</TextField.Root>
</Form.Control>
<Text size={"1"} hidden={!isCapsLockOn}>
Caps lock is on
{t("capsLogWarning")}
</Text>
</Form.Field>
{/* <Form.Field
className="mb-2.5 gap-0.5 grid"
name="conf-password"
>
<div className="flex items-baseline justify-between">
<Form.Label>
<Heading size={"3"}>Confirm password</Heading>
</Form.Label>
<Form.Message match="valueMissing">
<Text color="red">Please enter your password</Text>
</Form.Message>
<Form.Message
match={(value, formData) =>
value !== formData.get("password")
}
>
<Text color="red">Passwords must be the same</Text>
</Form.Message>
</div>
<Form.Control asChild>
<TextField.Root
type={showConfPassword ? "text" : "password"}
required
>
<Form.ValidityState>
{(validity) => (
<TextField.Slot
side="right"
color={
validity
? validity.valid
? undefined
: "red"
: undefined
}
>
<ShowPasswordButton
isShown={showConfPassword}
setIsShown={setShowConfPassword}
/>
</TextField.Slot>
)}
</Form.ValidityState>
</TextField.Root>
</Form.Control>
</Form.Field> */}
<Text color="red" hidden={!isError}>
{t("errors.invalidLoginData")}
</Text>
<Form.Submit className="flex justify-center w-full">
<Button type="submit" className="w-1/3">
<Text size={"3"}>Submit</Text>
<Form.Submit className="flex justify-center" asChild>
<Button type="submit" className="w-1/3 m-auto">
<Text size={"3"}>{t("submit")}</Text>
</Button>
</Form.Submit>
</Form.Root>

12
enshi/src/Pages/LoginRegisterPage/LoginRegisterPage.tsx
View File

@ -1,10 +1,16 @@
import { useState } from "react";
import LoginElement from "./LoginElement/LoginElement";
import RegisterElement from "./RegisterElement/RegisterElement";
export default function LoginRegisterPage() {
const [isRegister, setIsRegister] = useState(false)
export function LoginPage() {
return (
<LoginElement />
)
}
export function RegisterPage() {
return (
<RegisterElement />
)
}

241
enshi/src/Pages/LoginRegisterPage/RegisterElement/RegisterElement.tsx Normal file
View File

@ -0,0 +1,241 @@
import * as Form from "@radix-ui/react-form";
import { CrossCircledIcon } from "@radix-ui/react-icons";
import { Button, Card, Heading, Text, TextField } from "@radix-ui/themes";
import { useMutation } from "@tanstack/react-query";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { axiosLocalhost } from "../../../api/axios/axios";
import UseCapsLock from "../../../hooks/useCapsLock";
import ShowPasswordButton from "../ShowPasswordButton/ShowPasswordButton";
type TRegisterData = {
username: string;
password: string;
email: string;
};
export default function RegisterElement() {
const [showPassword, setShowPassword] = useState(false);
const [showConfPassword, setShowConfPassword] = useState(false);
const { isCapsLockOn } = UseCapsLock();
const { t } = useTranslation();
const [isError, setIsError] = useState(false);
const navigate = useNavigate();
const registerMutation = useMutation({
mutationFn: async (data: TRegisterData) => {
await axiosLocalhost.post("/users", JSON.stringify(data));
},
onError: (error, _variables, _context) => {
console.log(error);
setIsError(true);
},
onSuccess: () => {
navigate("/");
},
});
return (
<Card
size={"2"}
className="absolute w-[25rem] min-w-[20rem]
left-[50%] top-[50%]
translate-x-[-50%] translate-y-[-50%]"
>
<Heading weight={"medium"} className="mb-4 text-center">
{t("registerForm")}
</Heading>
<Form.Root
onSubmit={(e) => {
e.preventDefault();
let formData = new FormData(
document.querySelector("form") as HTMLFormElement
);
let registerData: TRegisterData = {
password: (formData.get("password") as string) || "",
username: (formData.get("username") as string) || "",
email: (formData.get("email") as string) || "",
};
registerMutation.mutate(registerData);
}}
>
<Form.Field className="mb-2.5 gap-0.5 grid" name="username">
<div className="flex items-baseline justify-between gap-2">
<Form.Label>
<Text size={"4"}>{t("username")}</Text>
</Form.Label>
<Form.Message match="valueMissing">
<Text color="red">{t("errors.enterUsername")}</Text>
</Form.Message>
</div>
<Form.Control asChild>
<TextField.Root type="text" required>
<Form.ValidityState>
{(validity) => (
<TextField.Slot
side="right"
color="red"
className={
validity
? validity.valid
? "hidden"
: "mr-0.5"
: "hidden"
}
>
<CrossCircledIcon />
</TextField.Slot>
)}
</Form.ValidityState>
</TextField.Root>
</Form.Control>
</Form.Field>
<Form.Field className="mb-2.5 gap-0.5 grid" name="email">
<div className="flex items-baseline justify-between gap-2">
<Form.Label>
<Text size={"4"}>{t("email")}</Text>
</Form.Label>
<Form.Message match="valueMissing">
<Text color="red">{t("errors.enterEmail")}</Text>
</Form.Message>
<Form.Message match="typeMismatch">
<Text color="red">{t("errors.invalidEmail")}</Text>
</Form.Message>
</div>
<Form.Control asChild>
<TextField.Root type="email" required>
<Form.ValidityState>
{(validity) => (
<TextField.Slot
side="right"
color="red"
className={
validity
? validity.valid
? "hidden"
: "mr-0.5"
: "hidden"
}
>
<CrossCircledIcon />
</TextField.Slot>
)}
</Form.ValidityState>
</TextField.Root>
</Form.Control>
</Form.Field>
<Form.Field className="mb-2.5 gap-0.5 grid" name="password">
<div className="flex items-baseline justify-between gap-2">
<Form.Label>
<Text size={"4"}>{t("password")}</Text>
</Form.Label>
<Form.Message match="valueMissing">
<Text color="red">{t("errors.enterPassword")}</Text>
</Form.Message>
</div>
<Form.Control asChild>
<TextField.Root
type={showPassword ? "text" : "password"}
required
>
<Form.ValidityState>
{(validity) => (
<TextField.Slot
side="right"
color={
validity
? validity.valid
? undefined
: "red"
: undefined
}
>
<ShowPasswordButton
isShown={showPassword}
setIsShown={setShowPassword}
/>
</TextField.Slot>
)}
</Form.ValidityState>
</TextField.Root>
</Form.Control>
<Text size={"1"} hidden={!isCapsLockOn}>
{t("capsLogWarning")}
</Text>
</Form.Field>
<Form.Field
className="mb-2.5 gap-0.5 grid"
name="conf-password"
>
<div className="flex items-baseline justify-between">
<Form.Label>
<Text size={"4"}>{t("confirmPassword")}</Text>
</Form.Label>
<Form.Message match="valueMissing">
<Text color="red">{t("errors.enterPassword")}</Text>
</Form.Message>
<Form.Message
match={(value, formData) =>
value !== formData.get("password")
}
>
<Text color="red">
{t("errors.passwordsMismatch")}
</Text>
</Form.Message>
</div>
<Form.Control asChild>
<TextField.Root
type={showConfPassword ? "text" : "password"}
required
>
<Form.ValidityState>
{(validity) => (
<TextField.Slot
side="right"
color={
validity
? validity.valid
? undefined
: "red"
: undefined
}
>
<ShowPasswordButton
isShown={showConfPassword}
setIsShown={setShowConfPassword}
/>
</TextField.Slot>
)}
</Form.ValidityState>
</TextField.Root>
</Form.Control>
<Text size={"1"} hidden={!isCapsLockOn}>
{t("capsLogWarning")}
</Text>
</Form.Field>
<Text color="red" hidden={!isError}>
{t("errors.invalidRegisterData")}
</Text>
<Form.Submit className="flex justify-center" asChild>
<Button type="submit" className="w-1/3 m-auto">
<Text size={"3"}>{t("submit")}</Text>
</Button>
</Form.Submit>
</Form.Root>
</Card>
);
}

2
enshi/src/api/axios/axios.ts
View File

@ -2,7 +2,7 @@ import axios from "axios";
export const axiosLocalhost = axios.create(
{
baseURL: `http://localhost:9876/`,
baseURL: `http://127.0.0.1:9876/`,
withCredentials: true,
headers: {

27
enshi/src/hooks/useCapsLock.tsx Normal file
View File

@ -0,0 +1,27 @@
import { useEffect, useState } from "react";
export default function UseCapsLock() {
const [isCapsLockOn, setIsCapsLockOn] = useState(false);
useEffect(() => {
const f = (e: KeyboardEvent) => {
if (e.getModifierState("CapsLock")) {
setIsCapsLockOn(true);
} else {
setIsCapsLockOn(false);
}
};
document.addEventListener("keydown", f);
return () => {
document.removeEventListener("keydown", f);
};
}, []);
return {
isCapsLockOn
}
}

22
enshi/src/locale/en.ts
View File

@ -1,6 +1,26 @@
const en = {
hello: "hello!",
search: "Search...",
}
username: "Username",
email: "Email",
password: "Password",
confirmPassword: "Confirm password",
submit: "Submit",
capsLogWarning: "CapsLock is on",
registerForm: "Register",
loginForm: "Log in",
errors: {
enterUsername: "Please enter your username",
enterEmail: "Please enter your email",
invalidEmail: "Please enter correct email",
enterPassword: "Please enter your password",
passwordsMismatch: "Passwords must be the same",
invalidLoginData: "Invalid username or password",
invalidRegisterData: "Invalid register data",
},
};
export default en;

23
enshi/src/locale/ru.ts
View File

@ -1,6 +1,27 @@
const ru = {
hello: "Привет!",
search: "Поиск...",
}
username: "Имя пользователя",
email: "Электронная почта",
password: "Пароль",
confirmPassword: "Подтвердите пароль",
submit: "Подтвердить",
capsLogWarning: "Включён CapsLock",
registerForm: "Регистрация",
loginForm: "Вход",
errors: {
enterUsername: "Пожалуйста, введите ваше имя пользователя",
enterEmail: "Пожалуйста, введите свой адрес электронной почты",
invalidEmail: "Пожалуйста, введите корректный адрес электронной почты",
enterPassword: "Пожалуйста, введите пароль",
passwordsMismatch: "Пароли должны быть одинаковыми",
invalidLoginData: "Неверное имя пользователя или пароль",
invalidRegisterData:
"Пользователь с таким адресом электронной почты или именем пользователя уже существует",
},
};
export default ru;

12
enshi/src/routes/routes.tsx
View File

@ -1,6 +1,6 @@
import { Text } from "@radix-ui/themes";
import { createRoutesFromElements, Route, useRouteError } from "react-router-dom";
import LoginRegisterPage from "../Pages/LoginRegisterPage/LoginRegisterPage";
import { LoginPage, RegisterPage } from "../Pages/LoginRegisterPage/LoginRegisterPage";
import MainPage from "../Pages/MainPage/MainPage";
@ -28,9 +28,13 @@ export const routes = createRoutesFromElements(
<Route
path="/login"
errorElement={<ErrorBoundary />}
element={<LoginRegisterPage />}
>
element={<LoginPage />}
/>
</Route>
<Route
path="/register"
errorElement={<ErrorBoundary />}
element={<RegisterPage />}
/>
</>
)

2
enshi_back/global/globalVars.go
View File

@ -1,7 +1,7 @@
package global
const PathForCookies = "/"
const DomainForCookies = "localhost"
const DomainForCookies = "127.0.0.1"
const SecureForCookies = false
const HttpOnlyForCookies = false

2
enshi_back/middleware/corsMiddleware.go
View File

@ -4,7 +4,7 @@ import "github.com/gin-gonic/gin"
func CORSMiddleware() gin.HandlerFunc {
return func(c *gin.Context) {
c.Writer.Header().Set("Access-Control-Allow-Origin", "http://localhost:5173")
c.Writer.Header().Set("Access-Control-Allow-Origin", "http://127.0.0.1:5173")
c.Writer.Header().Set("Access-Control-Allow-Credentials", "true")
c.Writer.Header().Set(
"Access-Control-Allow-Headers",