nicer login (merge)

package.json

@@ -17,10 +17,10 @@
     "bootstrap": "^4.3.1",
     "bootstrap-vue": "^2.0.0-rc.15",
     "i": "^0.3.6",
-    "jquery": "^3.4.1",
+    "jquery": "^3.5.1",
     "js-cookie": "^2.2.0",
-    "node-sass": "^4.13.0",
+    "node-sass": "^4.14.1",
-    "npm": "^6.13.1",
+    "npm": "^6.14.7",
     "npm-sass": "^2.3.0",
     "popper.js": "^1.15.0",
     "sass": "^1.26.10",
@@ -32,7 +32,7 @@
     "vue-cookies": "^1.5.13",
     "vue-flag-icon": "^1.0.6",
     "vue-i18n": "^8.9.0",
-    "vue-moment": "^4.0.0",
+    "vue-moment": "^4.1.0",
     "vue-property-decorator": "^7.0.0",
     "vue-router": "^3.0.1",
     "vue-socket.io-extended": "^4.0.1",

src/components/Login.vue

@@ -8,6 +8,7 @@
                         <div class="has-text-centered">
                             <h2 class="title">Login or Register</h2>
                             <p class="subtitle error-msg">{{ errorMsg }}</p>
+
                         </div>
 
                         <!--

src/components/OldLogin.vue

@@ -0,0 +1,153 @@
+<!-- components/Login.vue -->
+<template>
+    <div>
+        <div v-if="!authenticated">
+            <section class="hero is-primary">
+                <div class="hero-body">
+                    <div class="container has-text-centered">
+                        <h2 class="title">Login or Register</h2>
+                        <p class="subtitle error-msg">{{ errorMsg }}</p>
+                    </div>
+                </div>
+                <ul>
+                    <li v-for="(provider, index) in loginProviders" v-bind:id="index">
+                        <a :href="provider.url">{{ index }} ({{provider.type}})</a>
+                    </li>
+                </ul>
+
+                <h3>Users</h3>
+                <ul>
+                    <li v-for="(user) in users">
+                        <a href="#">({{user.id}}) {{user.first_name}}</a>
+                    </li>
+                </ul>
+                <button v-on:click="oidc_login">Login via OIDC</button>
+                <a href="http://localhost:5443/api/auth/oidc?redirect_url=/login">OIDC with redirect</a>
+            </section>
+            <section class="section">
+                <div class="container">
+                    <div class="field">
+                        <label class="label  is-large" for="email">Email:</label>
+                        <div class="control">
+                            <input type="email" class="input is-large" id="email" v-model="email">
+                        </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="password" v-model="password">
+                        </div>
+                    </div>
+
+                    <div class="control">
+                        <a class="button is-large is-primary" @click="authenticate">Login</a>
+                        <a class="button is-large is-success" @click="register">Register</a>
+                    </div>
+
+                </div>
+            </section>
+        </div>
+        <div v-else>
+            <h1>{{ $t('You are already logged in!') }}</h1>
+            <h2>{{$t('Redirecting you to')}} <router-link :to="{name: redirectTarget}">{{redirectTarget}}</router-link> {{$t('in')}} {{redirectTime}} {{$t('seconds')}}.</h2>
+            <p><a href="" @click.prevent="logout()">{{$t('logout')}}</a></p>
+        </div>
+    </div>
+</template>
+
+<script>
+    import {EventBus} from '@/utils';
+
+    export default {
+
+        data() {
+            return {
+                email: '',
+                password: '',
+                errorMsg: '',
+                redirectMsg: '',
+                redirectTarget: 'profile',
+                redirectTime: 5,
+                loginProviders: [],
+                redirect_interval: null,
+            };
+        },
+        methods: {
+            authenticate() {
+                this.$store.dispatch('login', {email: this.email, password: this.password})
+                    .then(() => this.$router.push('/'));
+            },
+            register() {
+                this.$store.dispatch('register', {email: this.email, password: this.password})
+                    .then(() => this.$router.push('/'));
+            },
+            oidc_login() {
+                this.$store.dispatch('oidc_login', '\\oidc_login_redirection');
+            },
+            logout() {
+                this.$store.dispatch('logout', {revokeRefreshToken: true});
+                this.$router.push({name: 'home'});
+            },
+        },
+        mounted() {
+            // this.$parent.$data.isLoading = true;
+            EventBus.$on('failedRegistering', (msg) => {
+                this.errorMsg = msg;
+            });
+            EventBus.$on('failedAuthentication', (msg) => {
+                this.errorMsg = msg;
+            });
+            EventBus.$on('loginProvidersLoaded', (providers) => {
+                this.loginProviders = providers;
+            });
+            EventBus.$on('storedTokens', () => {
+                this.$store.dispatch('loadUsers');
+                this.$store.dispatch('loadProfile');
+            });
+
+            this.$store.dispatch('loadLoginProviders');
+
+            // get tokens
+            if (this.$cookies.isKey('tokens')) {
+                this.$store.dispatch('storeTokens', JSON.parse(atob(this.$cookies.get('tokens'))));
+                this.$cookies.remove('tokens');
+            }
+            this.$log.debug(this.$cookies.keys());
+
+            this.$nextTick(() => {
+                if (this.authenticated) {
+                    if (this.$route.query.redirectionTarget) {
+                        this.redirectTarget = this.$route.query.redirectionTarget;
+                    }
+                    this.redirect_interval = window.setInterval(() => {
+                        this.redirectTime = this.redirectTime - 1;
+                        if (this.redirectTime < 0) {
+                            clearInterval(this.redirect_interval);
+                            this.$router.push({name: this.redirectTarget});
+                        }
+                    }, 1000);
+                }
+            });
+        },
+        beforeDestroy() {
+            clearInterval(this.redirect_interval);
+            EventBus.$off('failedRegistering');
+            EventBus.$off('failedAuthentication');
+        },
+        computed: {
+            users() {
+                return this.$store.state.users;
+            },
+            authenticated() {
+                return this.$store.getters.isAuthenticated;
+            },
+        },
+    };
+</script>
+
+<style lang="scss">
+    .error-msg {
+        color: red;
+        font-weight: bold;
+    }
+</style>

src/main.ts

@@ -120,3 +120,4 @@ new Vue({
   store,
   render: (h) => h(App),
 }).$mount('#app');
+