postguard-website/src/lib/components/filesharing/ReportErrorButton.svelte at 98981b206dfacdb07d2a3ae9366bc7716d5ce8eb · encryption4all/postguard-website · GitHub

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<script lang="ts">
    import { _, locale } from 'svelte-i18n'
    import { APP_VERSION } from '$lib/env'
    import { reportError, isErrorReportingEnabled } from '$lib/errorReporting'

    interface props {
        error: unknown
        context?: Record<string, unknown>
    }

    let { error, context = {} }: props = $props()

    type SendState = 'idle' | 'sending' | 'sent' | 'failed'
    let sendState: SendState = $state('idle')

    let reportingEnabled = isErrorReportingEnabled()

    async function sendReport() {
        if (sendState === 'sending' || sendState === 'sent') return
        sendState = 'sending'
        try {
            const ok = await reportError(error, {
                appVersion: APP_VERSION,
                uiLocale: $locale,
                ...context,
            })
            sendState = ok ? 'sent' : 'failed'
        } catch {
            sendState = 'failed'
        }
    }
</script>

{#if reportingEnabled}
    <div class="report-wrapper">
        <button
            class="report-btn"
            type="button"
            disabled={sendState === 'sending' || sendState === 'sent'}
            onclick={sendReport}
        >
            {#if sendState === 'sending'}
                {$_('filesharing.crash.sending')}
            {:else if sendState === 'sent'}
                {$_('filesharing.crash.sentButton')}
            {:else}
                {$_('filesharing.crash.report')}
            {/if}
        </button>

        <!-- Stable live-region wrapper so AT announces the failed-state
             message when it appears (WCAG 4.1.3). -->
        <div role="status" aria-live="polite" class="status-region">
            {#if sendState === 'failed'}
                <p class="status error">{$_('filesharing.crash.failed')}</p>
            {/if}
        </div>
    </div>
{/if}

<style>
    .report-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .report-btn {
        padding: 0.65rem 1.25rem;
        background-color: var(--pg-text);
        color: var(--pg-general-background);
        border: 1px solid transparent;
        border-radius: var(--pg-border-radius-sm);
        cursor: pointer;
        font-size: var(--pg-font-size-base);
        font-family: var(--pg-font-family);
        font-weight: var(--pg-font-weight-medium);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        transition: transform 0.2s ease;
        /* Lock width so swapping labels doesn't reflow the row. */
        min-width: 14rem;
    }

    .report-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .report-btn:not(:disabled):hover {
        transform: translateY(-1px);
    }

    .report-btn:focus-visible {
        outline: 2px solid var(--pg-text);
        outline-offset: 2px;
    }

    .status {
        margin: 0;
        font-size: var(--pg-font-size-sm);
        font-family: var(--pg-font-family);
        text-align: center;
    }

    .status.error {
        color: var(--pg-input-error);
    }
</style>