Facti13.Frontend.VueMaterial/src/components/Others/Auth/DiscordWindow.vue

<template>
  <md-dialog :md-active.sync="showDiscordWindow" @close="showDiscordWindow=false">
    <div class="md-layout md-alignment-bottom-center">
      <div class="md-layout-item md-size-70 md-small-size-100 md-alignment-bottom-center rounded-only" style="background-color: #5788f1;">
        <md-steppers :md-active-step.sync="currentMove" md-linear>
          <md-step id="steamAuth" md-label="Steam" :md-done.sync="steamAuth">
            <p>Заранее извиняемся за данную жопу боль, но чтоб предостеречь рейды на сервер дискорда и залет мимоходов, мы сделали авторизацию. Не пройдя ее и зайдя на наш сервер дискорда тебе можно будет лишь читать канал с аннонсами. Так что быстро ты давай пальчик в попу себе вставляй.</p>
            <md-button v-if="this.$API.player.success_auth" class="btn-colored" v-on:click="moveTo('logout', 'steam')">Выйти из Steam</md-button>
            <md-button v-else class="btn-colored" v-on:click="moveTo('login', 'steam')">Войти в Steam</md-button>
          </md-step>

          <md-step id="discordAuth" md-label="Discord" :md-error="steamAlreadyAttachment" :md-done.sync="discordAuth">
            <div v-if="discord.id!==''">
              <p>У тебя уже есть привязанный аккаунт дискорда с ид: {{discord.id}}!<br> Поэтому зайти к нам на сервер тебе не составляет больших проблем.<br>Конечно ты можешь отвязать свой дискорд от стима если желаешь)</p>
              <md-button v-if="discord.id!==''" class="btn-old" v-on:click="openDiscord()">Перейти на сервер</md-button>
              <md-button v-if="discord.id!==''" class="btn-collect" v-on:click="unregisterDiscord()">Отвязать Discord от Steam</md-button>
            </div>
            <div v-else>
              <div v-if="discord.nickname===''">
                <p>Теперь надо зайти в дискорд, иначе как мы узнаем твои данные?</p>
                <md-button class="btn-default" v-on:click="moveTo('login', 'discord')">Войти в Discord</md-button>
              </div>
              <div v-else>
                <p>Вот теперь мы узнали что тебя зовут {{discord.nickname}}, пока привязывать одно к другому, так что давай быстрее иди к следующему шагу</p>
                <md-button class="btn-default" v-on:click="moveTo('logout', 'discord')">Выйти из Discord</md-button>
              </div>

            </div>
          </md-step>

          <md-step id="connectAuth" md-label="Связать аккаунты" :md-done.sync="connectAuth">
            <div v-if="discord.id.length>0">
              <p>Вот теперь ты точно можешь общаться со всеми у нас на сервере дискорда, но если ты вдруг передумал и хочешь отвязать свой дискорд от стима, перейди на второй шаг и нажми на отвязать дискорд.</p>
              <md-button v-if="discord.id!==''" class="btn-old" v-on:click="openDiscord()">Открыть Discord</md-button>
            </div>
            <div v-else>
              <p>Поздравляю друг и почти на финешной прямой, осталось лишь их только связать и зайти уже в нашу клоаку!</p>
              <p v-if="discord.reg_msg.length > 0">{{discord.reg_msg}}</p>
              <md-button class="btn-old" v-on:click="registerDiscord()">Связать аккаунты!</md-button>
            </div>
          </md-step>
        </md-steppers>
        <md-button class="btn-colored" v-on:click="closeDW()">Я передумал</md-button>
      </div>
    </div>
  </md-dialog>
</template>

<script>
import axios from "axios";
export default {
  name: "DiscordWindow",
  data: () => ({
    showDiscordWindow: false,
    currentMove: "steamAuth",
    steamAuth: false,
    discordAuth: false,
    connectAuth: false,
    steamAlreadyAttachment: '',
    discord: {
      nickname: "",
      id: "",
      reg_msg: ""
    }
  }),
  methods: {
    setDone (id, index) {
      this[id] = true

      this.steamAlreadyAttachment = ''

      if (index) {
        this.currentMove = index
      }
    },
    openDW(){this.getMove();this.showDiscordWindow = true;},
    closeDW(){this.showDiscordWindow = false},
    moveTo(action, service) {
      let subdomain = "tf2";
      if (location.host.indexOf("pblr-nyk.pro") !== -1) {
        subdomain = location.host.split(".")[0]
      }

      if (service === 'steam') {
        return window.open(`/api/auth/${action}?subdomain=${subdomain}`, '_self');
      }
      return window.open(`/api/auth/${service}/${action}`, '_self');
    },
    getMove(){
      console.log("[DiscordWindow] next stage: steam")
      if (this.$API.player.success_auth) {
        this.steamAuth = true;
        //
        console.log("[DiscordWindow] next stage: discord")
        if (!this.discordAuth) {
          this.currentMove = "discordAuth";
        } else {
          console.log("[DiscordWindow] next stage: connect")
          this.currentMove = "connectAuth";
        }
        //
      } else {
        this.currentMove = "steamAuth";
      }
      console.log("[DiscordWindow]", this.steamAuth, this.discordAuth, this.connectAuth);
      console.log("[DiscordWindow]", this.currentMove)
      return this.currentMove;
    },
    openDiscord(){
      if (this.url !== null) window.open("https://tf2.pblr-nyk.pro/discord", '_blank');
    },
    registerDiscord(){
      axios.post("api/auth/discord").then(
          (response) => {
            switch (response.status) {
              case 201: {this.discord.reg_msg = "Аккаунт привязан!";this.updateDiscordId();this.openDiscord();break;}
            }
          }
      ).catch((r) => {
        switch (r.response.status) {
          case 409: {this.discord.reg_msg = "увы к твоему стиму уже как-то подвязался другой дискорд аккаунт";break;}
          case 413: {this.discord.reg_msg = "увы к твоему дискорду уже как-то подвязался другой стим аккаунт, или ты жмешь зачемто второй раз...";break;}
          default: {this.discord.reg_msg = "привязка закончилась с неизвестной ошибкой, иди нахуй...";break;}
        }
      })
    },
    unregisterDiscord() {
      axios.delete("api/auth/steam/discord")
          .then((response) => {
            if (response.status === 200) {
              this.discordAuth = true;
              this.discord.id = '';
              this.currentMove = "connectAuth";
            } else {
              window.reload();
            }
          }).catch(()=>{})
    },
    updateDiscordId() {
      if (this.$API.player.auth("steam")) {
        console.log("[DiscordWindow] found steam cookie");
        axios.get("api/auth/steam/discord").then(
            (response) => {
              if (response.status === 200) {
                this.discordAuth = false;
                this.discord.id = response.data;
              } else {
                this.discordAuth = true;
              }
            }
        ).catch(() => {this.discordAuth = true;})
      }
    }
  },
  mounted() {
    this.updateDiscordId()
    if (this.$API.player.auth("discord")) {
      console.log("[DiscordWindow] found discord cookie");
      axios.get("api/auth/discord").then(
          (response) => {
            if (response.status === 200) {
              this.discord.nickname = response.data.username;
            }
          }
      ).catch(()=>{});
    }
  }
}
</script>

<style>
.md-steppers {
  background-color: #5764f1;
  border-radius: 5px;
}
</style>