Initial Commit

This commit is contained in:
Troplo 2021-01-15 23:24:15 +11:00
commit ea7a3a8403
23 changed files with 13961 additions and 0 deletions

4
.env Normal file
View file

@ -0,0 +1,4 @@
VUE_APP_APIENDPOINT="/api/"
VUE_APP_APIVERSION="v1"
VUE_APP_GATEWAYENDPOINT="https://gateway.kaverti.com"
VUE_APP_STAGING=false

4
.env.development Normal file
View file

@ -0,0 +1,4 @@
VUE_APP_APIENDPOINT="/api/"
VUE_APP_APIVERSION="v1"
VUE_APP_GATEWAYENDPOINT="http://localhost:23981"
VUE_APP_STAGING=true

23
.gitignore vendored Normal file
View file

@ -0,0 +1,23 @@
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

24
README.md Normal file
View file

@ -0,0 +1,24 @@
#
## Project setup
```
yarn install
```
### Compiles and hot-reloads for development
```
yarn serve
```
### Compiles and minifies for production
```
yarn build
```
### Lints and fixes files
```
yarn lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

24
assets/js/errorHandler.js Normal file
View file

@ -0,0 +1,24 @@
module.exports = function(vuex) {
return function (res, ignorePathErrorCb) {
let errors = []
if(res.response === undefined || res.response.data.errors === undefined) {
errors.push('Kaverti ran into an unknown issue while attempting to perform this action, try retrying it, or try it later.')
} else {
res.response.data.errors.forEach(error => {
let path = error.path
if(path && ignorePathErrorCb) {
ignorePathErrorCb(error, errors)
return
}
errors.push(error.message[0].toUpperCase() + error.message.slice(1))
})
}
if(errors.length) {
vuex.commit('setAjaxErrors', errors)
vuex.commit('setAjaxErrorsModalState', true)
}
}
}

11
assets/scss/buefy.scss Normal file
View file

@ -0,0 +1,11 @@
@import "~bulma/sass/utilities/functions";
// Set your colors etc..
$primary: #2baaff;
$primary-invert: findColorInvert($primary);
$twitter: #4099FF;
$twitter-invert: findColorInvert($twitter);
// Import Bulma and Buefy styles
@import "~bulma";
@import "~buefy/src/scss/buefy";

5
babel.config.js Normal file
View file

@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

58
package.json Normal file
View file

@ -0,0 +1,58 @@
{
"name": "kaverti-frontend",
"version": "",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@vue/cli": "^4.5.10",
"axios": "^0.21.1",
"buefy": "^0.9.4",
"core-js": "^3.6.5",
"dotenv-webpack": "^6.0.0",
"socket.io": "^3.1.0",
"to-boolean": "^1.0.0",
"vue": "^2.6.11",
"vue-axios": "^3.2.2",
"vue-router": "^3.2.0",
"vue-socket.io": "^3.0.10",
"vuex": "^3.4.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"node-sass": "4.13.1",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
],
"_id": "@",
"readme": "ERROR: No README data found!"
}

BIN
public/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

41
public/index.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="/favicon.ico">
<title>Kaverti</title>
<meta name="title" content="Kaverti">
<meta name="description" content="Kaverti allows you to chat, and socialize on our platform, with our ever expanding platform, and our gaming platform will allow users to create games, and avatars with user created items from our virtual Marketplace.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://kaverti.com">
<meta property="og:title" content="Kaverti">
<meta property="og:description" content="Kaverti allows you to chat, and socialize on our platform, with our ever expanding platform, and our gaming platform will allow users to create games, and avatars with user created items from our virtual Marketplace.">
<meta property="og:image" content="https://cdn.kaverti.com/opengraph-image.png">
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://kaverti.com">
<meta property="twitter:title" content="Kaverti">
<meta property="twitter:description" content="Kaverti allows you to chat, and socialize on our platform, with our ever expanding platform, and our gaming platform will allow users to create games, and avatars with user created items from our virtual Marketplace.">
<meta property="twitter:image" content="https://cdn.kaverti.com/opengraph-image.png">
<script src="https://polyfill.io/v3/polyfill.min.js?features=es2015%2Ces2016%2Ces2018%2Ces2019%2Ces2017%2Ces6%2Ces5%2Ces7%2Cdefault%2CIntl%2Cblissfuljs"></script>
<script>
function isIE() {
ua = navigator.userAgent;
var is_ie = ua.indexOf("MSIE ") > -1 || ua.indexOf("Trident/") > -1;
return is_ie;
}
if (isIE()){
document.write('<h2>Kaverti does not support any Internet Explorer version, and we most likely will not implement support, this page will not render properly with all Internet Explorer versions, please use Chrome, Firefox, Opera, Edge, or another modern browser, if you\'re using a modern browser, please disregard this message, and report it on the forums.</h2>');
}
</script>
</head>
<body>
<noscript>
<strong>We're sorry but Kaverti doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

32
src/App.vue Normal file
View file

@ -0,0 +1,32 @@
<style lang="scss">
@import './assets/scss/buefy';
</style>
<template>
<div id="app">
<div id="navigation">
<Navbar/>
</div>
<div id="router">
<router-view/>
</div>
<div id="footer">
<Footer/>
</div>
</div>
</template>
<script>
import Navbar from './components/Navbar'
import Footer from './components/Footer'
export default {
name: 'KavertiApp',
components: {
Navbar,
Footer
},
mounted() {
if(this.$store.state.debug) {
this.$buefy.snackbar.open({message:`Warning: You are using a development build of Kaverti, expect instabilities.`, type: 'is-warning'})
}
}
}
</script>

BIN
src/assets/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

View file

@ -0,0 +1,5 @@
<template>
<div class="footer">
<h1>&copy; 2021 Kaverti</h1>
</div>
</template>

238
src/components/Navbar.vue Normal file
View file

@ -0,0 +1,238 @@
<template>
<nav>
<b-modal :active="loginModal" @update:active="value => loginModal = value" :width="640" scroll="keep">
<b-form>
<div class="modal-card" style="width: auto">
<header class="modal-card-head">
<p class="modal-card-title">Login to Kaverti</p>
<button
type="button"
class="delete"
@click="$emit('close')"/>
</header>
<section class="modal-card-body">
<b-field label="Username or Email">
<b-input
:value="login.username"
v-model="login.username"
placeholder="Your username or email"
required>
</b-input>
</b-field>
<b-field label="Password">
<b-input
type="password"
:value="login.password"
v-model="login.password"
password-reveal
placeholder="Your password"
required>
</b-input>
</b-field>
</section>
<footer class="modal-card-foot">
<b-button
label="Close"
@click="$emit('close')" />
<b-button
@click="doLogin()"
label="Login"
:loading="login.loading"
type="is-primary" />
</footer>
</div>
</b-form>
</b-modal>
<b-modal :active="registerModal" @update:active="value => registerModal = value" :width="640" scroll="keep">
<b-form>
<div class="modal-card" style="width: auto">
<header class="modal-card-head">
<p class="modal-card-title">Register to Kaverti</p>
<button
type="button"
class="delete"
@click="$emit('close')"/>
</header>
<section class="modal-card-body">
<b-field label="Username">
<b-input
:value="register.username"
v-model="register.username"
placeholder="Your username or email"
required>
</b-input>
</b-field>
<b-field label="Email">
<b-input
type="email"
:value="register.email"
v-model="register.email"
placeholder="Your username or email"
required>
</b-input>
</b-field>
<b-field label="Password">
<b-input
type="password"
:value="register.password"
v-model="register.password"
password-reveal
placeholder="Your password"
required>
</b-input>
</b-field>
<b-field label="Password Confirmation">
<b-input
type="password"
:value="register.confirm"
v-model="register.confirm"
password-reveal
placeholder="Your password"
required>
</b-input>
</b-field>
<b-checkbox v-model="register.agree">I agree to the <router-link to="/legal/tos">Terms of Service</router-link></b-checkbox>
</section>
<footer class="modal-card-foot">
<b-button
label="Close"
@click="$emit('close')" />
<b-button
@click="doRegister()"
label="Register"
:loading="register.loading"
type="is-primary" />
</footer>
</div>
</b-form>
</b-modal>
<b-navbar>
<template #brand>
<b-navbar-item tag="router-link" :to="{ path: '/' }">
<img
src="https://cdn.kaverti.com/logo.png"
alt="Kaverti Logo"
>
</b-navbar-item>
</template>
<template #start>
<b-navbar-item href="#">
Home
</b-navbar-item>
<b-navbar-item href="#">
Documentation
</b-navbar-item>
<div v-if="$store.state.debug" class="navbar-item has-dropdown is-hoverable is-info">
<a class="navbar-link">
<p>Developer Options</p>
</a>
<div class="navbar-dropdown is-boxed">
<b-navbar-item tag="router-link" to="/debug">Debug Page</b-navbar-item>
</div>
</div>
</template>
<template #end>
<b-navbar-item tag="div">
<div class="buttons">
<b-button @click="registerModal = true" class="button is-primary">
<strong>Register</strong>
</b-button>
<b-button @click="loginModal = true" class="button is-light">
Log in
</b-button>
</div>
</b-navbar-item>
</template>
</b-navbar>
</nav>
</template>
<script>
import AjaxErrorHandler from '../../assets/js/errorHandler'
export default {
data() {
return {
loginModal: false,
registerModal: false,
login: {
username: '',
password: '',
loading: false
},
register: {
username: '',
email: '',
password: '',
confirm: '',
agree: false,
loading: false
}
}
},
methods: {
doRegister() {
this.register.loading = true
this.axios.post('/api/v1/users/register', {
username: this.register.username,
password: this.register.password,
email: this.register.email,
confirm: this.register.confirm,
agree: this.register.agree
}).then((res) => {
this.register.loading = false
this.$store.commit('setUsername', res.data.username)
this.$store.commit('setAvatar', res.data.avatar)
this.$store.commit('setID', res.data.id)
this.$store.commit('setEmailVerified', res.data.emailVerified)
this.$store.commit('setEmail', res.data.email)
this.$store.commit('setAdmin', res.data.admin)
this.$store.commit('setToken', res.data.token)
}).catch(e => {
this.register.loading = false
AjaxErrorHandler(this.$store)(e, (error, errors) => {
let path = error.path
if (this.errors[path] !== undefined) {
this.errors[path] = error.message
} else {
errors.push(error.message)
}
})
})
},
doLogin() {
this.login.loading = true
this.axios.post('/api/v1/users/login', {
username: this.register.username,
password: this.register.password,
email: this.register.email,
confirm: this.register.confirm,
agree: this.register.agree
}).then((res) => {
this.register.loading = false
this.$store.commit('setUsername', res.data.username)
this.$store.commit('setAvatar', res.data.avatar)
this.$store.commit('setID', res.data.id)
this.$store.commit('setEmailVerified', res.data.emailVerified)
this.$store.commit('setEmail', res.data.email)
this.$store.commit('setAdmin', res.data.admin)
this.$store.commit('setToken', res.data.token)
}).catch(e => {
this.register.loading = false
AjaxErrorHandler(this.$store)(e, (error, errors) => {
let path = error.path
if (this.errors[path] !== undefined) {
this.errors[path] = error.message
} else {
errors.push(error.message)
}
})
})
}
}
}
</script>

143
src/components/Sidebar.vue Normal file
View file

@ -0,0 +1,143 @@
<template>
<div class="sidebar-page">
<section class="sidebar-layout">
<b-sidebar
position="static"
:mobile="mobile"
:expand-on-hover="expandOnHover"
:reduce="reduce"
type="is-light"
open
>
<div class="p-1">
<div class="block">
<img
src="https://raw.githubusercontent.com/buefy/buefy/dev/static/img/buefy-logo.png"
alt="Lightweight UI components for Vue.js based on Bulma"
/>
</div>
<b-menu class="is-custom-mobile">
<b-menu-list label="Menu">
<b-menu-item icon="information-outline" label="Info"></b-menu-item>
<b-menu-item active expanded icon="settings" label="Administrator">
<b-menu-item icon="account" label="Users"></b-menu-item>
<b-menu-item icon="cellphone-link" label="Devices"></b-menu-item>
<b-menu-item icon="cash-multiple" label="Payments" disabled></b-menu-item>
</b-menu-item>
<b-menu-item icon="account" label="My Account">
<b-menu-item icon="account-box" label="Account data"></b-menu-item>
<b-menu-item icon="home-account" label="Addresses"></b-menu-item>
</b-menu-item>
</b-menu-list>
<b-menu-list>
<b-menu-item label="Expo" icon="link"></b-menu-item>
</b-menu-list>
<b-menu-list label="Actions">
<b-menu-item icon="logout" label="Logout"></b-menu-item>
</b-menu-list>
</b-menu>
</div>
</b-sidebar>
</section>
</div>
</template>
<script>
export default {
data() {
return {
expandOnHover: false,
mobile: "reduce",
reduce: false
};
}
};
</script>
<style lang="scss">
.p-1 {
padding: 1em;
}
.sidebar-page {
display: flex;
flex-direction: column;
width: 100%;
min-height: 100%;
// min-height: 100vh;
.sidebar-layout {
display: flex;
flex-direction: row;
min-height: 100%;
// min-height: 100vh;
}
}
@media screen and (max-width: 1023px) {
.b-sidebar {
.sidebar-content {
&.is-mini-mobile {
&:not(.is-mini-expand),
&.is-mini-expand:not(:hover) {
.menu-list {
li {
a {
span:nth-child(2) {
display: none;
}
}
ul {
padding-left: 0;
li {
a {
display: inline-block;
}
}
}
}
}
.menu-label:not(:last-child) {
margin-bottom: 0;
}
}
}
}
}
}
@media screen and (min-width: 1024px) {
.b-sidebar {
.sidebar-content {
&.is-mini {
&:not(.is-mini-expand),
&.is-mini-expand:not(:hover) {
.menu-list {
li {
a {
span:nth-child(2) {
display: none;
}
}
ul {
padding-left: 0;
li {
a {
display: inline-block;
}
}
}
}
}
.menu-label:not(:last-child) {
margin-bottom: 0;
}
}
}
}
}
}
.is-mini-expand {
.menu-list a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
</style>

16
src/main.js Normal file
View file

@ -0,0 +1,16 @@
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Buefy from 'buefy'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
Vue.use(Buefy)
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')

34
src/router/index.js Normal file
View file

@ -0,0 +1,34 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
function route(view){
return() => import(`@/views/${view}.vue`)
}
const routes = [
{
path: '/',
name: 'Home',
component: route('Home')
},
{
path: '/about',
name: 'About',
component: route('About')
},
{
path: '/debug',
name: 'Debug',
component: route('Debug')
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router

25
src/store/index.js Normal file
View file

@ -0,0 +1,25 @@
import Vue from 'vue'
import Vuex from 'vuex'
import tb from 'to-boolean';
Vue.use(Vuex)
export default new Vuex.Store({
state: {
name: "Kaverti",
debug: tb(process.env.VUE_APP_STAGING),
errors: {
errors: [],
modal: false
}
},
mutations: {
turnOffDebug(state) {
state.debug = false
},
},
actions: {
},
modules: {
}
})

5
src/views/About.vue Normal file
View file

@ -0,0 +1,5 @@
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>

23
src/views/Debug.vue Normal file
View file

@ -0,0 +1,23 @@
<template>
<main>
<div class="column">
<div class="box">
Debug mode turned on: {{$store.state.debug}}
<br>
<b-button v-if="$store.state.debug" @click="turnOffDebug">Turn off</b-button>
</div>
</div>
</main>
</template>
<script>
export default {
name: "Debug",
methods: {
turnOffDebug () {
this.$store.commit('turnOffDebug')
this.$buefy.snackbar.open(`Debug mode disabled, you will no longer have access to development features until you refresh.`)
}
}
}
</script>

11
src/views/Home.vue Normal file
View file

@ -0,0 +1,11 @@
<template>
<main>
DEBUG HOME
</main>
</template>
<script>
export default {
name: 'Home'
}
</script>

13
vue.config.js Normal file
View file

@ -0,0 +1,13 @@
const Dotenv = require('dotenv-webpack');
module.exports = {
devServer: {
proxy: 'http://localhost:23981'
},
publicPath: '/',
productionSourceMap: false,
configureWebpack: {
plugins: [
new Dotenv()
]
}
}

13222
yarn.lock Normal file

File diff suppressed because it is too large Load diff