queyue-frontend
/
queyue-website
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Update Login UI with qrcode.

Browse Source
feature/qrcode
mackt 2 months ago
parent 8ce5bff0a1
commit 684148879c
10 changed files with 159 additions and 69 deletions
Show Stats Download Patch File Download Diff File

4
src/components/Header/Auth.tsx
Unescape View File

@ -6,7 +6,7 @@ import { LoginProvider } from '@/components/Login/LoginContext';
import HeaderAvatar from './HeaderAvatar';
import { LoginModal } from '@/components';
import { Login } from '@/components';
import { useUserStore } from '@/store';
export default function Auth() {
@ -18,7 +18,7 @@ export default function Auth() {
<HeaderAvatar className="ml-[40px]" />
) : (
<LoginProvider>
<LoginModal />
<Login />
</LoginProvider>
)}
</div>

21
src/components/Login/Footer.tsx
Unescape View File

@ -0,0 +1,21 @@
export default function Footer() {
return (
<div className="absolute bottom-[30px] left-0 right-0 text-[13px] leading-[18px] text-[rgba(0,0,0,0.4)] text-center">
注册登录即代表同意
<a
className="text-[#000]"
href={`${process.env.NEXT_PUBLIC_MOBILE_HOST}/agreement/registrationAgreement.html`}
target="_blank"
>
《注册协议》
</a>
<a
className="text-[#000]"
href={`${process.env.NEXT_PUBLIC_MOBILE_HOST}/agreement/privacyPolicy.html`}
target="_blank"
>
《隐私政策》
</a>
</div>
);
}

46
src/components/Login/Login.tsx
Unescape View File

@ -0,0 +1,46 @@
'use client';
import { useState, useContext } from 'react';
import { Dialog, DialogContent, DialogTrigger, DialogClose } from '@/components/ui/dialog';
import Footer from './Footer';
import { LoginContext } from './LoginContext';
import LoginPhone from './LoginPhone';
import LoginQrcode from './LoginQrcode';
import Tab from './Tab';
import { IconClose } from '@/components';
export default function Login() {
const { state, dispatch } = useContext(LoginContext);
const [currentTab, setCurrent] = useState<string>('qrCode');
return (
<Dialog open={state.showLogin} onOpenChange={(open) => dispatch({ type: 'SHOW_LOGIN', payload: open })}>
<DialogTrigger asChild>
<button
id="header_login_button_for_gobal"
className="w-[74px] h-[36px] ml-[40px] border-[#000] border-[1.5px] rounded-[60px] text-[17px] hover:bg-brand hover:border-brand hover:text-[#fff] "
>
登录
</button>
</DialogTrigger>
<DialogContent className="w-420px h-450px px-40px bg-#f2f3f7" onPointerDownOutside={(e) => e.preventDefault()}>
<Tab value={currentTab} changeTab={(value: string) => setCurrent(value)} />
<DialogClose className="absolute top-[24px] right-[24px] w-24px h-24px cursor-pointer outline-none">
<IconClose />
</DialogClose>
<div>
{currentTab === 'qrCode' && <LoginQrcode />}
{currentTab === 'phone' && <LoginPhone />}
</div>
<Footer />
</DialogContent>
</Dialog>
);
}

8
src/components/Login/LoginForm.tsx
Unescape View File

