nt_web_template/full-stack-fastapi-template
2
0
Fork 0
Code Issues Pull Requests Actions 6 Packages Projects Releases Wiki Activity

🎉 First commit, from couchbase generator, basic changes

Browse Source 
not tested / updated yet
This commit is contained in:
Sebastián Ramírez
2019-02-09 19:42:36 +04:00
commit 7f8bfc8faa
198 changed files with 21022 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
{{cookiecutter.project_slug}}/frontend/src/views/Login.vue Normal file
View File

@@ -0,0 +1,57 @@
<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, dispatchLogIn } from '@/store/main/accessors';
@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
{{cookiecutter.project_slug}}/frontend/src/views/PasswordRecovery.vue Normal file
View 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 { dispatchLogIn, dispatchPasswordRecovery } from '@/store/main/accessors';
@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>

88
{{cookiecutter.project_slug}}/frontend/src/views/ResetPassword.vue Normal file
View File

@@ -0,0 +1,88 @@
<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 {
dispatchUpdateUserProfile,
readUserProfile,
dispatchResetPassword,
commitAddNotification,
} from '@/store/main/accessors';
import { appName } from '@/env';
@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>

35
{{cookiecutter.project_slug}}/frontend/src/views/main/Dashboard.vue Normal file
View File

@@ -0,0 +1,35 @@
<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-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-text>
</v-card>
</v-container>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Store } from 'vuex';
import { readUserProfile } from '@/store/main/accessors';
@Component
export default class Dashboard extends Vue {
get greetedUser() {
const userProfile = readUserProfile(this.$store);
if (userProfile && userProfile.human_name) {
if (userProfile.human_name) {
return userProfile.human_name;
} else {
return userProfile.name;
}
}
}
}
</script>

187
{{cookiecutter.project_slug}}/frontend/src/views/main/Main.vue Normal file
View File

@@ -0,0 +1,187 @@
<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>&copy; {{appName}}</span>
</v-footer>
</div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import { appName } from '@/env';
import {
commitSetDashboardShowDrawer,
readDashboardShowDrawer,
commitSetDashboardMiniDrawer,
readDashboardMiniDrawer,
dispatchUserLogOut,
readHasAdminAccess,
} from '@/store/main/accessors';
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>

37
{{cookiecutter.project_slug}}/frontend/src/views/main/Start.vue Normal file
View File

@@ -0,0 +1,37 @@
<template>
<router-view></router-view>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { dispatchCheckLoggedIn, readIsLoggedIn } from '@/store/main/accessors';
import { store } from '@/store';
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>

33
{{cookiecutter.project_slug}}/frontend/src/views/main/admin/Admin.vue Normal file
View File

@@ -0,0 +1,33 @@
<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/accessors';
import { dispatchGetRoles } from '@/store/admin/accessors';
const routeGuardAdmin = async (to, from, next) => {
if (!readHasAdminAccess(store)) {
next('/main');
} else {
next();
}
};
@Component
export default class Start extends Vue {
public beforeRouteEnter(to, from, next) {
routeGuardAdmin(to, from, next);
}
public beforeRouteUpdate(to, from, next) {
routeGuardAdmin(to, from, next);
}
public async mounted() {
await dispatchGetRoles(this.$store);
}
}
</script>

83
{{cookiecutter.project_slug}}/frontend/src/views/main/admin/AdminUsers.vue Normal file
View 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.human_name }}</td>
<td>{{ props.item.disabled }}</td>
<td>
<v-chip v-for="role in props.item.admin_roles" :key="role">{{role}}</v-chip>
</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: {name: props.item.name}}">
<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, dispatchGetUsers } from '@/store/admin/accessors';
@Component
export default class UserProfile 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: 'human_name',
align: 'left',
},
{
text: 'Disabled',
sortable: true,
value: 'disabled',
align: 'left',
},
{
text: 'Roles',
value: 'admin_roles',
align: 'left',
},
{
text: 'Actions',
value: 'name',
},
];
get users() {
return readAdminUsers(this.$store);
}
public async mounted() {
await dispatchGetUsers(this.$store);
}
}
</script>

