Skip to content
Snippets Groups Projects
Select Git revision
  • 01634364e08292f767ca7ca484e6fa7e2c03407e
  • master default protected
2 results

center_blob.html

Blame
  • RegisterForm.vue 2.36 KiB
    <template>
      <form action="">
        <div class="modal-card" style="width: auto">
          <header class="modal-card-head">
            <p class="modal-card-title">Sign up</p>
          </header>
          <section class="modal-card-body">
            <h2 class="subtitle has-text-danger">{{errorMessage}}</h2>
            <b-field label="Email">
              <b-input type="email" v-model="email" placeholder="email" required maxlength="50"/>
            </b-field>
    
            <b-field label="Username">
              <b-input v-model="username" placeholder="username" required maxlength="30"/>
            </b-field>
    
            <b-field label="Password">
              <b-input type="password" v-model="password" password-reveal placeholder="password" required maxlength="50"/>
            </b-field>
    
            <b-field label="Confirm password">
              <b-input type="password" v-model="passwordConfirm" password-reveal placeholder="password" required maxlength="50"/>
            </b-field>
    
          </section>
          <footer class="modal-card-foot">
            <button class="button is-primary" @click="onRegister">Make account</button>
          </footer>
        </div>
      </form>
    </template>
    
    <script>
    export default {
      name: 'RegisterForm',
      data () {
        return {
          email: '',
          username: '',
          password: '',
          passwordConfirm: '',
          errorMessage: null
        }
      },
      methods: {
        async onRegister () {
          if (this.password !== this.passwordConfirm) {
            this.errorMessage = 'Passwords are different'
            return
          }
          const response = await this.register(this.username, this.email, this.password)
          if (response.error) {
            this.errorMessage = response.message
          } else {
            await localStorage.setItem('token', response.token)
            this.$parent.close()
            this.$router.go()
          }
        },
        async register (username, email, password) {
          const url = this.$serverurl + 'user'
          try {
            const response = await fetch(
              url, {
                method: 'POST',
                headers: {
                  Accept: 'application/json',
                  'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                  email: email,
                  username: username,
                  password: password
                })
              }
            )
            return await response.json()
          } catch (error) {
            return null
          }
        }
      }
    }
    </script>
    
    <style scoped>
    
    </style>