barcode-frontend-backend-docker/docker-front/front/src/pages/Login.vue

<template>
  <div style="height: 100vh" class="div justify-center items-center">
  <q-card style="max-width: 300px" class="div">
    <q-card-title>
      {{texts.login_login}}
    </q-card-title>
    <q-card-main>
      <div>
      <q-field :label="texts.login_username">
        <q-input v-model="username" style="max-width: 300px"/>
      </q-field>
      <q-field :label="texts.login_password">
        <q-input type="password" v-model="password"  style="max-width: 500px"/>
      </q-field>
      <div class="div">
        <q-btn style="max-width: 300px" @click="loginWithPassword"> 
          {{ texts.login_submit }} 
        </q-btn>
         <q-btn style="max-width: 300px" @click="$router.push('/register')"> 
          {{ texts.login_register }} 
        </q-btn>
     </div>
    </div>
    <br/>
    <div class="div">
      <q-btn v-for="(oauth, index) in oauth_clients" @click="login(index)"
      color='blue' style="max-width: 300px"> 
        {{ texts.login_login_with }} {{ oauth.name }}
      </q-btn> 
    </div>
    </q-card-main>
  </q-card>
  </div>
</template>

<script>
var ClientOAuth2 = require('client-oauth2')
var api = require('../api.js')
var db = require('../db.js')
var utils = require('../utils.js')
import {
  QCard,
  QLayout,
  QToolbar,
  QToolbarTitle,
  QBtn,
  QIcon,
  QList,
  QListHeader,
  QItem,
  QItemSide,
  QItemMain,
  QSelect,
  QInput,
  QField,
  QCardMain,
  QCardTitle
} from 'quasar'

export default {
  name: 'index',
  components: {
    QCard,
    QLayout,
    QToolbar,
    QToolbarTitle,
    QBtn,
    QIcon,
    QList,
    QListHeader,
    QItem,
    QItemSide,
    QItemMain,
    QSelect,
    QInput,
    QField,
    QCardMain,
    QCard,
    QCardTitle
  },
  data () {
    return {
      selected_language: '',
      languages: [],
      texts: {},
      username: '',
      password: '',
      selected_provider: 1000,
      oauth_clients: [
      ]
    }
  },
  methods: {
    open_popup: function (url, windowName) {
      var mwindow = window
      var myWindow = window.open(url, windowName, 'height=1000,width=750')
      if (window.focus) { myWindow.focus() }
      window.my = myWindow
      myWindow.onclose = () => { }
      return false
    },
    loginWithPassword: function () {
      var data = {
        username: this.username,
        password: this.password
      }
      var self = this
      api.login('rest-auth/login/', data)
        .then(data => {
          db.saveToken('Token ' + data.data.key)
            .then(data => { self.$router.push('/blank') })
        })
        .catch(err => {
          self.$q.notify('Authentication Error')
        })
    },
    login: function (clientId) {
      this.selected_provider = clientId
      var oauthData = this.oauth_clients[clientId].auth_data
      var auth = new ClientOAuth2(oauthData)
      this.open_popup(auth.token.getUri(), 'name')
    }
  },
  mounted () {
    var self = this
    utils.getTexts()
      .then(data => { self.texts = data })
    api.getAndSaveList('myauth/providers/').then((data) => { self.oauth_clients = data })
    window.addEventListener('message', function (event) {
      if (event.origin !== 'http://localhost:8080') { return false }
      api.login(self.oauth_clients[self.selected_provider].loginPath.slice(1), event.data.data)
        .then(data => {
          db.saveToken('Token ' + data.data.key)
            .then(data => self.$router.push('/blank'))
        })
    })
  }
}
</script>

<style lang="stylus" scoped>
.div
  display: flex
  flex-direction: column
  align-items: center
</style>