Merge pull request #22 from frontend-park-mail-ru/NM-11

NM-17: fsd architecture (login/auth)

public/index.html

@@ -17,6 +17,10 @@
 		<script src="./widgets/player/ui/player.precompiled.js"></script>
 		<script src="./widgets/trackList/ui/trackList.precompiled.js"></script>
 		<script src="./widgets/artistList/ui/artistList.precompiled.js"></script>
+		<script src="./widgets/header/ui/Header.precompiled.js"></script>
+		<script src="./pages/sign-up/ui/SignUp.precompiled.js"></script>
+		<script src="./pages/sign-in/ui/SignIn.precompiled.js"></script>
+		<script src="./pages/error/ui/Error.precompiled.js"></script>
 
 		<script type="module" src="index.js"></script>
 	</body>

src/app/routes.js

@@ -1,22 +1,24 @@
-import { FeedPage } from '../pages/feed/index.js';
-// import { SignInPage, RegisterPage } from 'pages/sign-in';
+import { Header } from "../widgets/header/index.js";
+import { FeedPage } from "../pages/feed/index.js";
+import { SignUpPage } from "../pages/sign-up/index.js";
+import { SignInPage } from "../pages/sign-in/index.js";
 
-export const LAYOUT = [];
+export const LAYOUT = [Header];
 
 /**
  * Define pages and their views
  */
 export const PAGES = [
-	{
-		path: '/',
-		view: FeedPage,
-	},
-	// {
-	// 	path: '/signin',
-	// 	view: SignInPage,
-	// },
-	// {
-	// 	path: '/register',
-	// 	view: RegisterPage,
-	// },
+  {
+    path: "/",
+    view: FeedPage,
+  },
+  {
+    path: "/signin",
+    view: SignInPage,
+  },
+  {
+    path: "/signup",
+    view: SignUpPage,
+  },
 ];

src/entities/user/api/api.js

@@ -0,0 +1,32 @@
+import { API_ENDPOINTS } from "../../../shared/lib/index.js";
+import { POST } from "../../../shared/api/index.js";
+
+/**
+ * Sends sign in request to the server using user data
+ *
+ * @param {Object} user - user data (username and password)
+ * @returns {Promise<Object>} response from the server
+ */
+export const signInRequest = async (user) => {
+  return await POST(API_ENDPOINTS.SIGN_IN, { body: user });
+};
+
+/**
+ * Sends sign up request to server using user data
+ *
+ * @param {Object} user - user data to register (email, username, password)
+ * @returns {Promise<Object>} response from the server
+ */
+export const signUpRequest = async (user) => {
+  return await POST(API_ENDPOINTS.SIGN_UP, { body: user });
+};
+
+/**
+ * Sends sign out request to server using user data
+ *
+ * @returns {Promise<Object>} response from the server
+ */
+export const signOutRequest = async () => {
+  return await POST(API_ENDPOINTS.SIGN_OUT);
+};
+

src/entities/user/index.js

@@ -0,0 +1 @@
+export { signInRequest, signUpRequest, signOutRequest } from './api/api.js';

src/entities/user/model/store.js

