diff options
Diffstat (limited to 'packages/renderer/src/components/locationBar/SecurityLabel.tsx')
-rw-r--r-- | packages/renderer/src/components/locationBar/SecurityLabel.tsx | 100 |
1 files changed, 100 insertions, 0 deletions
diff --git a/packages/renderer/src/components/locationBar/SecurityLabel.tsx b/packages/renderer/src/components/locationBar/SecurityLabel.tsx new file mode 100644 index 0000000..7521fa6 --- /dev/null +++ b/packages/renderer/src/components/locationBar/SecurityLabel.tsx | |||
@@ -0,0 +1,100 @@ | |||
1 | /* | ||
2 | * Copyright (C) 2022 Kristóf Marussy <kristof@marussy.com> | ||
3 | * | ||
4 | * This file is part of Sophie. | ||
5 | * | ||
6 | * Sophie is free software: you can redistribute it and/or modify | ||
7 | * it under the terms of the GNU Affero General Public License as | ||
8 | * published by the Free Software Foundation, version 3. | ||
9 | * | ||
10 | * This program is distributed in the hope that it will be useful, | ||
11 | * but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
12 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | ||
13 | * GNU Affero General Public License for more details. | ||
14 | * | ||
15 | * You should have received a copy of the GNU Affero General Public License | ||
16 | * along with this program. If not, see <https://www.gnu.org/licenses/>. | ||
17 | * | ||
18 | * SPDX-License-Identifier: AGPL-3.0-only | ||
19 | */ | ||
20 | |||
21 | import HttpsOutliedIcon from '@mui/icons-material/HttpsOutlined'; | ||
22 | import NoEncrpytionIcon from '@mui/icons-material/NoEncryption'; | ||
23 | import PublicIcon from '@mui/icons-material/Public'; | ||
24 | import WarningIcon from '@mui/icons-material/Warning'; | ||
25 | import { styled } from '@mui/material/styles'; | ||
26 | import { SecurityLabelKind } from '@sophie/shared'; | ||
27 | import React from 'react'; | ||
28 | import { useTranslation } from 'react-i18next'; | ||
29 | |||
30 | import LocationInputAdornment from './LocationInputAdornment.js'; | ||
31 | import getAlertColor from './getAlertColor.js'; | ||
32 | |||
33 | const SecurityLabelRoot = styled(LocationInputAdornment, { | ||
34 | name: 'SecurityLabel', | ||
35 | slot: 'Root', | ||
36 | shouldForwardProp: (prop) => prop !== 'alert', | ||
37 | })<{ alert: boolean }>(({ theme, alert }) => ({ | ||
38 | padding: 6, | ||
39 | color: getAlertColor(theme, alert), | ||
40 | // Clicking on the security label should focus the text field instead. | ||
41 | pointerEvents: 'none', | ||
42 | })); | ||
43 | |||
44 | const SecurityLabelText = styled('span', { | ||
45 | name: 'SecurityLabel', | ||
46 | slot: 'Text', | ||
47 | })(({ theme }) => ({ | ||
48 | marginLeft: theme.spacing(1), | ||
49 | // Keep the same baseline as the input box text. | ||
50 | paddingBottom: 1, | ||
51 | fontWeight: theme.typography.fontWeightMedium, | ||
52 | userSelect: 'none', | ||
53 | })); | ||
54 | |||
55 | export default function SecurityLabel({ | ||
56 | kind, | ||
57 | changed, | ||
58 | position, | ||
59 | }: { | ||
60 | kind: SecurityLabelKind; | ||
61 | changed: boolean; | ||
62 | position: 'start' | 'end'; | ||
63 | }): JSX.Element { | ||
64 | const { t } = useTranslation(); | ||
65 | |||
66 | if (changed || kind === SecurityLabelKind.Empty) { | ||
67 | return ( | ||
68 | <SecurityLabelRoot alert={false} position={position} aria-hidden> | ||
69 | <PublicIcon fontSize="small" /> | ||
70 | </SecurityLabelRoot> | ||
71 | ); | ||
72 | } | ||
73 | if (kind === SecurityLabelKind.SecureConnection) { | ||
74 | return ( | ||
75 | <SecurityLabelRoot | ||
76 | alert={false} | ||
77 | position={position} | ||
78 | aria-label={t('securityLabel.secureConnection')} | ||
79 | > | ||
80 | <HttpsOutliedIcon fontSize="small" /> | ||
81 | </SecurityLabelRoot> | ||
82 | ); | ||
83 | } | ||
84 | const tslError = | ||
85 | kind === SecurityLabelKind.NotSecureConnection || | ||
86 | kind === SecurityLabelKind.CertificateError; | ||
87 | const icon = tslError ? ( | ||
88 | <NoEncrpytionIcon fontSize="small" /> | ||
89 | ) : ( | ||
90 | <WarningIcon fontSize="small" /> | ||
91 | ); | ||
92 | return ( | ||
93 | <SecurityLabelRoot alert position={position}> | ||
94 | {icon} | ||
95 | <SecurityLabelText> | ||
96 | {t([`securityLabel.${kind}`, 'securityLabel.unspecific'])} | ||
97 | </SecurityLabelText> | ||
98 | </SecurityLabelRoot> | ||
99 | ); | ||
100 | } | ||