barcode-frontend-backend-docker/docker-front/front/src/pages/Register.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_register}}
    </q-card-title>
    <q-card-main>
      <div>
      <q-field :label="texts.login_username"
          :error="error.username"
          :error-label="error.username">
        <q-input @keyup="key_pressed" v-model="payload.username" style="max-width: 300px"/>
      </q-field>
       <q-field :label="texts.login_email"
          :error="error.email"
          :error-label="error.email">
        <q-input  @keyup="key_pressed" v-model="payload.email" style="max-width: 300px"/>
      </q-field>
     <q-field :label="texts.login_password"
              :error="error.password1"
              :error-label="error.password1"
              >
        <q-input  @keyup="key_pressed" type="password" v-model="payload.password1"  style="max-width: 500px"/>
      </q-field>
      <q-field :label="texts.login_password"
            :error="error.password2"
            :error-label="error.password2">
        <q-input type="password"  @keyup="key_pressed" v-model="payload.password2"  style="max-width: 500px"/>
      </q-field>
      <div class="div">
        <q-btn style="max-width: 300px" :loading="register_btn_model" @click="register"> 
        {{ texts.login_submit }} 
      </q-btn>
      </div>
    </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: [
      ],
      error: {},
      payload: {
        username: '',
        email: '',
        password: '',
        password2: '',

      },
      register_btn_model: false
    }
  },
  methods: {
    verify_data: function () {
      if (this.payload.username.length < 5) {
        this.error.username = 'invalid username'
        this.$q.notify('invalid username')
        return false
      }
      if (this.payload.email.length < 4) {
        this.$q.notify('invalid email')
        return false
      }
      if (this.payload.password1.length < 5) {
        this.$q.notify('invalid password')
        return false
      }
      if (this.payload.password2.length < 5) {
        return false
      }
      return true
    },
    key_pressed: function (key) {
      if (key.key == 'Enter') {
        this.register_btn_model = true
        this.register()
      }
    },
    register: function () {
      this.register_btn_model = true
      if (this.verify_data()) {
        var self = this
        api.register(this.payload)
          .then((response) => {
            db.saveToken("Token " + response.data.key).then(data => {
              self.$router.push('/blank') })
          })
          .catch(err => {
            self.register_btn_model = false
            if (err.response.status == 400) {
              self.error = err.response.data
            }
            if (self.error.non_field_errors) {
              self.error.non_field_errors.forEach(error => { 
                this.$q.notify(error)
              })
            }
          })
      }
    }
  },
  mounted () {
    var self = this
    utils.setTexts(this)
  }
}
</script>

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