added user view for admin and a lot of login stuff

src/App.vue

@@ -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>

src/api/index.ts

@@ -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.

src/components/Admin.vue

@@ -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>

src/components/Admin/User.vue

@@ -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>

src/components/Admin/Users.vue

@@ -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;
             },
         },
     };

src/components/Login.vue

@@ -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,30 +50,49 @@
                                 </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>
-                            </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>
-
-                                <div class="control">
-                                    <a class="btn btn-primary is-large is-success" @click="register">{{$t('Register')}}</a>
                                 </div>
                               </form>
                             </b-tab>
+                            <b-tab :title="$t('Register')" v-bind:disabled="this.$isProduction">
+                                <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>
+
+                                  <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>
 
         </div>
@@ -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,6 +162,27 @@
                 }
 
                 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() {

src/components/Test.vue

@@ -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>
 

src/router.ts

@@ -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 Group from '@/components/Admin/Group.vue';
-import Permission from '@/components/Permission.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',

src/store.ts

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

src/views/Home.vue

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