123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143 |
- function clearAuthState() {
- auth.user = ''; // Login name
- auth.name = ''; // Full name
- auth.type = ''; // type of login (domain specific)
- auth.mail = ''; // Full mail address
- auth.roles = {}; // Role authorizations e.g. {user: true}
- auth.gender = ''; // Gender (e.g. Frau)
- }
- clearAuthState();
-
- function fillAuthState(state) {
- // Shallow copy
- if (auth === undefined) {
- auth = state;
- }
- for (e in auth) {
- auth[e] = state[e];
- }
- }
-
- // Login component: Login panel (if not logged in) or Logout element (if logged in)
- Vue.component('login-panel', {
- template: `
- <div class="modal-card" style="width: auto">
- <header class="modal-card-head">
- <p class="modal-card-title">Login (Ohmportal)</p>
- </header>
- <section class="modal-card-body">
- <b-field>
- <b-input
- v-model=user
- placeholder="User"
- :value="user"
- required>
- </b-input>
- </b-field>
- <b-field>
- <b-input
- v-model=pwd
- type="password"
- placeholder="Password"
- :value="pwd"
- @change="pwd_changed"
- @keyup.enter.native="login"
- required>
- </b-input>
- </b-field>
- <b-checkbox>Eingeloggt bleiben</b-checkbox>
- <div v-if="error" style="color:red;"> Versuche es nochmal.</div>
- </section>
- <footer class="modal-card-foot">
- <button class="button" type="button" @click.prevent="$parent.close()">Close</button>
- <button class="button is-primary" @click.prevent="login">Login</button>
- </footer>
- </div>`,
- data: function () {
- return {
- auth: auth,
- user: '',
- pwd: '',
- error: false,
- };
- },
- // TODO: Check if enough for session cookie re-login; checkbox
- // mounted: function() {
- // this.checkData();
- // },
- methods: {
- closeLoginPanel: function() {
- this.$emit('close-login-panel');
- },
- showLoginPanel: function() {
- this.$emit('show-login-panel');
- },
- pwd_changed: function(evt) {
- // Only required for PasswordInsert Apps etc. who send only(!) change events
- this.pwd = e.target.value;
- // Alternative call the input event
- //e.target.dispatchEvent(new Event('input'));
- },
- login: function() {
- clearAuthState();
-
- $.ajax({
- url: "api/login",
- data: {
- user: this.user,
- pwd: this.pwd
- },
- method: "POST"
- }).done(successful_login).fail(failed_login);
-
- function successful_login(resData) {
- fillAuthState(resData);
- console.info("Correct credentials");
- this.closeLoginPanel;
-
- //console.log(resData);
- router.push('/home');
- }
-
- function failed_login(err) {
- console.info("Wrong credentials");
- this.showError=true;
- this.showLoginPanel;
-
- console.log("error: " + err.responseText);
- console.log(err);
- }
- },
- checkData: function() {
- clearAuthState();
-
- $.ajax({
- url: "api/login",
- data: undefined,
- method: "POST"
- }).done(successful_login).fail(failed_login);
-
- function successful_login(res) {
- console.info("Re-Auth: Correct credentials");
- this.closeLoginPanel;
-
- //console.log(res);
- router.push('/home')
- }
-
- function failed_login(err) {
- console.info("Re-Auth: Wrong credentials");
- this.showError=true;
- this.showLoginPanel;
-
- console.log("error: " + err.responseText);
- console.log(err);
- }
- },
- logout: function() {
- clearAuthState();
- $.ajax({ url: "api/logout", method: "POST" });
- this.closeLoginPanel;
- }
- },
- });
|