refactor: modify login page
This commit is contained in:
yoosangwook
parent
b1949e9486
commit
f3460c5423
@ -16,15 +16,11 @@ export const QcastProvider = ({ children }) => {
|
|||||||
const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore)
|
const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
console.log(sessionStorage.getItem('hi'))
|
|
||||||
console.log(Object.keys(appMessageState).length)
|
|
||||||
// if (Object.keys(appMessageState).length === 0) {
|
|
||||||
if (globalLocale === 'ko') {
|
if (globalLocale === 'ko') {
|
||||||
setAppMessageState(KO)
|
setAppMessageState(KO)
|
||||||
} else {
|
} else {
|
||||||
setAppMessageState(JA)
|
setAppMessageState(JA)
|
||||||
}
|
}
|
||||||
// }
|
|
||||||
}, [globalLocale])
|
}, [globalLocale])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
@ -1,5 +1,9 @@
|
|||||||
import Join from '@/components/auth/Join'
|
import Join from '@/components/auth/Join'
|
||||||
|
|
||||||
export default function JoinPage() {
|
export default function JoinPage() {
|
||||||
return <>{<Join />}</>
|
return (
|
||||||
|
<>
|
||||||
|
<Join />
|
||||||
|
</>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -61,16 +61,19 @@ export default async function RootLayout({ children }) {
|
|||||||
<RecoilRootWrapper>
|
<RecoilRootWrapper>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<body>
|
<body>
|
||||||
{/*{headerPathname !== '/login' && <Headers />}*/}
|
{headerPathname !== '/login' ? (
|
||||||
<div className="wrap">
|
<div className="wrap">
|
||||||
<Header userSession={sessionProps} />
|
<Header userSession={sessionProps} />
|
||||||
<UIProvider>
|
<UIProvider>
|
||||||
<div className="content">
|
<div className="content">
|
||||||
<Dimmed />
|
<Dimmed />
|
||||||
<QcastProvider>{children}</QcastProvider>
|
<QcastProvider>{children}</QcastProvider>
|
||||||
</div>
|
</div>
|
||||||
</UIProvider>
|
</UIProvider>
|
||||||
</div>
|
</div>
|
||||||
|
) : (
|
||||||
|
<QcastProvider>{children}</QcastProvider>
|
||||||
|
)}
|
||||||
<ToastContainer />
|
<ToastContainer />
|
||||||
<QModal />
|
<QModal />
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@ -1,9 +1,10 @@
|
|||||||
import Login from '@/components/auth/Login'
|
import Login from '@/components/auth/Login'
|
||||||
|
import NewLogin from '@/components/auth/NewLogin'
|
||||||
|
|
||||||
export default function LoginPage() {
|
export default function LoginPage() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Login />
|
<NewLogin />
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
240
src/components/auth/NewLogin.jsx
Normal file
240
src/components/auth/NewLogin.jsx
Normal file
@ -0,0 +1,240 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState, useRef, useEffect } from 'react'
|
||||||
|
import Image from 'next/image'
|
||||||
|
import Link from 'next/link'
|
||||||
|
import { redirect } from 'next/navigation'
|
||||||
|
import { useRecoilState } from 'recoil'
|
||||||
|
import { useAxios } from '@/hooks/useAxios'
|
||||||
|
import { setSession } from '@/lib/authActions'
|
||||||
|
import { useMessage } from '@/hooks/useMessage'
|
||||||
|
import { globalLocaleStore } from '@/store/localeAtom'
|
||||||
|
import { sessionStore } from '@/store/commonAtom'
|
||||||
|
import { modalContent, modalState } from '@/store/modalAtom'
|
||||||
|
import '@/styles/style.scss'
|
||||||
|
import { useRouter } from 'next/navigation'
|
||||||
|
|
||||||
|
export default function NewLogin() {
|
||||||
|
const [passwordVisible, setPasswordVisible] = useState(false)
|
||||||
|
const passwordRef = useRef(null)
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (passwordVisible) {
|
||||||
|
passwordRef.current.type = 'text'
|
||||||
|
} else {
|
||||||
|
passwordRef.current.type = 'password'
|
||||||
|
}
|
||||||
|
}, [passwordVisible])
|
||||||
|
|
||||||
|
const { patch } = useAxios()
|
||||||
|
|
||||||
|
const { getMessage } = useMessage()
|
||||||
|
const [globalLocaleState, setGlbalLocaleState] = useRecoilState(globalLocaleStore)
|
||||||
|
const [sessionState, setSessionState] = useRecoilState(sessionStore)
|
||||||
|
const [isSelected, setIsSelected] = useState(globalLocaleState === 'ko' ? true : false)
|
||||||
|
|
||||||
|
const handleSelected = () => {
|
||||||
|
if (isSelected) {
|
||||||
|
setGlbalLocaleState('ja')
|
||||||
|
} else {
|
||||||
|
setGlbalLocaleState('ko')
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsSelected(!isSelected)
|
||||||
|
}
|
||||||
|
|
||||||
|
// login process
|
||||||
|
const loginProcess = async (formData) => {
|
||||||
|
const param = {
|
||||||
|
// langCd: currentLocale
|
||||||
|
langCd: globalLocaleState,
|
||||||
|
lastEditUser: formData.get('id'),
|
||||||
|
loginId: formData.get('id'),
|
||||||
|
pwd: formData.get('password'),
|
||||||
|
}
|
||||||
|
|
||||||
|
// await post({ url: '/api/login/v1.0/login', data: param }).then((res) => {
|
||||||
|
// if (res) {
|
||||||
|
// if (res.result.resultCode == 'S') {
|
||||||
|
// // console.log('res.data', res.data)
|
||||||
|
// // 비밀번호 초기화가 필요한 경우
|
||||||
|
// // if (res.data.pwdInitYn != 'Y') {
|
||||||
|
// // alert('비밀번호 초기화가 필요한 경우')
|
||||||
|
// // } else {
|
||||||
|
// setSession(res.data)
|
||||||
|
// redirect('/')
|
||||||
|
// // }
|
||||||
|
// } else {
|
||||||
|
// alert(res.result.resultMsg)
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
|
||||||
|
// 임시 로그인 처리
|
||||||
|
setSession({
|
||||||
|
userId: 'NEW016610',
|
||||||
|
saleStoreId: null,
|
||||||
|
name: null,
|
||||||
|
mail: null,
|
||||||
|
tel: null,
|
||||||
|
storeId: 'TEMP02',
|
||||||
|
userNm: 'ㅇㅇ6610',
|
||||||
|
userNmKana: '신규사용자 16610',
|
||||||
|
category: '인상6610',
|
||||||
|
telNo: '336610',
|
||||||
|
fax: null,
|
||||||
|
email: 't10t@naver.com',
|
||||||
|
pwdInitYn: 'N',
|
||||||
|
})
|
||||||
|
|
||||||
|
setSessionState({
|
||||||
|
userId: 'NEW016610',
|
||||||
|
saleStoreId: null,
|
||||||
|
name: null,
|
||||||
|
mail: null,
|
||||||
|
tel: null,
|
||||||
|
storeId: 'TEMP02',
|
||||||
|
userNm: 'ㅇㅇ6610',
|
||||||
|
userNmKana: '신규사용자 16610',
|
||||||
|
category: '인상6610',
|
||||||
|
telNo: '336610',
|
||||||
|
fax: null,
|
||||||
|
email: 't10t@naver.com',
|
||||||
|
pwdInitYn: 'N',
|
||||||
|
})
|
||||||
|
|
||||||
|
// redirect('/')
|
||||||
|
router.push('/')
|
||||||
|
// 임시 로그인 처리 끝
|
||||||
|
}
|
||||||
|
|
||||||
|
// 비밀번호 초기화 관련
|
||||||
|
const [open, setOpen] = useRecoilState(modalState)
|
||||||
|
const [contents, setContent] = useRecoilState(modalContent)
|
||||||
|
|
||||||
|
const initPasswordProcess = async (formData) => {
|
||||||
|
const param = {
|
||||||
|
langCd: currentLocale,
|
||||||
|
lastEditUser: formData.get('checkId'),
|
||||||
|
loginId: formData.get('checkId'),
|
||||||
|
email: formData.get('checkEmail'),
|
||||||
|
}
|
||||||
|
|
||||||
|
await patch({ url: '/api/login/v1.0/user/init-password', data: param }).then((res) => {
|
||||||
|
if (res) {
|
||||||
|
if (res.result.resultCode == 'S') {
|
||||||
|
alert(getMessage('login.init_password.complete_message'))
|
||||||
|
redirect('/login')
|
||||||
|
} else {
|
||||||
|
alert(res.result.resultMsg)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const initPasswordContent = (
|
||||||
|
<div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
|
||||||
|
<form action={initPasswordProcess} className="space-y-6">
|
||||||
|
<h2 className="text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">{getMessage('login.init_password.title')}</h2>
|
||||||
|
<h2 className="text-center text-1xl font-bold leading-9 tracking-tight text-gray-900">{getMessage('login.init_password.sub_title')}</h2>
|
||||||
|
<div>
|
||||||
|
<label htmlFor="checkId" className="block text-sm font-medium leading-6 text-gray-900">
|
||||||
|
ID
|
||||||
|
</label>
|
||||||
|
<div className="mt-2">
|
||||||
|
<input
|
||||||
|
id="checkId"
|
||||||
|
name="checkId"
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<label htmlFor="checkEmail" className="block text-sm font-medium leading-6 text-gray-900">
|
||||||
|
E-Mail
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div className="mt-2">
|
||||||
|
<input
|
||||||
|
id="checkEmail"
|
||||||
|
name="checkEmail"
|
||||||
|
type="email"
|
||||||
|
required
|
||||||
|
className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="mt-5 text-center text-sm text-gray-500">
|
||||||
|
<button type="submit" className="font-semibold leading-6 text-indigo-600 hover:text-indigo-500">
|
||||||
|
{getMessage('login.init_password.btn')}
|
||||||
|
</button>
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="login-wrap">
|
||||||
|
<div className="login-inner">
|
||||||
|
<Link href={'/login'} className="login-logo">
|
||||||
|
<Image src="/static/images/main/login-logo.svg" alt="react" width={236} height={43} styles={{ width: '236px', height: '43px' }} priority />
|
||||||
|
</Link>
|
||||||
|
<form action={loginProcess} className="space-y-6">
|
||||||
|
<div className="login-input-frame">
|
||||||
|
<div className="login-frame-tit">
|
||||||
|
<span>Q.CAST III</span>
|
||||||
|
太陽光発電システム図面管理サイト
|
||||||
|
</div>
|
||||||
|
<div className="login-input-wrap">
|
||||||
|
<div className="login-area id">
|
||||||
|
<input type="text" className="login-input" id="userId" name="id" required placeholder={'IDを入力してください'} />
|
||||||
|
<button className="id-delete" onClick={(e) => e.preventDefault()}></button>
|
||||||
|
</div>
|
||||||
|
<div className="login-area password">
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
className="login-input"
|
||||||
|
id="password"
|
||||||
|
name="password"
|
||||||
|
required
|
||||||
|
autoComplete="current-password"
|
||||||
|
ref={passwordRef}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
className={`password-hidden ${passwordVisible ? 'visible' : ''}`}
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
setPasswordVisible(!passwordVisible)
|
||||||
|
}}
|
||||||
|
></button>
|
||||||
|
</div>
|
||||||
|
<div className="d-check-box login">
|
||||||
|
<input type="checkbox" id="ch01" />
|
||||||
|
<label htmlFor="ch01">ID Save</label>
|
||||||
|
</div>
|
||||||
|
<div className="login-btn-box">
|
||||||
|
<button type="submit" className="login-btn">
|
||||||
|
Login
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="reset-password">
|
||||||
|
<Link href={'#'}>パスワードの初期化</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<div className="login-guide-wrap">
|
||||||
|
<span>※</span>当サイトをご利用の際は、事前申請が必要です。
|
||||||
|
<br />
|
||||||
|
IDがない方は <Link href={'#'}>ID申請 クリックしてください。</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="login-copyright">COPYRIGHT©2024 Hanwha Japan All Rights Reserved.</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user