Skip to content
Snippets Groups Projects
Commit 2163eaa3 authored by moon's avatar moon
Browse files

#42: SignUp, Profile, UserTable pages are updated

parent 2b292b74
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
web/src/components/UserTable.vue
+ 15
− 5
View file @ 2163eaa3
......@@ -35,20 +35,32 @@ export default {
},
},
{
title: 'Name',
title: 'User ID',
data: 'username',
},
{
title: 'Name',
data: 'full_name',
},
{
title: 'Email',
data: 'email',
},
{
title: 'Affiliation',
data: 'Affiliation',
data: 'current_affiliation',
},
{
title: 'Profile Link',
data: 'ProfileLink',
data: 'profile_link',
},
{
title: 'Current Role',
data: 'current_role',
},
{
title: 'Motivation',
data: 'motivation_text',
},
{
title: 'Joined',
......@@ -62,8 +74,6 @@ export default {
title: 'Status',
data: 'confirmed',
},
];
const nTableOptions = {
......
web/src/views/Profile.vue
+ 101
− 4
View file @ 2163eaa3
......@@ -11,11 +11,17 @@
<div class="panel-body">
<div class="container-fluid col-md-12">
<div class="row">
<div class="text col-sm-3">User Name</div>
<div class="text col-sm-3">User ID</div>
<div class="col-sm-9">
<b>{{response.username}}</b>
</div>
</div>
<div class="row">
<div class="text col-sm-3">Full Name</div>
<div class="col-sm-9">
<b>{{response.full_name}}</b>
</div>
</div>
<div class="row">
<div class="text col-sm-3">Email</div>
<div class="col-sm-9">
......@@ -28,16 +34,49 @@
{{setRole(response.role.name)}}
</div>
</div>
<div class="row">
<div class="text col-sm-3">Current role</div>
<div class="col-sm-9">
<select v-model="current_role" class="bg-white py-1 text-gray-700 outline-none bg-transparent border-b hover:border-blue-700 focus:bg-gray-200 focus:border-blue-700" id="inline-current-role" >
<option id="phd" value="PhD">PhD</option>
<option id="postdoc" value="PostDoc">PostDoc</option>
<option id="research_scientist" value="Research_Scientist">Research Scientist</option>
<option id="principal_investigator" value="Principal_Investigator">Principal Investigator</option>
</select>
</div>
</div>
<div class="row">
<div class="text col-sm-3">Scientific Discipline</div>
<div class="col-sm-9">
<input type="checkbox" id="physics" value="Physics" v-model="scientific_discipline">
<label class="mx-3" for="physics">Physics</label>
<input type="checkbox" id="chemistry" value="Chemistry" v-model="scientific_discipline">
<label class="mx-3" for="chemistry">Chemistry</label>
<input type="checkbox" id="biology" value="Biology" v-model="scientific_discipline">
<label class="mx-3" for="biology">Biology</label>
<input type="checkbox" id="computer_science" value="Computer_Science" v-model="scientific_discipline">
<label class="mx-3" for="computer_science">Computer Science</label>
<input type="checkbox" id="mathematics" value="Mathematics" v-model="scientific_discipline">
<label class="mx-3" for="mathematics">Mathematics</label>
</div>
</div>
<div class="row">
<div class="text col-sm-3">Motivation</div>
<div class="col-sm-9">
<input v-model="motivation_text" class="bg-white w-3/4 py-1 text-gray-700 outline-none bg-transparent border-b hover:border-blue-700 focus:bg-gray-200 focus:border-blue-700" id="inline-motivation-text" type="text" :placeholder="motivation_text === ''? motivation_text = response.motivation_text : motivation_text">
</div>
</div>
<div class="row">
<div class="text col-sm-3">Affiliation</div>
<div class="col-sm-9">
{{response.Affiliation}}
<input v-model="current_affiliation" class="bg-white w-3/4 py-1 text-gray-700 outline-none bg-transparent border-b hover:border-blue-700 focus:bg-gray-200 focus:border-blue-700" id="inline-current-affiliation" type="text" :placeholder="current_affiliation === ''? current_affiliation = response.current_affiliation : current_affiliation">
</div>
</div>
<div class="row">
<div class="text col-sm-3">Link</div>
<div class="text col-sm-3">Profile Link</div>
<div class="col-sm-9">
{{response.ProfileLink}}
{{response.profile_link}}
<input v-model="profile_link" class="bg-white w-3/4 py-1 text-gray-700 outline-none bg-transparent border-b hover:border-blue-700 focus:bg-gray-200 focus:border-blue-700" id="inline-profile-link" type="text" :placeholder="profile_link === ''? profile_link = response.profile_link : profile_link">
</div>
</div>
......@@ -54,6 +93,9 @@
</div>
</div>
</div>
<button class="btn btn-warning mt-10" @click="update">
Update Profile
</button>
</div>
</div>
......@@ -94,6 +136,7 @@ import FetchUsers from "@/components/CMS/fetchUsers"
import UserTable from '../components/UserTable.vue';
const _ = require('lodash')
let host = require('@/components/js/const').apiHost;
export default {
name: 'ProfilePage',
......@@ -105,10 +148,19 @@ export default {
},
data() {
return {
user: '',
motivation_text: '',
current_role: '',
scientific_discipline: '',
current_affiliation: '',
profile_link: '',
isDev: process.env.NODE_ENV === 'development'
}
},
computed: {
jwt: function () {
return this.$store.getters['User/jwt']
},
userData: function () {
return this.$store.getters['User/userData']
},
......@@ -124,12 +176,57 @@ export default {
vm.$store.dispatch('User/setUserRole', roleName)
return roleName
},
async update(e) {
e.preventDefault()
const vm = this;
if(vm.isDev) {
host = require('@/components/js/const').devApiHost;
}
const jwt = vm.jwt;
if(jwt === null) {
vm.loaded = false;
return
}
let dat = {
id: vm.user,
motivation_text: vm.motivation_text,
current_role: vm.current_role,
current_affiliation: vm.current_affiliation,
profile_link: vm.profile_link,
scientific_discipline: vm.scientific_discipline
};
try {
const res = await this.axios.put(`${host}/api/users/${vm.user}`, dat, {
headers: {
Authorization: `Bearer ${jwt}`
}
});
// console.log(res.data)
await vm.$router.push('/profile')
} catch(error) {
// console.log(error.response.data.error.message)
// console.log(error.response)
this.error = true
this.errorMsg = error
}
},
},
mounted: function () {
const vm = this
if(vm.userData === null) {
this.$router.push('/login')
} else {
vm.user = vm.userData.id;
vm.current_role = vm.userData.current_role;
vm.scientific_discipline = vm.userData.scientific_discipline;
}
}
}
......
web/src/views/SignUp.vue
+ 18
− 2
View file @ 2163eaa3
......@@ -24,6 +24,16 @@
<h1 class="text-left font-bold mb-2 text-xl sm:text-2xl font-montserrat">Username</h1>
<input type="text" v-model="username" class="text-xl outline-none pb-2 w-4/5 bg-transparent border-b hover:border-blue-700 focus:border-blue-700">
</div>
<div class="my-4">
<h1 class="text-left font-bold mb-2 text-xl sm:text-2xl font-montserrat">Current Role</h1>
<select v-model="current_role" class="bg-white pb-2 w-4/5 text-gray-700 outline-none bg-transparent border-b hover:border-blue-700 focus:bg-gray-200 focus:border-blue-700" id="inline-current-role" >
<option id="phd" value="PhD">PhD</option>
<option id="postdoc" value="PostDoc">PostDoc</option>
<option id="research_scientist" value="Research_Scientist">Research Scientist</option>
<option id="principal_investigator" value="Principal_Investigator">Principal Investigator</option>
</select>
</div>
<button type="submit" :disabled="name.length < 6 || password.length < 6 || username.length < 3" class="bg-green-400 p-5 text-white">
Sign Up <span class="fa fa-arrow-right"/>
......@@ -45,6 +55,9 @@ export default {
email: '',
password: '',
username: '',
motivation: '',
current_role: '',
scientific_discipline: [],
error: false,
errorMsg: `An Error occurred, please try again`,
isDev: process.env.NODE_ENV === 'development',
......@@ -63,10 +76,13 @@ export default {
}
await vm.axios.post(`${host}/api/auth/local/register`, {
name: vm.name,
full_name: vm.name,
password: vm.password,
email: vm.email,
username: vm.username
username: vm.username,
motivation_text: vm.motivation,
current_role: vm.current_role,
scientific_discipline: vm.scientific_discipline
})
vm.$router.push('login')
} catch(e) {
......
web/src/views/UpdateUser.vue
+ 64
− 4
View file @ 2163eaa3
......@@ -34,6 +34,19 @@
</div>
</div>
<div class="md:flex md:items-center mx-3 mb-6">
<div class="md:w-1/3">
<label class="text-left font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-entity-id">
Full Name
</label>
</div>
<div class="md:w-2/3">
<p class="mt-3">
{{full_name}}
</p>
</div>
</div>
<div class="md:flex md:items-center mx-3 mb-6">
<div class="md:w-1/3">
<label class="text-left font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-change-operation">
......@@ -51,7 +64,7 @@
<div class="md:flex md:items-center mx-3 mb-6">
<div class="md:w-1/3">
<label class="text-left font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-status">
<label class="text-left font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-affiliation">
Affiliation
</label>
</div>
......@@ -64,7 +77,7 @@
<div class="md:flex md:items-center mx-3 mb-6">
<div class="md:w-1/3">
<label class="text-left font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-status">
<label class="text-left font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-profile">
Profile Link
</label>
</div>
......@@ -75,6 +88,45 @@
</div>
</div>
<div class="md:flex md:items-center mx-3 mb-6">
<div class="md:w-1/3">
<label class="text-left font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-motivation">
Motivation
</label>
</div>
<div class="md:w-2/3">
<p class="mt-3">
{{motivation_text}}
</p>
</div>
</div>
<div class="md:flex md:items-center mx-3 mb-6">
<div class="md:w-1/3">
<label class="text-left font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-current-role">
Current Role
</label>
</div>
<div class="md:w-2/3">
<p class="mt-3">
{{current_role}}
</p>
</div>
</div>
<div class="md:flex md:items-center mx-3 mb-6">
<div class="md:w-1/3">
<label class="text-left font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-scientific-discipline">
Scientific Discipline
</label>
</div>
<div class="md:w-2/3">
<p class="mt-3">
{{scientific_discipline}}
</p>
</div>
</div>
<div class="md:flex md:items-center mx-3 mb-6">
<div class="md:w-1/3">
<label class="text-left font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-status">
......@@ -122,6 +174,10 @@ export default {
blocked: true,
Affiliation: '',
ProfileLink: '',
full_name: '',
motivation_text: '',
current_role: '',
scientific_discipline: '',
createdAt: '', // datetime
updatedAt: '', // datetime
loaded: false,
......@@ -255,8 +311,12 @@ export default {
vm.role.id = d.role.id;
vm.confirmed = d.confirmed;
vm.blocked = d.blocked;
vm.Affiliation = d.Affiliation;
vm.ProfileLink = d.ProfileLink;
vm.full_name = d.full_name;
vm.Affliation = d.current_affiliation;
vm.ProfileLink = d.profile_link;
vm.motivation_text = d.motivation_text;
vm.current_role = d.current_role;
vm.scientific_discipline = d.scientific_discipline;
vm.createdAt = d.createdAt;
vm.updatedAt = d.updatedAt;
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment