|
|
@@ -1,331 +0,0 @@
|
|
|
-<template>
|
|
|
- <el-form id="auth-card-form" ref="cardFormRef" :model="cardForm" :rules="cardFormRule" >
|
|
|
-
|
|
|
- <el-card id="gitlab-card-body" >
|
|
|
- <template #header>
|
|
|
- <span style="font-weight: bold; font-size: larger">
|
|
|
- gitlab基本信息
|
|
|
- </span>
|
|
|
- </template>
|
|
|
-
|
|
|
- <div>
|
|
|
- <el-form-item class="item" prop="username">
|
|
|
- <el-row class="row">
|
|
|
- <el-col :span="3" class="title">
|
|
|
- 用户名
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <el-input v-model="user.username" class="content" disabled/>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-form-item>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div>
|
|
|
- <el-form-item class="item" prop="email">
|
|
|
- <el-row class="row">
|
|
|
- <el-col :span="3" class="title">
|
|
|
- 邮箱
|
|
|
- </el-col>
|
|
|
- <el-col :span="10">
|
|
|
- <el-input v-model="user.email" class="content" disabled/>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-form-item>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div>
|
|
|
- <el-form-item class="item" prop="phone">
|
|
|
- <el-row class="row">
|
|
|
- <el-col :span="3" class="title">
|
|
|
- 手机号
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <el-input v-model="cardForm.phone" class="content" placeholder="请输入手机号"/>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-form-item>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div>
|
|
|
- <el-form-item class="item" prop="password">
|
|
|
- <el-row class="row">
|
|
|
- <el-col :span="3" class="title">
|
|
|
- 新密码
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <el-input v-model="cardForm.password" class="content" show-password placeholder="请输入新密码"/>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-form-item>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div>
|
|
|
- <el-form-item class="item" prop="passwordConfirm">
|
|
|
- <el-row class="row">
|
|
|
- <el-col :span="3" class="title">
|
|
|
- 确认密码
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <el-input v-model="cardForm.passwordConfirm" class="content" show-password placeholder="请确认新密码" />
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-form-item>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div>
|
|
|
- <el-form-item class="item" prop="identifyCode">
|
|
|
- <el-row class="row">
|
|
|
- <el-col :span="3" class="title">
|
|
|
- 验证码
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <el-input v-model="cardForm.identifyCode" class="content" show-password placeholder="请输入验证码" />
|
|
|
- </el-col>
|
|
|
- <el-button class="button" id="auth-card-code-verifier-button" :disabled="cardButtonDisabled" @click="handleSendMessage">
|
|
|
- {{ cardButtonText }}
|
|
|
- </el-button>
|
|
|
- </el-row>
|
|
|
- </el-form-item>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="row">
|
|
|
- <el-button @click="handleReset">重置gitlab密码</el-button>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-form>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-
|
|
|
-export default {
|
|
|
- name: "GitlabCard",
|
|
|
- data() {
|
|
|
- const inputNumberValidator = (rule, value, callback) => {
|
|
|
- if (!(/(^[1-9]\d*$)/.test(value))) {
|
|
|
- callback(new Error("请勿输入非数字"));
|
|
|
- } else {
|
|
|
- callback();
|
|
|
- }
|
|
|
- };
|
|
|
- const passwordConfirmValidator = (rule, value, callback) => {
|
|
|
- if (value !== this.cardForm.password) {
|
|
|
- callback(new Error("请输入相同的密码"));
|
|
|
- } else {
|
|
|
- callback();
|
|
|
- }
|
|
|
- };
|
|
|
- const phoneValidator = (rule, value, callback) => {
|
|
|
- if (/^(13\d|14\d|15\d|166|18\d|19[6,9]|17\d)\d{8}$/i.test(value) === false) {
|
|
|
- callback(new Error("请输入正确格式的手机号"));
|
|
|
- } else {
|
|
|
- callback();
|
|
|
- }
|
|
|
- };
|
|
|
- const identifyCodeValidator = (rule, value, callback) => {
|
|
|
- if (value.length !== 6) {
|
|
|
- this.shakeElem("auth-card-code-verifier");
|
|
|
- callback(new Error("请正确输入短信验证码"));
|
|
|
- } else {
|
|
|
- this.cardVerified = true;
|
|
|
- callback();
|
|
|
- }
|
|
|
- };
|
|
|
- return {
|
|
|
- cardForm: {
|
|
|
- phone: "",
|
|
|
- name: "",
|
|
|
- username: "",
|
|
|
- email: "",
|
|
|
- password: "",
|
|
|
- passwordConfirm: "",
|
|
|
- identifyCode: "",
|
|
|
- },
|
|
|
- cardButtonText: "获取验证码",
|
|
|
- cardButtonDisabled: false,
|
|
|
- cardVerified: false,
|
|
|
- cardFormRule: {
|
|
|
- phone: [
|
|
|
- {required: true, message: "请输入手机号", trigger: "blur"},
|
|
|
- {
|
|
|
- validator: phoneValidator,
|
|
|
- trigger: "blur"
|
|
|
- },
|
|
|
- {
|
|
|
- validator: inputNumberValidator,
|
|
|
- trigger: "change"
|
|
|
- }
|
|
|
- ],
|
|
|
- password: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: "请输入密码",
|
|
|
- trigger: "blur",
|
|
|
- },
|
|
|
- {
|
|
|
- min: 8,
|
|
|
- max: 20,
|
|
|
- message: "密码长度应为8-20个字符",
|
|
|
- trigger: "blur",
|
|
|
- }
|
|
|
- ],
|
|
|
- passwordConfirm: [
|
|
|
- {required: true, message: "请再次输入密码", trigger: "blur"},
|
|
|
- {
|
|
|
- validator: passwordConfirmValidator,
|
|
|
- trigger: "blur"
|
|
|
- }
|
|
|
- ],
|
|
|
- identifyCode: [
|
|
|
- {
|
|
|
- validator: identifyCodeValidator,
|
|
|
- trigger: "blur",
|
|
|
- },
|
|
|
- {
|
|
|
- validator: inputNumberValidator,
|
|
|
- trigger: "change",
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- };
|
|
|
- },
|
|
|
- computed: {
|
|
|
- user() {
|
|
|
- return this.$store.state.user;
|
|
|
- },
|
|
|
- name() {
|
|
|
- return this.$store.state.user.name;
|
|
|
- },
|
|
|
- email() {
|
|
|
- return this.$store.state.user.email;
|
|
|
- },
|
|
|
- },
|
|
|
- methods: {
|
|
|
- handleSendMessage() {
|
|
|
- const thatForm = this.$refs.cardFormRef;
|
|
|
- thatForm.validateField("phone", v1 => {
|
|
|
- if (!v1) {
|
|
|
- this.cardButtonDisabled = true;
|
|
|
- let time = 60;
|
|
|
- const myScroll = setInterval(() => {
|
|
|
- time--;
|
|
|
- if (time >= 0) {
|
|
|
- this.cardButtonText = time + "s后可重发";
|
|
|
- } else {
|
|
|
- this.cardButtonText = "获取验证码";
|
|
|
- this.cardButtonDisabled = false;
|
|
|
- clearTimeout(myScroll);
|
|
|
- time = 60;
|
|
|
- }
|
|
|
- }, 1000);
|
|
|
- const params = {
|
|
|
- phone: this.cardForm.phone
|
|
|
- };
|
|
|
- console.log(params);
|
|
|
- this.$apis.sendMessageAPI(params)
|
|
|
- .then((res) => {
|
|
|
- if (res.data.code === 0) {
|
|
|
- this.$message({
|
|
|
- showClose: true,
|
|
|
- message: "发送成功，请注意查收验证码",
|
|
|
- type: "success"
|
|
|
- });
|
|
|
- } else {
|
|
|
- this.$message({
|
|
|
- showClose: true,
|
|
|
- message: res.data.message,
|
|
|
- type: "warning"
|
|
|
- });
|
|
|
- }
|
|
|
- })
|
|
|
- .catch((e) => {
|
|
|
- this.$message({
|
|
|
- showClose: true,
|
|
|
- message: e,
|
|
|
- type: "error"
|
|
|
- });
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- shakeElem(elemId) {
|
|
|
- let elem = document.getElementById(elemId);
|
|
|
- elem.classList.add("shake");
|
|
|
- setTimeout(() => {
|
|
|
- elem.classList.remove("shake");
|
|
|
- }, 800);
|
|
|
- },
|
|
|
- handleReset() {
|
|
|
- const thatForm = this.$refs.cardFormRef;
|
|
|
- thatForm.validateField("password", v1 => {
|
|
|
- thatForm.validateField("passwordConfirm", v2 => {
|
|
|
- thatForm.validateField("phone", v3 => {
|
|
|
- thatForm.validateField("identifyCode", v4 => {
|
|
|
- if (!v1 && !v2 && !v3 && !v4) {
|
|
|
- if (this.cardVerified) {
|
|
|
- const params = {
|
|
|
- password: this.cardForm.password,
|
|
|
- identifyCode: this.cardForm.identifyCode,
|
|
|
- phone: this.cardForm.phone,
|
|
|
- };
|
|
|
- this.$apis.resetGitlabAPI(params)
|
|
|
- .then((res) => {
|
|
|
- if (res.data.code === 0) {
|
|
|
- this.$message({
|
|
|
- showClose: true,
|
|
|
- message: "重置成功",
|
|
|
- type: "success"
|
|
|
- });
|
|
|
- } else {
|
|
|
- this.$message({
|
|
|
- showClose: true,
|
|
|
- message: res.data.message,
|
|
|
- type: "warning"
|
|
|
- });
|
|
|
- }
|
|
|
- })
|
|
|
- .catch((e) => {
|
|
|
- this.$message({
|
|
|
- showClose: true,
|
|
|
- message: e,
|
|
|
- type: "error"
|
|
|
- });
|
|
|
- });
|
|
|
- } else {
|
|
|
- this.shakeElem("auth-card-code-verifier");
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
- }
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
-:deep(.el-card__body) {
|
|
|
- padding: 48px;
|
|
|
- display: grid;
|
|
|
- grid-gap: 24px;
|
|
|
-}
|
|
|
-
|
|
|
-.title {
|
|
|
- font-size: medium;
|
|
|
-}
|
|
|
-
|
|
|
-.row {
|
|
|
- display: flex;
|
|
|
- align-items: baseline;
|
|
|
-}
|
|
|
-
|
|
|
-.button {
|
|
|
- margin-left: 24px;
|
|
|
-}
|
|
|
-
|
|
|
-.item {
|
|
|
- padding: 0px;
|
|
|
-}
|
|
|
-
|
|
|
-</style>
|
