added connect for header and fixed menu

luckydiamond/src/assets/css/ComponentsStyles/AdaptiveStyles/headermobile.css

@@ -5,13 +5,14 @@
     border-radius: 20px;
     background: #17181C;
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
-    height: 45%;
+    height: 130px;
 }
 
 .header-mobile__content {
     display: flex;
     align-items: center;
     justify-content: space-between;
+    margin-right: 5%;
 }
 
 .header-mobile__logo {
@@ -85,4 +86,41 @@
     margin-left: 15px;
 }
 
-/* /Header */
+.mobile-auth__card--content a {
+    padding: 6px 5px;
+    font-size: 14px;
+    margin-left: 5%;
+}
+
+.mobile-auth__card--content img {
+    width: 1.8em;
+}
+
+.mobile-discord__card {
+    margin: 0 1.5em 0 1.5em;
+}
+
+.mobile-discord__card .discord__card--name {
+    margin: 0 5% 0 -10%;
+}
+
+.mobile-discord__card .header__card--discord img {
+    width: 60%;
+}
+
+/* /Header */
+
+@media screen and (max-width: 430px) {
+    .header-mobile__end {
+        align-items: unset;
+        justify-content: unset;
+        flex-direction: column;
+        margin-top: .5em;
+    }
+    .header-mobile__balance--content {
+        margin-bottom: .5em;
+    }
+    .mobile-auth__card--content a {
+        padding: 6px 30px;
+    }
+}

luckydiamond/src/assets/css/ComponentsStyles/AdaptiveStyles/menumobile.css

@@ -30,4 +30,8 @@
     margin-left: 9%;
 }
 
+.disabled {
+    pointer-events: none;
+}
+
 /* /Footer */

luckydiamond/src/assets/css/PagesStyles/adaptive-pages/profilemobile.css

@@ -2,10 +2,6 @@ body {
     overflow-y: scroll;
 }
 
