ChargEco/Strides-Admin/src/views/login/Password.vue

<template>
  <div class="container">
    <div class="close" @click="onClose" v-if="!email">
      <i class="el-icon-back"></i>
    </div>
    <el-form
      ref="loginForm"
      :model="form"
      :rules="rules"
      label-position="left">
      <el-form-item v-if="email">
        <div class="form-login-input no-border">
          <span class="svg-container">
            <svg-icon icon-class="user" />
          </span>
          <div class="input">&nbsp; {{email}}</div>
        </div>
      </el-form-item>
      <el-form-item prop="email" v-else>
        <div class="form-login-input">
          <span class="svg-container">
            <svg-icon icon-class="email" />
          </span>
          <el-input
            ref="username"
            v-model="form.email"
            name="email"
            type="text"
            tabindex="1"
            autocomplete="on"
            clearable
            maxlength="50"/>
        </div>
      </el-form-item>
      <el-form-item prop="password" label="Create Password">
        <div class="form-login-input">
          <span class="svg-container">
            <svg-icon icon-class="password" />
          </span>
          <el-input
            ref="password"
            v-model="form.password"
            name="password"
            :type="passwordType"
            tabindex="1"
            autocomplete="on"
            clearable
            maxlength="32"
            @input="text => applyStrength('', text)"/>
          <span class="show-pwd" @click="showPwd">
            <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
          </span>
        </div>
      </el-form-item>
      <div class="layout-strength">
        <div class="flexc">
          <span class="title-strength">Password Strength</span>
          <template v-for="item in 5">
            <span :class='strength >= item ? "strength" : "no-strength"'></span>
          </template>
        </div>
        <div class="strength-desc" v-if="enablePassword12">
          You Password Must Have: <br/>
          - 12 or more characters<br/>
          - upper and lower case letters<br/>
          - at least one number and special characters
        </div>
        <div class="strength-desc" v-else>
          You Password Must Have: <br/>
          - 8 or more characters<br/>
          - upper and lower case letters<br/>
          - at least one number
        </div>
      </div>
      <el-form-item prop="password2" label="Confirm Password">
        <div class="form-login-input">
          <span class="svg-container">
            <svg-icon icon-class="password" />
          </span>
          <el-input
            ref="password2"
            v-model="form.password2"
            name="password2"
             :type="passwordType"
            tabindex="1"
            autocomplete="on"
            clearable
            maxlength="32"/>
        </div>
      </el-form-item>
      <el-button
        :loading="loading"
        type="primary"
        class="login-button"
        @click="onSubmit">
        {{email ? "CREATE PASSWORD" : "RESET PASSWORD" }}
      </el-button>
    </el-form>
  </div>
</template>

<script>
  import settings from '../../settings.js'
  export default {
    name: "Password",
    props: {
      email: String
    },
    data() {
      return {
        loading: false,
        form: {
          email: "",
          password: "",
          password2: ""
        },
        rules: {
          email: [{
            required: true,
            trigger: 'blur',
            message: "Please type email"
          }, {
            pattern: /^[a-zA-Z0-9]+[\S]+@[a-zA-Z0-9_-]+[\.][\Sa-zA-Z]+$/,
            trigger: 'blur',
            message: 'Please type a correct email'
          }],
          password: [{
            required: true,
            trigger: 'blur',
            validator: this.applyStrength
          }],
          password2: [{
            required: true,
            trigger: 'blur',
            message: "Please type confirm password"
          }, {
            trigger: 'blur',
            validator: this.validatePassword
          }]
        },
        passwordType: "password",
        strength: 0,
        enablePassword12: settings.enablePassword12
      };
    },
    mounted() {
      
    },
    methods: {
      onClose() {
        this.$emit("back")
      },
      showPwd() {
        if (this.passwordType === 'password') {
          this.passwordType = 'text'
        } else {
          this.passwordType = 'password'
        }
        this.$nextTick(() => {
          this.$refs.password.focus()
        })
      },
      applyStrength(rule, text, callback) {
        var streng = 0;
        if (text) {
          if (text.length >= (settings.enablePassword12 ? 12 : 8)) {
            streng += 1;
          }
          if (/[a-z]{1,}/.test(text)) {
            streng += 1;
          }
          if (/[A-Z]{1,}/.test(text)) {
            streng += 1;
          }
          if (/\d{1,}/.test(text)) {
            streng += (settings.enablePassword12 ? 1 : 2);
          }
          if (/\W{1,}/.test(text)) {
            streng += 1;
          }
          if (callback) {
            if (streng < 5) {
              callback(new Error('The password is not strength'))
            } else {
              callback()
            }
          }
        } else if (callback) {
          callback(new Error('Please type password'))
        }
        this.strength = streng;
      },
      validatePassword(rule, value, callback) {
        if (value !== this.form.password) {
          callback(new Error('The twice passwords are inconsistent'))
        } else {
          callback()
        }
      },
      onSubmit() {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            if (this.strength >= 4) {
              if (this.email) {
                this.$emit("confirm", {
                  type: "create",
                  password: this.form.password
                });
              } else {
                this.$emit("confirm", {
                  type: "reset",
                  password: this.form.password
                });
              }
            } else {
              this.$message({
                type: 'error',
                message: "Your password is not strong"
              })
            }
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  @import '../../styles/element-ui.scss';
  .container {
    position: relative;
  }
  ::v-deep label.el-form-item__label {
    color: #333;
    &::before {
      display: none;
    }
  }
  .form-login-input {
    width: 100%;
    display: flex;
    padding: 0 10px;
    position: relative;
    align-items: center;
    border: 1px solid #eee;
    border-radius: 4px;
    &.no-border {
      border: none;
    }
    label {
      top: 0;
      left: 0;
      color: #aaa;
      font-size: 14px;
      position:absolute;
      padding-top: 7px;
      padding-left: 45px;
      font-weight: normal;
      pointer-events: none;
      transition: all 0.3s;
    }
    label.focus {
    	top: -30px;
    	color: #333;
    	font-size: 15px;
      font-weight: bold;
      padding-left: 5px;
    }
    .svg-container {
      width: 30px;
      color: #333;
      font-size: 16px;
      padding: 0px 6px;
    }
    .el-input,.input {
      flex: 1;
      color: #333;
      height: 42px;
      font-size: 14px;
    
      &::v-deep input {
        color: #333;
        height: 42px;
        border: none;
        font-size: 14px;
        padding: 0 5px;
        border-radius: 0px;
        -webkit-appearance: none;
        background: transparent;
      }
    }
  }
  .layout-strength {
    padding-left: 16px;
    padding-bottom: 2px;
  }
  .title-strength {
    color: #333;
    font-size: 12px;
    padding-right: 10px;
  }
  .strength {
    width: 14px;
    height: 3px;
    margin: 3px;
    border-radius: 3px;
    background-color: $--color-accent;
  }
  .no-strength {
    width: 14px;
    height: 3px;
    margin: 3px;
    border-radius: 3px;
    background-color: #ccc;
  }
  .strength-desc {
    color: #999;
    font-size: 12px;
    padding-top: 5px;
  }
  .login-button {
    width:100%;
    color: #fff;
    padding: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: bold;
  }
  .close {
    top: -43px;
    left: -5px;
    z-index: 10;
    padding: 5px;
    cursor: pointer;
    font-size: 16px;
    position: absolute;
  }
  .show-pwd {
    color: #666;
    cursor: pointer;
  }
</style>