Skip to content

Commit

Permalink
✨ : user creation & edition
Browse files Browse the repository at this point in the history 
resolves #450
  • Loading branch information
@juwit
juwit committed Dec 28, 2020
1 parent 2b6d435 commit d7f1ed4
Show file tree
Hide file tree
Showing 11 changed files with 457 additions and 122 deletions.
223 changes: 129 additions & 94 deletions src/main/client/app/pages/users/user-edit.vue
View file
Original file line number Diff line number Diff line change
@@ -1,111 +1,139 @@
<template>
<div class="block">
<div class="block_head">
<h2>User {{ user.username }}</h2>
</div>
<div>
<div class="block">
<div class="block_head">
<h2>User {{ user.username }}</h2>
</div>

<div class="block_content">
<b-form>
<b-form-group
v-if="user.new"
label="Username"
description="The username"
>
<b-form-input v-model="user.username" />
</b-form-group>
<div class="block_content">
<b-form>
<b-form-group
v-if="user.new"
label="Username"
description="The username"
>
<b-form-input v-model="user.username" />
</b-form-group>

<b-form-row
v-if="! user.oauth2User"
>
<b-form-group
label="Password"
description="Change the user password"
class="mr-2"
label="Team"
description="The user team"
>
<b-form-input
v-model="user.password"
type="password"
:state="user.password && user.password === user.passwordConfirmation"
<vue-multiselect
v-model="user.team"
:options="teams"
track-by="id"
label="id"
:multiple="false"
placeholder="Select user team"
:show-labels="false"
/>
</b-form-group>
<b-form-group
label="Confirm password"
description="Confirm the user password"
label="Administrator"
:description="user.admin === true ? 'The user is an administrator' : 'The user is not an administrator'"
>
<b-form-input
v-model="user.passwordConfirmation"
<b-form-checkbox
v-model="user.admin"
type="password"
:state="user.password && user.password === user.passwordConfirmation"
switch
size="lg"
/>
</b-form-group>
</b-form-row>
</b-form>
</div>

<b-form-group
label="Team"
description="The user team"
<div class="block_content">
<b-button
variant="primary"
@click="saveUser"
>
<vue-multiselect
v-model="user.team"
:options="teams"
track-by="id"
label="id"
:multiple="false"
placeholder="Select user team"
:show-labels="false"
<font-awesome-icon
icon="save"
class="icon"
/>
</b-form-group>
<b-form-group
label="Administrator"
:description="user.admin === true ? 'The user is an administrator' : 'The user is not an administrator'"
Save User
</b-button>

<b-button
v-if="! user.new"
variant="danger"
class="ml-3"
@click="deleteUser"
>
<b-form-checkbox
v-model="user.admin"
type="password"
switch
size="lg"
<font-awesome-icon
icon="user-minus"
class="icon"
/>
</b-form-group>
</b-form>

<b-alert
v-if="user.oauth2User"
show
>
This user is an OAuth2 User. Its password cannot be changed.
</b-alert>
Delete User
</b-button>
</div>
</div>
<div class="block mt-2">
<div class="block_head">
<h2>Change user password</h2>
</div>

<div class="block_content">
<b-button
variant="primary"
@click="saveUser"
>
<font-awesome-icon
icon="save"
class="icon"
/>
Save User
</b-button>
<div class="block_content">
<b-form v-if="! user.oauth2User">
<b-form-row
v-if="! user.oauth2User"
>
<b-form-group
label="Password"
description="Change the user password"
class="mr-2"
>
<b-form-input
v-model="user.password"
type="password"
:state="user.password && user.password === user.passwordConfirmation"
/>
</b-form-group>
<b-form-group
label="Confirm password"
description="Confirm the user password"
>
<b-form-input
v-model="user.passwordConfirmation"
type="password"
:state="user.password && user.password === user.passwordConfirmation"
/>
</b-form-group>
</b-form-row>
</b-form>

<b-alert
v-else
show
>
This user is an OAuth2 User. Its password cannot be changed.
</b-alert>
</div>

<b-button
v-if="! user.new"
variant="danger"
class="ml-3"
@click="deleteUser"
<div
v-if="! user.oauth2User"
class="block_content"
>
<font-awesome-icon
icon="user-minus"
class="icon"
/>
Delete User
</b-button>
<b-button
variant="primary"
@click="changePassword"
>
<font-awesome-icon
icon="save"
class="icon"
/>
Change user password
</b-button>
</div>
</div>
</div>
</template>

