64 lines
1.8 KiB
TypeScript
Executable File
64 lines
1.8 KiB
TypeScript
Executable File
import {useFormContext} from 'react-hook-form';
|
|
import {AdminSettings} from '../../admin-settings';
|
|
import {useSocialLogin} from '../../../../auth/requests/use-social-login';
|
|
import {toast} from '../../../../ui/toast/toast';
|
|
import {message} from '../../../../i18n/message';
|
|
import {Button} from '../../../../ui/buttons/button';
|
|
import {GmailIcon} from './gmail-icon';
|
|
import {Trans} from '../../../../i18n/trans';
|
|
import {Fragment} from 'react';
|
|
|
|
export function ConnectGmailPanel() {
|
|
const {watch, setValue} = useFormContext<AdminSettings>();
|
|
const {connectSocial} = useSocialLogin();
|
|
const connectedEmail = watch('server.connectedGmailAccount');
|
|
|
|
const handleGmailConnect = async () => {
|
|
const e = await connectSocial('secure/settings/mail/gmail/connect');
|
|
if (e?.status === 'SUCCESS') {
|
|
const email = (e.callbackData as any).profile.email;
|
|
setValue('server.connectedGmailAccount', email);
|
|
toast(message('Connected gmail account: :email', {values: {email}}));
|
|
}
|
|
};
|
|
|
|
const connectButton = (
|
|
<Button
|
|
variant="outline"
|
|
color="primary"
|
|
startIcon={<GmailIcon />}
|
|
onClick={() => {
|
|
handleGmailConnect();
|
|
}}
|
|
>
|
|
<Trans message="Connect gmail account" />
|
|
</Button>
|
|
);
|
|
|
|
const reconnectPanel = (
|
|
<div className="flex items-center gap-14 rounded border bg-alt px-14 py-6 text-sm">
|
|
<GmailIcon size="lg" />
|
|
{connectedEmail}
|
|
<Button
|
|
variant="text"
|
|
color="primary"
|
|
className="ml-auto"
|
|
onClick={() => {
|
|
handleGmailConnect();
|
|
}}
|
|
>
|
|
<Trans message="Reconnect" />
|
|
</Button>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<Fragment>
|
|
<div className="mb-6 text-sm">
|
|
<Trans message="Gmail account" />
|
|
</div>
|
|
{connectedEmail ? reconnectPanel : connectButton}
|
|
</Fragment>
|
|
);
|
|
}
|