tobias/lrc-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added user view for admin and a lot of login stuff

Browse Source
This commit is contained in:
Tobias Kurze
2020-08-05 16:38:04 +02:00
parent 0f3291266a
commit d8eda00a1e
12 changed files with 274 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.vue
View File

@@ -3,7 +3,6 @@
<div id="bg">
<img src="./assets/lens.jpg" alt="">
</div>
{{dismissCountDown}}
<sync-loader :loading="isLoading"></sync-loader>
<b-alert
:show="dismissCountDown"
@@ -47,7 +46,7 @@
</b-nav-form>
<b-nav-item-dropdown split split-to="admin" v-if="authenticated" variant="outline-danger" :text="$t('admin')">
<b-dropdown-item :to="{name: 'admin.user'}">{{ $t('user') }}</b-dropdown-item>
<b-dropdown-item :to="{name: 'admin.users'}">{{ $t('users') }}</b-dropdown-item>
<b-dropdown-item :to="{name: 'admin.group'}">{{ $t('group') }}</b-dropdown-item>
<b-dropdown-item href="#">Something else here...</b-dropdown-item>
</b-nav-item-dropdown>

2
src/api/index.ts
View File

@@ -29,7 +29,7 @@ export function revokeRefreshKey(jwt: any) {
}
export function register(userData: any) {
return axios.post(`${API_URL}/auth/register`, userData);
return axios.post(`${API_URL}/auth/v1/register/`, userData);
}
// This function probably isn't really useful here, as a user must be redirected to the actual OIDC provider.

2
src/components/Admin.vue
View File

@@ -8,7 +8,7 @@
<p class="subtitle error-msg">{{ errorMsg }}</p>
<router-link :to="{ name: 'admin.group'}">{{ $t('group') }}</router-link>
<br>
<router-link :to="{ name: 'admin.user'}">{{ $t('user') }}</router-link>
<router-link :to="{ name: 'admin.users'}">{{ $t('user') }}</router-link>
<br>
<router-link :to="{ name: 'admin.permission'}">{{ $t('permission') }}</router-link>
</div>

0
src/components/Group.vue → src/components/Admin/Group.vue
View File

0
src/components/Permission.vue → src/components/Admin/Permission.vue
View File

178
src/components/Admin/User.vue Normal file
View File

@@ -0,0 +1,178 @@
<!-- components/Users.vue -->
<template>
<div>
<section class="hero is-primary">
<div class="hero-body">
<div class="container has-text-centered">
<h3>
<div class="text-center">
<font-awesome-icon class="float-left" icon="arrow-circle-left" @click="previousUser()"/>
<input type="number" style="font-size: small; max-width: 48px; text-align: center;"
v-model="new_user_id" @blur="manually_set_user_id()"
@input="manually_set_user_id()">
<font-awesome-icon class="float-right" icon="arrow-circle-right" @click="nextUser()"/>
</div>
</h3>
<h3 class="title">{{ user.id }} – {{ get_user_display_name() }}</h3>
<p><strong>{{ $t('nickname') }}:&nbsp</strong>{{ user.nickname }}</p>
<p><strong>{{ $t('first_name') }}:&nbsp</strong>{{ user.first_name }}</p>
<p><strong>{{ $t('last_name') }}:&nbsp</strong>{{ user.last_name }}</p>
<hr/>
<!--<p v-if="profile.role"><strong>{{$t('role')}}:&nbsp</strong>{{profile.role}}</p>-->
<p><strong>{{ $t('role') }}:&nbsp</strong><span v-if="user.role">{{ user.role }}</span><span
v-else>{{ $t('no specifc role') }}</span></p>
<p><strong>{{ $t('groups') }}:&nbsp</strong><span v-for="g in user.groups">{{ g.name }}, </span></p>
<p><strong>{{ $t('permissions') }}:&nbsp</strong></p>
<ul>
<li v-for="p in user.effective_permissions">{{ p.name }}</li>
</ul>
<hr/>
<p class="subtitle error-msg">{{ errorMsg }}</p>
<b-form inline @submit="delete_user">
<b-button style="margin-right: 5px;" type="submit" :disabled="!delete_checked" variant="danger">{{ $t('delete.user') }}</b-button>
<b-form-checkbox v-model="delete_checked">{{ $t('check.to.allow.deletion') }}</b-form-checkbox>
</b-form>
</div>
</div>
</section>
</div>
</template>
<script>
import {EventBus} from '@/utils';
import {getRemainingJwtValiditySeconds} from '../../utils';
import getRepository from '@/api/RepositoryFactory';
const UserRepository = getRepository('user');
export default {
props: ['user_id'],
data() {
return {
current_user_id: this.user_id == null ? 1 : parseInt(this.user_id),
current_user_index: null,
new_user_id: this.current_user_id,
isLoading: false,
users: [],
delete_checked: false,
errorMsg: '',
};
},
methods: {
fetch() {
this.isLoading = true;
// const { data } = await GroupRepository.get();
UserRepository.getUsers()
.then((response) => {
this.users = response.data;
this.isLoading = false;
});
},
get_user_display_name() {
let display_name = null;
if(this.user.first_name != null)
display_name = this.user.first_name;
if(this.user.last_name != null)
if(display_name != null) {
display_name += " " + this.user.last_name;
} else {
display_name = this.user.last_name;
}
if (this.user.nickname != null && this.user.nickname !== "") {
if (display_name.trim() === "") {
display_name = this.user.nickname;
} else {
display_name += " (" + this.user.nickname + ")";
}
}
if (display_name == null || display_name.trim() === "") {
display_name = this.user.email;
}
return display_name
},
calculate_current_user_index() {
this.current_user_index = this.userIds.findIndex((id) => {
return id === this.current_user_id;
});
},
previousUser() {
if (null == this.current_user_index) {
this.calculate_current_user_index();
}
if (this.current_user_index === 0) this.current_user_index = this.userIds.length - 1;
else this.current_user_index = this.current_user_index - 1;
this.current_user_id = this.userIds[this.current_user_index];
this.new_user_id = this.current_user_id;
},
nextUser() {
if (null == this.current_user_index) {
this.calculate_current_user_index();
}
if (this.current_user_index === this.userIds.length - 1) this.current_user_index = 0;
else this.current_user_index = this.current_user_index + 1;
this.current_user_id = this.userIds[this.current_user_index];
this.new_user_id = this.current_user_id;
},
manually_set_user_id() {
if (this.new_user_id == null || this.new_user_id === '') {
this.new_user_id = this.current_user_id;
return;
}
if (this.userIds.includes(parseInt(this.new_user_id))) {
this.current_user_id = parseInt(this.new_user_id);
}
this.new_user_id = this.current_user_id;
},
delete_user(){
alert("Not implemented!");
}
},
mounted() {
this.fetch();
},
beforeDestroy() {
// todo
},
computed: {
columns() {
if (this.users.length === 0) {
return [];
}
let columns = Object.keys(this.users[0]);
columns = columns.filter((value) => { // filter to only show some fields
return ["id", "first_name", "last_name", "email", "nickname", "role"].includes(value);
});
return columns;
},
user() {
if (this.users.length === 0) {
return [];
}
return this.users.filter((value) => value.id.toString() === this.current_user_id.toString()).pop();
},
userIds() {
let ids = [];
this.users.forEach((elem) => {
ids.push(parseInt(elem.id));
});
return ids;
},
},
};
</script>
<style lang="scss">
.error-msg {
color: red;
font-weight: bold;
}
</style>

