add auth connection with backend part

luckydiamond/src/assets/js/authentication/AuthService.js

@@ -13,9 +13,9 @@ import { BackendApiUrl } from '@/properties/Сonfig.js';
 export async function LogIn(authCode) {
     try {
         const response = await Post(BackendApiUrl + "/Authorize/LogIn", { code: authCode });
-        console.log(response);
+
         return response;
     } catch (error) {
-        console.error('Ошибка в LogIn:', error);
+        console.error('Error in LogIn:', error);
     }
 }

luckydiamond/src/assets/js/rest/RestMethods.js

@@ -1,41 +1,49 @@
+import { BackendApiUrl } from '@/properties/Сonfig.js';
+
+
 export async function Post(url = "", data = {}) {
+  try {
+    const response = await fetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+      redirect: "follow"
+    });
 
-  // Default options are marked with *
+    if (!response.ok) {
-  // try {
+      console.log("Fetch error:", response.status);
-  //     const response = await fetch(url, {
+    }
-  //       method: "POST",
-  //       headers: {
-  //         "Content-Type": "application/json",
-  //       },
-  //       redirect: "follow",
-  //       referrerPolicy: "no-referrer",
-  //       body: JSON.stringify(data),
-  //     });
-  //     if (!response.ok) {
-  //       console.log("Fetch error:", response.status);
-  //     }
-  //     return await response.json();
-  //   } catch (error) {
-  //     console.log("Fetch error:", error);
-  //   }
 
-  var myHeaders = new Headers();
+    return await response.json();
-  myHeaders.append("Content-Type", "application/json");
+  } catch (error) {
+    console.log("Fetch error:", error);
+  }
+}
 
-  var raw = JSON.stringify(data);
+export async function GetCurrentMoney(authToken) {
+
+  try {
+      const response = await fetch(`${BackendApiUrl}/Payment/GetCurrentMoney`, {
+          method: 'GET',
+          headers: {
+              'AuthToken': authToken,
+          }
+      });
+
+      if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const data = await response.json();
+      console.log(data); // Здесь вы можете обработать полученные данные
+      return data;
+  } catch (error) {
+      console.error('There was a problem with the fetch operation:', error);
+  }
+}
 
 
-  var requestOptions = {
-    method: 'POST',
-    headers: myHeaders,
-    body: raw,
-    redirect: 'follow'
-  };
-
-  fetch(url, requestOptions)
-    .then(response => response.text())
-    .then(result => console.log(result))
-    .catch(error => console.log('error', error));
 
 
-}

luckydiamond/src/assets/js/storage/CookieStorage.js

@@ -0,0 +1,34 @@
+export function SetCookie(name, value, years = 10) {
+    var expires = "";
+    if (value) {
+        var date = new Date();
+        date.setTime(date.getTime() + (years * 365 * 24 * 60 * 60 * 1000));
+        expires = "; expires=" + date.toUTCString();
+    }
+    document.cookie = name + "=" + (value || "") + expires + "; path=/";
+}
+
+export function DeleteCookie(name) {
+    document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/;';
+}
+
+export function DeleteAllCookie() {
+    const cookies = document.cookie.split(';');
+
+    for (let cookie of cookies) {
+        const eqPos = cookie.indexOf('=');
+        const name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
+        document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/;';
+    }
+}
+
+export function GetCookie(name) {
+    var nameEQ = name + "=";
+    var ca = document.cookie.split(';');
+    for (var i = 0; i < ca.length; i++) {
+        var c = ca[i];
+        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
+        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
+    }
+    return null;
+}

luckydiamond/src/components/HeaderComponent.vue

@@ -1,37 +1,77 @@
 <script>
-import '@/assets/css/ComponentsStyles/header.css'
+import "@/assets/css/ComponentsStyles/header.css";
 // import { GetAuthCodeFromCurrentPath } from '@/assets/js/authentication/LoggingMiddleware.js';
