File size: 1,871 Bytes
01d5a5d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
'use client';

import { useLoadInfoStore } from '@/store/useLoadInfoStore';
import { copyToClipboard } from '@/utils/copy';
import { Modal, message } from 'antd';
import { useEffect, useState } from 'react';

interface ShareRoleModalProps {
  open: boolean;
  onClose: () => void;
  uuid: string;
  isRegistered: boolean;
}

export default function ShareRoleModal({ open, onClose, uuid, isRegistered }: ShareRoleModalProps) {
  const [shareUrl, setShareUrl] = useState('');
  const loadInfo = useLoadInfoStore((state) => state.loadInfo);

  useEffect(() => {
    if (isRegistered) {
      if (!loadInfo) {
        message.error('Oops, something went wrong');

        return;
      }

      // TODO Later replace with IP address returned from backend
      setShareUrl(`https://app.secondme.io/role/${loadInfo.name}/${loadInfo.instance_id}/${uuid}`);
    }
  }, [isRegistered, uuid, loadInfo]);

  const handleCopyLink = async () => {
    copyToClipboard(shareUrl)
      .then(() => {
        message.success({
          content: 'Link copied.'
        });
      })
      .catch(() => {
        message.error({
          content: 'Copy failed, please copy manually.'
        });
      });
  };

  return (
    <Modal centered footer={null} onCancel={onClose} open={open} title="Share">
      {isRegistered ? (
        <div className="space-y-4">
          <input
            className="w-full px-3 py-2 border rounded-lg bg-gray-50"
            readOnly
            value={shareUrl}
          />
          <button
            className="w-full px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
            onClick={handleCopyLink}
          >
            Copy Link
          </button>
        </div>
      ) : (
        <div className="text-center text-red-500">Please register this Upload before sharing</div>
      )}
    </Modal>
  );
}