gsd
1 year ago
13 changed files with 184 additions and 22 deletions
@ -0,0 +1,46 @@ |
|||
import axios from "axios"; |
|||
|
|||
export default class PlayerApi { |
|||
store = { |
|||
permition: null, |
|||
steam_data: null |
|||
} |
|||
|
|||
discord = null; |
|||
|
|||
auth(value) { |
|||
switch (value) { |
|||
case "steam": return document.cookie.indexOf("steam64_secured=") !== -1 && document.cookie.indexOf("steam64=") !== -1 |
|||
case "discord": return document.cookie.indexOf("discord") !== -1 |
|||
default: return this.auth('steam') && this.auth('discord'); |
|||
} |
|||
} |
|||
|
|||
async loadThis(value) { |
|||
return axios.get(`/api/profile/current?requests=${value}`) |
|||
.then(response => { |
|||
if (response.status === 200) this.store[value] = response.data[value]; |
|||
}) |
|||
.catch(() => { |
|||
this.store[value] = null; |
|||
}); |
|||
} |
|||
|
|||
async loadDiscord() { |
|||
return axios.get(`https://tf2.pblr-nyk.pro/api/auth/discord`) |
|||
.then(response => { |
|||
if (response.status === 200) this.discord = response.data; |
|||
}) |
|||
.catch(() => { |
|||
this.discord = null; |
|||
}); |
|||
} |
|||
|
|||
async load() { |
|||
console.log(`[PlayerAPI] request info`); |
|||
if (!this.auth('steam')) return; |
|||
await this.loadThis('steam_data'); |
|||
|
|||
if (this.auth('discord')) await this.loadDiscord(); |
|||
} |
|||
} |
|||
@ -0,0 +1,9 @@ |
|||
<template> |
|||
<svg fill="currentColor" width="512px" height="60%" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg"><title>Discord icon</title><path d="M20.222 0c1.406 0 2.54 1.137 2.607 2.475V24l-2.677-2.273-1.47-1.338-1.604-1.398.67 2.205H3.71c-1.402 0-2.54-1.065-2.54-2.476V2.48C1.17 1.142 2.31.003 3.715.003h16.5L20.222 0zm-6.118 5.683h-.03l-.202.2c2.073.6 3.076 1.537 3.076 1.537-1.336-.668-2.54-1.002-3.744-1.137-.87-.135-1.74-.064-2.475 0h-.2c-.47 0-1.47.2-2.81.735-.467.203-.735.336-.735.336s1.002-1.002 3.21-1.537l-.135-.135s-1.672-.064-3.477 1.27c0 0-1.805 3.144-1.805 7.02 0 0 1 1.74 3.743 1.806 0 0 .4-.533.805-1.002-1.54-.468-2.14-1.404-2.14-1.404s.134.066.335.2h.06c.03 0 .044.015.06.03v.006c.016.016.03.03.06.03.33.136.66.27.93.4.466.202 1.065.403 1.8.536.93.135 1.996.2 3.21 0 .6-.135 1.2-.267 1.8-.535.39-.2.87-.4 1.397-.737 0 0-.6.936-2.205 1.404.33.466.795 1 .795 1 2.744-.06 3.81-1.8 3.87-1.726 0-3.87-1.815-7.02-1.815-7.02-1.635-1.214-3.165-1.26-3.435-1.26l.056-.02zm.168 4.413c.703 0 1.27.6 1.27 1.335 0 .74-.57 1.34-1.27 1.34-.7 0-1.27-.6-1.27-1.334.002-.74.573-1.338 1.27-1.338zm-4.543 0c.7 0 1.266.6 1.266 1.335 0 .74-.57 1.34-1.27 1.34-.7 0-1.27-.6-1.27-1.334 0-.74.57-1.338 1.27-1.338z"/></svg> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name:"DiscordSvg" |
|||
} |
|||
</script> |
|||
@ -1,17 +0,0 @@ |
|||
<template> |
|||
<md-tab id="profileView" :md-icon="this.avatar"> |
|||
<p>profile</p> |
|||
</md-tab> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'ProfileView', |
|||
props: { |
|||
avatar: { |
|||
type: String, |
|||
default: require('@/assets/profile-user.svg') |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,62 @@ |
|||
<template> |
|||
<md-dialog :md-active.sync="showAuthDialog"> |
|||
<div style="justify-content: center; display: flex; max-width: 80%; margin-left: 10%; padding-top: 5%" class="rounded-only"> |
|||
<div style="max-width: 40%; float: left;" v-if="this.$API.player.auth('steam')" v-on:click="moveTo('logout', 'steam')"> |
|||
<SteamSvg class="img-server"/> |
|||
<p class="p-auth" style="margin-bottom: -5%">Выйти</p> |
|||
<p class="p-auth-logout">{{this.$API.player.store.steam_data['nickname']}}</p> |
|||
</div> |
|||
<div style="max-width: 40%; float: left;" v-else v-on:click="moveTo('login', 'steam')"> |
|||
<SteamSvg class="img-server"/> |
|||
<p class="p-auth" style="margin-bottom: -5%">Войти через Steam</p> |
|||
<p class="p-auth-logout">(жми на иконку)</p> |
|||
</div> |
|||
<!-- -------------------------------------------------------------------- --> |
|||
<div style="max-width: 40%; float: left;" v-if="this.$API.player.auth('discord')" v-on:click="moveTo('logout', 'discord')"> |
|||
<DiscordSvg class="img-server"/> |
|||
<p class="p-auth" style="margin-bottom: -5%">Выйти</p> |
|||
<p class="p-auth-logout">{{this.$API.player.discord.username}}</p> |
|||
</div> |
|||
<div style="max-width: 40%; float: left;" v-else v-on:click="moveTo('login', 'discord')"> |
|||
<DiscordSvg class="img-server"/> |
|||
<p class="p-auth" style="margin-bottom: -5%">Войти через Discord</p> |
|||
<p class="p-auth-logout">если хочешь на наш дискорд сервер, а так не надо</p> |
|||
</div> |
|||
</div> |
|||
</md-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import SteamSvg from "@/components/Others/CustomSvg/SteamSvg.vue"; |
|||
import DiscordSvg from "@/components/Others/CustomSvg/DiscordSvg.vue"; |
|||
|
|||
export default { |
|||
name: 'AuthWindow', |
|||
components: {DiscordSvg, SteamSvg}, |
|||
data: () => ({ |
|||
showAuthDialog: false |
|||
}), |
|||
methods: { |
|||
moveTo(action, service) { |
|||
if (service === 'steam') { |
|||
return window.open(`/api/auth/${action}`, '_self'); |
|||
} |
|||
return window.open(`/api/auth/${service}/${action}`, '_self'); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.p-auth { |
|||
text-align: center; font-size: 2em; color: #131213 |
|||
} |
|||
|
|||
.p-auth-logout { |
|||
text-align: center; font-size: 1.5em; color: gray; |
|||
} |
|||
|
|||
p-auth-mini { |
|||
text-align: center; font-size: 1.5em; color: red; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,58 @@ |
|||
<template> |
|||
<md-tab id="profileView" :md-icon="getAvatar()"> |
|||
<div class="md-layout md-alignment-bottom-center"> |
|||
<CharacterImage :size="10" :img_src="require(`@/assets/images/characters/pyro.png`)" :audio_src="require(`@/assets/sounds/alertmgs.mp3`)"/> |
|||
</div> |
|||
<div class="md-layout md-alignment-bottom-center"> |
|||
<div class="md-layout-item md-size-25 md-alignment-bottom-center rounded-and-colored" > |
|||
<h3 style="text-align: center; margin: 4% 0%">Профиль</h3> |
|||
</div> |
|||
</div> |
|||
<div class="md-layout md-alignment-bottom-center"> |
|||
<div class="md-layout-item md-size-50 md-alignment-bottom-center rounded-only"> |
|||
<hr width="50%"> |
|||
<div v-if="this.$API.player.auth('steam') === false"> |
|||
<h2 class="auth-button" v-on:click="openAW()">АВТОРИЗОВАТЬСЯ</h2> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<AuthWindow ref="aw"/> |
|||
</md-tab> |
|||
</template> |
|||
|
|||
<script> |
|||
import CharacterImage from "@/components/Others/CharacterImage.vue"; |
|||
import AuthWindow from "@/components/TabsMenuElements/ProfileView/AuthWindow.vue"; |
|||
export default { |
|||
name: 'ProfileView', |
|||
props: { |
|||
avatar: { |
|||
type: String |
|||
} |
|||
}, |
|||
components: {AuthWindow, CharacterImage}, |
|||
methods: { |
|||
getAvatar() { |
|||
//try { |
|||
// return this.$API.player.store.steam_data['avatar']; |
|||
//} catch (err) { |
|||
return require('@/assets/profile-user.svg'); |
|||
//} |
|||
}, |
|||
openAW() { |
|||
console.log('open auth window'); |
|||
this.$refs.aw.showAuthDialog = true; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.auth-button { |
|||
text-align: center |
|||
} |
|||
|
|||
.auth-button:hover { |
|||
text-decoration-line: underline; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue