fix layout for dashboard, add dashboard, save rememberme state in localstorage
This commit is contained in:
@@ -1,7 +1,3 @@
|
|||||||
#root {
|
#root {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
box-shadow: 1px 1px 20px 1px rgba(68, 68, 68, 0.5);
|
|
||||||
border-radius: 40px;
|
|
||||||
border: 1px solid #444;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
@@ -2,12 +2,14 @@ import './App.css'
|
|||||||
import { Route, Routes } from "react-router-dom";
|
import { Route, Routes } from "react-router-dom";
|
||||||
import { LoginPage } from "./pages/LoginPage";
|
import { LoginPage } from "./pages/LoginPage";
|
||||||
import { ForgotPasswordPage } from "./pages/ForgotPasswordPage";
|
import { ForgotPasswordPage } from "./pages/ForgotPasswordPage";
|
||||||
|
import { DashboardPage } from './pages/Dashboard';
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route path="/" element={<LoginPage />} />
|
<Route path="/" element={<LoginPage />} />
|
||||||
<Route path="/forgot-password" element={<ForgotPasswordPage />} />
|
<Route path="/forgot-password" element={<ForgotPasswordPage />} />
|
||||||
|
<Route path="/dashboard" element={<DashboardPage />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,8 @@
|
|||||||
import { useState, type SubmitEvent, type ReactElement } from "react";
|
import { useState, type SubmitEvent, type ReactElement } from "react";
|
||||||
import { Link } from "react-router-dom";
|
import { Link, useNavigate } from "react-router-dom";
|
||||||
import styles from "./AuthComponent.module.css";
|
import styles from "./AuthComponent.module.css";
|
||||||
import { login } from "../../../api/LoginAPI/Auth";
|
import { login } from "../../../api/LoginAPI/Auth";
|
||||||
|
import { persistRememberMe } from "../../../utils/rememberMe";
|
||||||
|
|
||||||
export function Auth():ReactElement {
|
export function Auth():ReactElement {
|
||||||
const [email, setEmail] = useState("");
|
const [email, setEmail] = useState("");
|
||||||
@@ -9,6 +10,7 @@ export function Auth():ReactElement {
|
|||||||
const [rememberMe, setRememberMe] = useState(false);
|
const [rememberMe, setRememberMe] = useState(false);
|
||||||
const [showPassword, setShowPassword] = useState(false);
|
const [showPassword, setShowPassword] = useState(false);
|
||||||
const [errors, setErrors] = useState<{ email?: string; password?: string }>({});
|
const [errors, setErrors] = useState<{ email?: string; password?: string }>({});
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
const validateEmail = (value: string) => {
|
const validateEmail = (value: string) => {
|
||||||
if (!value) return "Введите email";
|
if (!value) return "Введите email";
|
||||||
@@ -26,12 +28,13 @@ export function Auth():ReactElement {
|
|||||||
|
|
||||||
try {
|
try {
|
||||||
await login(email, password);
|
await login(email, password);
|
||||||
window.location.href = "http://localhost:8000/docs";
|
persistRememberMe(rememberMe);
|
||||||
|
navigate("/dashboard");
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
setErrors({ password: "Неверный email или пароль" });
|
setErrors({ password: "Неверный email или пароль" });
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
|||||||
@@ -5,6 +5,9 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
box-shadow: 1px 1px 20px 1px rgba(68, 68, 68, 0.5);
|
||||||
|
border-radius: 40px;
|
||||||
|
border: 1px solid #444;
|
||||||
}
|
}
|
||||||
.left_side {
|
.left_side {
|
||||||
width: 60%;
|
width: 60%;
|
||||||
|
|||||||
@@ -0,0 +1,9 @@
|
|||||||
|
|
||||||
|
|
||||||
|
export function DashboardPage() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div><p>test</p></div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
|
||||||
|
|
||||||
|
export function persistRememberMe(value:boolean):void {
|
||||||
|
if (value) {
|
||||||
|
localStorage.setItem("rememberMe", "True");
|
||||||
|
} else{
|
||||||
|
localStorage.removeItem("rememberMe");
|
||||||
|
}
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user