@@ -0,0 +1,123 @@
+import { STATUS_CODES } from "../../../shared/lib/index.js";
+import { eventBus } from "../../../shared/lib/index.js";
+import { signInRequest, signUpRequest, signOutRequest } from "../api/api.js";
+
+class UserStore {
+    constructor() {
+        this.storage = {
+            user: this.getUser() || {},
+            error: null,
+        };
+    }
+
+    getUser() {
+        const user = localStorage.getItem('user');
+        return user ? JSON.parse(user) : null;
+    }
+
+    saveUser(user) {
+        localStorage.setItem('user', JSON.stringify(user));
+    }
+
+    removeUser() {
+        localStorage.removeItem('user');
+    }
+
+    signIn = async (user) => {
+        try {
+            const response = await signInRequest(user);
+
+            switch (response.status) {
+                case STATUS_CODES.OK:
+                    const userData = {
+                        username: response.data.user.username,
+                        email: response.data.user.email,
+                        token: response.data.token,
+                        isAuthorized: true,
+                    };
+                    this.storage.user = userData;
+                    this.saveUser(userData);
+                    this.storage.error = null;
+                    eventBus.emit('signInSuccess', this.storage.user);
+                    break;
+
+                case STATUS_CODES.UNAUTHORIZED:
+                    this.storage.user = {
+                        isAuthorized: false,
+                    };
+                    this.storage.error = response.error;
+                    eventBus.emit('signInError', this.storage.error);
+                    break;
+
+                default:
+                    console.error('undefined status code:', response.status);
+            }
+        } catch (error) {
+            this.storage.error = error;
+            eventBus.emit('signInError', error);
+            console.error('unable to sign in: ', error);
+        }
+    };
+
+
+    signUp = async (user) => {
+        try {
+            const response = await signUpRequest(user);
+
+            switch (response.status) {
+                case STATUS_CODES.OK:
+                    const userData = {
+                        username: response.data.user.username,
+                        email: response.data.user.email,
+                        token: response.data.token,
+                        isAuthorized: true,
+                    };
+                    this.storage.user = userData;
+                    this.saveUser(userData);
+                    this.storage.error = null;
+                    eventBus.emit('signUpSuccess', this.storage.user);
+                    break;
+
+                case STATUS_CODES.UNAUTHORIZED:
+                    this.storage.user = {
+                        isAuthorized: false,
+                    };
+                    this.storage.error = response.error;
+                    eventBus.emit('signUpError', this.storage.error);
+                    break;
+
+                default:
+                    console.error('undefined status code:', response.status);
+            }
+        } catch (error) {
+            this.storage.error = error;
+            eventBus.emit('signUpError', error);
+            console.error('unable to sign up: ', error);
+        }
+    };
+
+
+    signOut = async () => {
+        try {
+            const response = await signOutRequest();
+
+            switch (response.status) {
+                case STATUS_CODES.OK:
+                    this.storage.user = { isAuthorized: false };
+                    this.removeUser();
+                    this.storage.error = null;
+                    eventBus.emit('signOutSuccess');
+                    break;
+
+                default:
+                    console.error('undefined status code:', response.status);
+            }
+        } catch (error) {
+            this.storage.error = error;
+            eventBus.emit('signOutError', error);
+            console.error('unable to connect to server: ', error);
+        }
+    };
+};
+
+export const userStore = new UserStore();

src/index.css

@@ -3,12 +3,9 @@
 @import './widgets/player/ui/player.css';
 @import './widgets/trackList/ui/trackList.css';
 @import './widgets/artistList/ui/artistList.css';
-
-body {
-  font-family: 'Sansation', sans-serif;
-  margin: 0;
-  padding: 0;
-}
+@import './widgets/header/ui/Header.css';
+@import './pages/sign-up/ui/SignUp.css';
+@import './pages/sign-in/ui/SignIn.css';
 
 h1,
 h2,
@@ -50,6 +47,9 @@ body {
       rgba(168, 72, 10, 1) 0%,
       rgba(44, 25, 17, 1) 100%);
   background-attachment: fixed;
+  font-family: 'Sansation', sans-serif;
+  margin: 0;
+  padding: 0;
 }
 
 .message-success {

src/pages/error/index.js

@@ -1 +1 @@
-export { ErrorPage } from './ui/ErrorPage.js';
+export { ErrorPage } from './ui/Error.js';

src/pages/error/ui/Error.hbs

@@ -0,0 +1,4 @@
+<div class="error-container">
+  <div class="error-title">Ошибка</div>
+  <div class="error-message">{{message}}</div>
+</div>

src/pages/error/ui/Error.js

@@ -0,0 +1,12 @@
+import { eventBus } from "../../../shared/lib/eventbus.js";
+
+export class ErrorPage {
+	constructor() {
+	  this.root = document.querySelector("#root");
+	}
+
+	render(message = "Что-то пошло не так") {
+	  const template = Handlebars.templates["error.hbs"];
+	  this.root.innerHTML = template({ message });
+	}
+  }

src/pages/sign-in/index.js

@@ -1,4 +1,2 @@
-export { RegisterPage } from "./ui/RegisterPage";
-export { register } from "./api/register";
-export { SignInPage } from "./ui/SignInPage";
-export { signIn } from "./api/sign-in";
+export { SignInPage } from "./ui/SignIn.js";
+