110
{{cookiecutter.project_slug}}/frontend/src/views/main/admin/CreateUser.vue Normal file
View File

@@ -0,0 +1,110 @@
<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="Username" v-model="name" required></v-text-field>
<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">Roles</div>
<v-checkbox v-for="(value, role) in selectedRoles" :key="role" :label="role" v-model="selectedRoles[role]"></v-checkbox>
<div class="subheading secondary--text text--lighten-2">Disable User <span v-if="userDisabled">(currently disabled)</span><span v-else>(currently enabled)</span></div>
<v-checkbox :label="'Disabled'" v-model="userDisabled"></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-btn @click="submit" :disabled="!valid">
Save
</v-btn>
<v-btn @click="reset">Reset</v-btn>
<v-btn @click="cancel">Cancel</v-btn>
</v-form>
</template>
</v-card-text>
</v-card>
</v-container>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import {
IUserProfile,
IUserProfileUpdate,
IUserProfileCreate,
} from '@/interfaces';
import { dispatchGetUsers, dispatchGetRoles, dispatchCreateUser, readAdminRoles } from '@/store/admin/accessors';
@Component
export default class EditUser extends Vue {
public valid = false;
public name: string = '';
public fullName: string = '';
public email: string = '';
public setPassword = false;
public password1: string = '';
public password2: string = '';
public userDisabled: boolean = false;
public selectedRoles: { [role: string]: boolean } = {};
public async mounted() {
await dispatchGetUsers(this.$store);
await dispatchGetRoles(this.$store);
this.reset();
}
public reset() {
this.password1 = '';
this.password2 = '';
this.name = '';
this.fullName = '';
this.email = '';
this.userDisabled = false;
this.$validator.reset();
this.availableRoles.forEach((value) => {
Vue.set(this.selectedRoles, value, false);
});
}
public cancel() {
this.$router.back();
}
public async submit() {
if (await this.$validator.validateAll()) {
const updatedProfile: IUserProfileCreate = {
name: this.name,
};
if (this.fullName) {
updatedProfile.human_name = this.fullName;
}
if (this.email) {
updatedProfile.email = this.email;
}
updatedProfile.disabled = this.userDisabled;
updatedProfile.admin_roles = [];
this.availableRoles.forEach((role: string) => {
if (this.selectedRoles[role]) {
updatedProfile.admin_roles!.push(role);
}
});
updatedProfile.password = this.password1;
await dispatchCreateUser(this.$store, updatedProfile);
this.$router.push('/main/admin/users');
}
}
get availableRoles() {
return readAdminRoles(this.$store);
}
}
</script>

136
{{cookiecutter.project_slug}}/frontend/src/views/main/admin/EditUser.vue Normal file
View File

