xrazis
/
ichnaea
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

Make vue router changes

main
Haris Razis 4 years ago
parent
addfa5759c
commit
bb848db15c
4 changed files with 36 additions and 91 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 87
      web/src/components/Sidebar.vue
  2. 8
      web/src/store/modules/user.ts
  3. 2
      web/src/views/Login.vue
  4. 30
      web/src/views/Profile.vue

87
web/src/components/Sidebar.vue
View File

@ -6,9 +6,10 @@
</p>
<ul class="menu-list">
<li>
<router-link :to="{ name: 'DashboardHome', params: { username: $route.params.username }}" :class="{
<router-link :class="{
'has-background-white':
$route.name==='DashboardHome' }">
$route.name==='DashboardHome' }"
:to="{ name: 'DashboardHome', params: { username: $route.params.username }}">
<a>
<span class=" icon-text
">
@ -21,9 +22,9 @@
</router-link>
</li>
<li>
<router-link :to="{ name: 'Profile', params: { username: $route.params.username }}" :class="{
<router-link :class="{
'has-background-white':
$route.name==='Profile' }">
$route.name==='Profile' }" :to="{ name: 'Profile', params: { username: $route.params.username }}">
<a>
<span class="icon-text">
<span class="icon">
@ -35,10 +36,10 @@
</router-link>
</li>
<li>
<router-link :to="{ name: 'Athletes', params: { username: $route.params.username }}"
:class="{
<router-link :class="{
'has-background-white':
$route.name==='Athletes' }">
$route.name==='Athletes' }"
:to="{ name: 'Athletes', params: { username: $route.params.username }}">
<a>
<span class="icon-text">
<span class="icon">
@ -50,72 +51,14 @@
</router-link>
</li>
</ul>
<p class="menu-label">
Athlete Data
</p>
<ul class="menu-list">
<li>
<router-link v-if="$store.getters.currentAthlete._id === ''" :to="{ name: 'Table', params: { id:
$store.getters.currentAthlete._id }}" :class="{
'has-background-white':
$route.name==='Table' }">
<a>
<span class="icon-text">
<span class="icon">
<i class="fas fa-table"/>
</span>
<span>&nbsp;Table</span>
</span>
</a>
</router-link>
<router-link v-else :to="{ name: 'Athletes', params: { id:
$route.params.username }}" :class="{
'disabled':
$store.getters.currentAthlete === '' }">
<a>
<span class="icon-text">
<span class="icon">
<i class="fas fa-table"/>
</span>
<span>&nbsp;Table</span>
</span>
</a>
</router-link>
</li>
<li>
<router-link v-if="$store.getters.currentAthlete === ''" :to="{ name: 'Chart', params: { id:
$store.getters.currentAthlete._id }}" :class="{
'has-background-white':
$route.name==='Chart' }">
<a>
<span class="icon-text">
<span class="icon">
<i class="fas fa-chart-area"/>
</span>
<span>&nbsp;Chart</span>
</span>
</a>
</router-link>
<router-link v-else :to="{ name: 'Athletes', params: { id: $route.params.username }}">
<a>
<span class="icon-text">
<span class="icon">
<i class="fas fa-chart-area"/>
</span>
<span>&nbsp;Charts</span>
</span>
</a>
</router-link>
</li>
</ul>
<p class="menu-label">
Help
</p>
<ul class="menu-list">
<ul id="help" class="menu-list">
<li>
<router-link :to="{ name: 'Guide'}" :class="{
<router-link :class="{
'has-background-white':
$route.name==='Guide' }">
$route.name==='Guide' }" :to="{ name: 'Guide'}">
<a>
<span class="icon-text">
<span class="icon">
@ -127,9 +70,9 @@
</router-link>
</li>
<li>
<router-link :to="{ name: 'Ticket'}" :class="{
<router-link :class="{
'has-background-white':
$route.name==='Ticket' }">
$route.name==='Ticket' }" :to="{ name: 'Ticket'}">
<a>
<span class="icon-text">
<span class="icon">
@ -141,9 +84,9 @@
</router-link>
</li>
<li>
<router-link :to="{ name: 'Docs'}" :class="{
<router-link :class="{
'has-background-white':
$route.name==='Docs' }">
$route.name==='Docs' }" :to="{ name: 'Docs'}">
<a href="" target="_blank">
<span class="icon-text">
<span class="icon mr-1">

