♻ Move project source files to top level from src, update Sentry dependency (#630)
Co-authored-by: Sebastián Ramírez <tiangolo@gmail.com>
This commit is contained in:
Esteban Maya
58
frontend/src/views/Login.vue
Normal file
58
frontend/src/views/Login.vue
Normal file
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<v-content>
|
||||
<v-container fluid fill-height>
|
||||
<v-layout align-center justify-center>
|
||||
<v-flex xs12 sm8 md4>
|
||||
<v-card class="elevation-12">
|
||||
<v-toolbar dark color="primary">
|
||||
<v-toolbar-title>{{appName}}</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
</v-toolbar>
|
||||
<v-card-text>
|
||||
<v-form @keyup.enter="submit">
|
||||
<v-text-field @keyup.enter="submit" v-model="email" prepend-icon="person" name="login" label="Login" type="text"></v-text-field>
|
||||
<v-text-field @keyup.enter="submit" v-model="password" prepend-icon="lock" name="password" label="Password" id="password" type="password"></v-text-field>
|
||||
</v-form>
|
||||
<div v-if="loginError">
|
||||
<v-alert :value="loginError" transition="fade-transition" type="error">
|
||||
Incorrect email or password
|
||||
</v-alert>
|
||||
</div>
|
||||
<v-flex class="caption text-xs-right"><router-link to="/recover-password">Forgot your password?</router-link></v-flex>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn @click.prevent="submit">Login</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-content>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import { api } from '@/api';
|
||||
import { appName } from '@/env';
|
||||
import { readLoginError } from '@/store/main/getters';
|
||||
import { dispatchLogIn } from '@/store/main/actions';
|
||||
|
||||
@Component
|
||||
export default class Login extends Vue {
|
||||
public email: string = '';
|
||||
public password: string = '';
|
||||
public appName = appName;
|
||||
|
||||
public get loginError() {
|
||||
return readLoginError(this.$store);
|
||||
}
|
||||
|
||||
public submit() {
|
||||
dispatchLogIn(this.$store, {username: this.email, password: this.password});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
52
frontend/src/views/PasswordRecovery.vue
Normal file
52
frontend/src/views/PasswordRecovery.vue
Normal file
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<v-content>
|
||||
<v-container fluid fill-height>
|
||||
<v-layout align-center justify-center>
|
||||
<v-flex xs12 sm8 md4>
|
||||
<v-card class="elevation-12">
|
||||
<v-toolbar dark color="primary">
|
||||
<v-toolbar-title>{{appName}} - Password Recovery</v-toolbar-title>
|
||||
</v-toolbar>
|
||||
<v-card-text>
|
||||
<p class="subheading">A password recovery email will be sent to the registered account</p>
|
||||
<v-form @keyup.enter="submit" v-model="valid" ref="form" @submit.prevent="" lazy-validation>
|
||||
<v-text-field @keyup.enter="submit" label="Username" type="text" prepend-icon="person" v-model="username" v-validate="'required'" data-vv-name="username" :error-messages="errors.collect('username')" required></v-text-field>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn @click="cancel">Cancel</v-btn>
|
||||
<v-btn @click.prevent="submit" :disabled="!valid">
|
||||
Recover Password
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-content>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import { appName } from '@/env';
|
||||
import { dispatchPasswordRecovery } from '@/store/main/actions';
|
||||
|
||||
@Component
|
||||
export default class Login extends Vue {
|
||||
public valid = true;
|
||||
public username: string = '';
|
||||
public appName = appName;
|
||||
|
||||
public cancel() {
|
||||
this.$router.back();
|
||||
}
|
||||
|
||||
public submit() {
|
||||
dispatchPasswordRecovery(this.$store, { username: this.username });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
84
frontend/src/views/ResetPassword.vue
Normal file
84
frontend/src/views/ResetPassword.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<v-content>
|
||||
<v-container fluid fill-height>
|
||||
<v-layout align-center justify-center>
|
||||
<v-flex xs12 sm8 md4>
|
||||
<v-card class="elevation-12">
|
||||
<v-toolbar dark color="primary">
|
||||
<v-toolbar-title>{{appName}} - Reset Password</v-toolbar-title>
|
||||
</v-toolbar>
|
||||
<v-card-text>
|
||||
<p class="subheading">Enter your new password below</p>
|
||||
<v-form @keyup.enter="submit" v-model="valid" ref="form" @submit.prevent="" lazy-validation>
|
||||
<v-text-field type="password" ref="password" label="Password" data-vv-name="password" data-vv-delay="100" data-vv-rules="required" v-validate="'required'" v-model="password1" :error-messages="errors.first('password')">
|
||||
</v-text-field>
|
||||
<v-text-field type="password" label="Confirm Password" data-vv-name="password_confirmation" data-vv-delay="100" data-vv-rules="required|confirmed:$password" data-vv-as="password" v-validate="'required|confirmed:password'" v-model="password2" :error-messages="errors.first('password_confirmation')">
|
||||
</v-text-field>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn @click="cancel">Cancel</v-btn>
|
||||
<v-btn @click="reset">Clear</v-btn>
|
||||
<v-btn @click="submit" :disabled="!valid">Save</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-content>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import { Store } from 'vuex';
|
||||
import { IUserProfileUpdate } from '@/interfaces';
|
||||
import { appName } from '@/env';
|
||||
import { commitAddNotification } from '@/store/main/mutations';
|
||||
import { dispatchResetPassword } from '@/store/main/actions';
|
||||
|
||||
@Component
|
||||
export default class UserProfileEdit extends Vue {
|
||||
public appName = appName;
|
||||
public valid = true;
|
||||
public password1 = '';
|
||||
public password2 = '';
|
||||
|
||||
public mounted() {
|
||||
this.checkToken();
|
||||
}
|
||||
|
||||
public reset() {
|
||||
this.password1 = '';
|
||||
this.password2 = '';
|
||||
this.$validator.reset();
|
||||
}
|
||||
|
||||
public cancel() {
|
||||
this.$router.push('/');
|
||||
}
|
||||
|
||||
public checkToken() {
|
||||
const token = (this.$router.currentRoute.query.token as string);
|
||||
if (!token) {
|
||||
commitAddNotification(this.$store, {
|
||||
content: 'No token provided in the URL, start a new password recovery',
|
||||
color: 'error',
|
||||
});
|
||||
this.$router.push('/recover-password');
|
||||
} else {
|
||||
return token;
|
||||
}
|
||||
}
|
||||
|
||||
public async submit() {
|
||||
if (await this.$validator.validateAll()) {
|
||||
const token = this.checkToken();
|
||||
if (token) {
|
||||
await dispatchResetPassword(this.$store, { token, password: this.password1 });
|
||||
this.$router.push('/');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
37
frontend/src/views/main/Dashboard.vue
Normal file
37
frontend/src/views/main/Dashboard.vue
Normal file
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<v-card class="ma-3 pa-3">
|
||||
<v-card-title primary-title>
|
||||
<div class="headline primary--text">Dashboard</div>
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="headline font-weight-light ma-5">Welcome {{greetedUser}}</div>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-btn to="/main/profile/view">View Profile</v-btn>
|
||||
<v-btn to="/main/profile/edit">Edit Profile</v-btn>
|
||||
<v-btn to="/main/profile/password">Change Password</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import { Store } from 'vuex';
|
||||
import { readUserProfile } from '@/store/main/getters';
|
||||
|
||||
@Component
|
||||
export default class Dashboard extends Vue {
|
||||
get greetedUser() {
|
||||
const userProfile = readUserProfile(this.$store);
|
||||
if (userProfile) {
|
||||
if (userProfile.full_name) {
|
||||
return userProfile.full_name;
|
||||
} else {
|
||||
return userProfile.email;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
182
frontend/src/views/main/Main.vue
Normal file
182
frontend/src/views/main/Main.vue
Normal file
@@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-navigation-drawer persistent :mini-variant="miniDrawer" v-model="showDrawer" fixed app>
|
||||
<v-layout column fill-height>
|
||||
<v-list>
|
||||
<v-subheader>Main menu</v-subheader>
|
||||
<v-list-tile to="/main/dashboard">
|
||||
<v-list-tile-action>
|
||||
<v-icon>web</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Dashboard</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
<v-list-tile to="/main/profile/view">
|
||||
<v-list-tile-action>
|
||||
<v-icon>person</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Profile</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
<v-list-tile to="/main/profile/edit">
|
||||
<v-list-tile-action>
|
||||
<v-icon>edit</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Edit Profile</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
<v-list-tile to="/main/profile/password">
|
||||
<v-list-tile-action>
|
||||
<v-icon>vpn_key</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Change Password</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
</v-list>
|
||||
<v-divider></v-divider>
|
||||
<v-list subheader v-show="hasAdminAccess">
|
||||
<v-subheader>Admin</v-subheader>
|
||||
<v-list-tile to="/main/admin/users/all">
|
||||
<v-list-tile-action>
|
||||
<v-icon>group</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Manage Users</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
<v-list-tile to="/main/admin/users/create">
|
||||
<v-list-tile-action>
|
||||
<v-icon>person_add</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Create User</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
</v-list>
|
||||
<v-spacer></v-spacer>
|
||||
<v-list>
|
||||
<v-list-tile @click="logout">
|
||||
<v-list-tile-action>
|
||||
<v-icon>close</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Logout</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
<v-divider></v-divider>
|
||||
<v-list-tile @click="switchMiniDrawer">
|
||||
<v-list-tile-action>
|
||||
<v-icon v-html="miniDrawer ? 'chevron_right' : 'chevron_left'"></v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Collapse</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
</v-list>
|
||||
</v-layout>
|
||||
</v-navigation-drawer>
|
||||
<v-toolbar dark color="primary" app>
|
||||
<v-toolbar-side-icon @click.stop="switchShowDrawer"></v-toolbar-side-icon>
|
||||
<v-toolbar-title v-text="appName"></v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-menu bottom left offset-y>
|
||||
<v-btn slot="activator" icon>
|
||||
<v-icon>more_vert</v-icon>
|
||||
</v-btn>
|
||||
<v-list>
|
||||
<v-list-tile to="/main/profile">
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Profile</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
<v-list-tile-action>
|
||||
<v-icon>person</v-icon>
|
||||
</v-list-tile-action>
|
||||
</v-list-tile>
|
||||
<v-list-tile @click="logout">
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Logout</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
<v-list-tile-action>
|
||||
<v-icon>close</v-icon>
|
||||
</v-list-tile-action>
|
||||
</v-list-tile>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-toolbar>
|
||||
<v-content>
|
||||
<router-view></router-view>
|
||||
</v-content>
|
||||
<v-footer class="pa-3" fixed app>
|
||||
<v-spacer></v-spacer>
|
||||
<span>© {{appName}}</span>
|
||||
</v-footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue, Component } from 'vue-property-decorator';
|
||||
|
||||
import { appName } from '@/env';
|
||||
import { readDashboardMiniDrawer, readDashboardShowDrawer, readHasAdminAccess } from '@/store/main/getters';
|
||||
import { commitSetDashboardShowDrawer, commitSetDashboardMiniDrawer } from '@/store/main/mutations';
|
||||
import { dispatchUserLogOut } from '@/store/main/actions';
|
||||
|
||||
const routeGuardMain = async (to, from, next) => {
|
||||
if (to.path === '/main') {
|
||||
next('/main/dashboard');
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
};
|
||||
|
||||
@Component
|
||||
export default class Main extends Vue {
|
||||
public appName = appName;
|
||||
|
||||
public beforeRouteEnter(to, from, next) {
|
||||
routeGuardMain(to, from, next);
|
||||
}
|
||||
|
||||
public beforeRouteUpdate(to, from, next) {
|
||||
routeGuardMain(to, from, next);
|
||||
}
|
||||
|
||||
get miniDrawer() {
|
||||
return readDashboardMiniDrawer(this.$store);
|
||||
}
|
||||
|
||||
get showDrawer() {
|
||||
return readDashboardShowDrawer(this.$store);
|
||||
}
|
||||
|
||||
set showDrawer(value) {
|
||||
commitSetDashboardShowDrawer(this.$store, value);
|
||||
}
|
||||
|
||||
public switchShowDrawer() {
|
||||
commitSetDashboardShowDrawer(
|
||||
this.$store,
|
||||
!readDashboardShowDrawer(this.$store),
|
||||
);
|
||||
}
|
||||
|
||||
public switchMiniDrawer() {
|
||||
commitSetDashboardMiniDrawer(
|
||||
this.$store,
|
||||
!readDashboardMiniDrawer(this.$store),
|
||||
);
|
||||
}
|
||||
|
||||
public get hasAdminAccess() {
|
||||
return readHasAdminAccess(this.$store);
|
||||
}
|
||||
|
||||
public async logout() {
|
||||
await dispatchUserLogOut(this.$store);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
38
frontend/src/views/main/Start.vue
Normal file
38
frontend/src/views/main/Start.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import { store } from '@/store';
|
||||
import { dispatchCheckLoggedIn } from '@/store/main/actions';
|
||||
import { readIsLoggedIn } from '@/store/main/getters';
|
||||
|
||||
const startRouteGuard = async (to, from, next) => {
|
||||
await dispatchCheckLoggedIn(store);
|
||||
if (readIsLoggedIn(store)) {
|
||||
if (to.path === '/login' || to.path === '/') {
|
||||
next('/main');
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
} else if (readIsLoggedIn(store) === false) {
|
||||
if (to.path === '/' || (to.path as string).startsWith('/main')) {
|
||||
next('/login');
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@Component
|
||||
export default class Start extends Vue {
|
||||
public beforeRouteEnter(to, from, next) {
|
||||
startRouteGuard(to, from, next);
|
||||
}
|
||||
|
||||
public beforeRouteUpdate(to, from, next) {
|
||||
startRouteGuard(to, from, next);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
28
frontend/src/views/main/admin/Admin.vue
Normal file
28
frontend/src/views/main/admin/Admin.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import { store } from '@/store';
|
||||
import { readHasAdminAccess } from '@/store/main/getters';
|
||||
|
||||
const routeGuardAdmin = async (to, from, next) => {
|
||||
if (!readHasAdminAccess(store)) {
|
||||
next('/main');
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
};
|
||||
|
||||
@Component
|
||||
export default class Admin extends Vue {
|
||||
public beforeRouteEnter(to, from, next) {
|
||||
routeGuardAdmin(to, from, next);
|
||||
}
|
||||
|
||||
public beforeRouteUpdate(to, from, next) {
|
||||
routeGuardAdmin(to, from, next);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
83
frontend/src/views/main/admin/AdminUsers.vue
Normal file
83
frontend/src/views/main/admin/AdminUsers.vue
Normal file
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-toolbar light>
|
||||
<v-toolbar-title>
|
||||
Manage Users
|
||||
</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="primary" to="/main/admin/users/create">Create User</v-btn>
|
||||
</v-toolbar>
|
||||
<v-data-table :headers="headers" :items="users">
|
||||
<template slot="items" slot-scope="props">
|
||||
<td>{{ props.item.name }}</td>
|
||||
<td>{{ props.item.email }}</td>
|
||||
<td>{{ props.item.full_name }}</td>
|
||||
<td><v-icon v-if="props.item.is_active">checkmark</v-icon></td>
|
||||
<td><v-icon v-if="props.item.is_superuser">checkmark</v-icon></td>
|
||||
<td class="justify-center layout px-0">
|
||||
<v-tooltip top>
|
||||
<span>Edit</span>
|
||||
<v-btn slot="activator" flat :to="{name: 'main-admin-users-edit', params: {id: props.item.id}}">
|
||||
<v-icon>edit</v-icon>
|
||||
</v-btn>
|
||||
</v-tooltip>
|
||||
</td>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import { Store } from 'vuex';
|
||||
import { IUserProfile } from '@/interfaces';
|
||||
import { readAdminUsers } from '@/store/admin/getters';
|
||||
import { dispatchGetUsers } from '@/store/admin/actions';
|
||||
|
||||
@Component
|
||||
export default class AdminUsers extends Vue {
|
||||
public headers = [
|
||||
{
|
||||
text: 'Name',
|
||||
sortable: true,
|
||||
value: 'name',
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
text: 'Email',
|
||||
sortable: true,
|
||||
value: 'email',
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
text: 'Full Name',
|
||||
sortable: true,
|
||||
value: 'full_name',
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
text: 'Is Active',
|
||||
sortable: true,
|
||||
value: 'isActive',
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
text: 'Is Superuser',
|
||||
sortable: true,
|
||||
value: 'isSuperuser',
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
text: 'Actions',
|
||||
value: 'id',
|
||||
},
|
||||
];
|
||||
get users() {
|
||||
return readAdminUsers(this.$store);
|
||||
}
|
||||
|
||||
public async mounted() {
|
||||
await dispatchGetUsers(this.$store);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
97
frontend/src/views/main/admin/CreateUser.vue
Normal file
97
frontend/src/views/main/admin/CreateUser.vue
Normal file
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<v-card class="ma-3 pa-3">
|
||||
<v-card-title primary-title>
|
||||
<div class="headline primary--text">Create User</div>
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<template>
|
||||
<v-form v-model="valid" ref="form" lazy-validation>
|
||||
<v-text-field label="Full Name" v-model="fullName" required></v-text-field>
|
||||
<v-text-field label="E-mail" type="email" v-model="email" v-validate="'required|email'" data-vv-name="email" :error-messages="errors.collect('email')" required></v-text-field>
|
||||
<div class="subheading secondary--text text--lighten-2">User is superuser <span v-if="isSuperuser">(currently is a superuser)</span><span v-else>(currently is not a superuser)</span></div>
|
||||
<v-checkbox label="Is Superuser" v-model="isSuperuser"></v-checkbox>
|
||||
<div class="subheading secondary--text text--lighten-2">User is active <span v-if="isActive">(currently active)</span><span v-else>(currently not active)</span></div>
|
||||
<v-checkbox label="Is Active" v-model="isActive"></v-checkbox>
|
||||
<v-layout align-center>
|
||||
<v-flex>
|
||||
<v-text-field type="password" ref="password" label="Set Password" data-vv-name="password" data-vv-delay="100" v-validate="{required: true}" v-model="password1" :error-messages="errors.first('password')">
|
||||
</v-text-field>
|
||||
<v-text-field type="password" label="Confirm Password" data-vv-name="password_confirmation" data-vv-delay="100" data-vv-as="password" v-validate="{required: true, confirmed: 'password'}" v-model="password2" :error-messages="errors.first('password_confirmation')">
|
||||
</v-text-field>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-form>
|
||||
</template>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn @click="cancel">Cancel</v-btn>
|
||||
<v-btn @click="reset">Reset</v-btn>
|
||||
<v-btn @click="submit" :disabled="!valid">
|
||||
Save
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import {
|
||||
IUserProfile,
|
||||
IUserProfileUpdate,
|
||||
IUserProfileCreate,
|
||||
} from '@/interfaces';
|
||||
import { dispatchGetUsers, dispatchCreateUser } from '@/store/admin/actions';
|
||||
|
||||
@Component
|
||||
export default class CreateUser extends Vue {
|
||||
public valid = false;
|
||||
public fullName: string = '';
|
||||
public email: string = '';
|
||||
public isActive: boolean = true;
|
||||
public isSuperuser: boolean = false;
|
||||
public setPassword = false;
|
||||
public password1: string = '';
|
||||
public password2: string = '';
|
||||
|
||||
public async mounted() {
|
||||
await dispatchGetUsers(this.$store);
|
||||
this.reset();
|
||||
}
|
||||
|
||||
public reset() {
|
||||
this.password1 = '';
|
||||
this.password2 = '';
|
||||
this.fullName = '';
|
||||
this.email = '';
|
||||
this.isActive = true;
|
||||
this.isSuperuser = false;
|
||||
this.$validator.reset();
|
||||
}
|
||||
|
||||
public cancel() {
|
||||
this.$router.back();
|
||||
}
|
||||
|
||||
public async submit() {
|
||||
if (await this.$validator.validateAll()) {
|
||||
const updatedProfile: IUserProfileCreate = {
|
||||
email: this.email,
|
||||
};
|
||||
if (this.fullName) {
|
||||
updatedProfile.full_name = this.fullName;
|
||||
}
|
||||
if (this.email) {
|
||||
updatedProfile.email = this.email;
|
||||
}
|
||||
updatedProfile.is_active = this.isActive;
|
||||
updatedProfile.is_superuser = this.isSuperuser;
|
||||
updatedProfile.password = this.password1;
|
||||
await dispatchCreateUser(this.$store, updatedProfile);
|
||||
this.$router.push('/main/admin/users');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
163
frontend/src/views/main/admin/EditUser.vue
Normal file
163
frontend/src/views/main/admin/EditUser.vue
Normal file
@@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<v-card class="ma-3 pa-3">
|
||||
<v-card-title primary-title>
|
||||
<div class="headline primary--text">Edit User</div>
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<template>
|
||||
<div class="my-3">
|
||||
<div class="subheading secondary--text text--lighten-2">Username</div>
|
||||
<div
|
||||
class="title primary--text text--darken-2"
|
||||
v-if="user"
|
||||
>{{user.email}}</div>
|
||||
<div
|
||||
class="title primary--text text--darken-2"
|
||||
v-else
|
||||
>-----</div>
|
||||
</div>
|
||||
<v-form
|
||||
v-model="valid"
|
||||
ref="form"
|
||||
lazy-validation
|
||||
>
|
||||
<v-text-field
|
||||
label="Full Name"
|
||||
v-model="fullName"
|
||||
required
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
label="E-mail"
|
||||
type="email"
|
||||
v-model="email"
|
||||
v-validate="'required|email'"
|
||||
data-vv-name="email"
|
||||
:error-messages="errors.collect('email')"
|
||||
required
|
||||
></v-text-field>
|
||||
<div class="subheading secondary--text text--lighten-2">User is superuser <span v-if="isSuperuser">(currently is a superuser)</span><span v-else>(currently is not a superuser)</span></div>
|
||||
<v-checkbox
|
||||
label="Is Superuser"
|
||||
v-model="isSuperuser"
|
||||
></v-checkbox>
|
||||
<div class="subheading secondary--text text--lighten-2">User is active <span v-if="isActive">(currently active)</span><span v-else>(currently not active)</span></div>
|
||||
<v-checkbox
|
||||
label="Is Active"
|
||||
v-model="isActive"
|
||||
></v-checkbox>
|
||||
<v-layout align-center>
|
||||
<v-flex shrink>
|
||||
<v-checkbox
|
||||
v-model="setPassword"
|
||||
class="mr-2"
|
||||
></v-checkbox>
|
||||
</v-flex>
|
||||
<v-flex>
|
||||
<v-text-field
|
||||
:disabled="!setPassword"
|
||||
type="password"
|
||||
ref="password"
|
||||
label="Set Password"
|
||||
data-vv-name="password"
|
||||
data-vv-delay="100"
|
||||
v-validate="{required: setPassword}"
|
||||
v-model="password1"
|
||||
:error-messages="errors.first('password')"
|
||||
>
|
||||
</v-text-field>
|
||||
<v-text-field
|
||||
v-show="setPassword"
|
||||
type="password"
|
||||
label="Confirm Password"
|
||||
data-vv-name="password_confirmation"
|
||||
data-vv-delay="100"
|
||||
data-vv-as="password"
|
||||
v-validate="{required: setPassword, confirmed: 'password'}"
|
||||
v-model="password2"
|
||||
:error-messages="errors.first('password_confirmation')"
|
||||
>
|
||||
</v-text-field>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-form>
|
||||
</template>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn @click="cancel">Cancel</v-btn>
|
||||
<v-btn @click="reset">Reset</v-btn>
|
||||
<v-btn
|
||||
@click="submit"
|
||||
:disabled="!valid"
|
||||
>
|
||||
Save
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import { IUserProfile, IUserProfileUpdate } from '@/interfaces';
|
||||
import { dispatchGetUsers, dispatchUpdateUser } from '@/store/admin/actions';
|
||||
import { readAdminOneUser } from '@/store/admin/getters';
|
||||
|
||||
@Component
|
||||
export default class EditUser extends Vue {
|
||||
public valid = true;
|
||||
public fullName: string = '';
|
||||
public email: string = '';
|
||||
public isActive: boolean = true;
|
||||
public isSuperuser: boolean = false;
|
||||
public setPassword = false;
|
||||
public password1: string = '';
|
||||
public password2: string = '';
|
||||
|
||||
public async mounted() {
|
||||
await dispatchGetUsers(this.$store);
|
||||
this.reset();
|
||||
}
|
||||
|
||||
public reset() {
|
||||
this.setPassword = false;
|
||||
this.password1 = '';
|
||||
this.password2 = '';
|
||||
this.$validator.reset();
|
||||
if (this.user) {
|
||||
this.fullName = this.user.full_name;
|
||||
this.email = this.user.email;
|
||||
this.isActive = this.user.is_active;
|
||||
this.isSuperuser = this.user.is_superuser;
|
||||
}
|
||||
}
|
||||
|
||||
public cancel() {
|
||||
this.$router.back();
|
||||
}
|
||||
|
||||
public async submit() {
|
||||
if (await this.$validator.validateAll()) {
|
||||
const updatedProfile: IUserProfileUpdate = {};
|
||||
if (this.fullName) {
|
||||
updatedProfile.full_name = this.fullName;
|
||||
}
|
||||
if (this.email) {
|
||||
updatedProfile.email = this.email;
|
||||
}
|
||||
updatedProfile.is_active = this.isActive;
|
||||
updatedProfile.is_superuser = this.isSuperuser;
|
||||
if (this.setPassword) {
|
||||
updatedProfile.password = this.password1;
|
||||
}
|
||||
await dispatchUpdateUser(this.$store, { id: this.user!.id, user: updatedProfile });
|
||||
this.$router.push('/main/admin/users');
|
||||
}
|
||||
}
|
||||
|
||||
get user() {
|
||||
return readAdminOneUser(this.$store)(+this.$router.currentRoute.params.id);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
46
frontend/src/views/main/profile/UserProfile.vue
Normal file
46
frontend/src/views/main/profile/UserProfile.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<v-card class="ma-3 pa-3">
|
||||
<v-card-title primary-title>
|
||||
<div class="headline primary--text">User Profile</div>
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<div class="my-4">
|
||||
<div class="subheading secondary--text text--lighten-3">Full Name</div>
|
||||
<div class="title primary--text text--darken-2" v-if="userProfile && userProfile.full_name">{{userProfile.full_name}}</div>
|
||||
<div class="title primary--text text--darken-2" v-else>-----</div>
|
||||
</div>
|
||||
<div class="my-3">
|
||||
<div class="subheading secondary--text text--lighten-3">Email</div>
|
||||
<div class="title primary--text text--darken-2" v-if="userProfile && userProfile.email">{{userProfile.email}}</div>
|
||||
<div class="title primary--text text--darken-2" v-else>-----</div>
|
||||
</div>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-btn to="/main/profile/edit">Edit</v-btn>
|
||||
<v-btn to="/main/profile/password">Change password</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import { Store } from 'vuex';
|
||||
import { readUserProfile } from '@/store/main/getters';
|
||||
|
||||
@Component
|
||||
export default class UserProfile extends Vue {
|
||||
get userProfile() {
|
||||
return readUserProfile(this.$store);
|
||||
}
|
||||
|
||||
public goToEdit() {
|
||||
this.$router.push('/main/profile/edit');
|
||||
}
|
||||
|
||||
public goToPassword() {
|
||||
this.$router.push('/main/profile/password');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
97
frontend/src/views/main/profile/UserProfileEdit.vue
Normal file
97
frontend/src/views/main/profile/UserProfileEdit.vue
Normal file
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<v-card class="ma-3 pa-3">
|
||||
<v-card-title primary-title>
|
||||
<div class="headline primary--text">Edit User Profile</div>
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<template>
|
||||
<v-form
|
||||
v-model="valid"
|
||||
ref="form"
|
||||
lazy-validation
|
||||
>
|
||||
<v-text-field
|
||||
label="Full Name"
|
||||
v-model="fullName"
|
||||
required
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
label="E-mail"
|
||||
type="email"
|
||||
v-model="email"
|
||||
v-validate="'required|email'"
|
||||
data-vv-name="email"
|
||||
:error-messages="errors.collect('email')"
|
||||
required
|
||||
></v-text-field>
|
||||
</v-form>
|
||||
</template>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn @click="cancel">Cancel</v-btn>
|
||||
<v-btn @click="reset">Reset</v-btn>
|
||||
<v-btn
|
||||
@click="submit"
|
||||
:disabled="!valid"
|
||||
>
|
||||
Save
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import { Store } from 'vuex';
|
||||
import { IUserProfileUpdate } from '@/interfaces';
|
||||
import { readUserProfile } from '@/store/main/getters';
|
||||
import { dispatchUpdateUserProfile } from '@/store/main/actions';
|
||||
|
||||
@Component
|
||||
export default class UserProfileEdit extends Vue {
|
||||
public valid = true;
|
||||
public fullName: string = '';
|
||||
public email: string = '';
|
||||
|
||||
public created() {
|
||||
const userProfile = readUserProfile(this.$store);
|
||||
if (userProfile) {
|
||||
this.fullName = userProfile.full_name;
|
||||
this.email = userProfile.email;
|
||||
}
|
||||
}
|
||||
|
||||
get userProfile() {
|
||||
return readUserProfile(this.$store);
|
||||
}
|
||||
|
||||
public reset() {
|
||||
const userProfile = readUserProfile(this.$store);
|
||||
if (userProfile) {
|
||||
this.fullName = userProfile.full_name;
|
||||
this.email = userProfile.email;
|
||||
}
|
||||
}
|
||||
|
||||
public cancel() {
|
||||
this.$router.back();
|
||||
}
|
||||
|
||||
public async submit() {
|
||||
if ((this.$refs.form as any).validate()) {
|
||||
const updatedProfile: IUserProfileUpdate = {};
|
||||
if (this.fullName) {
|
||||
updatedProfile.full_name = this.fullName;
|
||||
}
|
||||
if (this.email) {
|
||||
updatedProfile.email = this.email;
|
||||
}
|
||||
await dispatchUpdateUserProfile(this.$store, updatedProfile);
|
||||
this.$router.push('/main/profile');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
86
frontend/src/views/main/profile/UserProfileEditPassword.vue
Normal file
86
frontend/src/views/main/profile/UserProfileEditPassword.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<v-container fluid>
|
||||
<v-card class="ma-3 pa-3">
|
||||
<v-card-title primary-title>
|
||||
<div class="headline primary--text">Set Password</div>
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<template>
|
||||
<div class="my-3">
|
||||
<div class="subheading secondary--text text--lighten-2">User</div>
|
||||
<div class="title primary--text text--darken-2" v-if="userProfile.full_name">{{userProfile.full_name}}</div>
|
||||
<div class="title primary--text text--darken-2" v-else>{{userProfile.email}}</div>
|
||||
</div>
|
||||
<v-form ref="form">
|
||||
<v-text-field
|
||||
type="password"
|
||||
ref="password"
|
||||
label="Password"
|
||||
data-vv-name="password"
|
||||
data-vv-delay="100"
|
||||
data-vv-rules="required"
|
||||
v-validate="'required'"
|
||||
v-model="password1"
|
||||
:error-messages="errors.first('password')">
|
||||
</v-text-field>
|
||||
<v-text-field
|
||||
type="password"
|
||||
label="Confirm Password"
|
||||
data-vv-name="password_confirmation"
|
||||
data-vv-delay="100"
|
||||
data-vv-rules="required|confirmed:$password"
|
||||
data-vv-as="password"
|
||||
v-validate="'required|confirmed:password'"
|
||||
v-model="password2"
|
||||
:error-messages="errors.first('password_confirmation')">
|
||||
</v-text-field>
|
||||
</v-form>
|
||||
</template>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn @click="cancel">Cancel</v-btn>
|
||||
<v-btn @click="reset">Reset</v-btn>
|
||||
<v-btn @click="submit" :disabled="!valid">Save</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import { Store } from 'vuex';
|
||||
import { IUserProfileUpdate } from '@/interfaces';
|
||||
import { readUserProfile } from '@/store/main/getters';
|
||||
import { dispatchUpdateUserProfile } from '@/store/main/actions';
|
||||
|
||||
@Component
|
||||
export default class UserProfileEdit extends Vue {
|
||||
public valid = true;
|
||||
public password1 = '';
|
||||
public password2 = '';
|
||||
|
||||
get userProfile() {
|
||||
return readUserProfile(this.$store);
|
||||
}
|
||||
|
||||
public reset() {
|
||||
this.password1 = '';
|
||||
this.password2 = '';
|
||||
this.$validator.reset();
|
||||
}
|
||||
|
||||
public cancel() {
|
||||
this.$router.back();
|
||||
}
|
||||
|
||||
public async submit() {
|
||||
if (await this.$validator.validateAll()) {
|
||||
const updatedProfile: IUserProfileUpdate = {};
|
||||
updatedProfile.password = this.password1;
|
||||
await dispatchUpdateUserProfile(this.$store, updatedProfile);
|
||||
this.$router.push('/main/profile');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user