@@ -0,0 +1,136 @@
<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.name}}</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">Roles</div>
<v-checkbox v-for="(value, role) in selectedRoles" :key="role" :label="role" v-model="selectedRoles[role]"></v-checkbox>
<div class="subheading secondary--text text--lighten-2">Disable User <span v-if="userDisabled">(currently disabled)</span><span v-else>(currently enabled)</span></div>
<v-checkbox :label="'Disabled'" v-model="userDisabled"></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-btn @click="submit" :disabled="!valid">
Save
</v-btn>
<v-btn @click="reset">Reset</v-btn>
<v-btn @click="cancel">Cancel</v-btn>
</v-form>
</template>
</v-card-text>
</v-card>
</v-container>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { IUserProfile, IUserProfileUpdate } from '@/interfaces';
import {
dispatchGetUsers,
dispatchGetRoles,
dispatchUpdateUser,
readAdminOneUser,
readAdminRoles,
} from '@/store/admin/accessors';
@Component
export default class EditUser extends Vue {
public valid = true;
public name: string = '';
public fullName: string = '';
public email: string = '';
public setPassword = false;
public password1: string = '';
public password2: string = '';
public userDisabled: boolean = false;
public selectedRoles: { [role: string]: boolean } = {};
public async mounted() {
await dispatchGetUsers(this.$store);
await dispatchGetRoles(this.$store);
this.availableRoles.forEach((value) => {
Vue.set(this.selectedRoles, value, false);
});
this.reset();
}
public reset() {
this.setPassword = false;
this.password1 = '';
this.password2 = '';
this.$validator.reset();
if (this.user) {
this.name = this.user.name;
this.fullName = this.user.human_name;
this.email = this.user.email;
this.userDisabled = this.user.disabled;
this.availableRoles.forEach((role: string) => {
if (this.user!.admin_roles.includes(role)) {
Vue.set(this.selectedRoles, role, true);
} else {
Vue.set(this.selectedRoles, role, false);
}
});
}
}
public cancel() {
this.$router.back();
}
public async submit() {
if (await this.$validator.validateAll()) {
const updatedProfile: IUserProfileUpdate = {};
if (this.fullName) {
updatedProfile.human_name = this.fullName;
}
if (this.email) {
updatedProfile.email = this.email;
}
updatedProfile.disabled = this.userDisabled;
updatedProfile.admin_roles = [];
this.availableRoles.forEach((role: string) => {
if (this.selectedRoles[role]) {
updatedProfile.admin_roles!.push(role);
}
});
if (this.setPassword) {
updatedProfile.password = this.password1;
}
const payload = { name: this.name, user: updatedProfile };
await dispatchUpdateUser(this.$store, payload);
this.$router.push('/main/admin/users');
}
}
get user() {
return readAdminOneUser(this.$store)(this.$router.currentRoute.params.name);
}
get availableRoles() {
return readAdminRoles(this.$store);
}
}
</script>

51
{{cookiecutter.project_slug}}/frontend/src/views/main/profile/UserProfile.vue Normal file
View File

@@ -0,0 +1,51 @@
<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.human_name">{{userProfile.human_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">Username</div>
<div class="title primary--text text--darken-2" v-if="userProfile && userProfile.name">{{userProfile.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/accessors';
@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>

79
{{cookiecutter.project_slug}}/frontend/src/views/main/profile/UserProfileEdit.vue Normal file
View File

@@ -0,0 +1,79 @@
<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>
<div class="my-3">
<div class="subheading secondary--text text--lighten-2">Username</div>
<div class="title primary--text text--darken-2" v-if="userProfile.name">{{userProfile.name}}</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>
<v-btn @click="submit" :disabled="!valid">
Save
</v-btn>
<v-btn @click="reset">Reset</v-btn>
<v-btn @click="cancel">Cancel</v-btn>
</v-form>
</template>
</v-card-text>
</v-card>
</v-container>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Store } from 'vuex';
import { IUserProfileUpdate } from '@/interfaces';
import { dispatchUpdateUserProfile, readUserProfile } from '@/store/main/accessors';
@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.human_name;
this.email = userProfile.email;
}
}
get userProfile() {
return readUserProfile(this.$store);
}
public reset() {
const userProfile = readUserProfile(this.$store);
if (userProfile) {
this.fullName = userProfile.human_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.human_name = this.fullName;
}
if (this.email) {
updatedProfile.email = this.email;
}
await dispatchUpdateUserProfile(this.$store, updatedProfile);
this.$router.push('/main/profile');
}
}
}
</script>

82
{{cookiecutter.project_slug}}/frontend/src/views/main/profile/UserProfileEditPassword.vue Normal file
View File

@@ -0,0 +1,82 @@
<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">Username</div>
<div class="title primary--text text--darken-2" v-if="userProfile.name">{{userProfile.name}}</div>
<div class="title primary--text text--darken-2" v-else>-----</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-btn @click="cancel">Cancel</v-btn>
<v-btn @click="reset">Reset</v-btn>
<v-btn @click="submit" :disabled="!valid">Save</v-btn>
</v-form>
</template>
</v-card-text>
</v-card>
</v-container>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Store } from 'vuex';
import { IUserProfileUpdate } from '@/interfaces';
import { dispatchUpdateUserProfile, readUserProfile } from '@/store/main/accessors';
@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>