8
web/src/store/modules/user.ts
View File

@ -52,6 +52,11 @@ export default class User extends VuexModule {
this.err = err
}
@Mutation
private update_user(user: UserInterface) {
this.user = user
}
@Action
private login(user: UserInterface) {
return new Promise((resolve, reject) => {
@ -132,7 +137,8 @@ export default class User extends VuexModule {
data: {...user}
})
.then((resp: AxiosResponse) => {
this.context.commit('auth_success', resp.data);
console.log(resp.data)
this.context.commit('update_user', resp.data);
resolve(resp)
})
.catch((err: Error) => {

2
web/src/views/Login.vue
View File

@ -73,7 +73,7 @@ export default class Login extends Vue {
this.$store.dispatch('login', user)
.then(() => this.$router.push({name: 'Dashboard', params: {username: this.username}}))
.catch(() => {
this.msg = this.$store.getters.getErr.response.data.errors.message || 'Something went wrong!'
this.msg = this.$store.getters.getErrUser.response.data.errors.message || 'Something went wrong!'
})
}
}

30
web/src/views/Profile.vue
View File

@ -1,6 +1,6 @@
<template>
<h1 class="title is-2">/profile</h1>
<form @submit="update">
<form @submit.prevent="update">
<div class="tile is-ancestor">
<div class="tile is-4 is-vertical is-parent">
<div class="tile is-child box">
@ -31,25 +31,25 @@
<p class="title">Change Password</p>
<div class="field">
<p class="control has-icons-left">
<input v-model="user.currentPassword" class="input" placeholder="Current Password" type="password">
<input v-model="currentPassword" class="input" placeholder="Current Password" type="password">
<span class="icon is-small is-left"><i class="fas fa-lock"></i></span>
</p>
</div>
<div class="field">
<p class="control has-icons-left">
<input v-model="user.newPassword" class="input" placeholder="New Password" type="password">
<input v-model="newPassword" class="input" placeholder="New Password" type="password">
<span class="icon is-small is-left"><i class="fas fa-lock"></i></span>
</p>
</div>
<div class="field">
<p class="control has-icons-left">
<input v-model="user.repeatNewPassword" class="input" placeholder="Confirm Password" type="password">
<input v-model="repeatNewPassword" class="input" placeholder="Confirm Password" type="password">
<span class="icon is-small is-left"><i class="fas fa-lock"></i></span>
</p>
</div>
<div class="field">
<p class="control">
<button class="button is-primary is-rounded" type="submit">
<button class="button is-primary is-rounded">
Update
</button>
</p>
@ -66,7 +66,7 @@
<li>Has 12 Characters, Minimum</li>
<li>Includes Numbers, Symbols, Capital Letters, and Lower-Case Letters</li>
<li>Isn’t a Dictionary Word or Combination of Dictionary Words</li>
<li>Doesn’t Rely on Obvious Substitutions</li>
<li>Doesn't Rely on Obvious Substitutions</li>
</ul>
</div>
</div>
@ -87,30 +87,26 @@ interface UpdatedUser extends UserInterface {
export default class Profile extends Vue {
private user = <UpdatedUser>{};
private date = '';
private currentPassword = '';
private newPassword = '';
private repeatNewPassword = '';
private msgSuccess = '';
private msgError = '';
created() {
mounted() {
this.user = this.$store.getters.currentUser
this.date = new Date(this.user.registered).toLocaleString()
}
private update() {
if (this.user.newPassword != this.user.repeatNewPassword) {
if (this.newPassword != this.repeatNewPassword) {
this.msgError = 'Passwords do not match!'
return
}
let user = {
_id: this.user._id,
username: this.user.username,
email: this.user.email,
password: this.user.password,
newPassword: this.user.newPassword,
repeatNewPassword: this.user.repeatNewPassword
}
Object.assign(this.user, {password: this.currentPassword, newPassword: this.newPassword})
this.$store.dispatch('updateUser', user)
this.$store.dispatch('updateUser', this.user)
.then(() => this.msgSuccess = 'User updated!')
.catch(() => this.msgError = this.$store.getters.getErrUser.response.data.errors.message ||
'Something went wrong!')

Write Preview
Loading…
Cancel
Save