sk_fems_ui/components/common/modal/ChangePswdPop.vue

<template>
	<div>
		<v-dialog
			v-model="dialog"
			width="400"
			overlay-color="#000"
			overlay-opacity="0.8"
		>
			<v-card style="height: 100%">
				<v-card-title>
					<span class="custom-title-4">비밀번호 변경</span>
				</v-card-title>
				<v-divider></v-divider>
				<v-card-text>
					<v-col>
						<label for="" class="search-box-label">
							현재 비밀번호를 입력하세요
						</label>
						<v-text-field
							v-model.trim="curPswd"
							class="v-input__custom"
							type="password"
							:readonly="!isFocused"
							@focus="isFocused = true"
							@blur="isFocused = false"
							@keyup.enter="setUpdate()"
						></v-text-field>
					</v-col>
					<v-col>
						<label for="" class="search-box-label">
							변경할 비밀번호를 입력하세요
						</label>
						<v-text-field
							v-model.trim="firstPswd"
							class="v-input__custom"
							type="password"
							:readonly="!isFocused"
							@focus="isFocused = true"
							@blur="isFocused = false"
							@keyup.enter="setUpdate()"
						></v-text-field>
					</v-col>
					<v-col>
						<label for="" class="search-box-label">
							변경할 비밀번호를 다시 입력하세요
						</label>
						<v-text-field
							v-model.trim="secondPswd"
							class="v-input__custom"
							type="password"
							:readonly="!isFocused"
							@focus="isFocused = true"
							@blur="isFocused = false"
							@keyup.enter="setUpdate()"
						></v-text-field>
					</v-col>
				</v-card-text>
				<v-divider></v-divider>
				<v-card-actions>
					<v-spacer></v-spacer>
					<v-btn color="primary" dark @click="setUpdate()">확인</v-btn>
					<v-btn color="primary" dark @click="dialog = !dialog">닫기</v-btn>
				</v-card-actions>
			</v-card>
		</v-dialog>
	</div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import $cookie from 'vue-cookie';
export default {
	props: {
		parentPrgmId: {
			type: String,
			require: true,
		},
		item: {
			type: Object,
			require: true,
		},
		comId: {
			type: String,
			require: true,
		},
	},
	components: {},
	data() {
		return {
			dialog: false,
			curPswd: null,
			firstPswd: null,
			secondPswd: null,
			isFocused: false,
			changeRow: false,
			logoutUrl: '/login',
		};
	},
	computed: {
		...mapState({}),
		chkDialog() {
			return this.dialog;
		},
	},
	watch: {
		async chkDialog(val) {
			//console.log("watch : ", val)
			if (val) {
				this.openDialog();

				this.$nextTick(() => {});
			} else {
			}
		},
	},

	methods: {
		...mapMutations({ setPageData: 'setPageData' }),
		...mapActions({
			postUpdateApi: 'modules/list/postUpdateApi',
			postApiReturn: 'modules/list/postApiReturn',
		}),
		async openDialog() {
			this.curPswd = null;
			this.firstPswd = null;
			this.secondPswd = null;
		},
		async setUpdate() {
			if (!this.curPswd || !this.firstPswd || !this.secondPswd) {
				alert('비밀번호를 입력해주세요.');
			} else if (this.firstPswd !== this.secondPswd) {
				alert('입력한 비밀번호가 다릅니다.');
				this.firstPswd = null;
				this.secondPswd = null;
			} else {
				var encryptedCurPassword = await sha512(this.curPswd);
				let res = await this.postApiReturn({
					apiKey: 'selectComparePswd',
					resKey: 'roleUserData',
					sendParam: {
						userPswd: encryptedCurPassword,
					},
				});
				if (res[0].userCompare == 'FALSE') {
					alert('현재 비밀번호가 일치하지 않습니다.');
				} else {
					var encryptedPassword = await sha512(this.firstPswd);
					const sendParam = {
						datas: {
							dsUser: [
								{
									userPswd: encryptedPassword,
								},
							],
						},
						params: {},
					};
					// console.log(sendParam);
					await this.postUpdateApi({
						apiKey: 'updatePswd',
						sendParam: sendParam,
					});
					alert(
						'비밀번호가 변경되었습니다. 로그아웃 후 새로운 비밀번호로 재 로그인 바랍니다.',
					);
					this.dialog = false;
					$cookie.delete('FEMS_SESSION');

					this.$nextTick(() => {
						window.location.href = this.logoutUrl + '?' + this.comId;
					});
				}
			}
		},
	},
};

function sha512(str) {
	const crypto = require('crypto');
	return crypto
		.createHash('sha512')
		.update(str)
		.digest('hex');
}
</script>

<style scoped>
.v-input {
	font-size: 12px;
}
.v-label {
	font-size: 10px;
}
</style>