15
src/components/User.vue → src/components/Admin/Users.vue
View File

@@ -1,15 +1,16 @@
<!-- components/User.vue -->
<!-- components/Users.vue -->
<template>
<div>
<section class="hero is-primary">
<div class="hero-body">
<div class="container has-text-centered">
<h3 class="title">Manage users</h3>
<div>{{users}}</div>
<h3>Users</h3>
<ul>
<li v-for="(user) in users">
<a href="#">({{user.id}}) {{user.first_name}}</a>
<router-link :to="{name: 'admin.user', params: {user_id: user.id}}">
({{user.id}}) {{user.first_name}}
</router-link>
</li>
</ul>
@@ -56,7 +57,7 @@
<script>
import {EventBus} from '@/utils';
import {getRemainingJwtValiditySeconds} from '../utils';
import {getRemainingJwtValiditySeconds} from '../../utils';
import getRepository from '@/api/RepositoryFactory';
const UserRepository = getRepository('user');
@@ -130,7 +131,11 @@
if (this.users.length === 0) {
return [];
}
return Object.keys(this.users[0]);
let columns = Object.keys(this.users[0]);
columns = columns.filter((value)=>{ // filter to only show some fields
return ["id", "first_name", "last_name", "email", "nickname", "role"].includes(value);
});
return columns;
},
},
};

88
src/components/Login.vue
View File

