Proyectos de Subversion LeadersLinked - Antes de SPA

<template>
  <div id="form-signin-container">
    <h3>{{title}}</h3>
    <form @submit.prevent="submit" name="form-signin" id="form-signin" action="" method="post">
      <div class="row">
        <div class="col-lg-12 no-pdd">
          <div class="sn-field" :class="{ 'sn-field-has-error': $v.form.email.$error }">
            <input type="text"  name="signin_email" id="signin_email"  v-bind:placeholder="placeHolderEmail"  maxlength="64" v-model="form.email"   >
            <i class="la la-envelope"></i>
          </div><!--sn-field end-->
          <div  v-if="$v.form.email.$error" class="sn-field-invalid-feedback">
              {{showErrorEmail}}
          </div>
        </div>
        <div class="col-lg-12 no-pdd">
          <div class="sn-field" :class="{ 'sn-field-has-error': $v.form.password.$error }">
            <input type="password" name="signin_password" id="signin_password" v-bind:placeholder="placeHolderPassword" maxlength="25" v-model="form.password">
            <i class="la la-lock"></i>
          </div>
          <div  v-if="$v.form.password.$error" class="sn-field-invalid-feedback">
               {{showErrorPassword}}
          </div>

        </div>
        <div class="col-lg-12 no-pdd">
          <div class="checky-sec">
            <div class="fgt-sec">
              <input type="checkbox" name="signin_remember" id="signin_remember" value="1"  v-model="form.remember">
              <label for="remember">
                <span></span>
              </label>
              <small>{{labelRememberMe}}</small>
            </div><!--fgt-sec end-->
          </div>
        </div>
        <div class="col-lg-12 no-pdd">
          <button type="submit" value="submit">{{textButtonSubmit}}</button>
        </div>
      </div>
    </form>
              
    <div class="login-resources">
    <h4>{{ titleSocialSection }}</h4>
      <ul>
        <li><a href="#" title="" class="fb"><i class="fa fa-facebook"></i> Facebook</a></li>
        <!-- <li><a href="#" title="" class="tw"><i class="fa fa-twitter"></i>Login Via Twitter</a></li> -->
      </ul>
    </div><!--login-resources end-->
  </div>
            
</template>

<script>
module.exports = {
    props: [
        'action',
        'title',
        'titleSocialSection',
        'textButtonSubmit',
        'labelRememberMe',
        'placeHolderEmail',
        'placeHolderPassword',
        'errorRequired',
        'errorMaxlength',
                                'errorMinlength',
        'errorEmail',
    ],
    data: function() {
        return {
            form: {
              email: "",
              password: "",
              remember: false,
            }
        }
    },
    computed: {
      showErrorEmail: function () {
          if(!this.$v.form.email.required) {
            return this.errorRequired;
          }
          if(!this.$v.form.email.max) {
            return this.errorMaxlength.replace('{0}', 64);
          }
          if(!this.$v.form.email.email) {
            return this.errorEmail;
          }
          return '';''
      },
     showErrorPassword: function () {
         if(!this.$v.form.password.required) {
            return this.errorRequired;
         }
         if(!this.$v.form.password.min) {
            return this.errorMinlength.replace('{0}', 5);
         }
         if(!this.$v.form.password.max) {
            return this.errorMaxlength.replace('{0}', 25);
         }

         return '';
      },
    },
    validations: {
      form: {
        email: { 
          required, 
          email, 
          max: maxLength(64) 
        },
        password: { 
          required, 
          min:minLength(5),  
          max: maxLength(25) 
        },
      }
    },
    created () {
      
      const storedForm = this.openStorage()
      if (storedForm) {
        this.form.email = storedForm['email'];
        this.form.password = storedForm['password'];
        this.form.remember = storedForm['remember'];
      }
    },
    methods: {
      openStorage () {
        return JSON.parse(localStorage.getItem('form'))
      },
      saveStorage (form) {
        localStorage.setItem('form', JSON.stringify(form))
      },
      submit() {
        this.$v.form.$touch();
        if(this.$v.form.$error) { 
          return false;
        }  

        params = {
          'email': this.form.email, 
          'password' : this.form.password,
        }
        this.$Progress.start();
        this.$http.post(this.action, params).then(response => {
            this.$Progress.finish()
            if(response.status == 200) {
              var data =  response.body;
              if(data.success) {
                var storedForm = {}
                if(this.form.remember) {
                  storedForm['email']     = this.form.email;
                  storedForm['password']  = this.form.password;
                  storedForm['remember']  = true;
                }  else {
                  storedForm['email']     = '';
                  storedForm['password']  = '';
                  storedForm['remember']  = false;
                }
                 this.saveStorage(storedForm)

                window.location.href = data.redirect_url;
              } else {
                this.$toastr.error(data.message);
              }
            } else {
              this.$toastr.error(response.statusText);
            }
        }, response => {
          this.$Progress.fail()
          // error callback
        });
      }
    }
}
</script>

<style>
</style>