-.header-mobile {
-    height: 70%;
-}
-
 .profile-mobile {
     grid-area: profile-mobile;
     width: 100%;

luckydiamond/src/components/adaptive-components/HeaderMobileComponent.vue

@@ -8,15 +8,45 @@
         <div class="header-mobile__balance">
           <div class="header-mobile__balance--content">
             <div class="header-mobile__card card-display card-text card-img">
-              <h2><img src="@/assets/icons-adaptive/home-adaptive/icon-diamond-ore.png">999</h2>
+              <h2><img src="@/assets/icons-adaptive/home-adaptive/icon-diamond-ore.png">{{ balance }}</h2>
             </div>
             <div class="header-mobile__btn--balance btn-card btn-card__margin">
               <a href="#" @click="$router.push({ name: 'profile' })"><img src="@/assets/icons-adaptive/home-adaptive/icon-wallet.svg"></a>
             </div>
           </div>
         </div>
-        <div class="header-mobile__user-icon user-icon">
-          <img src="@/assets/icons-test/person-icon-profile-userinfo.png">
+<!--        <div class="header-mobile__user-icon user-icon">-->
+<!--          <img src="@/assets/icons-test/person-icon-profile-userinfo.png">-->
+<!--        </div>-->
+        <div class="header__auth--discord">
+          <div v-if="auth" class="header__card--discord mobile-discord__card">
+            <div class="discord__card--name">
+              <h2>{{ userName }}</h2>
+              <a href="#" @click="logout"
+              >Выход<span
+              ><img src="@/assets/icons-header/exit-icon.png" /></span
+              ></a>
+            </div>
+            <img :src="imageUrl" alt="test-ico" />
+            <!-- <img src="../assets/icons-test/person-icon.svg" alt="test-ico"> -->
+          </div>
+          <div v-else class="header__card--auth">
+            <!-- <div class="header__card--auth">  -->
+            <div class="auth__card--content mobile-auth__card--content">
+              <a
+                  href="https://discord.com/oauth2/authorize?client_id=1148644854797176932&response_type=code&redirect_uri=https%3A%2F%2Fwww.lucky-diamonds.ru&scope=identify"
+                  @click="auth = true"
+              ><span
+              ><img
+                  width="30"
+                  height="30"
+                  src="@/assets/icons-header/discord-icon.svg" /></span
+              >Вход</a
+              >
+              <!-- https://media.discordapp.net/attachments/1175674631684898866/1214143880073842698/Undwadtitled.png?ex=65f80a9a&is=65e5959a&hm=9cb0ffffa2bfc6ee9302f8d96be7f8c3049dc04df478dd05cdd94f697c662e1d&=&format=webp&quality=lossless -->
+              <!-- https://discord.com/oauth2/authorize?client_id=1148644854797176932&response_type=code&redirect_uri=https%3A%2F%2Fwww.lucky-diamonds.ru&scope=identify-->
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -25,8 +55,119 @@
 
 <script>
 import '@/assets/css/ComponentsStyles/AdaptiveStyles/headermobile.css'
-export default {
 
+import { LogIn } from "@/assets/js/authentication/AuthService.js";
+import { GetCurrentMoney } from "@/assets/js/rest/RestMethods.js";
+
+import { eventBus } from "@/main";
+
+import {
+  SetCookie,
+  GetCookie,
+  DeleteAllCookie,
+} from "@/assets/js/storage/CookieStorage.js";
+
+export default {
+  methods: {
+    logout() {
+      this.auth = false;
+      this.balance = 0;
+      this.authtoken = "";
+      DeleteAllCookie();
+    },
+    updateBalanceMethod() {
+      GetCurrentMoney(GetCookie("AUTHTOKEN"), GetCookie("SearchToken")).then(
+          (response) => {
+            this.balance = response.currentMoney;
+          }
+      );
+      eventBus.emit("Updatebalance-saper");
+    },
+  },
+  data() {
+    return {
+      balance: 0,
+      auth: false,
+      authtoken: "",
+      imageUrl: "https://avatar.spworlds.ru/face/55/",
+      userName: "",
+    };
+  },
+  mounted() {
+    eventBus.on("Updatebalance", () => {
+      this.updateBalanceMethod();
+    });
+  },
+  created() {
+    try {
+      let authCode = this.$route.query.code;
+
+      if (authCode) {
+        LogIn(authCode)
+            .then((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;
+              this.authtoken = response.authtoken;
+              GetCurrentMoney(GetCookie("AUTHTOKEN"), GetCookie("SearchToken"))
+                  .then((response) => {
+                    this.balance = response.currentMoney;
+                  })
+                  .catch((error) => {
+                    console.error(error);
+                  });
+            })
+            .catch(() => {
+              let currentUserName = GetCookie("SpUserName");
+              GetCurrentMoney(GetCookie("AUTHTOKEN"), GetCookie("SearchToken"))
+                  .then((response) => {
+                    this.balance = response.currentMoney;
+                    console.log(response);
+                  })
+                  .catch((error) => {
+                    console.error(error);
+                  });
+
+              if (currentUserName) {
+                this.imageUrl = this.imageUrl + `${currentUserName}.png`;
+                this.userName = GetCookie("SpUserName");
+                this.auth = true;
+                this.authtoken = GetCookie("AUTHTOKEN");
+              } else {
+                this.auth = false;
+                this.balance = 0;
+              }
+            });
+      } else {
+        let currentUserName = GetCookie("SpUserName");
+        GetCurrentMoney(GetCookie("AUTHTOKEN"), GetCookie("SearchToken"))
+            .then((response) => {
+              this.balance = response.currentMoney;
+            })
+            .catch((error) => {
+              // Обработка ошибки
+              console.error(error);
+            });
+
+        if (currentUserName) {
+          this.imageUrl = this.imageUrl + `${currentUserName}.png`;
+          this.userName = GetCookie("SpUserName");
+          this.auth = true;
+          this.authtoken = GetCookie("AUTHTOKEN");
+        } else {
+          this.auth = false;
+          this.balance = 0;
+        }
+      }
+    } catch (error) {
+      console.error("Auth Code error:", error);
+    }
+  },
 }
 </script>
 

luckydiamond/src/components/adaptive-components/MenuMobileComponent.vue

@@ -2,8 +2,8 @@
   <footer class="footer-mobile">
     <div class="footer-mobile__content">
       <div class="footer-mobile__icons icons-size">
-        <a class="icon-center" href="#"><img @click="$router.push({ name: 'home' })" src="@/assets/icons-adaptive/home-adaptive/icon-home-menu.png"></a>
-        <a class="icon-center" href="#" @click="$router.push({ name: 'profile' })"><img src="@/assets/icons-adaptive/home-adaptive/icon-wallet-menu.svg"></a>
+        <a class="icon-center" @click="$router.push({ name: 'home' })" href="#"><img src="@/assets/icons-adaptive/home-adaptive/icon-home-menu.png"></a>
+        <a :class="{ 'disabled': cokiehave }" @click="$router.push({ name: 'profile' })" class="icon-center" href="#"><img src="@/assets/icons-adaptive/home-adaptive/icon-wallet-menu.svg"></a>
         <a class="icon-center" href="#"><img src="@/assets/icons-adaptive/home-adaptive/icon-chat-menu.png"></a>
         <a class="icon-center" href="#"><img src="@/assets/icons-adaptive/home-adaptive/icon-info-menu.png"></a>
         <a class="icon-center" href="#"><img src="@/assets/icons-adaptive/home-adaptive/icon-menu.png"></a>
@@ -14,11 +14,24 @@
 
 <script>
 import '@/assets/css/ComponentsStyles/AdaptiveStyles/menumobile.css'
-export default {
+import { GetCookie } from "@/assets/js/storage/CookieStorage";
 
+export default {
+  data() {
+    return {
+      cokiehave: true
+    }
+  },
+  created() {
+    const auth = GetCookie('AUTHTOKEN')
+    const search = GetCookie('SearchToken')
+
+    if (auth && search) {
+      this.cokiehave = false
+    }
+  }
 }
 </script>
 
 <style scoped>
-
-</style>
+</style>