Berlevog · shoom1337 · Sep 26, 2021 · Sep 26, 2021 · Sep 26, 2021 · Sep 26, 2021
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,7 +29,9 @@
   "dependencies": {
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
+    "axios": "^0.21.4",
     "eventemitter3": "^4.0.7",
+    "formik": "^2.2.9",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.3.0",
@@ -50,6 +52,7 @@
     "@types/jest": "^26.0.24",
     "@types/react": "^17.0.19",
     "@types/react-dom": "^17.0.9",
+    "@types/react-input-mask": "^3.0.1",
     "@types/react-router-dom": "^5.1.8",
     "@typescript-eslint/eslint-plugin": "^4.31.1",
     "@typescript-eslint/parser": "^4.31.1",
@@ -74,6 +77,7 @@
     "postcss": "^8.3.6",
     "postcss-loader": "^6.1.1",
     "prettier": "2.3.2",
+    "react-input-mask": "^2.0.4",
     "style-loader": "^3.2.1",
     "stylelint": "^13.13.1",
     "stylelint-config-prettier": "^8.0.2",
@@ -84,7 +88,8 @@
     "typescript-eslint": "0.0.1-alpha.0",
     "webpack": "^5.52.1",
     "webpack-cli": "^4.8.0",
-    "webpack-dev-server": "^4.2.0"
+    "webpack-dev-server": "^4.2.0",
+    "yup": "^0.32.9"
   },
   "browserslist": {
     "production": [

diff --git a/public/assets/mario-background.jpeg b/public/assets/mario-background.jpeg
diff --git a/public/index.html b/public/index.html
@@ -5,14 +5,8 @@
     <meta content="width=device-width, initial-scale=1" name="viewport" />
     <meta content="#000000" name="theme-color" />
     <meta content="Mario game" name="description" />
-    <link
-      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/icon?family=Material+Icons"
-      rel="stylesheet"
-    />
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
     <title>Mario Pro Max</title>
   </head>
   <body>

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,28 +1,91 @@
 /*
  * Copyright (c) 2021. Written by Leonid Artemev (me@artemev.it)
  */
-import { createBrowserHistory } from "history";
 import React from "react";
+import { createBrowserHistory } from "history";
 import { Route, Router, Switch } from "react-router-dom";
-import { Login, Registration, Leaderboard, Forum } from "./pages";
+import { Login, Registration, Leaderboard, Forum, Profile } from "./pages";
+import { createTheme, ThemeProvider } from "@material-ui/core";
+
 import { Game } from "./pages/Game";
 
+declare module "@material-ui/core/styles" {
+  interface Theme {
+    loginPage: {
+      background: string;
+      backdropFilter: string;
+    };
+  }
+  // allow configuration using `createTheme`
+  interface ThemeOptions {
+    loginPage?: {
+      background: string;
+      backdropFilter: string;
+    };
+  }
+}
+
 const history = createBrowserHistory();
 const StubComponent = () => <div>Under construction! 👻</div>;
 
+const darkTheme = createTheme({
+  typography: {
+    fontFamily: [
+      "-apple-system",
+      "BlinkMacSystemFont",
+      '"Segoe UI"',
+      "Roboto",
+      '"Helvetica Neue"',
+      "Arial",
+      "sans-serif",
+      '"Apple Color Emoji"',
+      '"Segoe UI Emoji"',
+      '"Segoe UI Symbol"',
+    ].join(","),
+  },
+  loginPage: {
+    background: "#00000033",
+    backdropFilter: "blur(10px)",
+  },
+});
+
+const lightTheme = createTheme({
+  typography: {
+    fontFamily: [
+      "-apple-system",
+      "BlinkMacSystemFont",
+      '"Segoe UI"',
+      "Roboto",
+      '"Helvetica Neue"',
+      "Arial",
+      "sans-serif",
+      '"Apple Color Emoji"',
+      '"Segoe UI Emoji"',
+      '"Segoe UI Symbol"',
+    ].join(","),
+  },
+  loginPage: {
+    background: "#FFFFFF88",
+    backdropFilter: "blur(3px)",
+  },
+});
+
 function App() {
   return (
     <div className="App">
-      <Router history={history}>
-        <Switch>
-          <Route exact path="/" component={StubComponent} />
-          <Route exact path="/login" component={Login} />
-          <Route exact path="/registration" component={Registration} />
-          <Route exact path="/app" component={Game} />
-          <Route exact path="/leaderboard" component={Leaderboard} />
-          <Route exact path="/forum" component={Forum} />
-        </Switch>
-      </Router>
+      <ThemeProvider theme={lightTheme}>
+        <Router history={history}>
+          <Switch>
+            <Route exact path="/" component={StubComponent} />
+            <Route exact path="/login" component={Login} />
+            <Route exact path="/registration" component={Registration} />
+            <Route exact path="/app" component={Game} />
+            <Route exact path="/leaderboard" component={Leaderboard} />
+            <Route exact path="/forum" component={Forum} />
+            <Route exact path="/profile" component={Profile} />
+          </Switch>
+        </Router>
+      </ThemeProvider>
     </div>
   );
 }

diff --git a/src/constants/url.ts b/src/constants/url.ts
@@ -0,0 +1,5 @@
+export const API_BASE_URL = "https://ya-praktikum.tech/api/v2";
+export const SIGNIN_URL = `${API_BASE_URL}/auth/signin`;
+export const SIGNUP_URL = `${API_BASE_URL}/auth/signup`;
+export const SIGNOUT_URL = `${API_BASE_URL}/auth/logout`;
+export const USER_URL = `${API_BASE_URL}/auth/user`;
diff --git a/src/constants/validationErrors.ts b/src/constants/validationErrors.ts
@@ -0,0 +1,7 @@
+export const ERROR_MESSAGES = {
+  required: "Required field",
+  min: (num: number): string => `Minimum length ${num} symbols`,
+  max: (num: number): string => `Maximum length ${num} symbols`,
+  email: "Invalid email format",
+  password_mismatch: "Passwords do not match",
+};