@ -124,7 +124,7 @@ export default function LoginForm({ className }: { className?: string }) {
<div className={className}>
<div className={`w-full flex flex-col`}>
<input
className="w-full h-56px rounded-100px !placeholder-[rgba(0,0,0,0.4)] !placeholder-text-14px px-24px text-[rgba(0,0,0,0.95)] bg-#fff leading-20px border-1px border-#fff focus:border-#000/70 transition-all-100"
className="w-full h-50px rounded-100px !placeholder-[rgba(0,0,0,0.4)] !placeholder-text-14px px-24px text-[rgba(0,0,0,0.95)] bg-#fff leading-20px border-1px border-#fff focus:border-#000/70 transition-all-100"
type="text"
value={phone}
maxLength={11}
@ -132,9 +132,9 @@ export default function LoginForm({ className }: { className?: string }) {
placeholder="输入手机号"
/>
<div className="relative w-full mt-[20px]">
<div className="relative w-full mt-[24px]">
<input
className="w-full h-56px rounded-100px pl-24px pr-[calc(24px_+_60px)] !placeholder-[rgba(0,0,0,0.4)] !placeholder-text-14px text-[rgba(0,0,0,0.95)] bg-#fff leading-20px border-1px border-1px border-#fff focus:border-#000/70 transition-all-100"
className="w-full h-50px rounded-100px pl-24px pr-[calc(24px_+_60px)] !placeholder-[rgba(0,0,0,0.4)] !placeholder-text-14px text-[rgba(0,0,0,0.95)] bg-#fff leading-20px border-1px border-1px border-#fff focus:border-#000/70 transition-all-100"
type="text"
value={authCode}
maxLength={6}
@ -159,7 +159,7 @@ export default function LoginForm({ className }: { className?: string }) {
<Button
type="primary"
className="w-full h-56px mt-30px rounded-100px font-size-14px leading-20px"
className="w-full h-50px mt-30px rounded-100px font-size-14px leading-20px"
disabled={disLogin}
onClick={debounce(handleLogin, 300)}
>

62
src/components/Login/LoginModal.tsx
Unescape View File

@ -1,62 +0,0 @@
'use client';
import { useContext } from 'react';
import { Dialog, DialogContent, DialogTrigger, DialogClose } from '@/components/ui/dialog';
import { LoginContext } from './LoginContext';
import LoginForm from './LoginForm';
import { IconClose } from '@/components';
export default function LoginCard() {
const { state, dispatch } = useContext(LoginContext);
return (
<Dialog open={state.showLogin} onOpenChange={(open) => dispatch({ type: 'SHOW_LOGIN', payload: open })}>
<DialogTrigger asChild>
<button
id="header_login_button_for_gobal"
className="w-[74px] h-[36px] ml-[40px] border-[#000] border-[1.5px] rounded-[60px] text-[17px] hover:bg-brand hover:border-brand hover:text-[#fff] "
>
登录
</button>
</DialogTrigger>
<DialogContent className="w-420px h-450px px-40px bg-#f2f3f7" onPointerDownOutside={(e) => e.preventDefault()}>
{/* title */}
<div className="w-340px">
<p className="text-[24px] leading-[33px] text-[#000] font-bold">登录雀乐</p>
<p className="mt-[6px] text-[13px] leading-[18px] text-[rgba(0,0,0,0.7)]">
输入手机号，开启雀乐；未注册手机，将自动注册
</p>
</div>
<DialogClose className="absolute top-[24px] right-[24px] w-24px h-24px cursor-pointer outline-none">
<IconClose />
</DialogClose>
{/* form */}
<LoginForm className="mt-30px w-full" />
<div className="absolute bottom-[30px] left-0 right-0 text-[13px] leading-[18px] text-[rgba(0,0,0,0.4)] text-center">
注册登录即代表同意
<a
className="text-[#000]"
href={`${process.env.NEXT_PUBLIC_MOBILE_HOST}/agreement/registrationAgreement.html`}
target="_blank"
>
《注册协议》
</a>
<a
className="text-[#000]"
href={`${process.env.NEXT_PUBLIC_MOBILE_HOST}/agreement/privacyPolicy.html`}
target="_blank"
>
《隐私政策》
</a>
</div>
</DialogContent>
</Dialog>
);
}

26
src/components/Login/LoginPhone.tsx
Unescape View File

@ -0,0 +1,26 @@
'use client';
import { useContext } from 'react';
import { Dialog, DialogContent, DialogTrigger, DialogClose } from '@/components/ui/dialog';
import { LoginContext } from './LoginContext';
import LoginForm from './LoginForm';
import { IconClose } from '@/components';
export default function LoginPhone() {
const { state, dispatch } = useContext(LoginContext);
return (
<div className="flex flex-col items-center w-340px bg-#f2f3f7">
{/* title */}
<p className="mt-[9px] text-[13px] leading-[18px] text-[rgba(0,0,0,0.7)]">
输入手机号，开启雀乐；未注册手机，将自动注册
</p>
{/* form */}
<LoginForm className="mt-32px w-full" />
</div>
);
}

23
src/components/Login/LoginQrcode.tsx
Unescape View File

@ -0,0 +1,23 @@
'use client';
import { useContext } from 'react';
import { Dialog, DialogContent, DialogTrigger, DialogClose } from '@/components/ui/dialog';
import { LoginContext } from './LoginContext';
import LoginForm from './LoginForm';
import { IconClose } from '@/components';
export default function LoginQrcode() {
const { state, dispatch } = useContext(LoginContext);
return (
<div className="flex flex-col items-center px-40px bg-#f2f3f7">
{/* title */}
<div className="mt-9px text-13px leading-18px text-#000/70 text-center">通过雀乐APP扫码登录</div>
<div className="w-200px h-200px rounded-6px mt-15px bg-#fff overflow-hidden shadow-black-[0px_8px_30px_0px]"></div>
</div>
);
}

30
src/components/Login/Tab.tsx
Unescape View File

@ -0,0 +1,30 @@
export default function Tab({
className,
value,
changeTab,
}: {
className?: string;
value: string;
changeTab: (value: string) => void;
}) {
const tabs = [
{ name: 'qrCode', label: '扫码登录' },
{ name: 'phone', label: '手机登录' },
];
return (
<div className={`flex justify-center gap-24px w-full ${className}`}>
{tabs.map((tab) => {
return (
<div
className={`text-20px leading-28px font-600 cursor-pointer text-#000/40 ${tab.name === value && 'text-#000/95'}`}
key={tab.name}
onClick={() => changeTab(tab.name)}
>
{tab.label}
</div>
);
})}
</div>
);
}

2
src/components/index.ts
Unescape View File

@ -15,7 +15,7 @@ export { default as Category } from './Category';
export { default as ContributorCard } from './ContributorCard';
// Login
export { default as LoginModal } from './Login/LoginModal';
export { default as Login } from './Login/Login';
export { default as LoginForm } from './Login/LoginForm';
export { default as RedirectCheck } from './Login/RedirectCheck';

6
src/types/login.d.ts vendored
Unescape View File

@ -0,0 +1,6 @@
declare namespace Login {
export interface Tabs {
name: string;
label: string;
}
}
Write Preview
Loading…
Cancel
Save