Extract some types

web/src/main.js

@@ -4,6 +4,7 @@ import router from './router/routes.js'
 import store from './store/index.js'
 import vuetify from './plugins/vuetify'
 import { loadFonts } from './plugins/webfontloader'
+import { SET_CURRENT_ACCOUNT, SET_CURRENT_BUDGET } from './store/action-types'
 
 loadFonts()
 
@@ -14,8 +15,8 @@ app.use(vuetify)
 app.mount('#app')
 
 router.beforeEach(async (to, from, next) => {
-  await store.dispatch("setCurrentBudget", to.params.budgetid);
+  await store.dispatch(SET_CURRENT_BUDGET, to.params.budgetid);
-  await store.dispatch("setCurrentAccount", {
+  await store.dispatch(SET_CURRENT_ACCOUNT, {
         accountid: to.params.accountid,
         budgetid: to.params.budgetid
   });

web/src/pages/Login.vue

@@ -1,5 +1,6 @@
 <script>
-import { LOGIN, LOGIN_SUCCESS, TITLE } from "../store/mutation-types";
+import { TITLE } from "../store/mutation-types";
+import { LOGIN } from '../store/action-types'
 
 export default {
     data() {
@@ -39,21 +40,23 @@ export default {
                 <v-text-field v-model="login.user" type="text" label="Username" />
             </v-col>
             <v-col cols="12">
-                <v-text-field v-model="login.password" label="Password"
+                <v-text-field
+                    v-model="login.password"
+                    label="Password"
                     :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
                     :type="showPassword ? 'text' : 'password'"
                     @click:append="showPassword = showPassword"
                     :error-message="error"
                     error-count="2"
-                    error />
+                    error
+                />
             </v-col>
         </v-row>
-        <div class="form-group">
+        <div class="form-group">{{ error }}</div>
-            {{ error }}
-        </div>
         <v-btn type="submit" @click="formSubmit">Login</v-btn>
         <p>
-	        New user? <router-link to="/register">Register</router-link> instead!
+            New user?
+            <router-link to="/register">Register</router-link>instead!
         </p>
     </v-container>
 </template>

web/src/pages/Register.vue

@@ -1,64 +1,5 @@
-<!--{{define "title"}}Register{{end}}
-
-{{template "base" .}}
-
-{{define "more-head"}}
 <script>
-function checkPasswordMatchUi() {
+import { REGISTER } from "../store/action-types";
-    if(checkPasswordMatch())
-        $("#divCheckPasswordMatch").html("Passwords match.");
-    else
-        $("#divCheckPasswordMatch").html("Passwords do not match!");
-}
-
-function checkPasswordMatch() {
-    var password = $("#password").val();
-    var confirmPassword = $("#password_confirm").val();
-    return password == confirmPassword;
-}
-
-$(document).ready(function () {
-    $("#password, #password_confirm").keyup(checkPasswordMatchUi);
-    $('#invalidCredentials').hide(); 
-    $('#loginForm').ajaxForm({
-        beforeSubmit: function(a, b, c) {
-            var match = checkPasswordMatch();
-            if(!match){
-                $("#divCheckPasswordMatch").fadeOut(300).fadeIn(300).fadeOut(300).fadeIn(300);
-            }
-            return match;
-        },
-        success: function() {
-            window.location.href = "/dashboard";
-        },
-        error: function() {
-            $('#invalidCredentials').show();
-        }
-    }); 
-}); 
-</script> 
-{{end}}
-
-{{define "main"}}
-<form id="loginForm" action="/api/v1/user/register" method="POST" class="center-block">
-    <div class="form-group">
-        <label for="password">Password</label>
-        <input type="password" name="password" id="password" class="form-control" placeholder="Password" />
-        <input type="password" id="password_confirm" class="form-control" placeholder="Verify password" />
-    </div>
-    
-    <div id="divCheckPasswordMatch"></div>
-
-    <div id="invalidCredentials">
-        Username already exists
-    </div>
-
-    <input type="submit" value="Login" class="form-control" />
-
-</form>
-{{end}}-->
-
-<script>import { LOGIN_SUCCESS } from "../store/mutation-types";
 
 export default {
     data() {
@@ -73,13 +14,9 @@ export default {
     methods: {
         formSubmit (e) {
             e.preventDefault();
-            fetch("/api/v1/user/register", {method: "POST", body: JSON.stringify(this.$data.login)})
+            this.$store.dispatch(REGISTER, this.$data.login)
-                .then(x => x.json())
+                .then(() => this.$data.error = "")
-                .then(x => {
+                .catch(() => this.$data.error = ["Something went wrong!"]);
-                    this.$data.error = ""
-                    this.$store.commit(LOGIN_SUCCESS, x.token);
-                })
-                .catch(x => this.$data.error = ["Something went wrong!"]);
 
             // TODO display invalidCredentials
             // TODO redirect to dashboard on success

web/src/store/index.js

@@ -1,5 +1,6 @@
 import { createStore, createLogger } from 'vuex'
-import { LOGIN, LOGIN_SUCCESS, LOGOUT, TITLE } from './mutation-types'
+import { LOGIN_SUCCESS, LOGOUT, TITLE } from './mutation-types'
+import { FETCH_ACCOUNT, FETCH_BUDGET, GET, REGISTER, IMPORT_YNAB, LOGIN, NEW_BUDGET, POST, SET_CURRENT_ACCOUNT, SET_CURRENT_BUDGET} from './action-types'
 
 const store = createStore({
     state() {
@@ -76,19 +77,22 @@ const store = createStore({
         [LOGIN]({ state, commit }, login) {
             return fetch("/api/v1/user/login", { method: "POST", body: JSON.stringify(login) })
                 .then(x => x.json())
-                .then(x => {
+                .then(x => commit(LOGIN_SUCCESS, x))
-                    commit(LOGIN_SUCCESS, x);
-                })
         },
-        YNAB({ getters, dispatch }, formData) {
+        [REGISTER]({ state, commit }, login) {
+            return fetch("/api/v1/user/register", { method: "POST", body: JSON.stringify(login) })
+                .then(x => x.json())
+                .then(x => commit(LOGIN_SUCCESS, x))
+        },
+        [IMPORT_YNAB]({ getters, dispatch }, formData) {
             return dispatch("POST", { path: "/budget/" + getters.CurrentBudget.ID + "/import/ynab", body: formData });
         },
-        GET({ getters }, { path }) {
+        [GET]({ getters }, { path }) {
             return fetch("/api/v1" + path, {
                 headers: getters.AuthHeaders,
             })
         },
-        POST({ getters }, { path, body }) {
+        [POST]({ getters }, { path, body }) {
             return fetch("/api/v1" + path, {
                 method: "POST",
                 headers: getters.AuthHeaders,
@@ -104,7 +108,7 @@ const store = createStore({
             const data = await response.json();
             commit("setBudgets", data.Budgets);
         },*/
-        async newBudget({ state, commit, dispatch, rootState }, budgetName) {
+        async [NEW_BUDGET]({ state, commit, dispatch, rootState }, budgetName) {
             const result = await dispatch("POST", {
                 path: "/budget/new",
                 body: JSON.stringify({ name: budgetName })
@@ -112,20 +116,20 @@ const store = createStore({
             const response = await result.json();
             commit("addBudget", response)
         },
-        async setCurrentBudget({ state, commit, dispatch, rootState }, budgetid) {
+        async [SET_CURRENT_BUDGET]({ state, commit, dispatch, rootState }, budgetid) {
             commit("setCurrentBudgetID", budgetid);
 
             if (budgetid == null)
                 return
 
-            await dispatch("fetchBudget", budgetid)
+            await dispatch(FETCH_BUDGET, budgetid)
         },
-        async fetchBudget({ state, commit, dispatch, rootState }, budgetid) {
+        async [FETCH_BUDGET]({ state, commit, dispatch, rootState }, budgetid) {
             const result = await dispatch("GET", { path: "/budget/" + budgetid });
             const response = await result.json();
             return commit("setAccounts", response.Accounts);
         },
-        async fetchAccount({ state, commit, rootState }, accountid) {
+        async [FETCH_ACCOUNT]({ state, commit, rootState }, accountid) {
             const result = await fetch("/api/v1/account/" + accountid + "/transactions", {
                 headers: {
                     'Authorization': 'Bearer ' + rootState.Session.Token
@@ -134,17 +138,17 @@ const store = createStore({
             const response = await result.json();
             commit("setTransactions", response.Transactions);
         },
-        async setCurrentAccount({ state, commit, dispatch, getters }, { budgetid, accountid }) {
+        async [SET_CURRENT_ACCOUNT]({ state, commit, dispatch, getters }, { budgetid, accountid }) {
             if (budgetid == null)
                 return
 
-            await dispatch("fetchBudget", budgetid);
+            await dispatch(FETCH_BUDGET, budgetid);
             commit("setCurrentAccountID", accountid);
             if (accountid == null)
                 return
 
             commit(TITLE, getters.CurrentAccount.Name);
-            await dispatch("fetchAccount", accountid)
+            await dispatch(FETCH_ACCOUNT, accountid)
         }
     },
     getters: {

web/src/store/mutation-types.js

@@ -1,4 +1,3 @@
-export const LOGIN = 'Log in';
 export const LOGIN_SUCCESS = '✔ Logged in';
 export const LOGOUT = 'Log out';
 export const TITLE = 'Update title';