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