<script>
import { getTeams } from '@/shared/api/teams-api';
import { createUser, deleteUser, updateUser } from '@/shared/api/users-api';
import { changeUserPassword, deleteUser, updateUser } from '@/shared/api/users-api';
import { displayNotification } from '@/shared/services/modal-service';
export default {
name: 'AppUserEdition',
Expand All @@ -125,29 +153,36 @@
teams: [],
}),
async created() {
console.log(this.user);
this.teams = await getTeams();
},
methods: {
async redirectToUsersPage() {
await this.$router.push({ name: 'users' });
},
async saveUser() {
console.log('Save User', this.user);
if (this.user.new) {
await createUser(this.user);
} else {
await updateUser(this.user);
}
await updateUser(this.user)
.then(() => displayNotification(this, { message: 'User updated', variant: 'success' }))
.then(this.redirectToUsersPage)
.catch(({ error, message }) => displayNotification(this, { title: error, message, variant: 'danger' }));
},
async changePassword() {
await changeUserPassword(this.username, this.user.password)
.then(() => displayNotification(this, { message: 'Password changed', variant: 'success' }))
.catch(({ error, message }) => displayNotification(this, { title: error, message, variant: 'danger' }));
},
async deleteUser() {
console.log('Delete user', this.username);
await deleteUser(this.username);
await deleteUser(this.username)
.then(() => displayNotification(this, { message: 'User deleted', variant: 'success' }))
.then(this.redirectToUsersPage)
.catch(({ error, message }) => displayNotification(this, { title: error, message, variant: 'danger' }));
},
},
};
</script>

<style scoped>
/deep/ .user-row td:first-child {
font-size: 16px;
vertical-align: middle;
}
/deep/ .user-row td:first-child {
font-size: 16px;
vertical-align: middle;
}
</style>
1 change: 1 addition & 0 deletions src/main/client/app/pages/users/user-name.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<b-badge
v-if="user.admin"
variant="primary"
class="mr-1"
>
<font-awesome-icon icon="user-shield" /> Administrator
</b-badge>
Expand Down
111 changes: 111 additions & 0 deletions src/main/client/app/pages/users/user-new.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
<template>
<div class="block">
<div class="block_head">
<h2>New user</h2>
</div>

<div class="block_content">
<b-form>
<b-form-group
label="Username"
description="The username"
>
<b-form-input v-model="user.username" />
</b-form-group>

<b-form-group
label="Password"
description="Set the user password"
class="mr-2"
>
<b-form-input
v-model="user.password"
type="password"
:state="user.password && user.password === user.passwordConfirmation"
/>
</b-form-group>
<b-form-group
label="Confirm password"
description="Confirm the user password"
>
<b-form-input
v-model="user.passwordConfirmation"
type="password"
:state="user.password && user.password === user.passwordConfirmation"
/>
</b-form-group>

<b-form-group
label="Team"
description="The user team"
>
<vue-multiselect
v-model="user.team"
:options="teams"
track-by="id"
label="id"
:multiple="false"
placeholder="Select user team"
:show-labels="false"
/>
</b-form-group>
<b-form-group
label="Administrator"
:description="user.admin === true ? 'The user is an administrator' : 'The user is not an administrator'"
>
<b-form-checkbox
v-model="user.admin"
type="password"
switch
size="lg"
/>
</b-form-group>
</b-form>
</div>

<div class="block_content">
<b-button
variant="primary"
@click="createUser"
>
<font-awesome-icon
icon="user-plus"
class="icon"
/>
Create User
</b-button>
</div>
</div>
</template>

<script>
import { getTeams } from '@/shared/api/teams-api';
import { createUser } from '@/shared/api/users-api';
import { displayNotification } from '@/shared/services/modal-service';
export default {
name: 'AppUserEdition',
data: () => ({
teams: [],
user: {},
}),
async created() {
this.teams = await getTeams();
},
methods: {
async createUser() {
await createUser(this.user)
.then(() => displayNotification(this, { message: 'User created', variant: 'success' }))
.then(() => this.$router.push({ name: 'users' }))
.catch(({ error, message }) => displayNotification(this, { title: error, message, variant: 'danger' }));
},
},
};
</script>

<style scoped>
/deep/ .user-row td:first-child {
font-size: 16px;
vertical-align: middle;
}
</style>
Loading

0 comments on commit d7f1ed4

Please sign in to comment.