Refactor/upgrade backend and frontend parts (#2)

* ♻️ Refactor and simplify backend code

* ♻️ Refactor frontend state, integrate typesafe-vuex accessors into state files

* ♻️ Use new state accessors and standardize layout

* 🔒 Upgrade and fix npm security audit

* 🔧 Update local re-generation scripts

* 🔊 Log startup exceptions to detect errors early

* ✏️ Fix password reset token content

* 🔥 Remove unneeded Dockerfile directives

* 🔥 Remove unnecessary print

* 🔥 Remove unnecessary code, upgrade dependencies in backend

* ✏️ Fix typos in docstrings and comments

* 🏗️ Improve user Depends utilities to simplify and remove code

* 🔥 Remove deprecated SQLAlchemy parameter

{{cookiecutter.project_slug}}/frontend/src/App.vue

@@ -21,8 +21,9 @@
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
-import { dispatchCheckLoggedIn, readIsLoggedIn, commitAddNotification } from '@/store/main/accessors';
 import NotificationsManager from '@/components/NotificationsManager.vue';
+import { readIsLoggedIn } from '@/store/main/getters';
+import { dispatchCheckLoggedIn } from '@/store/main/actions';
 
 @Component({
   components: {

{{cookiecutter.project_slug}}/frontend/src/components/NotificationsManager.vue

@@ -8,8 +8,10 @@
 </template>
 <script lang="ts">
 import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
-import { readFirstNotification, dispatchRemoveNotification, commitRemoveNotification } from '@/store/main/accessors';
 import { AppNotification } from '@/store/main/state';
+import { commitRemoveNotification } from '@/store/main/mutations';
+import { readFirstNotification } from '@/store/main/getters';
+import { dispatchRemoveNotification } from '@/store/main/actions';
 
 @Component
 export default class NotificationsManager extends Vue {

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

@@ -1,9 +0,0 @@
-import { getStoreAccessors } from 'typesafe-vuex';
-import { State } from '@/store/state';
-import { mutations } from '../mutations';
-import { AdminState } from '../state';
-
-const {commit} = getStoreAccessors<AdminState, State>('');
-
-export const commitSetUser = commit(mutations.setUser);
-export const commitSetUsers = commit(mutations.setUsers);

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

@@ -1,10 +0,0 @@
-import { getStoreAccessors } from 'typesafe-vuex';
-import { AdminState } from '../state';
-import { State } from '@/store/state';
-import { actions } from '../actions';
-
-const {dispatch} = getStoreAccessors<AdminState, State>('');
-
-export const dispatchCreateUser = dispatch(actions.actionCreateUser);
-export const dispatchGetUsers = dispatch(actions.actionGetUsers);
-export const dispatchUpdateUser = dispatch(actions.actionUpdateUser);

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

@@ -1,3 +0,0 @@
-export * from './commit';
-export * from './dispatch';
-export * from './read';

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

@@ -1,9 +0,0 @@
-import { getStoreAccessors } from 'typesafe-vuex';
-import { AdminState } from '../state';
-import { State } from '@/store/state';
-import { getters } from '../getters';
-
-const { read } = getStoreAccessors<AdminState, State>('');
-
-export const readAdminOneUser = read(getters.adminOneUser);
-export const readAdminUsers = read(getters.adminUsers);

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

@@ -1,13 +1,12 @@
 import { api } from '@/api';
 import { ActionContext } from 'vuex';
-import {
-    commitSetUsers,
-    commitSetUser,
-} from './accessors/commit';
 import { IUserProfileCreate, IUserProfileUpdate } from '@/interfaces';
 import { State } from '../state';
 import { AdminState } from './state';
-import { dispatchCheckApiError, commitAddNotification, commitRemoveNotification } from '../main/accessors';
+import { getStoreAccessors } from 'typesafe-vuex';
+import { commitSetUsers, commitSetUser } from './mutations';
+import { dispatchCheckApiError } from '../main/actions';
+import { commitAddNotification, commitRemoveNotification } from '../main/mutations';
 
 type MainContext = ActionContext<AdminState, State>;
 
@@ -32,7 +31,7 @@ export const actions = {
             ]))[0];
             commitSetUser(context, response.data);
             commitRemoveNotification(context, loadingNotification);
-            commitAddNotification(context, {content: 'User successfully updated', color: 'success'});
+            commitAddNotification(context, { content: 'User successfully updated', color: 'success' });
         } catch (error) {
             await dispatchCheckApiError(context, error);
         }
@@ -53,3 +52,9 @@ export const actions = {
         }
     },
 };
+
+const { dispatch } = getStoreAccessors<AdminState, State>('');
+
+export const dispatchCreateUser = dispatch(actions.actionCreateUser);
+export const dispatchGetUsers = dispatch(actions.actionGetUsers);
+export const dispatchUpdateUser = dispatch(actions.actionUpdateUser);

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

