Profile/refactor

README.md

@@ -1,7 +1,7 @@
 # eCommerce Application
 
 Welcome to eCommerce application🛍️! This platform replicates real-world shopping experiences in a digital environment.
-The project is a part of the final task of the course [JavaScript/Front-end 2023Q4](https://rs.school/courses/javascript-mentoring-program) from the [RS School](https://rs.school/).
+The project is a part of the final task of the course [JavaScript/Front-end 2023Q4](https://rs.school/courses/javascript-ru) from the [RS School](https://rs.school/).
 
 ## Key pages in the application include:
 

src/app/app.ts

@@ -15,6 +15,7 @@ import {
   ProductPageView,
   BasketPageView,
   AboutUsView,
+  PasswordChangeView,
 } from '@views/index';
 
 type Page =
@@ -24,7 +25,8 @@ type Page =
   | LoginView
   | ProfileView
   | CatalogPageView
-  | AboutUsView;
+  | AboutUsView
+  | PasswordChangeView;
 
 class App {
   private headerView: HeaderView;
@@ -108,6 +110,12 @@ class App {
             this.mainView.page = new ProfileView();
           }
           break;
+        case '#change':
+          if (isPageAccessable('authorized')) {
+            this.hideFooterHeader = false;
+            this.mainView.page = new PasswordChangeView();
+          }
+          break;
         case '#catalog':
           this.hideFooterHeader = false;
           this.mainView.page = new CatalogPageView();

src/app/services/carts.ts

@@ -26,6 +26,7 @@ export const createAnonymousCart = (
       }
     })
     .catch((error: ClientResponse<{ message: string }>) => {
+      console.log(errorCallback(error.body.message));
       errorCallback(error.body.message);
     });
 };

src/app/services/login-without-merge.ts

@@ -0,0 +1,41 @@
+import { customerTokenResponse } from '@models/customer';
+import { UserAuthOptions } from '@commercetools/sdk-client-v2';
+import CookieManager from '@utils/cookie';
+import ApiRoot from './api-root';
+import currentCart from './current-cart';
+
+function login(
+  customer: { email: string; password: string },
+  sucessCallback: (message: string) => void,
+  errorCallback: (message: string) => void
+) {
+  const user: UserAuthOptions = {
+    password: customer.password,
+    username: customer.email,
+  };
+  const root = ApiRoot.getPasswordRoot(user);
+  root
+    .login()
+    .post({
+      body: {
+        email: customer.email,
+        password: customer.password,
+      },
+    })
+    .execute()
+    .then((response) => {
+      const customerDataForId = customerTokenResponse(response.body.customer);
+      if (customerDataForId && customerDataForId.id) {
+        currentCart.removeCart();
+        CookieManager.setUserId(customerDataForId.id);
+        const userId = CookieManager.getUserId();
+        currentCart.initCurrentCart(userId);
+      }
+      sucessCallback('You have successfully logged in!');
+    })
+    .catch((reason) => {
+      errorCallback(reason.message);
+    });
+}
+
+export default login;

src/app/services/logout-customer.ts

@@ -2,9 +2,11 @@ import { clearCustomer } from '@models/customer';
 import CookieManager from '@utils/cookie';
 import LocalStorageManager from '@utils/local-cart-id';
 import currentCart from './current-cart';
+import { clearToken } from './token-storage';
 
 function logoutCustomer() {
   clearCustomer();
+  clearToken();
   CookieManager.clearUserId();
   LocalStorageManager.removeAnonymusCart();
   currentCart.initCurrentCart();

src/app/views/about/about-us-card.ts

@@ -14,7 +14,7 @@ export default class AboutUsCardComponent extends CardComponent {
 
     const cardImage = new BaseComponent({
       tag: 'div',
-      classList: ['card-image', 'standard-size'],
+      classList: ['card-image', 'standard-size', 'small'],
     });
     this.card.appendChild(cardImage);
 

src/app/views/index.ts

@@ -11,3 +11,4 @@ export { default as ProductPageView } from './product/product-page';
 export { default as RegistrationView } from './registration/registration-page';
 export { default as BasketPageView } from './basket/basket-page';
 export { default as AboutUsView } from './about/about';
+export { default as PasswordChangeView } from './profile/change-password';