Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 www 1 
<template>
2 
  <div id="form-signin-container">
3 
    <h3>{{title}}</h3>
4 
    <form @submit.prevent="submit" name="form-signin" id="form-signin" action="" method="post">
5 
      <div class="row">
6 
        <div class="col-lg-12 no-pdd">
7 
          <div class="sn-field" :class="{ 'sn-field-has-error': $v.form.email.$error }">
8 
            <input type="text"  name="signin_email" id="signin_email"  v-bind:placeholder="placeHolderEmail"  maxlength="64" v-model="form.email"   >
9 
            <i class="la la-envelope"></i>
10 
          </div><!--sn-field end-->
11 
          <div  v-if="$v.form.email.$error" class="sn-field-invalid-feedback">
12 
              {{showErrorEmail}}
13 
          </div>
14 
        </div>
15 
        <div class="col-lg-12 no-pdd">
16 
          <div class="sn-field" :class="{ 'sn-field-has-error': $v.form.password.$error }">
17 
            <input type="password" name="signin_password" id="signin_password" v-bind:placeholder="placeHolderPassword" maxlength="25" v-model="form.password">
18 
            <i class="la la-lock"></i>
19 
          </div>
20 
          <div  v-if="$v.form.password.$error" class="sn-field-invalid-feedback">
21 
               {{showErrorPassword}}
22 
          </div>
23 
 
24 
        </div>
25 
        <div class="col-lg-12 no-pdd">
26 
          <div class="checky-sec">
27 
            <div class="fgt-sec">
28 
              <input type="checkbox" name="signin_remember" id="signin_remember" value="1"  v-model="form.remember">
29 
              <label for="remember">
30 
                <span></span>
31 
              </label>
32 
              <small>{{labelRememberMe}}</small>
33 
            </div><!--fgt-sec end-->
34 
          </div>
35 
        </div>
36 
        <div class="col-lg-12 no-pdd">
37 
          <button type="submit" value="submit">{{textButtonSubmit}}</button>
38 
        </div>
39 
      </div>
40 
    </form>
41 
 
42 
    <div class="login-resources">
43 
    <h4>{{ titleSocialSection }}</h4>
44 
      <ul>
45 
        <li><a href="#" title="" class="fb"><i class="fa fa-facebook"></i> Facebook</a></li>
46 
        <!-- <li><a href="#" title="" class="tw"><i class="fa fa-twitter"></i>Login Via Twitter</a></li> -->
47 
      </ul>
48 
    </div><!--login-resources end-->
49 
  </div>
50 
 
51 
</template>
52 
 
53 
<script>
54 
module.exports = {
55 
    props: [
56 
        'action',
57 
        'title',
58 
        'titleSocialSection',
59 
        'textButtonSubmit',
60 
        'labelRememberMe',
61 
        'placeHolderEmail',
62 
        'placeHolderPassword',
63 
        'errorRequired',
64 
        'errorMaxlength',
65 
				'errorMinlength',
66 
        'errorEmail',
67 
    ],
68 
    data: function() {
69 
        return {
70 
            form: {
71 
              email: "",
72 
              password: "",
73 
              remember: false,
74 
            }
75 
        }
76 
    },
77 
    computed: {
78 
      showErrorEmail: function () {
79 
          if(!this.$v.form.email.required) {
80 
            return this.errorRequired;
81 
          }
82 
          if(!this.$v.form.email.max) {
83 
            return this.errorMaxlength.replace('{0}', 64);
84 
          }
85 
          if(!this.$v.form.email.email) {
86 
            return this.errorEmail;
87 
          }
88 
          return '';''
89 
      },
90 
     showErrorPassword: function () {
91 
         if(!this.$v.form.password.required) {
92 
            return this.errorRequired;
93 
         }
94 
         if(!this.$v.form.password.min) {
95 
            return this.errorMinlength.replace('{0}', 5);
96 
         }
97 
         if(!this.$v.form.password.max) {
98 
            return this.errorMaxlength.replace('{0}', 25);
99 
         }
100 
 
101 
         return '';
102 
      },
103 
    },
104 
    validations: {
105 
      form: {
106 
        email: {
107 
          required,
108 
          email,
109 
          max: maxLength(64)
110 
        },
111 
        password: {
112 
          required,
113 
          min:minLength(5),
114 
          max: maxLength(25)
115 
        },
116 
      }
117 
    },
118 
    created () {
119 
 
120 
      const storedForm = this.openStorage()
121 
      if (storedForm) {
122 
        this.form.email = storedForm['email'];
123 
        this.form.password = storedForm['password'];
124 
        this.form.remember = storedForm['remember'];
125 
      }
126 
    },
127 
    methods: {
128 
      openStorage () {
129 
        return JSON.parse(localStorage.getItem('form'))
130 
      },
131 
      saveStorage (form) {
132 
        localStorage.setItem('form', JSON.stringify(form))
133 
      },
134 
      submit() {
135 
        this.$v.form.$touch();
136 
        if(this.$v.form.$error) {
137 
          return false;
138 
        }
139 
 
140 
        params = {
141 
          'email': this.form.email,
142 
          'password' : this.form.password,
143 
        }
144 
        this.$Progress.start();
145 
        this.$http.post(this.action, params).then(response => {
146 
            this.$Progress.finish()
147 
            if(response.status == 200) {
148 
              var data =  response.body;
149 
              if(data.success) {
150 
                var storedForm = {}
151 
                if(this.form.remember) {
152 
                  storedForm['email']     = this.form.email;
153 
                  storedForm['password']  = this.form.password;
154 
                  storedForm['remember']  = true;
155 
                }  else {
156 
                  storedForm['email']     = '';
157 
                  storedForm['password']  = '';
158 
                  storedForm['remember']  = false;
159 
                }
160 
                 this.saveStorage(storedForm)
161 
 
162 
                window.location.href = data.redirect_url;
163 
              } else {
164 
                this.$toastr.error(data.message);
165 
              }
166 
            } else {
167 
              this.$toastr.error(response.statusText);
168 
            }
169 
        }, response => {
170 
          this.$Progress.fail()
171 
          // error callback
172 
        });
173 
      }
174 
    }
175 
}
176 
</script>
177 
 
178 
<style>
179 
</style>