@@ -1,4 +1,6 @@
 import { AdminState } from './state';
+import { getStoreAccessors } from 'typesafe-vuex';
+import { State } from '../state';
 
 export const getters = {
     adminUsers: (state: AdminState) => state.users,
@@ -9,3 +11,8 @@ export const getters = {
         }
     },
 };
+
+const { read } = getStoreAccessors<AdminState, State>('');
+
+export const readAdminOneUser = read(getters.adminOneUser);
+export const readAdminUsers = read(getters.adminUsers);

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

@@ -1,5 +1,7 @@
 import { IUserProfile } from '@/interfaces';
 import { AdminState } from './state';
+import { getStoreAccessors } from 'typesafe-vuex';
+import { State } from '../state';
 
 export const mutations = {
     setUsers(state: AdminState, payload: IUserProfile[]) {
@@ -11,3 +13,8 @@ export const mutations = {
         state.users = users;
     },
 };
+
+const { commit } = getStoreAccessors<AdminState, State>('');
+
+export const commitSetUser = commit(mutations.setUser);
+export const commitSetUsers = commit(mutations.setUsers);

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

@@ -1,15 +0,0 @@
-import { getStoreAccessors } from 'typesafe-vuex';
-import { MainState } from '../state';
-import { State } from '@/store/state';
-import { mutations } from '../mutations';
-
-const {commit} = getStoreAccessors<MainState | any, State>('');
-
-export const commitSetDashboardMiniDrawer = commit(mutations.setDashboardMiniDrawer);
-export const commitSetDashboardShowDrawer = commit(mutations.setDashboardShowDrawer);
-export const commitSetLoggedIn = commit(mutations.setLoggedIn);
-export const commitSetLogInError = commit(mutations.setLogInError);
-export const commitSetToken = commit(mutations.setToken);
-export const commitSetUserProfile = commit(mutations.setUserProfile);
-export const commitAddNotification = commit(mutations.addNotification);
-export const commitRemoveNotification = commit(mutations.removeNotification);

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

@@ -1,20 +0,0 @@
-import { getStoreAccessors } from 'typesafe-vuex';
-import { MainState } from '../state';
-import { State } from '@/store/state';
-import { actions } from '../actions';
-
-const {dispatch} = getStoreAccessors<MainState | any, State>('');
-
-export const dispatchCheckApiError = dispatch(actions.actionCheckApiError);
-export const dispatchCheckLoggedIn = dispatch(actions.actionCheckLoggedIn);
-export const dispatchGetUserProfile = dispatch(actions.actionGetUserProfile);
-export const dispatchLogIn = dispatch(actions.actionLogIn);
-export const dispatchLogOut = dispatch(actions.actionLogOut);
-export const dispatchUserLogOut = dispatch(actions.actionUserLogOut);
-export const dispatchRemoveLogIn = dispatch(actions.actionRemoveLogIn);
-export const dispatchRouteLoggedIn = dispatch(actions.actionRouteLoggedIn);
-export const dispatchRouteLogOut = dispatch(actions.actionRouteLogOut);
-export const dispatchUpdateUserProfile = dispatch(actions.actionUpdateUserProfile);
-export const dispatchRemoveNotification = dispatch(actions.removeNotification);
-export const dispatchPasswordRecovery = dispatch(actions.passwordRecovery);
-export const dispatchResetPassword = dispatch(actions.resetPassword);

{{cookiecutter.project_slug}}/frontend/src/store/main/accessors/index.ts

@@ -1,3 +0,0 @@
-export * from './commit';
-export * from './dispatch';
-export * from './read';

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

@@ -1,15 +0,0 @@
-import { getStoreAccessors } from 'typesafe-vuex';
-import { MainState } from '../state';
-import { State } from '@/store/state';
-import { getters } from '../getters';
-
-const {read} = getStoreAccessors<MainState, State>('');
-
-export const readDashboardMiniDrawer = read(getters.dashboardMiniDrawer);
-export const readDashboardShowDrawer = read(getters.dashboardShowDrawer);
-export const readHasAdminAccess = read(getters.hasAdminAccess);
-export const readIsLoggedIn = read(getters.isLoggedIn);
-export const readLoginError = read(getters.loginError);
-export const readToken = read(getters.token);
-export const readUserProfile = read(getters.userProfile);
-export const readFirstNotification = read(getters.firstNotification);

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

@@ -1,24 +1,19 @@
 import { api } from '@/api';
-import { saveLocalToken, getLocalToken, removeLocalToken } from '@/utils';
 import router from '@/router';
+import { getLocalToken, removeLocalToken, saveLocalToken } from '@/utils';
+import { AxiosError } from 'axios';
+import { getStoreAccessors } from 'typesafe-vuex';
 import { ActionContext } from 'vuex';
+import { State } from '../state';
 import {
-    commitSetToken,
+    commitAddNotification,
+    commitRemoveNotification,
     commitSetLoggedIn,
     commitSetLogInError,
-    dispatchGetUserProfile,
-    dispatchRouteLoggedIn,
-    dispatchLogOut,
+    commitSetToken,
     commitSetUserProfile,
-    dispatchCheckApiError,
-    dispatchRemoveLogIn,
-    dispatchRouteLogOut,
-    commitRemoveNotification,
-    commitAddNotification,
-} from './accessors';
-import { AxiosError } from 'axios';
-import { State } from '../state';
-import { MainState, AppNotification } from './state';
+} from './mutations';
+import { AppNotification, MainState } from './state';
 
 type MainContext = ActionContext<MainState, State>;
 
