rss-unlimited/app/signup.vue

<script>
const { jwt } = require('./security')
const api = require('./api')
export default {
  data() {
    return {
      valid: false,
      saving: false,
      error: null,
      model: {
        name: 'a@a', //null,
        email: 'a@a', //null,
        password: 'a@a', //null, // https://www.dashlane.com/hellointernet
        confirmPassword: 'a@a', //null
      },
      rules: {
        name: [
          v => !!v || 'Name is required'
        ],
        email: [
          v => !!v || 'E-mail is required',
          v => /.+@.+/.test(v) || 'Valid email required'
        ],
        password: [
          v => (v.length > 8
          && /[A-Z]/.test(v)
          && /[a-z]/.test(v)
          && /\d/.test(v)
          && /\W/.test(v))
          || `Hey, your password is pretty weak. But whatever. I'm not your mother... I'm not going to force you. You should know better by now. Have you considered using <a href="https://www.dashlane.com/hellointernet">dashlane</a> for password management? Just think about it.`
        ],
        confirmPassword: [
          v => v === this.model.password || 'Passwords do not match'
        ]
      }
    }
  },
  computed: {
    passwordMessages() {
      const password = this.model.password || null
      const weakPassword = password && (
        password.length < 8
        || !/[A-Z]/.test(password)
        || !/[a-z]/.test(password)
        || !/\d/.test(password)
        || !/\W/.test(password)
      )
      return weakPassword
      ? [`Hey, your password is pretty weak. But whatever. I'm not your mother... I'm not going to force you. You should know better by now. Have you considered using <a href="https://www.dashlane.com/hellointernet">dashlane</a> for password management? Just think about it.`]
      : []
    }
  },
  updated() {
//    console.log('Validating', this.$refs.form.validate())
    
  },
  methods: {
    async submit() {
      try {
        this.saving = true
        const result = await api.post('signup', this.model)
        if (result.error) {
          throw new Error(result.error)
        }
        this.$router.push('/confirm/' + this.model.email)
      } catch (err) {
        this.saving = false
        this.error = err.stack || err
      }
    }
  }
}
</script>

<template>
  <div>
    <h1>Sign up</h1>
    <v-form v-model="valid" ref="form">
      <v-text-field v-model="model.name" :rules="rules.name" label="Your name" required />
      <v-text-field v-model="model.email" :rules="rules.email" label="Email" required />
      <v-text-field v-model="model.password" :messages="passwordMessages" label="Password" required type="password" />
      <v-text-field v-model="model.confirmPassword" :rules="rules.confirmPassword" label="Confirm Password" required type="password" />
      <v-btn :disabled="!valid || saving" color="success" @click="submit">
        Create Account
      </v-btn>
      <v-alert :value="true" v-if="error" type="error" dismissible>{{error}}</v-alert>
      
    </v-form>
  </div>
</template>