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
Unified 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> </p>
<ul class="menu-list"> <ul class="menu-list">
<li> <li>
<router-link :to="{ name: 'DashboardHome', params: { username: $route.params.username }}" :class="{ <router-link :class="{
'has-background-white': 'has-background-white':
$route.name==='DashboardHome' }"> $route.name==='DashboardHome' }"
:to="{ name: 'DashboardHome', params: { username: $route.params.username }}">
<a> <a>
<span class=" icon-text <span class=" icon-text
"> ">
@ -21,9 +22,9 @@
</router-link> </router-link>
</li> </li>
<li> <li>
<router-link :to="{ name: 'Profile', params: { username: $route.params.username }}" :class="{ <router-link :class="{
'has-background-white': 'has-background-white':
$route.name==='Profile' }"> $route.name==='Profile' }" :to="{ name: 'Profile', params: { username: $route.params.username }}">
<a> <a>
<span class="icon-text"> <span class="icon-text">
<span class="icon"> <span class="icon">
@ -35,10 +36,10 @@
</router-link> </router-link>
</li> </li>
<li> <li>
<router-link :to="{ name: 'Athletes', params: { username: $route.params.username }}" <router-link :class="{
:class="{
'has-background-white': 'has-background-white':
$route.name==='Athletes' }"> $route.name==='Athletes' }"
:to="{ name: 'Athletes', params: { username: $route.params.username }}">
<a> <a>
<span class="icon-text"> <span class="icon-text">
<span class="icon"> <span class="icon">
@ -50,72 +51,14 @@
</router-link> </router-link>
</li> </li>
</ul> </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"> <p class="menu-label">
Help Help
</p> </p>
<ul class="menu-list"> <ul id="help" class="menu-list">
<li> <li>
<router-link :to="{ name: 'Guide'}" :class="{ <router-link :class="{
'has-background-white': 'has-background-white':
$route.name==='Guide' }"> $route.name==='Guide' }" :to="{ name: 'Guide'}">
<a> <a>
<span class="icon-text"> <span class="icon-text">
<span class="icon"> <span class="icon">
@ -127,9 +70,9 @@
</router-link> </router-link>
</li> </li>
<li> <li>
<router-link :to="{ name: 'Ticket'}" :class="{ <router-link :class="{
'has-background-white': 'has-background-white':
$route.name==='Ticket' }"> $route.name==='Ticket' }" :to="{ name: 'Ticket'}">
<a> <a>
<span class="icon-text"> <span class="icon-text">
<span class="icon"> <span class="icon">
@ -141,9 +84,9 @@
</router-link> </router-link>
</li> </li>
<li> <li>
<router-link :to="{ name: 'Docs'}" :class="{ <router-link :class="{
'has-background-white': 'has-background-white':
$route.name==='Docs' }"> $route.name==='Docs' }" :to="{ name: 'Docs'}">
<a href="" target="_blank"> <a href="" target="_blank">
<span class="icon-text"> <span class="icon-text">
<span class="icon mr-1"> <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 this.err = err
} }
@Mutation
private update_user(user: UserInterface) {
this.user = user
}
@Action @Action
private login(user: UserInterface) { private login(user: UserInterface) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
@ -132,7 +137,8 @@ export default class User extends VuexModule {
data: {...user} data: {...user}
}) })
.then((resp: AxiosResponse) => { .then((resp: AxiosResponse) => {
this.context.commit('auth_success', resp.data); console.log(resp.data)
this.context.commit('update_user', resp.data);
resolve(resp) resolve(resp)
}) })
.catch((err: Error) => { .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) this.$store.dispatch('login', user)
.then(() => this.$router.push({name: 'Dashboard', params: {username: this.username}})) .then(() => this.$router.push({name: 'Dashboard', params: {username: this.username}}))
.catch(() => { .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> <template>
<h1 class="title is-2">/profile</h1> <h1 class="title is-2">/profile</h1>
<form @submit="update"> <form @submit.prevent="update">
<div class="tile is-ancestor"> <div class="tile is-ancestor">
<div class="tile is-4 is-vertical is-parent"> <div class="tile is-4 is-vertical is-parent">
<div class="tile is-child box"> <div class="tile is-child box">
@ -31,25 +31,25 @@
<p class="title">Change Password</p> <p class="title">Change Password</p>
<div class="field"> <div class="field">
<p class="control has-icons-left"> <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> <span class="icon is-small is-left"><i class="fas fa-lock"></i></span>
</p> </p>
</div> </div>
<div class="field"> <div class="field">
<p class="control has-icons-left"> <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> <span class="icon is-small is-left"><i class="fas fa-lock"></i></span>
</p> </p>
</div> </div>
<div class="field"> <div class="field">
<p class="control has-icons-left"> <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> <span class="icon is-small is-left"><i class="fas fa-lock"></i></span>
</p> </p>
</div> </div>
<div class="field"> <div class="field">
<p class="control"> <p class="control">
<button class="button is-primary is-rounded" type="submit"> <button class="button is-primary is-rounded">
Update Update
</button> </button>
</p> </p>
@ -66,7 +66,7 @@
<li>Has 12 Characters, Minimum</li> <li>Has 12 Characters, Minimum</li>
<li>Includes Numbers, Symbols, Capital Letters, and Lower-Case Letters</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>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> </ul>
</div> </div>
</div> </div>
@ -87,30 +87,26 @@ interface UpdatedUser extends UserInterface {
export default class Profile extends Vue { export default class Profile extends Vue {
private user = <UpdatedUser>{}; private user = <UpdatedUser>{};
private date = ''; private date = '';
private currentPassword = '';
private newPassword = '';
private repeatNewPassword = '';
private msgSuccess = ''; private msgSuccess = '';
private msgError = ''; private msgError = '';
created() { mounted() {
this.user = this.$store.getters.currentUser this.user = this.$store.getters.currentUser
this.date = new Date(this.user.registered).toLocaleString() this.date = new Date(this.user.registered).toLocaleString()
} }
private update() { private update() {
if (this.user.newPassword != this.user.repeatNewPassword) { if (this.newPassword != this.repeatNewPassword) {
this.msgError = 'Passwords do not match!' this.msgError = 'Passwords do not match!'
return return
} }
let user = { Object.assign(this.user, {password: this.currentPassword, newPassword: this.newPassword})
_id: this.user._id,
username: this.user.username,
email: this.user.email,
password: this.user.password,
newPassword: this.user.newPassword,
repeatNewPassword: this.user.repeatNewPassword
}
this.$store.dispatch('updateUser', user) this.$store.dispatch('updateUser', this.user)
.then(() => this.msgSuccess = 'User updated!') .then(() => this.msgSuccess = 'User updated!')
.catch(() => this.msgError = this.$store.getters.getErrUser.response.data.errors.message || .catch(() => this.msgError = this.$store.getters.getErrUser.response.data.errors.message ||
'Something went wrong!') 'Something went wrong!')

Write Preview
Loading…
Cancel
Save