handong/smartservice_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

계정 발급, 수정 임시비밀번호 로직 변경

Browse Source
This commit is contained in:
comicgum
2026-09-17 15:44:25 +09:00
parent ef277abe70
commit d70c457d10
13 changed files with 289 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files
smartservice_frontend/src/app/(admin)/account/AddModifyAccountModal.tsx
+76 -19
View File
@@ -1,14 +1,13 @@
"use client";
import React, { useState, useRef, useEffect } from "react";
import CtModal from "@/components/CtModal";
import ResetPasswordModal from "@/components/ResetPasswordModal";
import Button from "@/components/ui/button/Button2";
import { useModal } from "@/hooks/useModal";
import Label from '@/components/form/Label2';
import Input from '@/components/form/input/InputField2';
import Select from '@/components/form/Select2';
import { useMultiState } from "@/hooks/useMultiState";
import api, { useAuthStore } from '@/lib/_AG';
import { resetAccountPassword } from '@/lib/resetAccountPassword';
import Checkbox from "@/components/form/input/Checkbox";
@@ -45,23 +44,50 @@ export default function AddModifyAccountModal({ multiState, onOk, isOpen, closeM
const [ user_pw_confirm, setUserPwConfirm ] = useState<string>("");
const { isOpen: isOpenReset, openModal: openResetModal, closeModal: closeResetModal } = useModal();
// Only the signed-in user changes their own password here; anyone else's password is reset by text message
const isSelf = multiState.values.isModify && tokenPayload?.user_id === multiState.values.user_id;
// A new account gets a temporary password by text message, like an account issued with a business group
const showPassword = isSelf;
// Modifying yourself keeps the password unless the change box is checked
const [ isChangePw, setIsChangePw ] = useState<boolean>(false);
const needPassword = isSelf && isChangePw;
// Every opening starts with the box cleared and nothing typed
useEffect(() => {
if (isOpen) {
setIsChangePw(false);
setUserPwConfirm("");
}
}, [isOpen]);
const handleChangeIsChangePw = (checked: boolean) => {
setIsChangePw(checked);
if (!checked) {
multiState.set("user_pw", "");
setUserPwConfirm("");
}
};
const handleClickAddOrModify = () => {
if (multiState.values.user_id == "") {
if (multiState.values.isModify && multiState.values.user_id == "") {
alert("계정 아이디를 입력하셔야 합니다.");
return;
}
else if (multiState.values.user_pw == "") {
else if (!multiState.values.isModify && !multiState.values.biz_reg_num) {
alert("사업자번호가 등록된 사업자만 계정을 발급할 수 있습니다.");
return;
}
else if (needPassword && multiState.values.user_pw == "") {
alert("계정 비밀번호를 입력하셔야 합니다.");
return;
}
else if (user_pw_confirm == "") {
else if (needPassword && user_pw_confirm == "") {
alert("비밀번호 확인을 입력하셔야 합니다.");
return;
}
else if (multiState.values.user_pw !== user_pw_confirm) {
else if (needPassword && multiState.values.user_pw !== user_pw_confirm) {
alert("비밀번호 확인이 일치하지 않습니다.");
return;
}
@@ -73,6 +99,10 @@ export default function AddModifyAccountModal({ multiState, onOk, isOpen, closeM
alert("휴대폰 번호를 입력하셔야 합니다.");
return;
}
else if (!multiState.values.isModify && !/^01[016789][0-9]{7,8}$/.test(multiState.values.phone.replace(/[^0-9]/g, ""))) {
alert("임시 비밀번호를 문자로 보내려면 올바른 휴대폰 번호를 입력해야 합니다.");
return;
}
if (multiState.values.isModify) {
api.post('/api/modify-account.do', multiState.values).then((resp) => {
@@ -93,9 +123,21 @@ export default function AddModifyAccountModal({ multiState, onOk, isOpen, closeM
console.log(resp);
if (resp.data.errCode == 0) {
alert("추가되었습니다.");
alert("추가되었습니다. 발급된 계정 정보를 휴대폰으로 보냈습니다.");
onOk();
}
else if (resp.data.errCode == -19) {
alert("임시 비밀번호를 문자로 보내려면 올바른 휴대폰 번호를 입력해야 합니다.");
}
else if (resp.data.errCode == -20) {
alert("문자 발송에 실패해 계정 등록이 취소되었습니다. 잠시 후 다시 시도하세요.");
}
else if (resp.data.errCode == -17) {
alert("사업자번호가 등록된 사업자만 계정을 발급할 수 있습니다.");
}
else if (resp.data.errCode == -21) {
alert("이 사업자번호를 아이디로 사용 중인 계정이 이미 있습니다.");
}
else {
alert("일시적으로 사용할 수 없습니다 : " + resp.data.errCode);
}
@@ -123,16 +165,28 @@ export default function AddModifyAccountModal({ multiState, onOk, isOpen, closeM
</div>
<div>
<Label redPoint>아이디</Label>
<Input type="text" value={multiState.values.user_id} onChange={(e) => multiState.set("user_id", e.target.value)} disabled={multiState.values.isModify ? true : false} />
{/* A new account signs in with the business number and picks its own ID at the first sign in */}
{ multiState.values.isModify ?
<Input type="text" value={multiState.values.user_id} disabled />
:
<Input type="text" value={"사업자번호로 발급" + (multiState.values.biz_reg_num ? " (" + multiState.values.biz_reg_num + ")" : "")} disabled />
}
</div>
{ showPassword && <>
{ isSelf &&
<div>
<Checkbox checked={isChangePw} onChange={handleChangeIsChangePw} label="비밀번호 변경" />
</div>
}
<div>
<Label redPoint={needPassword}>비밀번호</Label>
<Input type="password" value={multiState.values.user_pw} onChange={(e) => multiState.set("user_pw", e.target.value)} disabled={!needPassword} />
</div>
<div>
<Label redPoint>비밀번호</Label>
<Input type="password" defaultValue="" onChange={(e) => multiState.set("user_pw", e.target.value)} />
</div>
<div>
<Label redPoint>비밀번호 확인</Label>
<Input type="password" value={user_pw_confirm} onChange={(e) => setUserPwConfirm(e.target.value)} />
<Label redPoint={needPassword}>비밀번호 확인</Label>
<Input type="password" value={user_pw_confirm} onChange={(e) => setUserPwConfirm(e.target.value)} disabled={!needPassword} />
</div>
</>}
<div>
<Label redPoint>이름</Label>
<Input type="text" value={multiState.values.name} onChange={(e) => multiState.set("name", e.target.value)} />
@@ -156,6 +210,8 @@ export default function AddModifyAccountModal({ multiState, onOk, isOpen, closeM
</div>
<div>
<Label>상태</Label>
{/* A new account always starts initialized: the server sets it */}
{ multiState.values.isModify ?
<Select
placeholder="선택하세요"
options={[
@@ -168,15 +224,16 @@ export default function AddModifyAccountModal({ multiState, onOk, isOpen, closeM
]}
defaultValue={multiState.values.state} onChange={(e) => multiState.set("state", e.target.value)}
className="dark:bg-dark-900" />
:
<Input type="text" value="초기화 (첫 로그인 시 아이디·비밀번호 변경)" disabled />
}
</div>
{ multiState.values.isModify &&
{ multiState.values.isModify && !isSelf &&
<div>
<Label>비밀번호 초기화</Label>
<Button size="sm" variant="outline" onClick={openResetModal}>비밀번호 초기화</Button>
<Button size="sm" variant="outline" onClick={() => resetAccountPassword(multiState.values.gid, multiState.values.phone)}>비밀번호 초기화</Button>
</div>
}
</CtModal>
<ResetPasswordModal gid={multiState.values.gid} phone={multiState.values.phone} isOpen={isOpenReset} closeModal={closeResetModal} />
</>
// </div>
);
smartservice_frontend/src/app/(admin)/customer-account/AddModifyCustomerAccountModal.tsx
+74 -19
View File
@@ -1,14 +1,13 @@
"use client";
import React, { useState, useRef, useEffect } from "react";
import CtModal from "@/components/CtModal";
import ResetPasswordModal from "@/components/ResetPasswordModal";
import Button from "@/components/ui/button/Button2";
import { useModal } from "@/hooks/useModal";
import Label from '@/components/form/Label2';
import Input from '@/components/form/input/InputField2';
import Select from '@/components/form/Select2';
import { useMultiState } from "@/hooks/useMultiState";
import api, { useAuthStore } from '@/lib/_AG';
import { resetAccountPassword } from '@/lib/resetAccountPassword';
import Checkbox from "@/components/form/input/Checkbox";
@@ -46,23 +45,50 @@ export default function AddModifyCustomerAccountModal({ multiState, onOk, isOpen
const [ user_pw_confirm, setUserPwConfirm ] = useState<string>("");
const { isOpen: isOpenReset, openModal: openResetModal, closeModal: closeResetModal } = useModal();
// Only the signed-in user changes their own password here; anyone else's password is reset by text message
const isSelf = multiState.values.isModify && tokenPayload?.user_id === multiState.values.user_id;
// A new account gets a temporary password by text message, like an account issued with a business group
const showPassword = isSelf;
// Modifying yourself keeps the password unless the change box is checked
const [ isChangePw, setIsChangePw ] = useState<boolean>(false);
const needPassword = isSelf && isChangePw;
// Every opening starts with the box cleared and nothing typed
useEffect(() => {
if (isOpen) {
setIsChangePw(false);
setUserPwConfirm("");
}
}, [isOpen]);
const handleChangeIsChangePw = (checked: boolean) => {
setIsChangePw(checked);
if (!checked) {
multiState.set("user_pw", "");
setUserPwConfirm("");
}
};
const handleClickAddOrModify = () => {
if (multiState.values.user_id == "") {
if (multiState.values.isModify && multiState.values.user_id == "") {
alert("계정 아이디를 입력하셔야 합니다.");
return;
}
else if (multiState.values.user_pw == "") {
else if (!multiState.values.isModify && !multiState.values.biz_reg_num) {
alert("사업자번호가 등록된 사업자만 계정을 발급할 수 있습니다.");
return;
}
else if (needPassword && multiState.values.user_pw == "") {
alert("계정 비밀번호를 입력하셔야 합니다.");
return;
}
else if (user_pw_confirm == "") {
else if (needPassword && user_pw_confirm == "") {
alert("비밀번호 확인을 입력하셔야 합니다.");
return;
}
else if (multiState.values.user_pw !== user_pw_confirm) {
else if (needPassword && multiState.values.user_pw !== user_pw_confirm) {
alert("비밀번호 확인이 일치하지 않습니다.");
return;
}
@@ -74,6 +100,10 @@ export default function AddModifyCustomerAccountModal({ multiState, onOk, isOpen
alert("휴대폰 번호를 입력하셔야 합니다.");
return;
}
else if (!multiState.values.isModify && !/^01[016789][0-9]{7,8}$/.test(multiState.values.phone.replace(/[^0-9]/g, ""))) {
alert("임시 비밀번호를 문자로 보내려면 올바른 휴대폰 번호를 입력해야 합니다.");
return;
}
const { biz_group_name, biz_reg_num, ...params } = multiState.values;
@@ -96,9 +126,21 @@ export default function AddModifyCustomerAccountModal({ multiState, onOk, isOpen
console.log(resp);
if (resp.data.errCode == 0) {
alert("추가되었습니다.");
alert("추가되었습니다. 발급된 계정 정보를 휴대폰으로 보냈습니다.");
onOk();
}
else if (resp.data.errCode == -19) {
alert("임시 비밀번호를 문자로 보내려면 올바른 휴대폰 번호를 입력해야 합니다.");
}
else if (resp.data.errCode == -20) {
alert("문자 발송에 실패해 계정 등록이 취소되었습니다. 잠시 후 다시 시도하세요.");
}
else if (resp.data.errCode == -17) {
alert("사업자번호가 등록된 사업자만 계정을 발급할 수 있습니다.");
}
else if (resp.data.errCode == -21) {
alert("이 사업자번호를 아이디로 사용 중인 계정이 이미 있습니다.");
}
else {
alert("일시적으로 사용할 수 없습니다 : " + resp.data.errCode);
}
@@ -126,18 +168,28 @@ export default function AddModifyCustomerAccountModal({ multiState, onOk, isOpen
</div>
<div>
<Label redPoint>아이디</Label>
<Input type="text" value={multiState.values.user_id} onChange={(e) => multiState.set("user_id", e.target.value)} disabled={multiState.values.isModify ? true : false} />
{/* A new account signs in with the business number and picks its own ID at the first sign in */}
{ multiState.values.isModify ?
<Input type="text" value={multiState.values.user_id} disabled />
:
<Input type="text" value={"사업자번호로 발급" + (multiState.values.biz_reg_num ? " (" + multiState.values.biz_reg_num + ")" : "")} disabled />
}
</div>
{ !multiState.values.isModify || (multiState.values.isModify && tokenPayload?.user_id === multiState.values.user_id) ? <>
{ showPassword && <>
{ isSelf &&
<div>
<Label redPoint>비밀번호</Label>
<Input type="password" defaultValue="" onChange={(e) => multiState.set("user_pw", e.target.value)} />
<Checkbox checked={isChangePw} onChange={handleChangeIsChangePw} label="비밀번호 변경" />
</div>
}
<div>
<Label redPoint={needPassword}>비밀번호</Label>
<Input type="password" value={multiState.values.user_pw} onChange={(e) => multiState.set("user_pw", e.target.value)} disabled={!needPassword} />
</div>
<div>
<Label redPoint>비밀번호 확인</Label>
<Input type="password" value={user_pw_confirm} onChange={(e) => setUserPwConfirm(e.target.value)} />
<Label redPoint={needPassword}>비밀번호 확인</Label>
<Input type="password" value={user_pw_confirm} onChange={(e) => setUserPwConfirm(e.target.value)} disabled={!needPassword} />
</div>
</> : <></>}
</>}
<div>
<Label redPoint>이름</Label>
<Input type="text" value={multiState.values.name} onChange={(e) => multiState.set("name", e.target.value)} />
@@ -161,6 +213,8 @@ export default function AddModifyCustomerAccountModal({ multiState, onOk, isOpen
</div>
<div>
<Label>상태</Label>
{/* A new account always starts initialized: the server sets it */}
{ multiState.values.isModify ?
<Select
placeholder="선택하세요"
options={[
@@ -169,15 +223,16 @@ export default function AddModifyCustomerAccountModal({ multiState, onOk, isOpen
]}
defaultValue={multiState.values.state} onChange={(e) => multiState.set("state", e.target.value)}
className="dark:bg-dark-900" />
:
<Input type="text" value="초기화 (첫 로그인 시 아이디·비밀번호 변경)" disabled />
}
</div>
{ multiState.values.isModify &&
{ multiState.values.isModify && !isSelf &&
<div>
<Label>비밀번호 초기화</Label>
<Button size="sm" variant="outline" onClick={openResetModal}>비밀번호 초기화</Button>
<Button size="sm" variant="outline" onClick={() => resetAccountPassword(multiState.values.gid, multiState.values.phone)}>비밀번호 초기화</Button>
</div>
}
</CtModal>
<ResetPasswordModal gid={multiState.values.gid} phone={multiState.values.phone} isOpen={isOpenReset} closeModal={closeResetModal} />
</>
// </div>
);
smartservice_frontend/src/components/ResetPasswordModal.tsx
-65
View File
@@ -1,65 +0,0 @@
"use client";
import React, { useEffect, useState } from "react";
import CtModal from "@/components/CtModal";
import Label from '@/components/form/Label2';
import Input from '@/components/form/input/InputField2';
import api from '@/lib/_AG';
interface ResetPasswordModalProps {
gid: string;
phone: string; // the account's mobile number, shown as the default
isOpen: boolean;
closeModal: () => void;
}
/** Sends a new temporary password to the account holder's mobile number */
export default function ResetPasswordModal({ gid, phone, isOpen, closeModal }: ResetPasswordModalProps) {
const [ inputPhone, setInputPhone ] = useState<string>("");
useEffect(() => {
if (isOpen)
setInputPhone(phone ?? "");
}, [isOpen, phone]);
const handleClickSend = () => {
if (inputPhone.trim() == "") {
alert("휴대폰 번호를 입력하세요");
return;
}
api.post('/api/reset-account-password.do', { gid: gid, phone: inputPhone }).then((resp) => {
if (resp.data.errCode == 0) {
alert("임시 비밀번호 전송완료");
closeModal();
}
else {
alert("전송에 실패했습니다.");
}
})
.catch((err) => {
console.error(err);
alert("전송에 실패했습니다.");
});
};
return (
<CtModal
title="비밀번호 초기화"
okBtnText="임시 비밀번호 전송"
onClickOk={handleClickSend}
isOpen={isOpen}
closeModal={closeModal}
className="max-w-[500px] p-6 lg:p-10"
>
<div className="whitespace-pre-line text-sm text-gray-700 dark:text-gray-400">
{"비밀번호 초기화는 사용자의 휴대폰에 임시 비밀번호를 문자로 전송합니다.\n사용자의 휴대폰 번호를 입력하세요."}
</div>
<div>
<Label>휴대폰 번호</Label>
<Input type="text" placeholder="휴대폰 번호를 입력하세요." value={inputPhone} onChange={(e) => setInputPhone(e.target.value)}
onKeyDown={(e) => {if (e.key === "Enter") handleClickSend()}} />
</div>
</CtModal>
);
};
smartservice_frontend/src/lib/resetAccountPassword.ts
+28
View File
@@ -0,0 +1,28 @@
import api from '@/lib/_AG';
/**
* Replaces an account's password with a random one and texts it to the given mobile number.
* Used by the account modify modals, with the mobile number typed in the modal.
*/
export const resetAccountPassword = (gid: string, phone: string) => {
if (!phone || phone.trim() == "") {
alert("휴대폰 번호를 입력하세요");
return;
}
if (!confirm("비밀번호를 초기화하고 " + phone + " 번호로 임시 비밀번호를 전송하시겠습니까?"))
return;
api.post('/api/reset-account-password.do', { gid: gid, phone: phone }).then((resp) => {
console.log("reset-account-password", resp.data);
if (resp.data.errCode == 0)
alert("임시 비밀번호 전송완료");
else
alert("전송에 실패했습니다.");
})
.catch((err) => {
console.error(err);
alert("전송에 실패했습니다.");
});
};