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)
|
||||
|
||||
useEffect(() => {
|
||||
console.log(sessionStorage.getItem('hi'))
|
||||
console.log(Object.keys(appMessageState).length)
|
||||
// if (Object.keys(appMessageState).length === 0) {
|
||||
if (globalLocale === 'ko') {
|
||||
setAppMessageState(KO)
|
||||
} else {
|
||||
setAppMessageState(JA)
|
||||
}
|
||||
// }
|
||||
}, [globalLocale])
|
||||
|
||||
return (
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
import Join from '@/components/auth/Join'
|
||||
|
||||
export default function JoinPage() {
|
||||
return <>{<Join />}</>
|
||||
return (
|
||||
<>
|
||||
<Join />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -61,16 +61,19 @@ export default async function RootLayout({ children }) {
|
||||
<RecoilRootWrapper>
|
||||
<html lang="en">
|
||||
<body>
|
||||
{/*{headerPathname !== '/login' && <Headers />}*/}
|
||||
<div className="wrap">
|
||||
<Header userSession={sessionProps} />
|
||||
<UIProvider>
|
||||
<div className="content">
|
||||
<Dimmed />
|
||||
<QcastProvider>{children}</QcastProvider>
|
||||
</div>
|
||||
</UIProvider>
|
||||
</div>
|
||||
{headerPathname !== '/login' ? (
|
||||
<div className="wrap">
|
||||
<Header userSession={sessionProps} />
|
||||
<UIProvider>
|
||||
<div className="content">
|
||||
<Dimmed />
|
||||
<QcastProvider>{children}</QcastProvider>
|
||||
</div>
|
||||
</UIProvider>
|
||||
</div>
|
||||
) : (
|
||||
<QcastProvider>{children}</QcastProvider>
|
||||
)}
|
||||
<ToastContainer />
|
||||
<QModal />
|
||||
</body>
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
import Login from '@/components/auth/Login'
|
||||
import NewLogin from '@/components/auth/NewLogin'
|
||||
|
||||
export default function LoginPage() {
|
||||
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