openreplay/frontend/app/components/Client/ProfileSettings/TenantKey.js
Delirium 968a3eefde
ui: migrating old components -> ant (#3060)
* ui: migrating old components -> ant

* ui: moving input, tooltip, toggler, checkbox... -> Toggler\s*(.)? from 'UI

* ui: more components moved

* ui: move popover to ant
2025-02-24 16:11:44 +01:00

44 lines
1.1 KiB
JavaScript

import React from 'react';
import copy from 'copy-to-clipboard';
import { Form, Input } from "UI";
import { Button } from 'antd';
import { observer } from 'mobx-react-lite';
import { useStore } from 'App/mstore';
function TenantKey() {
const [ copied, setCopied ] = React.useState(false);
const { userStore } = useStore();
const tenantKey = userStore.account.tenantKey;
const copyHandler = () => {
setCopied(true);
copy(tenantKey);
setTimeout(() => {
setCopied(false);
}, 1000);
}
return (
<Form.Field>
<label htmlFor="tenantKey">{ 'Tenant Key' }</label>
<Input
name="tenantKey"
id="tenantKey"
type="text"
className={'!w-72'}
readOnly={ true }
value={ tenantKey }
leadingButton={
<Button
type="text"
onClick={ copyHandler }
>
{ copied ? 'Copied' : 'Copy' }
</Button>
}
/>
</Form.Field>
);
}
export default observer(TenantKey);