Extract some types
This commit is contained in:
parent
9c0126b14c
commit
29f0c51e35
@ -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("setCurrentAccount", {
|
||||
await store.dispatch(SET_CURRENT_BUDGET, to.params.budgetid);
|
||||
await store.dispatch(SET_CURRENT_ACCOUNT, {
|
||||
accountid: to.params.accountid,
|
||||
budgetid: to.params.budgetid
|
||||
});
|
||||
|
||||
@ -1,22 +1,23 @@
|
||||
<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() {
|
||||
return {
|
||||
error: [],
|
||||
login: {
|
||||
user: "",
|
||||
user: "",
|
||||
password: ""
|
||||
},
|
||||
showPassword: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
mounted() {
|
||||
this.$store.commit(TITLE, "Login");
|
||||
},
|
||||
methods: {
|
||||
formSubmit (e) {
|
||||
formSubmit(e) {
|
||||
e.preventDefault();
|
||||
this.$store.dispatch(LOGIN, this.$data.login)
|
||||
.then(x => {
|
||||
@ -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"
|
||||
:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
|
||||
<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">
|
||||
{{ error }}
|
||||
</div>
|
||||
<div class="form-group">{{ 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>
|
||||
@ -1,64 +1,5 @@
|
||||
<!--{{define "title"}}Register{{end}}
|
||||
|
||||
{{template "base" .}}
|
||||
|
||||
{{define "more-head"}}
|
||||
<script>
|
||||
function checkPasswordMatchUi() {
|
||||
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";
|
||||
import { REGISTER } from "../store/action-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)})
|
||||
.then(x => x.json())
|
||||
.then(x => {
|
||||
this.$data.error = ""
|
||||
this.$store.commit(LOGIN_SUCCESS, x.token);
|
||||
})
|
||||
.catch(x => this.$data.error = ["Something went wrong!"]);
|
||||
this.$store.dispatch(REGISTER, this.$data.login)
|
||||
.then(() => this.$data.error = "")
|
||||
.catch(() => this.$data.error = ["Something went wrong!"]);
|
||||
|
||||
// TODO display invalidCredentials
|
||||
// TODO redirect to dashboard on success
|
||||
|
||||
@ -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 => {
|
||||
commit(LOGIN_SUCCESS, x);
|
||||
})
|
||||
.then(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: {
|
||||
|
||||
@ -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';
|
||||
Loading…
x
Reference in New Issue
Block a user