feat: webapp supports login and logout
NFish
1 year ago
parent
32a8c7aad7
commit
eddf4eeac6
@ -0,0 +1,49 @@
|
||||
import React from 'react'
|
||||
import cn from 'classnames'
|
||||
import Modal from '@/app/components/base/modal'
|
||||
import AppIcon from '@/app/components/base/app-icon'
|
||||
import type { SiteInfo } from '@/models/share'
|
||||
import { appDefaultIconBackground } from '@/config'
|
||||
|
||||
type Props = {
|
||||
data?: SiteInfo
|
||||
isShow: boolean
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
const InfoModal = ({
|
||||
isShow,
|
||||
onClose,
|
||||
data,
|
||||
}: Props) => {
|
||||
return (
|
||||
<Modal
|
||||
isShow={isShow}
|
||||
onClose={onClose}
|
||||
className='min-w-[400px] max-w-[400px] !p-0'
|
||||
closable
|
||||
>
|
||||
<div className={cn('flex flex-col items-center gap-4 px-4 pb-8 pt-10')}>
|
||||
<AppIcon
|
||||
size='xxl'
|
||||
iconType={data?.icon_type}
|
||||
icon={data?.icon}
|
||||
background={data?.icon_background || appDefaultIconBackground}
|
||||
imageUrl={data?.icon_url}
|
||||
/>
|
||||
<div className='system-xl-semibold text-text-secondary'>{data?.title}</div>
|
||||
<div className='system-xs-regular text-text-tertiary'>
|
||||
{/* copyright */}
|
||||
{data?.copyright && (
|
||||
<div>© {(new Date()).getFullYear()} {data?.copyright}</div>
|
||||
)}
|
||||
{data?.custom_disclaimer && (
|
||||
<div className='mt-2'>{data.custom_disclaimer}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
export default InfoModal
|
||||
@ -0,0 +1,107 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React, { useCallback, useRef, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import type { Placement } from '@floating-ui/react'
|
||||
import {
|
||||
RiEqualizer2Line,
|
||||
} from '@remixicon/react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import Divider from '../../base/divider'
|
||||
import { removeAccessToken } from '../utils'
|
||||
import InfoModal from './info-modal'
|
||||
import ActionButton from '@/app/components/base/action-button'
|
||||
import {
|
||||
PortalToFollowElem,
|
||||
PortalToFollowElemContent,
|
||||
PortalToFollowElemTrigger,
|
||||
} from '@/app/components/base/portal-to-follow-elem'
|
||||
import type { SiteInfo } from '@/models/share'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
type Props = {
|
||||
data?: SiteInfo
|
||||
placement?: Placement
|
||||
}
|
||||
|
||||
const MenuDropdown: FC<Props> = ({
|
||||
data,
|
||||
placement,
|
||||
}) => {
|
||||
const router = useRouter()
|
||||
const { t } = useTranslation()
|
||||
const [open, doSetOpen] = useState(false)
|
||||
const openRef = useRef(open)
|
||||
const setOpen = useCallback((v: boolean) => {
|
||||
doSetOpen(v)
|
||||
openRef.current = v
|
||||
}, [doSetOpen])
|
||||
|
||||
const handleTrigger = useCallback(() => {
|
||||
setOpen(!openRef.current)
|
||||
}, [setOpen])
|
||||
|
||||
const handleLogout = useCallback(() => {
|
||||
removeAccessToken()
|
||||
router.replace(`/webapp-signin?redirect_url=${window.location.href}`)
|
||||
}, [])
|
||||
|
||||
const [show, setShow] = useState(false)
|
||||
|
||||
return (
|
||||
<>
|
||||
<PortalToFollowElem
|
||||
open={open}
|
||||
onOpenChange={setOpen}
|
||||
placement={placement || 'bottom-end'}
|
||||
offset={{
|
||||
mainAxis: 4,
|
||||
crossAxis: -4,
|
||||
}}
|
||||
>
|
||||
<PortalToFollowElemTrigger onClick={handleTrigger}>
|
||||
<div>
|
||||
<ActionButton size='l' className={cn(open && 'bg-state-base-hover')}>
|
||||
<RiEqualizer2Line className='h-[18px] w-[18px]' />
|
||||
</ActionButton>
|
||||
</div>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent className='z-50'>
|
||||
<div className='w-[224px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-sm'>
|
||||
<div className='p-1'>
|
||||
{data?.privacy_policy && (
|
||||
<a href={data.privacy_policy} target='_blank' className='system-md-regular flex cursor-pointer items-center rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover'>
|
||||
<span className='grow'>{t('share.chat.privacyPolicyMiddle')}</span>
|
||||
</a>
|
||||
)}
|
||||
<div
|
||||
onClick={() => {
|
||||
handleTrigger()
|
||||
setShow(true)
|
||||
}}
|
||||
className='system-md-regular cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover'
|
||||
>{t('common.userProfile.about')}</div>
|
||||
<Divider />
|
||||
<div
|
||||
onClick={() => {
|
||||
handleLogout()
|
||||
}}
|
||||
className='system-md-regular cursor-pointer rounded-lg px-3 py-1.5 text-text-destructive hover:bg-state-base-hover'
|
||||
>{t('common.userProfile.logout')}</div>
|
||||
</div>
|
||||
</div>
|
||||
</PortalToFollowElemContent>
|
||||
</PortalToFollowElem>
|
||||
{show && (
|
||||
<InfoModal
|
||||
isShow={show}
|
||||
onClose={() => {
|
||||
setShow(false)
|
||||
}}
|
||||
data={data}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default React.memo(MenuDropdown)
|
||||
Loading…
Reference in New Issue