kaverti/frontend
5
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

fix and friends

Browse source
This commit is contained in:
Bytetrex 2021-04-09 15:49:59 +08:00
parent 73fca4ff51
commit ac76d704cb
10 changed files with 288 additions and 293 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/App.vue
View file

@ -23,8 +23,8 @@ export default {
const jwt = localStorage.getItem("token");
const wind = localStorage.getItem("wind404");
if (token) {
this.$store.commit("setToken", token);
if (jwt) {
this.$store.commit("setToken", jwt);
}
if (wind) {
@ -33,6 +33,10 @@ export default {
this.$store.commit("setWind", wind);
}
Object.assign(axios.defaults, {
headers: { Authorization: this.$store.state.user.token },
});
if (this.$store.state.debug) {
this.$buefy.snackbar.open({
message: this.$t("errors.devBuild"),

4
src/main.js
View file

@ -29,10 +29,6 @@ Vue.use(VMdEditor);
Vue.use(VueAxios, axios);
Vue.use(Buefy);
// Axios Headers
const jwtToken = localStorage.getItem("token");
axios.defaults.headers.common["Authorization"] = jwtToken;
Vue.config.productionTip = false;
Vue.prototype.$snackbar = Snackbar;

2
src/router/index.js
View file

@ -183,7 +183,7 @@ const routes = [{
redirect: "/settings/general",
children: [
{ path: 'general', component: route('SettingsGeneral') },
{ path: 'account', component: route('SettingsAccount') },
{ path: 'security', component: route('SettingsSecurity') },
{ path: 'about', component: route('SettingsAbout') },
]
},

87
src/views/Debug.vue
View file

@ -1,37 +1,72 @@
<template>
<main>
<div class="column">
<div class="box">
{{$t('debug.title')}}: {{$store.state.debug}}
<br>
<div v-if="$store.state.debug"> {{$t('debug.authUser')}}: {{$store.state.user.username}}<br>
{{$t('debug.userState')}}: {{$store.state.user}}<br>
{{$t('debug.state')}}: {{$store.state}}<br>
{{$t('debug.token')}}: {{$store.state.user.token}}
<div id="debug">
<section class="section">
<div class="container" v-if="!$store.state.debug">
<div class="columns is-centered">
<div class="column">
<div class="box">
<div class="title">
{{ $t("debug.title") }}: {{ store.state.debug }}
</div>
<hr>
<p>If you'd like to re-enable debug mode refresh.</p>
</div>
</div>
</div>
<b-button v-if="$store.state.debug" @click="authTest">{{$t('debug.auth')}}</b-button>
<b-button v-if="$store.state.debug" @click="turnOffDebug">{{$t('debug.disable')}}</b-button>
</div>
</div>
</main>
<div class="container" v-else>
<div class="columns is-centered">
<div class="column is-7">
<div class="box">
<div class="title">
{{ $t("debug.title") }}: {{ $store.state.debug }}
</div>
<hr />
{{ $t("debug.authUser") }}: {{ $store.state.user.username }}<br />
{{ $t("debug.userState") }}: {{ $store.state.user }}<br />
{{ $t("debug.state") }}: {{ $store.state }}<br />
{{ $t("debug.token") }}: {{ $store.state.user.token }}
</div>
<b-button v-if="$store.state.debug" @click="authTest">{{
$t("debug.auth")
}}</b-button>
<b-button v-if="$store.state.debug" @click="turnOffDebug">{{
$t("debug.disable")
}}</b-button>
</div>
</div>
</div>
</section>
</div>
</template>
<script>
export default {
name: "Debug",
methods: {
turnOffDebug () {
this.$store.commit('turnOffDebug')
this.$buefy.snackbar.open({message:this.$t('errors.disableDebug'), type: 'is-warning'})
turnOffDebug() {
this.$store.commit("turnOffDebug");
this.$buefy.snackbar.open({
message: this.$t("errors.disableDebug"),
type: "is-warning",
});
},
authTest () {
this.axios.get('/api/v1/userinfo/auth'
).then(() => {
this.$buefy.snackbar.open({message:this.$t('errors.authSuccess'), type: 'is-warning'})
}).catch(() => {
this.$buefy.snackbar.open({message:this.$t('errors.authFail'), type: 'is-warning'})
})
}
}
}
authTest() {
this.axios
.get("/api/v1/userinfo/auth")
.then(() => {
this.$buefy.snackbar.open({
message: this.$t("errors.authSuccess"),
type: "is-warning",
});
})
.catch(() => {
this.$buefy.snackbar.open({
message: this.$t("errors.authFail"),
type: "is-warning",
});
});
},
},
};
</script>

171
src/views/Friends.vue
View file

@ -1,54 +1,51 @@
<template>
<main>
<div class="section">
<h1 class="title has-text-centered">{{name}} ({{count}})</h1>
<div class="tabs is-centered">
<ul>
<router-link tag="li" :to="'/friends/pendingCanAccept'" exact><a>{{ $t('friends.pendingCanAccept') }}</a></router-link>
<router-link tag="li" :to="'/friends/accepted'" exact><a>{{ $t('friends.accepted') }}</a></router-link>
<router-link tag="li" :to="'/friends/pending'" exact><a>{{ $t('friends.pending') }}</a></router-link>
</ul>
</div>
<div class="columns is-multiline" v-if="friends.length && !loading">
<div class="column is-3 has-text-centered" v-for='(friend) in friends' :key='"friend-" + friend.id'>
<h1 class="title has-text-centered">{{friend.friend2.username}}</h1>
<div class="box">
<img :src="'https://cdn.kaverti.com/user/avatars/full/' + friend.friend2.picture + '.png'"><br>
<div class="buttons">
<b-button @click="removeFriend(friend)" class="is-warning has-text-centered is-centered is-center" v-if="friend.type === 'pending'"><i class="fas fa-minus"></i>&nbsp;Cancel Friend Request</b-button>
<b-button @click="removeFriend(friend)" class="is-warning has-text-centered is-centered is-center" v-if="friend.type === 'pendingCanAccept'"><i class="fas fa-minus"></i>&nbsp;Deny Friend Request</b-button>
<b-button @click="doRelationshipAccept(friend)" class="is-success has-text-centered is-centered is-center" v-if="friend.type === 'pendingCanAccept'"><i class="fas fa-plus"></i>&nbsp;Accept Friend Request</b-button>
<b-button @click="removeFriend(friend)" class="is-danger has-text-centered is-centered is-center" v-if="friend.type === 'accepted'"><i class="fas fa-minus"></i>&nbsp;Remove Friend</b-button>
<div id="friends">
<section class="section">
<div class="columns is-centered">
<div class="column is-7 has-text-centered">
<div class="title">{{ name }} ({{ count }})</div>
<div class="tabs is-centered">
<ul>
<router-link tag="li" :to="'/friends/pendingCanAccept'" exact><a>{{ $t('friends.pendingCanAccept') }}</a>
</router-link>
<router-link tag="li" :to="'/friends/pending'" exact><a>{{ $t('friends.pending') }}</a></router-link>
<router-link tag="li" :to="'/friends/accepted'" exact><a>{{ $t('friends.accepted') }}</a></router-link>
</ul>
</div>
<div class="columns is-multiline" v-if="friends.length && !loading">
<div class="column is-3 has-text-centered" v-for='(friend) in friends' :key='"friend-" + friend.id'>
<h1 class="title has-text-centered">{{ friend.friend2.username }}</h1>
<div class="box">
<img :src="'https://cdn.kaverti.com/user/avatars/full/' + friend.friend2.picture + '.png'" alt="Avatar"><br>
<div class="buttons">
<b-button @click="removeFriend(friend)" class="is-warning has-text-centered is-centered is-center"
v-if="friend.type === 'pending'"><i class="fas fa-minus"></i>&nbsp;Cancel Friend Request
</b-button>
<b-button @click="removeFriend(friend)" class="is-warning has-text-centered is-centered is-center"
v-if="friend.type === 'pendingCanAccept'"><i class="fas fa-minus"></i>&nbsp;Deny Friend
Request
</b-button>
<b-button @click="doRelationshipAccept(friend)"
class="is-success has-text-centered is-centered is-center"
v-if="friend.type === 'pendingCanAccept'"><i class="fas fa-plus"></i>&nbsp;Accept Friend
Request
</b-button>
<b-button @click="removeFriend(friend)" class="is-danger has-text-centered is-centered is-center"
v-if="friend.type === 'accepted'"><i class="fas fa-minus"></i>&nbsp;Remove Friend
</b-button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section" v-if="!friends.length && !loading">
<NoItems type="friends"></NoItems>
</div>
<div class="section columns" v-if="loading">
<div class="column">
<div class="box">
<b-skeleton></b-skeleton>
</div>
</div>
<div class="column">
<div class="box">
<b-skeleton></b-skeleton>
</div>
</div>
<div class="column">
<div class="box">
<b-skeleton></b-skeleton>
</div>
</div>
</div>
</div>
</main>
</section>
</div>
</template>
<script>
import AjaxErrorHandler from ".././assets/js/errorHandler";
import NoItems from "../components/NoItems"
export default {
name: 'Friends',
components: {
@ -64,82 +61,86 @@ export default {
}
},
watch: {
$route () {
this.loading = true
this.friends = []
this.offset = 0
this.category = this.$route.params.category
if(this.category === 'pendingCanAccept') {
this.name = "Requests to you"
} else if(this.category === 'pending') {
this.name = "Requests from you"
} else if(this.category === 'accepted') {
this.name = "Accepted Requests"
$route() {
this.loading = true;
this.friends = [];
this.offset = 0;
this.category = this.$route.params.category;
if (this.category === 'pendingCanAccept') {
this.name = "Requests to you";
} else if (this.category === 'pending') {
this.name = "Requests from you";
} else if (this.category === 'accepted') {
this.name = "Accepted Requests";
} else {
this.name = "Unknown"
this.name = "Unknown";
}
this.getItems()
this.getItems();
}
},
methods: {
removeFriend (user) {
removeFriend(user) {
this.axios
.put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'relationships/remove', {
friend: user.friend2.username
})
.then(() => {
this.getItems()
this.getItems();
})
.catch(e => {
this.getItems()
this.getItems();
AjaxErrorHandler(this.$store)(e)
})
AjaxErrorHandler(this.$store)(e);
});
},
doRelationshipAccept (user) {
doRelationshipAccept(user) {
this.axios
.put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'relationships/accept', {
friend: user.friend2.username
})
.then(() => {
this.getItems()
this.getItems();
})
.catch(e => {
this.getItems()
this.getItems();
AjaxErrorHandler(this.$store)(e)
})
AjaxErrorHandler(this.$store)(e);
});
},
getItems () {
this.loading = true
getItems() {
this.loading = true;
this.axios
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'relationships/getAll/' + this.category)
.then(res => {
this.friends = res.data.rows
this.count = res.data.count
this.loading = false
this.friends = res.data.rows;
this.count = res.data.count;
this.loading = false;
})
.catch((e) => {
this.loading = false
AjaxErrorHandler(this.$store)(e)
this.loading = false;
AjaxErrorHandler(this.$store)(e);
})
},
},
mounted() {
this.loading = true
this.friends = []
this.offset = 0
this.category = this.$route.params.category
if(this.category === 'pendingCanAccept') {
this.name = "Requests to you"
} else if(this.category === 'pending') {
this.name = "Requests from you"
} else if(this.category === 'accepted') {
this.name = "Accepted Requests"
} else {
this.name = "Unknown"
if (this.$store.state.user.username) {
this.loading = true;
this.friends = [];
this.offset = 0;
this.category = this.$route.params.category;
if (this.category === 'pendingCanAccept') {
this.name = "Requests to you";
} else if (this.category === 'pending') {
this.name = "Requests from you";
} else if (this.category === 'accepted') {
this.name = "Accepted Requests";
} else {
this.name = "Unknown";
}
this.getItems();
}
this.getItems()
}
}
</script>

275
src/views/Home.vue
View file

@ -8,13 +8,22 @@
<div class="title">
{{ $store.state.user.username }}
</div>
<img :src="'https://cdn.kaverti.com/user/avatars/full/' + $store.state.user.avatar + '.png'" alt="Avatar" class="is-centered" width="50%">
<img
:src="
'https://cdn.kaverti.com/user/avatars/full/' +
$store.state.user.avatar +
'.png'
"
alt="Avatar"
class="is-centered"
width="50%"
/>
</div>
<div class="title">
{{ $t('home.news') }}
{{ $t("home.news") }}
</div>
<div v-if="blogs.length">
<div class="box" v-for='(blog) in blogs' :key='"blog-" + blog.id'>
<div class="box" v-for="blog in blogs" :key="'blog-' + blog.id">
<div class="subtitle">
{{ blog.name }}
</div>
@ -30,28 +39,52 @@
<div class="column is-8" v-if="!loading">
<div class="box">
<div class="title">
{{ $t('home.globalWall') }}
{{ $t("home.globalWall") }}
</div>
<b-input type="textarea" maxlength="256" placeholder="How's it going?" v-model="wallText"></b-input>
<b-input
type="textarea"
maxlength="256"
placeholder="How's it going?"
v-model="wallText"
></b-input>
<b-tag type="is-info" class="is-pulled-right">
Markdown is no longer available on wall posts.
</b-tag>
<b-button type="is-info" ckass="is-pulled-left" :loading="loadingWallButton" @click="postWall">Post</b-button>
<b-button
type="is-info"
ckass="is-pulled-left"
:loading="loadingWallButton"
@click="postWall"
>Post</b-button
>
</div>
<hr>
<div class="box" v-for='(post) in wallPosts' :key='"wallPosts-" + post.id'>
<hr />
<div
class="box"
v-for="post in wallPosts"
:key="'wallPosts-' + post.id"
>
<article class="media">
<figure class="media-left">
<figure class="image is-64x64 is-rounded">
<img :src="'https://cdn.kaverti.com/user/avatars/headshot/' + post.fromUser.picture + '.png'" alt="Avatar" class="is-rounded">
<img
:src="
'https://cdn.kaverti.com/user/avatars/headshot/' +
post.fromUser.picture +
'.png'
"
alt="Avatar"
class="is-rounded"
/>
</figure>
</figure>
<div class="media-content">
<div class="content">
<p>
<strong>{{ post.fromUser.username }}</strong>&nbsp;
<strong>{{ post.fromUser.username }}</strong
>&nbsp;
<small>{{ post.createdAt | formatDate() }}</small>
<br>
<br />
{{ post.plainText }}
</p>
</div>
@ -67,105 +100,24 @@
</div>
</div>
</section>
<section class="hero is-info is-large is-fullheight-with-navbar" v-if="!$store.state.user.username">
<section
class="hero is-info is-large is-fullheight-with-navbar"
v-if="!$store.state.user.username"
>
<div class="hero-body">
<div class="container has-text-centered">
<div class="title">
Kaverti
</div>
<div class="title">Kaverti</div>
<div class="subtitle">
Kaverti is a new 3D sandbox gaming platform, and avatar social website.
<br>
Kaverti is a new 3D sandbox gaming platform, and avatar social
website.
<br />
Kaverti is home to hundreds of users who enjoy using it
<br>
<br />
So why not sign up today!
</div>
</div>
</div>
</section>
<section class="section hero is-white is-medium" v-if="!$store.state.user.username">
<div class="hero-body">
<div class="container has-text-centered">
<div class="title">
Statistics
</div>
<div class="columns is-centered">
<div class="column has-text-centered">
<div class="title">{{ $t('stats.users') }}</div>
<div class="box">
<div class="title" v-if="!loading">
{{ users }}
</div>
<b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
</div>
</div>
<div class="column has-text-centered">
<div class="title">{{ $t('stats.users') }}</div>
<div class="box">
<div class="title" v-if="!loading">
{{ users }}
</div>
<b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
</div>
</div>
<div class="column has-text-centered">
<div class="title">{{ $t('stats.posts') }}</div>
<div class="box">
<div class="title" v-if="!loading">
{{ posts }}
</div>
<b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
</div>
</div>
<div class="column has-text-centered">
<div class="title">{{ $t('stats.users') }}</div>
<div class="box">
<div class="title" v-if="!loading">
{{ users }}
</div>
<b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
</div>
</div>
<div class="column has-text-centered">
<div class="title">{{ $t('stats.purchased') }}</div>
<div class="box">
<div class="title" v-if="!loading">
{{ inventory }}
</div>
<b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
</div>
</div>
<div class="column has-text-centered">
<div class="title">{{ $t('stats.items') }}</div>
<div class="box">
<div class="title" v-if="!loading">
{{ items }}
</div>
<b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
</div>
</div>
<div class="column has-text-centered">
<div class="title">{{ $t('stats.teams') }}</div>
<div class="box">
<div class="title" v-if="!loading">
{{ teams }}
</div>
<b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
</div>
</div>
<div class="column has-text-centered">
<div class="title">{{ $t('stats.threads') }}</div>
<div class="box">
<div class="title" v-if="!loading">
{{ threads }}
</div>
<b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</template>
@ -174,83 +126,86 @@ import NoItems from "@/components/NoItems";
import AjaxErrorHandler from ".././assets/js/errorHandler";
export default {
name: 'Home',
name: "Home",
components: {
NoItems
NoItems,
},
data() {
return {
blogs: [],
wallOffset: 0,
wallPosts: [],
wallText: '',
mentions: '',
wallText: "",
mentions: "",
loadingWallButton: false,
loadingWall: true,
users: 0,
posts: 0,
inventory: 0,
teams: 0,
threads: 0,
items: 0,
loading: false
}
};
},
methods: {
postWall() {
this.loadingWallButton = true
this.loadingWallButton = true;
this.axios.post(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `wall/post`, {
username: "GlobalWall",
content: this.wallText
}).then(() => {
this.loadingWallButton = false
this.getWall(true)
}).catch(e => {
this.loadingWallButton = false
AjaxErrorHandler(this.$store)(e)
})
this.axios
.post(
process.env.VUE_APP_APIENDPOINT +
process.env.VUE_APP_APIVERSION +
`/` +
`wall/post`,
{
username: "GlobalWall",
content: this.wallText,
}
)
.then(() => {
this.loadingWallButton = false;
this.getWall(true);
})
.catch((e) => {
this.loadingWallButton = false;
AjaxErrorHandler(this.$store)(e);
});
},
getWall(initial) {
this.loadingWall = true
if(initial) {
this.wallOffset = 0
this.loadingWall = true;
if (initial) {
this.wallOffset = 0;
}
this.axios
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `user/GlobalWall?wall=true&offset=` + this.wallOffset)
.then(res => {
this.loadingPosts = false
this.loadingWall = false
if(initial) {
this.wallPosts = res.data.userWalls
} else {
this.wallPosts.push(...res.data.userWalls)
}
})
}
.get(
process.env.VUE_APP_APIENDPOINT +
process.env.VUE_APP_APIVERSION +
`/` +
`user/GlobalWall?wall=true&offset=` +
this.wallOffset
)
.then((res) => {
this.loadingPosts = false;
this.loadingWall = false;
if (initial) {
this.wallPosts = res.data.userWalls;
} else {
this.wallPosts.push(...res.data.userWalls);
}
});
},
},
mounted() {
this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'kaverti/stats')
.then(res => {
this.users = res.data.users
this.posts = res.data.posts
this.inventory = res.data.inventory
this.items = res.data.items
this.teams = res.data.teams
this.threads = res.data.threads
this.loading = false
}).catch(() => {
this.$buefy.snackbar.open({message:this.$t('errors.authFail'), type: 'is-warning'})
})
this.axios
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `blog/posts`)
.then(res => {
this.blogs = res.data
if (this.$store.state.user.username) {
this.axios
.get(
process.env.VUE_APP_APIENDPOINT +
process.env.VUE_APP_APIVERSION +
`/` +
`blog/posts`
)
.then((res) => {
this.blogs = res.data;
})
.catch(e => {
AjaxErrorHandler(this.$store)(e)
})
this.getWall(true)
}
}
.catch((e) => {
AjaxErrorHandler(this.$store)(e);
});
this.getWall(true);
}
},
};
</script>

4
src/views/Settings.vue
View file

@ -46,8 +46,8 @@ export default {
route: "general",
},
{
name: "Account",
route: "account",
name: "Security",
route: "security",
},
{
name: "About",

4
src/views/SettingsAbout.vue
View file

@ -1,10 +1,10 @@
<template>
<div id="settings-about">
<div class="box">
<div class="title">About</div>
<div class="title">{{ $t("settings.about.title") }}</div>
<hr />
<div class="has-text-centered">
<img src="https://cdn.kaverti.com/icon.png" width="10%" />
<img src="https://cdn.kaverti.com/icon.png" alt="Logo" width="10%" />
<p>Kaverti v{{ this.$store.state.client.clientVersion }}</p>
<p>
Latest Client Version: v{{

11
src/views/SettingsAccount.vue
View file

@ -1,11 +0,0 @@
<template>
<div id="settings-account">
</div>
</template>
<script>
export default {
name: "SettingsAccount"
}
</script>

15
src/views/SettingsSecurity.vue Normal file
View file

@ -0,0 +1,15 @@
<template>
<div id="settings-account">
<div class="box">
<div class="title">{{ $t("settings.security.title") }}</div>
<hr>
<p>We're still working on this mate.</p>
</div>
</div>
</template>
<script>
export default {
name: "SettingsAccount"
}
</script>