VueJS - Разработка SPA приложения. Часть 2

Здесь первая часть.

Создание страницы логина

Для начала создадим на нашей странице логина саму форму.

Иконки можно брать из библиотек: Material Design Icons, Material Icons, Font Awesome 4 и Font Awesome 5.

Пример кода создания формы на странице - Login.vue

<template>
  <div>
    <h1>Login page</h1>

    <v-container>
      <v-card class="mx-auto elevation-5" max-width="500">
        <v-sheet class="mx-auto pa-6">
          <v-form @submit.prevent>
            <v-text-field
              prepend-icon="mdi-account-lock"
              name="email"
              label="Email"
              type="email"
              v-model="email"
            ></v-text-field>
            <v-text-field
              prepend-icon="mdi-lock"
              name="password"
              label="Password"
              type="password"
              v-model="password"
            ></v-text-field>
            <v-btn
            @click="onSubmit"
            type="submit" block class="mt-2"
            >Login</v-btn>
          </v-form>
        </v-sheet>
      </v-card>
    </v-container>

  </div>
</template>

<script>
export default {
  data () {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    onSubmit() {
      console.log(this.email);
    }
  }
  }
</script>

Валидация формы 

Сделаем валидацию формы.

Login.vue

<template>
  <div>
    <h1>Login page</h1>

    <v-container>
      <v-card class="mx-auto elevation-5" max-width="500">
        <v-sheet class="mx-auto pa-6">
          <v-form v-model="formvalid" ref="form" @submit.prevent>
            <v-text-field
              prepend-icon="mdi-account-lock"
              name="email"
              label="Email"
              type="email"
              v-model="email"
              :rules="emailRules"
            ></v-text-field>
            <v-text-field
              prepend-icon="mdi-lock"
              name="password"
              label="Password"
              type="password"
              v-model="password"
              :rules="passwordRules"
              :counter="6"
            ></v-text-field>
            <v-btn
            type="submit" block class="mt-2"
            @click="onSubmit"
            :disabled="!formvalid"
            >Login</v-btn>
          </v-form>
        </v-sheet>
      </v-card>
    </v-container>

  </div>
</template>

<script>
export default {
  data () {
    return {
      formvalid: false,
      email: '',
      emailRules: [
        value => {
          if (value?.length > 0) return true
          return 'Email is required'
        },
        value => {
          if (/^[a-z.-]+@[a-z.-]+\.[a-z]+$/i.test(value)) return true
          return 'Must be a valid e-mail'
        },
      ],
      password: '',
      passwordRules: [
        value => {
          if (value?.length >= 6) return true
          return 'Password must be at least 6 characters.'
        },
      ]
    }
  },
  methods: {
    async onSubmit () {
      const { valid } = await this.$refs.form.validate()
      if (valid) {
        const user = {
          email: this.email,
          password: this.password
        }
        console.log(user);
        }
      }
  }
  }
</script>

Создание страницы регистрации

По аналогии со страницей логина создадим страницу регистрации.

Registration.vue

<template>
  <div>
    <h1>Registration page</h1>

    <v-container>
      <v-card class="mx-auto elevation-5" max-width="500">
        <v-sheet class="mx-auto pa-6">
          <v-form ref="form" validate-on="lazy" @submit.prevent>
            <v-text-field
              prepend-icon="mdi-account-lock"
              name="email"
              label="Email"
              type="email"
              v-model="email"
              :rules="emailRules"
            ></v-text-field>
            <v-text-field
              prepend-icon="mdi-lock"
              name="password"
              label="Password"
              type="password"
              v-model="password"
              :rules="passwordRules"
              :counter="6"
            ></v-text-field>
            <v-text-field
              prepend-icon="mdi-lock"
              name="confirmPassword"
              label="Confirm Password"
              type="password"
              v-model="confirmPassword"
              :rules="confirmPasswordRules"
              :counter="6"
            ></v-text-field>
            <v-btn
            type="submit" block class="mt-2"
            @click="onSubmit"
            >Create Login</v-btn>
          </v-form>
        </v-sheet>
      </v-card>
    </v-container>

  </div>
</template>

<script>
export default {
  data () {
    return {
      email: '',
      emailRules: [
        value => {
          if (value?.length > 0) return true
          return 'Email is required'
        },
        value => {
          if (/^[a-z.-]+@[a-z.-]+\.[a-z]+$/i.test(value)) return true
          return 'Must be a valid e-mail'
        },
      ],
      password: '',
      passwordRules: [
        value => {
          if (value?.length >= 6) return true
          return 'Password must be at least 6 characters.'
        },
      ],
      confirmPassword: '',
      confirmPasswordRules: [
        value => {
          if (value?.length >= 6) return true
          return 'Password must be at least 6 characters.'
        },
        value => {
          if (value === this.password) return true
          return 'Password should match'
        },
      ]
    }
  },
  methods: {
    async onSubmit () {
      const { valid } = await this.$refs.form.validate()
      if (valid) {
        const user = {
          email: this.email,
          password: this.password
        }
        console.log(user);
        }
      }
  }
  }
</script>