feat: hide certificate buttons for non-team members

- Added isTeamMember check (session user ID === certificate user ID)
- Hide all action buttons (Download, Print, View Submission) for non-members
- Hide "Back to Submission" button in header for non-members
- Unauthenticated users and other users can view certificate but cannot interact with buttons

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Maulana Sodiqin
2025-12-11 00:48:21 +07:00
co-authored by Claude
parent f5882e3cdc
commit 782cce820b
@@ -4,6 +4,7 @@ import { Button } from '@imphnen-frontend-service/ui/atoms';
import { decodeCertificateId } from '../../../utils/certificate'; import { decodeCertificateId } from '../../../utils/certificate';
import { import {
useCertificatePublicData, useCertificatePublicData,
useAuthStore,
} from '@imphnen-frontend-service/service'; } from '@imphnen-frontend-service/service';
import QRCode from 'qrcode'; import QRCode from 'qrcode';
import html2canvas from 'html2canvas'; import html2canvas from 'html2canvas';
@@ -17,6 +18,7 @@ interface DecodedCert {
const CertificatePage: FC = (): ReactElement => { const CertificatePage: FC = (): ReactElement => {
const { certId } = useParams<{ certId: string }>(); const { certId } = useParams<{ certId: string }>();
const navigate = useNavigate(); const navigate = useNavigate();
const { session } = useAuthStore();
const [decodedInfo, setDecodedInfo] = useState<DecodedCert | null>(null); const [decodedInfo, setDecodedInfo] = useState<DecodedCert | null>(null);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const teamNameRef = useRef<HTMLHeadingElement>(null); const teamNameRef = useRef<HTMLHeadingElement>(null);
@@ -74,6 +76,9 @@ const CertificatePage: FC = (): ReactElement => {
// Certificate name from the user data // Certificate name from the user data
const certificateName = certificateUser?.fullname; const certificateName = certificateUser?.fullname;
// Check if current user is viewing their own certificate (team member)
const isTeamMember = session?.user?.id === decodedInfo?.userId;
// Dynamic font sizing: shrink by 2px if height exceeds 80px // Dynamic font sizing: shrink by 2px if height exceeds 80px
useEffect(() => { useEffect(() => {
const adjustFontSize = ( const adjustFontSize = (
@@ -281,7 +286,7 @@ const CertificatePage: FC = (): ReactElement => {
{team?.name} {team?.name}
</p> </p>
</div> </div>
{team && ( {team && isTeamMember && (
<Button <Button
variant="secondary" variant="secondary"
onClick={() => onClick={() =>
@@ -472,6 +477,7 @@ const CertificatePage: FC = (): ReactElement => {
)} )}
{/* Actions */} {/* Actions */}
{isTeamMember && (
<div className="bg-gray-50 dark:bg-gray-800 p-6 grid grid-cols-2 xl:grid-cols-3 gap-3 justify-center no-print"> <div className="bg-gray-50 dark:bg-gray-800 p-6 grid grid-cols-2 xl:grid-cols-3 gap-3 justify-center no-print">
<Button <Button
variant="secondary" variant="secondary"
@@ -501,6 +507,7 @@ const CertificatePage: FC = (): ReactElement => {
</Button> </Button>
)} )}
</div> </div>
)}
</div> </div>
{/* Info Box */} {/* Info Box */}