@@ -34,6 +34,8 @@
<a class="btn btn-primary" role="button" href="/api/auth/oidc?redirect_url=/login">{{$t('Login with KIT account')}}</a>
</b-tab>
<b-tab title="Alternative Login">
<form
@submit="checkLoginForm">
<div class="field">
<label class="label is-large" for="email">Email:</label>
<div class="control">
@@ -48,29 +50,48 @@
</div>
<div class="control">
<a class="btn btn-primary is-large is-primary" @click="authenticate">Login</a>
<a class="btn btn-primary is-large is-primary" type="button" @click="authenticate">Login</a>
</div>
</form>
</b-tab>
<b-tab :title="$t('Register')" v-bind:disabled="this.$isProduction">
<form
@submit="checkLoginForm">
<div class="field">
<label class="label is-large" for="email">Email:</label>
<div class="control">
<input type="email" class="input is-large" id="regEmail" v-model="regEmail">
</div>
</div>
<div class="field">
<label class="label is-large" for="password">Password:</label>
<div class="control">
<input type="password" class="input is-large" id="regPassword" v-model="regPassword">
</div>
</div>
<b-form
@submit="checkRegisterForm"
@reset="resetRegisterForm">
<b-form-group
id="input-group-1"
label="Email address:"
label-for="input-1"
description="We'll never share your email with anyone else."
>
<b-form-input
id="input-1"
v-model="regEmail"
type="email"
required
placeholder="Enter email"
></b-form-input>
</b-form-group>
<b-form-group
label-for="text-password"
label="Password"
>
<b-form-input
id="text-password"
v-model="regPassword"
type="password"
required
aria-describedby="password-help-block"></b-form-input>
<b-form-text id="password-help-block">
Your password must be 8-20 characters long, contain letters and numbers, and must not
contain spaces, special characters, or emoji.
</b-form-text>
</b-form-group>
<div class="control">
<a class="btn btn-primary is-large is-success" @click="register">{{$t('Register')}}</a>
</div>
</form>
<b-button type="submit" variant="primary">{{$t('Register')}}</b-button>
<b-button type="reset" variant="danger">{{$t('Reset')}}</b-button>
</b-form>
</b-tab>
</b-tabs>
@@ -111,11 +132,13 @@
methods: {
authenticate() {
this.$store.dispatch('login', {email: this.email, password: this.password})
.then(() => this.$router.push('/'));
.then(() => this.$router.push('/'))
.catch((msg)=> console.error(msg));
},
register() {
this.$store.dispatch('register', {email: this.regEmail, password: this.regPassword})
.then(() => this.$router.push('/'));
.then(() => this.$router.push('/'))
.catch((msg)=> console.error(msg));
},
oidc_login() {
this.$store.dispatch('oidc_login', '\\oidc_login_redirection');
@@ -126,7 +149,7 @@
},
checkLoginForm(e) {
if (this.email && this.password){
return true;
this.authenticate();
}
this.errors = [];
@@ -139,7 +162,28 @@
}
e.preventDefault();
},
checkRegisterForm(e) {
e.preventDefault();
if (this.regEmail && this.regPassword){
this.register();
}
this.errors = [];
if (!this.regEmail){
this.errors.push('E-Mail required')
}
if (!this.regPassword){
this.errors.push('Password required')
}
},
resetRegisterForm(){
this.regEmail = "";
this.regPassword = "";
this.errors = [];
}
},
mounted() {
// this.$parent.$data.isLoading = true;

4
src/components/Test.vue
View File

@@ -13,6 +13,9 @@
<b-button @click="showAlert" variant="info" class="m-1">
Show alert with count-down timer
</b-button>
<b-button @click="$parent.showErrorMessage('tolle error message')" variant="warning" class="m-1">
Show error message
</b-button>
<h1>Toller Test</h1>
<span>{{ $socket.connected ? 'Connected' : 'Disconnected' }}</span>
<button v-if="$socket.connected" @click="disconnectWebsocket">Disconnect</button>
@@ -22,6 +25,7 @@
</p>
<router-link :to="{name: 'recorder', params: {recorder_id: 1}}">rec 1</router-link>
</div>
</template>

16
src/router.ts
View File

@@ -7,10 +7,11 @@ import NewSurvey from '@/components/Rooms.vue';
import Login from '@/components/Login.vue';
import Admin from '@/components/Admin.vue';
import Profile from '@/components/Profile.vue';
import User from '@/components/User.vue';
import Users from '@/components/Admin/Users.vue';
import User from '@/components/Admin/User.vue';
import Test from '@/components/Test.vue';
import Group from '@/components/Group.vue';
import Permission from '@/components/Permission.vue';
import Group from '@/components/Admin/Group.vue';
import Permission from '@/components/Admin/Permission.vue';
import Rooms from '@/components/Rooms.vue';
import Recorders from '@/components/Recorders.vue';
import Recorder from '@/components/Recorder.vue';
@@ -40,9 +41,15 @@ export const router = new Router({
name: 'admin',
component: Admin,
children: [
{
name: 'admin.users',
path: 'users',
component: Users,
},
{
name: 'admin.user',
path: 'user',
path: 'user/:user_id?',
props: true,
component: User,
},
{
@@ -67,6 +74,7 @@ export const router = new Router({
}, {
path: '/surveys/:id',
name: 'Survey',
props: true,
component: Rooms,
}, {
path: '/rooms',

1
src/store.ts
View File

@@ -225,6 +225,7 @@ const actions = {
.then(context.dispatch('login', userData))
.catch((error) => {
EventBus.$emit('failedRegistering: ', error);
throw error;
});
},
submitNewSurvey(context: any, survey: any) {

1
src/views/Home.vue
View File

@@ -23,7 +23,6 @@
</section>
</div>
<router-link :to="{name: 'recorder', params: {recorder_id: 1}}">rec 1</router-link>
</div>
</template>