-import { LogIn } from '@/assets/js/authentication/AuthService.js';
+import { LogIn } from "@/assets/js/authentication/AuthService.js";
+import { GetCurrentMoney } from "@/assets/js/rest/RestMethods.js";
+import {
+  SetCookie,
+  GetCookie,
+  DeleteAllCookie,
+} from "@/assets/js/storage/CookieStorage.js";
 
 export default {
-  name: 'Header-Element-page',
+  name: "Header-Element-page",
+  methods: {
+    logout() {
+      this.auth = false;
+      DeleteAllCookie();
+    },
+  },
   data() {
     return {
-      balance: 25000,
+      balance: 0,
-      auth: false
+      auth: false,
-    }
+      imageUrl: "https://visage.surgeplay.com/face/55/",
-  }, created() {
+      userName: "",
+    };
+  },
+  created() {
     try {
       let authCode = this.$route.query.code;
-      console.log('Auth Code:', authCode);
 
       if (authCode) {
-        const data =  LogIn(authCode);
+        LogIn(authCode)
-        console.log('Auth Data:', data);
+          .then((response) => {
+            console.log("Auth Data:", response);
+            SetCookie("UserId", response.userId);
+            SetCookie("SpUserName", response.spUserName);
+            SetCookie("AuthToken", response.authToken);
+            SetCookie("SearchToken", response.searchToken);
+
+            this.imageUrl = this.imageUrl + `${response.spUserName}.png`;
+            this.userName = response.spUserName;
+            this.auth = true;
+          })
+          .catch((error) => {
+            console.error("Auth Code error:", error);
+          });
       } else {
-        console.log('Auth Code отсутствует');
+        let currentUserName = GetCookie("SpUserName");
+
+        let currentMoney = GetCurrentMoney(
+          "2405bf72008f835c9f5b336a84d3efbd7a742b828ca41fcaab1c40ca842e6425"
+        );
+        // let currentMoney = GetCurrentMoney(GetCookie("AuthToken"));
+
+        if (currentUserName) {
+          this.imageUrl = this.imageUrl + `${currentUserName}.png`;
+          this.auth = true;
+          this.balance = currentMoney;
+        } else {
+          this.auth = false;
+        }
       }
     } catch (error) {
-      console.error('Ошибка при аутентификации:', error);
+      console.error("Auth Code error:", error);
     }
-  }
+  },
-}
+};
 </script>
 <template>
   <header class="header">
     <div class="header__content">
       <div class="header__logo">
-        <img src="../assets/logo.svg" alt="">
+        <img src="../assets/logo.svg" alt="" />
       </div>
       <div class="header__nav">
         <nav>
@@ -43,7 +83,11 @@ export default {
       <div class="header__balance">
         <div class="header__content--balance">
           <div class="header__card--balance">
-            <h2><img src="../assets/icons-header/diamond-ore-icon.png">{{ balance }}</h2>
+            <h2>
+              <img src="../assets/icons-header/diamond-ore-icon.png" />{{
+                balance
+              }}
+            </h2>
           </div>
           <div class="header__btn--wallet">
             <a href="">кошелёк</a>
@@ -51,17 +95,30 @@ export default {
         </div>
       </div>
       <div class="header__auth--discord">
-        <!-- <div v-if="auth" class="header__card--discord">
+        <div v-if="auth" class="header__card--discord">
           <div class="discord__card--name">
-            <h2>Artemka</h2>
+            <h2>{{ userName }}</h2>
-            <a href="#" @click="auth = false">Выход<span><img src="../assets/icons-header/exit-icon.png"></span></a>
+            <a href="#" @click="logout"
+              >Выход<span
+                ><img src="../assets/icons-header/exit-icon.png" /></span
+            ></a>
           </div>
-          <img src="../assets/icons-test/person-icon.svg" alt="test-ico">
+          <img :src="imageUrl" alt="test-ico" />
-        </div> -->
+          <!-- <img src="../assets/icons-test/person-icon.svg" alt="test-ico"> -->
-        <!-- <div v-else class="header__card--auth"> -->
+        </div>
-        <div class="header__card--auth">
+        <div v-else class="header__card--auth">
+          <!-- <div class="header__card--auth">  -->
           <div class="auth__card--content">
-            <a href="https://discord.com/api/oauth2/authorize?client_id=1148644854797176932&redirect_uri=https%3A%2F%2Flucky-diamond.vercel.app&response_type=code&scope=identify" @click="auth = true"><span><img width="30" height="30" src="../assets/icons-header/discord-icon.svg"></span>Вход</a>
+            <a
+              href="https://discord.com/api/oauth2/authorize?client_id=1148644854797176932&redirect_uri=https%3A%2F%2Flucky-diamond.vercel.app&response_type=code&scope=identify"
+              @click="auth = true"
+              ><span
+                ><img
+                  width="30"
+                  height="30"
+                  src="../assets/icons-header/discord-icon.svg" /></span
+              >Вход</a
+            >
           </div>
         </div>
       </div>
@@ -70,5 +127,4 @@ export default {
 </template>
 
 <style scoped>
-
 </style>

luckydiamond/src/properties/Сonfig.js

@@ -1,2 +1,2 @@
-export const BackendApiUrl  = 'https://spsystemcore20231122004605.azurewebsites.net/api';
+// export const BackendApiUrl  = 'https://spsystemcore20231122004605.azurewebsites.net/api';
-// export const BackendApiUrl = 'https://localhost:7062/api';
+export const BackendApiUrl = 'https://localhost:7062/api';