FileMaster

Edit File: UserProfile.vue

<h2>{{ $root.labels.user_profile }}</h2>

<div class="am-sms-user-info">
      <el-row :gutter="24">

<el-col :md="12">
          <p>User:</p>
          <p class="am-strong">{{ user.email }}</p>
          <span class="am-link" @click="logout">{{ $root.labels.logout }}</span>
        </el-col>

<el-col :md="12">
          <p>{{ $root.labels.sender_id_colon }}</p>

<transition name="fadeIn">
            <p class="am-strong" v-show="!changeSenderIdActive">{{ senderId.value }}</p>
          </transition>

<transition name="fadeIn">
            <div class="am-sms-change-sender-id" v-show="changeSenderIdActive">
              <el-row :gutter="16">

<el-form :model="senderId" ref="senderId" :rules="rulesSenderId" @submit.prevent="onSubmit">

<el-col :lg="12">
                    <el-form-item prop="value">
                      <el-input v-model="senderId.value" @input="clearValidation()" size="small"></el-input>
                    </el-form-item>
                  </el-col>

<el-col :lg="12">

<el-button
                        type=""
                        size="small"
                        @click="cancelChangeSenderId"
                    >
                      {{ $root.labels.cancel }}
                    </el-button>

<el-button
                        type="primary"
                        size="small"
                        :loading="loadingSenderId"
                        @click="saveSenderId"
                    >
                      {{ $root.labels.save }}
                    </el-button>

</el-col>

</el-form>

</el-row>
            </div>
          </transition>

<span class="am-link" v-show="!changeSenderIdActive" @click="changeSenderId">
            {{ $root.labels.change_alpha_sender_id }}
          </span>

</el-col>

</el-row>
    </div>

<h2>{{ $root.labels.security }}</h2>

<div class="am-sms-user-security">
      <el-form :model="changePassword" ref="changePassword" :rules="rulesChangePassword" @submit.prevent="onSubmit">
        <el-row :gutter="24">

<el-col :lg="6" :md="12">

<el-form-item
                :label="$root.labels.current_password_colon"
                prop="currentPassword"
                :error="errors.currentPassword"
            >
              <el-input
                  v-model="changePassword.currentPassword"
                  @input="clearValidation"
                  type="password"
                  size="small"
              ></el-input>
            </el-form-item>

<el-form-item
                :label="$root.labels.new_password_colon"
                prop="newPassword"
                :error="errors.newPassword"
            >
              <el-input
                  v-model="changePassword.newPassword"
                  @input="clearValidation"
                  type="password"
                  size="small"
              >
              </el-input>
            </el-form-item>

<el-form-item
                :label="$root.labels.new_password_colon_retype"
                prop="newPasswordReType"
                :error="errors.newPasswordReType"
            >
              <el-input
                  v-model="changePassword.newPasswordReType"
                  @input="clearValidation"
                  type="password"
                  size="small"
              >
              </el-input>
            </el-form-item>

<el-button
                @click="onChangePassword"
                :loading="loadingChangePassword"
                class="am-change-password"
                size="small"
                type="primary"
            >
              {{ $root.labels.change_password }}
            </el-button>

</el-col>

</el-row>

<el-alert
            class="am-sms-warning"
            type="warning"
            show-icon
            title=""
            v-html="$root.labels.sms_warning"
            :closable="false"
            style="margin-bottom: 10px; margin-top: 16px; display: block"
        >
        </el-alert>
      </el-form>
    </div>

</div>
</template>

