integrate the user module
This commit is contained in:
@@ -1,48 +1,23 @@
|
||||
<template>
|
||||
<v-app-bar color="primary" scroll-behavior="elevate" scroll-threshold="20">
|
||||
<v-app-bar color="blue" scroll-behavior="elevate" scroll-threshold="20">
|
||||
<!-- <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon> -->
|
||||
<v-app-bar-title>ProNature Administrative Console</v-app-bar-title>
|
||||
<v-menu>
|
||||
<v-app-bar-title>ProNature Playground</v-app-bar-title>
|
||||
<v-btn to="/manage" icon="mdi-wrench-cog-outline" v-if="roles.editor"></v-btn>
|
||||
<v-dialog max-width="400">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn icon="mdi-plus" variant="text" v-bind="props"></v-btn>
|
||||
<v-btn icon="mdi-account" variant="text" v-bind="props"></v-btn>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item to="/manage/game-objects/add">{{ l.createGameObject }}</v-list-item>
|
||||
<v-list-item to="/manage/scenarios/add">{{ l.createScenario }}</v-list-item>
|
||||
<v-list-item to="/manage/games/add">{{ l.createGame }}</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
<v-card class="pa-3" :title="user? 'Profile' : 'Sign in' ">
|
||||
<Auth v-if="!user"></Auth>
|
||||
<Profile v-else></Profile>
|
||||
</v-card>
|
||||
</v-dialog >
|
||||
</v-app-bar>
|
||||
|
||||
<v-navigation-drawer class="bg-secondary" expand-on-hover rail>
|
||||
<v-list>
|
||||
<v-list-item prepend-avatar="/logo.webp" subtitle="Admin Console" title="ProNature"></v-list-item>
|
||||
</v-list>
|
||||
<v-divider></v-divider>
|
||||
<v-list nav>
|
||||
<v-list-item prepend-icon="mdi-database" to="/manage/game-objects/list" :title="l.gameObjects"></v-list-item>
|
||||
<v-list-item prepend-icon="mdi-receipt-text-edit-outline" to="/manage/scenarios/list" :title="l.gameScenarios"></v-list-item>
|
||||
<!-- <v-list-item prepend-icon="mdi-cogs" :title="l.gameRules"></v-list-item> -->
|
||||
<v-divider></v-divider>
|
||||
<v-list-item prepend-icon="mdi-controller" :title="l.games" to="/manage/games/list"></v-list-item>
|
||||
<v-list-item prepend-icon="mdi-cog-play" :title="l.preview" to="/manage/preview/list"></v-list-item>
|
||||
|
||||
</v-list>
|
||||
<v-divider></v-divider>
|
||||
<v-list nav>
|
||||
<v-list-item @click="toggleTheme" prepend-icon="mdi-theme-light-dark" :title="l.darkMode"></v-list-item>
|
||||
<v-list-item prepend-icon="mdi-translate">
|
||||
<v-btn-toggle density="compact" v-model="lang" rounded="xl" color="white" variant="outlined">
|
||||
<v-btn size="small" value="bg">BG</v-btn>
|
||||
<v-btn size="small" value="en">EN</v-btn>
|
||||
</v-btn-toggle>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
import Profile from './User/Profile.vue';
|
||||
const theme = useTheme()
|
||||
|
||||
function toggleTheme () {
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<v-app-bar color="primary" scroll-behavior="elevate" scroll-threshold="20">
|
||||
<!-- <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon> -->
|
||||
<v-app-bar-title>ProNature Games Workshop</v-app-bar-title>
|
||||
<v-btn to="/" icon="mdi-seesaw" v-tooltip="'To playground'"></v-btn>
|
||||
<v-menu>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn icon="mdi-plus" variant="text" v-bind="props"></v-btn>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item to="/manage/game-objects/add">{{ l.createGameObject }}</v-list-item>
|
||||
<v-list-item to="/manage/scenarios/add">{{ l.createScenario }}</v-list-item>
|
||||
<v-list-item to="/manage/games/add">{{ l.createGame }}</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-app-bar>
|
||||
|
||||
<v-navigation-drawer class="bg-secondary" expand-on-hover rail>
|
||||
<v-list>
|
||||
<v-list-item prepend-avatar="/logo.webp" subtitle="Admin Console" title="ProNature"></v-list-item>
|
||||
</v-list>
|
||||
<v-divider></v-divider>
|
||||
<v-list nav>
|
||||
<v-list-item prepend-icon="mdi-database" to="/manage/game-objects/list" :title="l.gameObjects"></v-list-item>
|
||||
<v-list-item prepend-icon="mdi-receipt-text-edit-outline" to="/manage/scenarios/list" :title="l.gameScenarios"></v-list-item>
|
||||
<!-- <v-list-item prepend-icon="mdi-cogs" :title="l.gameRules"></v-list-item> -->
|
||||
<v-divider></v-divider>
|
||||
<v-list-item prepend-icon="mdi-controller" :title="l.games" to="/manage/games/list"></v-list-item>
|
||||
<v-list-item prepend-icon="mdi-cog-play" :title="l.preview" to="/manage/preview/list"></v-list-item>
|
||||
|
||||
</v-list>
|
||||
<v-divider></v-divider>
|
||||
<v-list nav>
|
||||
<v-list-item @click="toggleTheme" prepend-icon="mdi-theme-light-dark" :title="l.darkMode"></v-list-item>
|
||||
<v-list-item prepend-icon="mdi-translate">
|
||||
<v-btn-toggle density="compact" v-model="lang" rounded="xl" color="white" variant="outlined">
|
||||
<v-btn size="small" value="bg">BG</v-btn>
|
||||
<v-btn size="small" value="en">EN</v-btn>
|
||||
</v-btn-toggle>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
const theme = useTheme()
|
||||
|
||||
function toggleTheme () {
|
||||
theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
|
||||
}
|
||||
</script>
|
||||
@@ -35,13 +35,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { useAppStore } from '@/stores/app';
|
||||
|
||||
import GameEnvironmentMixin from '@/mixins/GameEnvironmentMixin';
|
||||
|
||||
const store = useAppStore();
|
||||
|
||||
export default {
|
||||
mixins:[GameEnvironmentMixin],
|
||||
props:{
|
||||
@@ -57,7 +52,6 @@ export default {
|
||||
scenario: null,
|
||||
renderType: 'ST',
|
||||
cameraType: 'perspective',
|
||||
store
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<v-form>
|
||||
<v-text-field label="Email" v-model="form.email" type="email" required></v-text-field>
|
||||
<v-text-field label="Password" v-model="form.password" type="password" required></v-text-field>
|
||||
<template v-if="mode==='register'">
|
||||
<v-text-field label="Confirm Password" v-model="form.passConfirm" type="password" required></v-text-field>
|
||||
<v-img :src="`/api/user/captcha?${captchaIter}`" class="my-2" height="100px"></v-img>
|
||||
<v-text-field label="Enter Captcha" v-model="form.captcha" required></v-text-field>
|
||||
</template>
|
||||
<v-btn @click="login" :color="mode==='login' ? 'green' : 'grey'">Sign in</v-btn>
|
||||
<v-btn @click="register" :color="mode==='register' ? 'green' : 'grey'" class="float-right">Sign up</v-btn>
|
||||
</v-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form:{
|
||||
email: '',
|
||||
password: '',
|
||||
passConfirm: ''
|
||||
},
|
||||
mode:'login', // or 'register'
|
||||
captchaIter: Math.random()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async login() {
|
||||
// Implement login logic here
|
||||
if (this.mode == 'login') {
|
||||
// Perform login
|
||||
await this.$api.user.signin(this.form);
|
||||
await this.loadUser();
|
||||
} else {
|
||||
this.mode = 'login';
|
||||
}
|
||||
},
|
||||
async register() {
|
||||
if (this.mode == 'register') {
|
||||
// Implement registration logic here
|
||||
await this.$api.user.signup(this.form);
|
||||
await this.loadUser();
|
||||
} else {
|
||||
this.mode = 'register';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<v-form>
|
||||
<v-text-field label="Email" disabled v-model="user.email" type="email" required></v-text-field>
|
||||
<v-text-field label="Change Password" v-model="form.password" type="password" required></v-text-field>
|
||||
<v-text-field label="Confirm Password" v-model="form.passConfirm" type="password" required></v-text-field>
|
||||
<v-btn @click="update" color="green">Update Profile</v-btn>
|
||||
<v-btn @click="signout" color="grey" class="float-right">Sign out</v-btn>
|
||||
</v-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form:{
|
||||
password: '',
|
||||
passConfirm: ''
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async signout() {
|
||||
await this.$api.user.signout();
|
||||
await this.loadUser();
|
||||
},
|
||||
async update() {
|
||||
await this.$api.user.update({...this.form, _id: this.user._id});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user