ohif-viewer/platform/app/src/routes/ShortlinkLogin.tsx

import React, { useState, useEffect } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { useUserAuthentication } from '@ohif/ui';
import { Icons } from '@ohif/ui-next';

const ShortlinkLogin = () => {
  const [dob, setDob] = useState('');
  const [shortToken, setShortToken] = useState('');
  const [error, setError] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const navigate = useNavigate();
  const location = useLocation();
  const [, authContext] = useUserAuthentication();

  // Parse the short token from URL query params
  useEffect(() => {
    const searchParams = new URLSearchParams(location.search);
    const token = searchParams.get('short');

    if (token) {
      setShortToken(token);
    } else {
      // No short token found, redirect to regular login
      setError('No shortlink token found in URL');
      setTimeout(() => {
        navigate('/', { replace: true });
      }, 3000);
    }
  }, [location.search, navigate]);

  // Handle form submission
  const handleSubmit = async e => {
    e.preventDefault();
    setError('');
    setIsLoading(true);

    try {
      // Use window.config.goProxyHost for authentication endpoint
      const proxyHost = window.config?.goProxyHost || `https://${window.location.hostname}:5555`;
      const authEndpoint = `${proxyHost}/auth/shortlink`;

      // Call the shortlink authentication endpoint
      const response = await fetch(authEndpoint, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ short_token: shortToken, dob }),
      });

      if (!response.ok) {
        throw new Error('Authentication failed. Please check your date of birth and try again.');
      }

      const data = await response.json();

      // Store token in sessionStorage
      window.sessionStorage.setItem('ohif-auth-token', data.access_token);

      // Decode token to extract user information (if available in token)
      let userInfo = data.user;

      // Update the auth context
      authContext.setUser({
        ...userInfo,
        token: data.access_token,
      });

      // Set window.config.sasGetToken for the injectAuth function
      if (window.config) {
        window.config.sasGetToken = () => window.sessionStorage.getItem('ohif-auth-token');
      }

      // Navigate to the viewer page with the authenticated patient's study
      // The actual URL would depend on how studies are loaded in your OHIF instance
      if (data.redirect_url) {
        navigate(data.redirect_url, { replace: true });
      } else {
        // Default navigation if no specific redirect is provided
        navigate('/', { replace: true });
      }
    } catch (error) {
      console.error('Authentication error:', error);
      setError(error.message || 'Failed to authenticate. Please try again.');
    } finally {
      setIsLoading(false);
    }
  };

  const handleDateChange = e => {
    // Format date input as YYYY-MM-DD
    setDob(e.target.value);
  };

  return (
    <div className="flex h-screen w-screen items-center justify-center bg-black">
      <div className="bg-popover w-88 rounded p-8 shadow-lg">
        <div className="mb-4 flex justify-center">
          <Icons.OHIFLogo className="h-12 text-white" />
        </div>

        <h1 className="mb-8 text-center text-2xl font-bold text-white">Cloud DICOM Viewer</h1>

        {error && <div className="mb-4 rounded bg-red-800 px-4 py-2 text-white">{error}</div>}

        <form onSubmit={handleSubmit}>
          <div className="mb-6">
            <label className="mb-2 block text-sm font-bold text-white">
              Masukkan tanggal lahir Anda:
            </label>
            <input
              type="date"
              className="focus:shadow-outline w-full appearance-none rounded border py-2 px-3 leading-tight text-gray-700 shadow focus:outline-none"
              value={dob}
              onChange={handleDateChange}
              required
            />
            <p className="mt-1 text-xs text-gray-400">Format: Bulan - Tanggal - Tahun</p>
          </div>

          <div className="flex items-center justify-center">
            <button
              type="submit"
              className="focus:shadow-outline w-full rounded bg-blue-500 py-2 px-4 font-bold text-white hover:bg-blue-700 focus:outline-none"
              disabled={isLoading || !shortToken}
            >
              {isLoading ? 'Verifying...' : 'View'}
            </button>
          </div>
          <p className="text-muted-foreground mt-8 text-center text-sm">
            Powered by OHIF & Google Cloud DICOM Storage
          </p>
        </form>
      </div>
    </div>
  );
};

export default ShortlinkLogin;