super clean Vue form

onboardingForm.vue

<template lang="pug">
.onboard__wrapper.onboard__wrapper--landing
  header
    h1 Welcome to the Pax8 Onboarding Assessment!
  section
    form(@submit.prevent="validateEmail")
      label(:hidden="!isPax8person && !isBadAsteroidPerson")
        span Partner Email Address
        input(ref="emailInput" type="email" v-model.trim.lazy="email" required)
      button.button.button--start(ref="emailSubmitButton" type="submit") Start Assessment
  span.passthrough: transition(name="fade"): router-view
</template>

<script>

import { db } from '@/global/Constants';
import { email, required } from 'vuelidate/lib/validators';

export default {
  name: 'OnboardLanding',
  data () {
    return {
      email: '',
    };
  },
  computed: {
    isPax8person(){
      return this.$store.state.globalUser.user.userEmail.includes('@pax8');
    },
    isBadAsteroidPerson(){
      return this.$store.state.globalUser.user.userEmail.includes('@badasteroid');
    },
    dataForAdmin() {
      return {
        email: this.$store.state.onboardUserEmail,
        lastUpdated: new Date(),
        status: 'Just Started',
        onboardingData: this.$store.state.onboardSelections,
      };
    }
  },
  methods: {
    setInitialEmail () {
      if (!this.isPax8person && !this.isBadAsteroidPerson) {
        this.email = this.$store.state.globalUser.user.userEmail;
        this.$refs.emailSubmitButton.focus();
      } else {
        this.email = '';
        this.$refs.emailInput.focus();
      }
    },
    validateEmail() {
      this.$v.$touch();
      if (this.$v.$invalid) {
        console.log('invalid');
      } else {
        this.saveEmail();
      }
    },
    saveEmail() {
      this.$store.commit('setOnboardUserEmail', this.email.toLowerCase());
      this.createFirebaseRecord();
    },
    createFirebaseRecord() {
      db.collection('onboardAssessments')
        .doc(`${this.$store.state.onboardUserEmail}`)
        .set(this.dataForAdmin)
        .then(() => {
          console.log('success');
          this.$router.push('/onboarding/vendor-selection');
        })
        .catch((error) => {
          console.error(error);
        });
    }
  },
  mounted () {
    this.setInitialEmail();
  },
  validations: {
    email: {
      email,
      required,
    },
  },
};
</script>

<style lang="scss" scoped>

  section {
    display: flex;
    width: 300px;
    margin: 0 auto;
    padding-bottom: 2rem;
    text-align: left;
  }

  form {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }

  label {
    font-size: 1rem;
    line-height: 1.1;
    margin-bottom: 1rem;
    span {
      display: block;
      font-weight: 600;
    }
  }

  input[type="email"]{
    font-size: 1rem;
    line-height: 1.1;
    border: 0;
    box-shadow: none;
    color: #fff;
    background: rgba(0,0,0,.5);
    width: 100%;
    padding: 1rem;
    outline-color: #fff;
    outline-width: 2px;
    outline-offset: -2px;
    border-radius: 3px;
  }

  button {
    &:focus {
      outline: 2px solid #fff;
    }
  }

  .onboard__wrapper--landing {
    padding: 0 5vw;
  }

</style>