@@ -160,3 +155,19 @@ export const actions = {
         }
     },
 };
+
+const { dispatch } = getStoreAccessors<MainState | any, State>('');
+
+export const dispatchCheckApiError = dispatch(actions.actionCheckApiError);
+export const dispatchCheckLoggedIn = dispatch(actions.actionCheckLoggedIn);
+export const dispatchGetUserProfile = dispatch(actions.actionGetUserProfile);
+export const dispatchLogIn = dispatch(actions.actionLogIn);
+export const dispatchLogOut = dispatch(actions.actionLogOut);
+export const dispatchUserLogOut = dispatch(actions.actionUserLogOut);
+export const dispatchRemoveLogIn = dispatch(actions.actionRemoveLogIn);
+export const dispatchRouteLoggedIn = dispatch(actions.actionRouteLoggedIn);
+export const dispatchRouteLogOut = dispatch(actions.actionRouteLogOut);
+export const dispatchUpdateUserProfile = dispatch(actions.actionUpdateUserProfile);
+export const dispatchRemoveNotification = dispatch(actions.removeNotification);
+export const dispatchPasswordRecovery = dispatch(actions.passwordRecovery);
+export const dispatchResetPassword = dispatch(actions.resetPassword);

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

@@ -1,4 +1,6 @@
 import { MainState } from './state';
