Рубрики
Без рубрики

Создание форм и их валидация с использованием семантического интерфейса

В этом блоге я буду обсуждать, как я добавил вход и регистрацию и их проверку, используя семантический интерфейс UI.

Автор оригинала: Parth Shandilya.

Badgeyay Проект в настоящее время разделен на две части I.e Front-End-Ember JS и Back-End с REST-API, запрограммированным в Python.

После обсуждения мы доработали, чтобы пойти с семантической структурой пользовательского интерфейса, который использует простой, общий язык для частей элементов интерфейса, а также знакомые шаблоны, найденные на естественных языках для описания элементов. Semantic позволяет быстро построить красивые сайты, с Краткий HTML , Интуитивно понятный JavaScript и Упрощенная отладка , помогая сделать внешнее развитие восхитительным опытом.

SEMANTICANES реагирован, что позволяет расширить веб-приложение для масштабирования на нескольких устройствах. Семантическая продукция готова и партнерства с рамочной структурой EMBER, что означает, что мы можем интегрировать его с помощью EMBER Frameworks для организации нашего слоя UI наряду с нашей логикой приложения.

В этом блоге я буду обсуждать, как я добавил вход и регистрацию формы и их проверки, используя семантический интерфейс для Badgeyay Frestend в моем Потяните запрос.

Давайте начнем и понять это шаг за шагом.

Шаг 1:

Создайте компоненты Ember входа в систему и зарегистрируйтесь, используя следующую команду:

$ ember generate component forms/login-form 
$ ember generate component forms/signup-form

Шаг 2:

Создайте вход и регистрируйте маршрут следующими командами.

$ ember generate route login 
$ ember generate route signup

Шаг 3:

Создайте вход и зарегистрировать контроллер следующих команд.

$ ember generate controller login 
$ ember generate controller signup

Шаг 4:

Теперь мы настроили компоненты, маршруты и контроллеры для добавления форм для входа в систему и регистрация. Теперь давайте начнем писать HTML в рулях, добавляя проверки и реализующие проверки для компонентов формы. В этом блоге я буду делиться кодом входа в систему и действия, связанные с входом в систему пользователя. Вы можете проверить весь код мой Потянуть запрос который я сделал для добавления этих форм.

Шаг 4.1: Создание формы входа


Welcome back !
We're happy helping you get beautiful name badges.

{{input type="text" value=email name="email" placeholder="E-mail address"}}
{{input type="password" value=password name="password" placeholder="Password"}}
Forgot your password ?
Don't have an account yet? Signup
Or

Login with

Шаг 4.2: Добавление проверки формы

import Component from '@ember/component';

export default Component.extend({
  init() {
    this._super(...arguments);
  },

  actions: {
    logIn(provider) {
      let email = '';
      let password = '';
      if (provider == 'password') {
        email = this.get('email');
        password = this.get('password');
      }
      this.get('login')(provider, email, password);
    },

    logOut() {
      this.get('session').close();
    }
  },

  didRender() {
    this.$('.ui.form')
      .form({
        inline : true,
        delay  : false,
        fields : {
          email: {
            identifier : 'email',
            rules      : [
              {
                type   : 'email',
                prompt : 'Please enter a valid email address'
              }
            ]
          },
          password: {
            identifier : 'password',
            rules      : [
              {
                type   : 'empty',
                prompt : 'Please enter a password'
              }
            ]
          }
        }
      })
    ;
  }
});

Шаг 4.3: Добавление действий входа

import Ember from 'ember';

import Controller from '@ember/controller';

const { inject } = Ember;

export default Controller.extend({
  session: inject.service(),
  beforeModel() {
    return this.get('session').fetch().catch(function() {});
  },
  actions: {
    login(provider, email, password) {
      const that = this;
      if (provider === 'password') {
        this.get('session').open('firebase', {
          provider: 'password',
          email,
          password
        }).then(function(userData) {
          console.log(userData);
          that.transitionToRoute('/');
        }).catch(function(err) {
          console.log(err.message);
        });
      } else {
        const that = this;
        this.get('session').open('firebase', {
          provider
        }).then(function(userData) {
          console.log(userData);
          that.transitionTo('/');
        }).catch(function(err) {
          console.log(err.message);
        });
      }
    },

    logOut() {
      this.get('session').close();
    }
  }
});

Я сделал форму входа в систему и аналогичным образом, я реализовал форму регистрации и полный код можно увидеть в моем Потянуть запрос Отказ

Теперь мы сделаем с помощью HTML в рулях, добавляя проверки и реализацию проверки для компонентов формы.

Шаг 5:

Теперь запустите сервер, чтобы увидеть реализованные изменения следующей командой.

Это покажет так:

Перейдите к localhost, чтобы увидеть изменения.

Теперь мы все сделаем с настройкой форм входа и регистрации и их валидации, используя семантические пользовательские интерфейсы в репозитории Badgeyay.

Вот как я добавил журнал и формы регистрации и их валидации в моем Потянуть запрос Отказ

Ресурсы: