✨ Update all for Postgres and new techniques

{{cookiecutter.project_slug}}/frontend/src/api.ts

@@ -27,17 +27,14 @@ export const api = {
   async getUsers(token: string) {
     return axios.get<IUserProfile[]>(`${apiUrl}/api/v1/users/`, authHeaders(token));
   },
-  async updateUser(token: string, name: string, data: IUserProfileUpdate) {
-    return axios.put(`${apiUrl}/api/v1/users/${name}`, data, authHeaders(token));
+  async updateUser(token: string, userId: number, data: IUserProfileUpdate) {
+    return axios.put(`${apiUrl}/api/v1/users/${userId}`, data, authHeaders(token));
   },
   async createUser(token: string, data: IUserProfileCreate) {
     return axios.post(`${apiUrl}/api/v1/users/`, data, authHeaders(token));
   },
-  async getRoles(token: string) {
-    return axios.get(`${apiUrl}/api/v1/roles/`, authHeaders(token));
-  },
-  async passwordRecovery(username: string) {
-    return axios.post(`${apiUrl}/api/v1/password-recovery/${username}`);
+  async passwordRecovery(email: string) {
+    return axios.post(`${apiUrl}/api/v1/password-recovery/${email}`);
   },
   async resetPassword(password: string, token: string) {
     return axios.post(`${apiUrl}/api/v1/reset-password/`, {

{{cookiecutter.project_slug}}/frontend/src/interfaces/index.ts

@@ -1,27 +1,23 @@
 export interface IUserProfile {
-    admin_channels: string[];
-    admin_roles: string[];
-    disabled: boolean;
     email: string;
-    human_name: string;
-    name: string;
+    is_active: boolean;
+    is_superuser: boolean;
+    full_name: string;
+    id: number;
 }
 
 export interface IUserProfileUpdate {
-    human_name?: string;
-    password?: string;
     email?: string;
-    admin_channels?: string[];
-    admin_roles?: string[];
-    disabled?: boolean;
+    full_name?: string;
+    password?: string;
+    is_active?: boolean;
+    is_superuser?: boolean;
 }
 
 export interface IUserProfileCreate {
-    name: string;
-    human_name?: string;
+    email: string;
+    full_name?: string;
     password?: string;
-    email?: string;
-    admin_channels?: string[];
-    admin_roles?: string[];
-    disabled?: boolean;
+    is_active?: boolean;
+    is_superuser?: boolean;
 }

{{cookiecutter.project_slug}}/frontend/src/router.ts

@@ -73,7 +73,7 @@ export default new Router({
                     /* webpackChunkName: "main-admin-users" */ './views/main/admin/AdminUsers.vue'),
                 },
                 {
-                  path: 'users/edit/:name',
+                  path: 'users/edit/:id',
                   name: 'main-admin-users-edit',
                   component: () => import(
                     /* webpackChunkName: "main-admin-users-edit" */ './views/main/admin/EditUser.vue'),

{{cookiecutter.project_slug}}/frontend/src/store/admin/accessors/commit.ts

@@ -5,6 +5,5 @@ import { AdminState } from '../state';
 
 const {commit} = getStoreAccessors<AdminState, State>('');
 
-export const commitSetRoles = commit(mutations.setRoles);
 export const commitSetUser = commit(mutations.setUser);
 export const commitSetUsers = commit(mutations.setUsers);

{{cookiecutter.project_slug}}/frontend/src/store/admin/accessors/dispatch.ts

@@ -6,6 +6,5 @@ import { actions } from '../actions';
 const {dispatch} = getStoreAccessors<AdminState, State>('');
 
 export const dispatchCreateUser = dispatch(actions.actionCreateUser);
-export const dispatchGetRoles = dispatch(actions.actionGetRoles);
 export const dispatchGetUsers = dispatch(actions.actionGetUsers);
 export const dispatchUpdateUser = dispatch(actions.actionUpdateUser);

{{cookiecutter.project_slug}}/frontend/src/store/admin/accessors/read.ts

@@ -6,5 +6,4 @@ import { getters } from '../getters';
 const { read } = getStoreAccessors<AdminState, State>('');
 
 export const readAdminOneUser = read(getters.adminOneUser);
-export const readAdminRoles = read(getters.adminRoles);
 export const readAdminUsers = read(getters.adminUsers);

{{cookiecutter.project_slug}}/frontend/src/store/admin/actions.ts

@@ -3,7 +3,6 @@ import { ActionContext } from 'vuex';
 import {
     commitSetUsers,
     commitSetUser,
-    commitSetRoles,
 } from './accessors/commit';
 import { IUserProfileCreate, IUserProfileUpdate } from '@/interfaces';
 import { State } from '../state';
@@ -23,12 +22,12 @@ export const actions = {
             await dispatchCheckApiError(context, error);
         }
     },
-    async actionUpdateUser(context: MainContext, payload: { name: string, user: IUserProfileUpdate }) {
+    async actionUpdateUser(context: MainContext, payload: { id: number, user: IUserProfileUpdate }) {
         try {
             const loadingNotification = { content: 'saving', showProgress: true };
             commitAddNotification(context, loadingNotification);
             const response = (await Promise.all([
-                api.updateUser(context.rootState.main.token, payload.name, payload.user),
+                api.updateUser(context.rootState.main.token, payload.id, payload.user),
                 await new Promise((resolve, reject) => setTimeout(() => resolve(), 500)),
             ]))[0];
             commitSetUser(context, response.data);
@@ -53,12 +52,4 @@ export const actions = {
             await dispatchCheckApiError(context, error);
         }
     },
-    async actionGetRoles(context: MainContext) {
-        try {
-            const response = await api.getRoles(context.rootState.main.token);
-            commitSetRoles(context, response.data.roles);
-        } catch (error) {
-            await dispatchCheckApiError(context, error);
-        }
-    },
 };

{{cookiecutter.project_slug}}/frontend/src/store/admin/getters.ts

@@ -2,9 +2,8 @@ import { AdminState } from './state';
 
 export const getters = {
     adminUsers: (state: AdminState) => state.users,
-    adminRoles: (state: AdminState) => state.roles,
-    adminOneUser: (state: AdminState) => (name: string) => {
-        const filteredUsers = state.users.filter((user) => user.name === name);
+    adminOneUser: (state: AdminState) => (userId: number) => {
+        const filteredUsers = state.users.filter((user) => user.id === userId);
         if (filteredUsers.length > 0) {
             return { ...filteredUsers[0] };
         }

{{cookiecutter.project_slug}}/frontend/src/store/admin/index.ts

@@ -5,7 +5,6 @@ import { AdminState } from './state';
 
 const defaultState: AdminState = {
   users: [],
-  roles: [],
 };
 
 export const adminModule = {

{{cookiecutter.project_slug}}/frontend/src/store/admin/mutations.ts

@@ -6,11 +6,8 @@ export const mutations = {
         state.users = payload;
     },
     setUser(state: AdminState, payload: IUserProfile) {
-        const users = state.users.filter((user: IUserProfile) => user.name !== payload.name);
+        const users = state.users.filter((user: IUserProfile) => user.id !== payload.id);
         users.push(payload);
         state.users = users;
     },
-    setRoles(state: AdminState, payload: string[]) {
-        state.roles = payload;
-    },
 };

{{cookiecutter.project_slug}}/frontend/src/store/admin/state.ts

@@ -2,5 +2,4 @@ import { IUserProfile } from '@/interfaces';
 
 export interface AdminState {
     users: IUserProfile[];
-    roles: string[];
 }

{{cookiecutter.project_slug}}/frontend/src/store/main/actions.ts

@@ -17,7 +17,6 @@ import {
     commitAddNotification,
 } from './accessors';
 import { AxiosError } from 'axios';
-import { IUserProfileCreate, IUserProfileUpdate } from '@/interfaces';
 import { State } from '../state';
 import { MainState, AppNotification } from './state';
 

{{cookiecutter.project_slug}}/frontend/src/store/main/getters.ts

@@ -4,7 +4,7 @@ export const getters = {
     hasAdminAccess: (state: MainState) => {
         return (
             state.userProfile &&
-            state.userProfile.admin_roles.includes('superuser'));
+            state.userProfile.is_superuser && state.userProfile.is_active);
     },
     loginError: (state: MainState) => state.logInError,
     dashboardShowDrawer: (state: MainState) => state.dashboardShowDrawer,

{{cookiecutter.project_slug}}/frontend/src/views/main/Dashboard.vue

@@ -23,11 +23,11 @@ import { readUserProfile } from '@/store/main/accessors';
 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;
+    if (userProfile && userProfile.full_name) {
+      if (userProfile.full_name) {
+        return userProfile.full_name;
       } else {
-        return userProfile.name;
+        return userProfile.email;
       }
     }
   }

{{cookiecutter.project_slug}}/frontend/src/views/main/admin/Admin.vue

@@ -6,7 +6,6 @@
 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)) {
@@ -17,7 +16,7 @@ const routeGuardAdmin = async (to, from, next) => {
 };
 
 @Component
-export default class Start extends Vue {
+export default class Admin extends Vue {
   public beforeRouteEnter(to, from, next) {
     routeGuardAdmin(to, from, next);
   }
@@ -25,9 +24,5 @@ export default class Start extends Vue {
   public beforeRouteUpdate(to, from, next) {
     routeGuardAdmin(to, from, next);
   }
-
-  public async mounted() {
-    await dispatchGetRoles(this.$store);
-  }
 }
 </script>

{{cookiecutter.project_slug}}/frontend/src/views/main/admin/AdminUsers.vue

@@ -11,15 +11,13 @@
       <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>{{ 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: {name: props.item.name}}">
+            <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>
@@ -36,7 +34,7 @@ import { IUserProfile } from '@/interfaces';
 import { readAdminUsers, dispatchGetUsers } from '@/store/admin/accessors';
 
 @Component
-export default class UserProfile extends Vue {
+export default class AdminUsers extends Vue {
   public headers = [
     {
       text: 'Name',
@@ -53,23 +51,24 @@ export default class UserProfile extends Vue {
     {
       text: 'Full Name',
       sortable: true,
-      value: 'human_name',
+      value: 'full_name',
       align: 'left',
     },
     {
-      text: 'Disabled',
+      text: 'Is Active',
       sortable: true,
-      value: 'disabled',
+      value: 'isActive',
       align: 'left',
     },
     {
-      text: 'Roles',
-      value: 'admin_roles',
+      text: 'Is Superuser',
+      sortable: true,
+      value: 'isSuperuser',
       align: 'left',
     },
     {
       text: 'Actions',
-      value: 'name',
+      value: 'id',
     },
   ];
   get users() {

{{cookiecutter.project_slug}}/frontend/src/views/main/admin/CreateUser.vue

@@ -7,13 +7,12 @@
       <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>
+            <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')">
@@ -41,38 +40,32 @@ import {
   IUserProfileUpdate,
   IUserProfileCreate,
 } from '@/interfaces';
-import { dispatchGetUsers, dispatchGetRoles, dispatchCreateUser, readAdminRoles } from '@/store/admin/accessors';
+import { dispatchGetUsers, dispatchCreateUser } from '@/store/admin/accessors';
 
 @Component
-export default class EditUser extends Vue {
+export default class CreateUser extends Vue {
   public valid = false;
-  public name: string = '';
   public fullName: string = '';
   public email: string = '';
+  public isActive: boolean = true;
+  public isSuperuser: boolean = false;
   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.isActive = true;
+    this.isSuperuser = false;
     this.$validator.reset();
-    this.availableRoles.forEach((value) => {
-      Vue.set(this.selectedRoles, value, false);
-    });
   }
 
   public cancel() {
@@ -82,29 +75,20 @@ export default class EditUser extends Vue {
   public async submit() {
     if (await this.$validator.validateAll()) {
       const updatedProfile: IUserProfileCreate = {
-        name: this.name,
+        email: this.email,
       };
       if (this.fullName) {
-        updatedProfile.human_name = this.fullName;
+        updatedProfile.full_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.is_active = this.isActive;
+      updatedProfile.is_superuser = this.isSuperuser;
       updatedProfile.password = this.password1;
       await dispatchCreateUser(this.$store, updatedProfile);
       this.$router.push('/main/admin/users');
     }
   }
-
-  get availableRoles() {
-    return readAdminRoles(this.$store);
-  }
 }
 </script>

{{cookiecutter.project_slug}}/frontend/src/views/main/admin/EditUser.vue

@@ -8,16 +8,16 @@
         <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-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">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>
+            <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>
@@ -48,31 +48,23 @@ 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 isActive: boolean = true;
+  public isSuperuser: boolean = false;
   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();
   }
 
@@ -82,17 +74,10 @@ export default class EditUser extends Vue {
     this.password2 = '';
     this.$validator.reset();
     if (this.user) {
-      this.name = this.user.name;
-      this.fullName = this.user.human_name;
+      this.fullName = this.user.full_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);
-        }
-      });
+      this.isActive = this.user.is_active;
+      this.isSuperuser = this.user.is_superuser;
     }
   }
 
@@ -104,33 +89,23 @@ export default class EditUser extends Vue {
     if (await this.$validator.validateAll()) {
       const updatedProfile: IUserProfileUpdate = {};
       if (this.fullName) {
-        updatedProfile.human_name = this.fullName;
+        updatedProfile.full_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.is_active = this.isActive;
+      updatedProfile.is_superuser = this.isSuperuser;
       if (this.setPassword) {
         updatedProfile.password = this.password1;
       }
-      const payload = { name: this.name, user: updatedProfile };
-      await dispatchUpdateUser(this.$store, payload);
+      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.name);
-  }
-
-  get availableRoles() {
-    return readAdminRoles(this.$store);
+    return readAdminOneUser(this.$store)(+this.$router.currentRoute.params.id);
   }
 }
 </script>

{{cookiecutter.project_slug}}/frontend/src/views/main/profile/UserProfile.vue

@@ -7,12 +7,7 @@
       <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-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">

{{cookiecutter.project_slug}}/frontend/src/views/main/profile/UserProfileEdit.vue

@@ -6,11 +6,6 @@
       </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>
@@ -41,7 +36,7 @@ export default class UserProfileEdit extends Vue {
   public created() {
     const userProfile = readUserProfile(this.$store);
     if (userProfile) {
-      this.fullName = userProfile.human_name;
+      this.fullName = userProfile.full_name;
       this.email = userProfile.email;
     }
   }
@@ -53,7 +48,7 @@ export default class UserProfileEdit extends Vue {
   public reset() {
     const userProfile = readUserProfile(this.$store);
     if (userProfile) {
-      this.fullName = userProfile.human_name;
+      this.fullName = userProfile.full_name;
       this.email = userProfile.email;
     }
   }
@@ -66,7 +61,7 @@ export default class UserProfileEdit extends Vue {
     if ((this.$refs.form as any).validate()) {
       const updatedProfile: IUserProfileUpdate = {};
       if (this.fullName) {
-        updatedProfile.human_name = this.fullName;
+        updatedProfile.full_name = this.fullName;
       }
       if (this.email) {
         updatedProfile.email = this.email;

{{cookiecutter.project_slug}}/frontend/src/views/main/profile/UserProfileEditPassword.vue

@@ -7,9 +7,9 @@
       <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 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