+import { getStoreAccessors } from 'typesafe-vuex';
+import { State } from '../state';
 
 export const getters = {
     hasAdminAccess: (state: MainState) => {
@@ -14,3 +16,14 @@ export const getters = {
     isLoggedIn: (state: MainState) => state.isLoggedIn,
     firstNotification: (state: MainState) => state.notifications.length > 0 && state.notifications[0],
 };
+
+const {read} = getStoreAccessors<MainState, State>('');
+
+export const readDashboardMiniDrawer = read(getters.dashboardMiniDrawer);
+export const readDashboardShowDrawer = read(getters.dashboardShowDrawer);
+export const readHasAdminAccess = read(getters.hasAdminAccess);
+export const readIsLoggedIn = read(getters.isLoggedIn);
+export const readLoginError = read(getters.loginError);
+export const readToken = read(getters.token);
+export const readUserProfile = read(getters.userProfile);
+export const readFirstNotification = read(getters.firstNotification);

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

@@ -1,5 +1,7 @@
 import { IUserProfile } from '@/interfaces';
 import { MainState, AppNotification } from './state';
+import { getStoreAccessors } from 'typesafe-vuex';
+import { State } from '../state';
 
 
 export const mutations = {
@@ -28,3 +30,14 @@ export const mutations = {
         state.notifications = state.notifications.filter((notification) => notification !== payload);
     },
 };
+
+const {commit} = getStoreAccessors<MainState | any, State>('');
+
+export const commitSetDashboardMiniDrawer = commit(mutations.setDashboardMiniDrawer);
+export const commitSetDashboardShowDrawer = commit(mutations.setDashboardShowDrawer);
+export const commitSetLoggedIn = commit(mutations.setLoggedIn);
+export const commitSetLogInError = commit(mutations.setLogInError);
+export const commitSetToken = commit(mutations.setToken);
+export const commitSetUserProfile = commit(mutations.setUserProfile);
+export const commitAddNotification = commit(mutations.addNotification);
+export const commitRemoveNotification = commit(mutations.removeNotification);

{{cookiecutter.project_slug}}/frontend/src/views/Login.vue

@@ -35,7 +35,8 @@
 import { Component, Vue } from 'vue-property-decorator';
 import { api } from '@/api';
 import { appName } from '@/env';
-import { readLoginError, dispatchLogIn } from '@/store/main/accessors';
+import { readLoginError } from '@/store/main/getters';
+import { dispatchLogIn } from '@/store/main/actions';
 
 @Component
 export default class Login extends Vue {

{{cookiecutter.project_slug}}/frontend/src/views/PasswordRecovery.vue

@@ -30,7 +30,7 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 import { appName } from '@/env';
-import { dispatchLogIn, dispatchPasswordRecovery } from '@/store/main/accessors';
+import { dispatchPasswordRecovery } from '@/store/main/actions';
 
 @Component
 export default class Login extends Vue {

{{cookiecutter.project_slug}}/frontend/src/views/ResetPassword.vue

@@ -33,13 +33,9 @@
 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';
+import { commitAddNotification } from '@/store/main/mutations';
+import { dispatchResetPassword } from '@/store/main/actions';
 
 @Component
 export default class UserProfileEdit extends Vue {

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

@@ -6,10 +6,12 @@
       </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-text>
+      </v-card-actions>
     </v-card>
   </v-container>
 </template>
@@ -17,7 +19,7 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 import { Store } from 'vuex';
-import { readUserProfile } from '@/store/main/accessors';
+import { readUserProfile } from '@/store/main/getters';
 
 @Component
 export default class Dashboard extends Vue {

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

@@ -121,14 +121,9 @@
 import { Vue, Component } from 'vue-property-decorator';
 
 import { appName } from '@/env';
-import {
-  commitSetDashboardShowDrawer,
-  readDashboardShowDrawer,
-  commitSetDashboardMiniDrawer,
-  readDashboardMiniDrawer,
-  dispatchUserLogOut,
-readHasAdminAccess,
-} from '@/store/main/accessors';
+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') {

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

@@ -4,8 +4,9 @@
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
-import { dispatchCheckLoggedIn, readIsLoggedIn } from '@/store/main/accessors';
 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);

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

@@ -5,7 +5,7 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 import { store } from '@/store';
-import { readHasAdminAccess } from '@/store/main/accessors';
+import { readHasAdminAccess } from '@/store/main/getters';
 
 const routeGuardAdmin = async (to, from, next) => {
   if (!readHasAdminAccess(store)) {

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

@@ -31,7 +31,8 @@
 import { Component, Vue } from 'vue-property-decorator';
 import { Store } from 'vuex';
 import { IUserProfile } from '@/interfaces';
-import { readAdminUsers, dispatchGetUsers } from '@/store/admin/accessors';
+import { readAdminUsers } from '@/store/admin/getters';
+import { dispatchGetUsers } from '@/store/admin/actions';
 
 @Component
 export default class AdminUsers extends Vue {

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

@@ -21,14 +21,17 @@
                 </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-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>
@@ -40,7 +43,7 @@ import {
   IUserProfileUpdate,
   IUserProfileCreate,
 } from '@/interfaces';
-import { dispatchGetUsers, dispatchCreateUser } from '@/store/admin/accessors';
+import { dispatchGetUsers, dispatchCreateUser } from '@/store/admin/actions';
 
 @Component
 export default class CreateUser extends Vue {

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

@@ -8,37 +8,92 @@
         <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
+              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>
+          <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>
+            <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-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-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
+                  :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-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-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>
@@ -46,11 +101,8 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 import { IUserProfile, IUserProfileUpdate } from '@/interfaces';
-import {
-  dispatchGetUsers,
-  dispatchUpdateUser,
-  readAdminOneUser,
-} from '@/store/admin/accessors';
+import { dispatchGetUsers, dispatchUpdateUser } from '@/store/admin/actions';
+import { readAdminOneUser } from '@/store/admin/getters';
 
 @Component
 export default class EditUser extends Vue {

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

@@ -27,7 +27,7 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 import { Store } from 'vuex';
-import { readUserProfile } from '@/store/main/accessors';
+import { readUserProfile } from '@/store/main/getters';
 
 @Component
 export default class UserProfile extends Vue {

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

@@ -6,17 +6,39 @@
       </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-btn @click="submit" :disabled="!valid">
-              Save
-            </v-btn>
-            <v-btn @click="reset">Reset</v-btn>
-            <v-btn @click="cancel">Cancel</v-btn>
+          <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>
@@ -25,7 +47,8 @@
 import { Component, Vue } from 'vue-property-decorator';
 import { Store } from 'vuex';
 import { IUserProfileUpdate } from '@/interfaces';
-import { dispatchUpdateUserProfile, readUserProfile } from '@/store/main/accessors';
+import { readUserProfile } from '@/store/main/getters';
+import { dispatchUpdateUserProfile } from '@/store/main/actions';
 
 @Component
 export default class UserProfileEdit extends Vue {

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

@@ -34,12 +34,15 @@
               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-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>
@@ -48,7 +51,8 @@
 import { Component, Vue } from 'vue-property-decorator';
 import { Store } from 'vuex';
 import { IUserProfileUpdate } from '@/interfaces';
-import { dispatchUpdateUserProfile, readUserProfile } from '@/store/main/accessors';
+import { readUserProfile } from '@/store/main/getters';
+import { dispatchUpdateUserProfile } from '@/store/main/actions';
 
 @Component
 export default class UserProfileEdit extends Vue {