export default {
    mixins: [notifyMixin, notificationMixin],

props: {
      user: {
        type: Object,
        default: () => {}
      },
      notificationsSettings: {
        type: Object,
        default: () => {}
      }
    },

mounted () {
      this.senderId.value = this.notificationsSettings.smsAlphaSenderId
    },

data () {
      let validateSenderId = (rule, value, callback) => {
        if (!/^[A-z0-9 ]+$/.test(value)) {
          callback(new Error(this.$root.labels.sender_id_invalid_characters_error))
        }

if (!/[a-zA-Z]/.test(value)) {
          callback(new Error(this.$root.labels.sender_id_letter_error))
        }

if (value.length > 11) {
          callback(new Error(this.$root.labels.sender_id_length_error))
        }

callback()
      }

let validateNewPasswordMatch = (rule, value, callback) => {
        if (value !== this.changePassword.newPassword) {
          callback(new Error(this.$root.labels.passwords_do_not_match))
        }

callback()
      }

return {
        changePassword: {
          currentPassword: '',
          newPassword: '',
          newPasswordReType: ''
        },
        changeSenderIdActive: false,
        errors: {
          currentPassword: '',
          newPassword: '',
          newPasswordReType: ''
        },
        loadingChangePassword: false,
        loadingSenderId: false,
        rulesChangePassword: {
          currentPassword: [
            {required: true, message: this.$root.labels.current_password_requred, trigger: 'submit'}
          ],
          newPassword: [
            {required: true, message: this.$root.labels.new_password_requred, trigger: 'submit'}
          ],
          newPasswordReType: [
            {required: true, message: this.$root.labels.re_type_requred, trigger: 'submit'},
            {validator: validateNewPasswordMatch, trigger: 'submit'}
          ]
        },
        rulesSenderId: {
          value: [
            {required: true, message: this.$root.labels.sender_id_required, trigger: 'submit'},
            {validator: validateSenderId, trigger: 'submit'}
          ]
        },
        senderId: {
          value: '',
          valueTemporary: ''
        }
      }
    },

methods: {
      logout () {
        this.$emit('logout')
      },

changeSenderId () {
        this.changeSenderIdActive = true
        this.senderId.valueTemporary = this.senderId.value
      },

cancelChangeSenderId () {
        this.clearValidation()
        this.changeSenderIdActive = false
        this.senderId.value = this.senderId.valueTemporary
      },

saveSenderId () {
        this.$refs.senderId.validate((valid) => {
          if (valid) {
            let notificationsSettings = Object.assign({}, this.notificationsSettings)
            notificationsSettings.smsAlphaSenderId = this.senderId.value
            this.loadingSenderId = true

this.$http.post(`${this.$root.getAjaxUrl}/settings`, {
              notifications: notificationsSettings
            }).then(() => {
              this.clearValidation()
              this.loadingSenderId = this.changeSenderIdActive = false
              this.notify(this.$root.labels.success, this.$root.labels.sender_id_saved, 'success')
            }).catch(e => {
              this.clearValidation()
              this.loadingSenderId = this.changeSenderIdActive = false
              this.notify(this.$root.labels.error, e.message, 'error')
            })
          } else {
            return false
          }
        })
      },

onChangePassword () {
        this.errors = this.resetChangePasswordOnInitialState()
        this.$refs.changePassword.validate((valid) => {
          if (valid) {
            this.loadingChangePassword = true
            this.sendAmeliaSmsApiRequest('changePassword', this.onChangePasswordSuccess, this.onChangePasswordError)
          } else {
            return false
          }
        })
      },

onChangePasswordSuccess () {
        this.clearValidation()
        this.changePassword = this.resetChangePasswordOnInitialState()
        this.loadingChangePassword = false
        this.notify(this.$root.labels.success, this.$root.labels.password_has_been_changed, 'success')
      },

onChangePasswordError (data) {
        let $this = this
        this.loadingChangePassword = false

Object.keys(data.errors).forEach(function (key) {
          $this.errors[key] = $this.$root.labels[data.errors[key][0]]
        })
      },

clearValidation () {
        if (typeof this.$refs.senderId !== 'undefined') {
          this.$refs.senderId.clearValidate()
        }

if (typeof this.$refs.changePassword !== 'undefined') {
          this.$refs.changePassword.clearValidate()
        }
      },

resetChangePasswordOnInitialState () {
        return {
          currentPassword: '',
          newPassword: '',
          newPasswordReType: ''
        }
      }
    }
  }
</script>

Back