vue-ant-patterns/es/d-login/Form.js

vue-ant-patterns

import _defineProperty from 'babel-runtime/helpers/defineProperty';
import _extends from 'babel-runtime/helpers/extends';
import cx from 'classnames';
import { Input, Button, Form, Icon } from 'ant-design-vue';
import defaultProps from './defaultProps';
import EN from './locale/en_US';
import CN from './locale/zh_CN';

var langType = {
  'zh-cn': CN,
  cn: CN,
  'en-us': EN,
  en: EN
};

var FormItem = Form.Item;


var InputIcon = {
  name: 'input-icon',
  functional: true,
  render: function render(h, context) {
    return h(Icon, _extends({}, context, {
      'class': 'input-icon',
      slot: 'prefix'
    }));
  }
};

var LoginForm = Form.create()({
  props: _extends({}, defaultProps),
  components: _defineProperty({}, InputIcon.name, InputIcon),
  data: function data() {
    return {};
  },

  computed: {},
  watch: {
    locale: function locale(v, nv) {
      if (v.locale !== nv.locale) {
        this.$props.form.resetFields();
      }
      // this.$props.form.resetFields();
    }
  },
  methods: {
    handleSubmit: function handleSubmit(e) {
      e.preventDefault();
      var _$props = this.$props,
          form = _$props.form,
          onSubmit = _$props.onSubmit,
          success = _$props.success,
          error = _$props.error;

      this.$props.form.validateFields(null, { force: true }, function (err, values) {
        if (!err) {
          onSubmit({ values: values });
          return;
        }
        // if (err) {
        //   console.log('err::', err);
        //   error({err});
        // }
      });
    }
  },
  mounted: function mounted() {
    this.$emit('formCreated', this.$props.form);
  },
  render: function render() {
    var h = arguments[0];
    var $props = this.$props,
        handleSubmit = this.handleSubmit;
    var prefixCls = $props.prefixCls,
        locale = $props.locale,
        form = $props.form,
        nameRule = $props.nameRule,
        passRule = $props.passRule,
        isLoading = $props.isLoading;
    var getFieldDecorator = form.getFieldDecorator;


    var cls = cx(_defineProperty({}, prefixCls, 1));

    var formProps = {
      'class': cls,
      on: {
        submit: handleSubmit
      }
    };
    var buttonProps = {
      props: {
        loading: isLoading,
        type: 'primary',
        htmlType: 'submit'
      },
      'class': 'login-form-button'
    };
    var lang = locale.locale || 'zh-cn';

    var ruleLang = langType[lang];

    var userNameRule = _extends({}, ruleLang.rules.username || {}, nameRule);

    var passwordRule = _extends({}, ruleLang.rules.password || {}, passRule);

    return h(
      Form,
      formProps,
      [h(FormItem, [getFieldDecorator('username', {
        rules: [_extends({}, userNameRule)]
      })(h(
        Input,
        {
          attrs: { placeholder: locale.username, autocomplete: 'off' }
        },
        [h(InputIcon, {
          attrs: { type: 'user' }
        })]
      ))]), h(FormItem, [getFieldDecorator('password', {
        rules: [_extends({}, passwordRule)]
      })(h(
        Input,
        {
          attrs: { type: 'password', placeholder: locale.password, autocomplete: 'off' }
        },
        [h(InputIcon, {
          attrs: { type: 'lock' }
        })]
      ))]), h(FormItem, [h(
        Button,
        buttonProps,
        [locale.ok]
      )])]
    );
  }
});
export default LoginForm;