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/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 {