diff options
Diffstat (limited to 'packages/renderer/src/components/locationBar/SecurityLabel.tsx')
-rw-r--r-- | packages/renderer/src/components/locationBar/SecurityLabel.tsx | 79 |
1 files changed, 36 insertions, 43 deletions
diff --git a/packages/renderer/src/components/locationBar/SecurityLabel.tsx b/packages/renderer/src/components/locationBar/SecurityLabel.tsx index 0017f89..ac51cff 100644 --- a/packages/renderer/src/components/locationBar/SecurityLabel.tsx +++ b/packages/renderer/src/components/locationBar/SecurityLabel.tsx | |||
@@ -18,17 +18,17 @@ | |||
18 | * SPDX-License-Identifier: AGPL-3.0-only | 18 | * SPDX-License-Identifier: AGPL-3.0-only |
19 | */ | 19 | */ |
20 | 20 | ||
21 | import IconHttps from '@mui/icons-material/HttpsOutlined'; | 21 | import HttpsOutliedIcon from '@mui/icons-material/HttpsOutlined'; |
22 | import IconHttp from '@mui/icons-material/NoEncryption'; | 22 | import NoEncrpytionIcon from '@mui/icons-material/NoEncryption'; |
23 | import IconGlobe from '@mui/icons-material/Public'; | 23 | import PublicIcon from '@mui/icons-material/Public'; |
24 | import IconWarning from '@mui/icons-material/Warning'; | 24 | import WarningIcon from '@mui/icons-material/Warning'; |
25 | import { styled } from '@mui/material/styles'; | 25 | import { styled } from '@mui/material/styles'; |
26 | import { SecurityLabelKind } from '@sophie/shared'; | ||
26 | import React from 'react'; | 27 | import React from 'react'; |
27 | import { useTranslation } from 'react-i18next'; | 28 | import { useTranslation } from 'react-i18next'; |
28 | 29 | ||
29 | import LocationInputAdornment from './LocationInputAdornment'; | 30 | import LocationInputAdornment from './LocationInputAdornment'; |
30 | import getAlertColor from './getAlertColor'; | 31 | import getAlertColor from './getAlertColor'; |
31 | import type { SplitResult } from './splitUrl'; | ||
32 | 32 | ||
33 | const SecurityLabelRoot = styled(LocationInputAdornment, { | 33 | const SecurityLabelRoot = styled(LocationInputAdornment, { |
34 | name: 'SecurityLabel', | 34 | name: 'SecurityLabel', |
@@ -53,55 +53,48 @@ const SecurityLabelText = styled('span', { | |||
53 | })); | 53 | })); |
54 | 54 | ||
55 | export default function SecurityLabel({ | 55 | export default function SecurityLabel({ |
56 | splitResult, | 56 | kind, |
57 | changed, | 57 | changed, |
58 | position, | 58 | position, |
59 | }: { | 59 | }: { |
60 | splitResult: SplitResult; | 60 | kind: SecurityLabelKind; |
61 | changed: boolean; | 61 | changed: boolean; |
62 | position: 'start' | 'end'; | 62 | position: 'start' | 'end'; |
63 | }): JSX.Element { | 63 | }): JSX.Element { |
64 | const { t } = useTranslation(undefined, { | 64 | const { t } = useTranslation(); |
65 | keyPrefix: 'securityLabel', | ||
66 | }); | ||
67 | 65 | ||
68 | const { type } = splitResult; | 66 | if (changed || kind === SecurityLabelKind.Empty) { |
69 | if (changed || type === 'empty') { | ||
70 | return ( | 67 | return ( |
71 | <SecurityLabelRoot alert={false} position={position} aria-hidden> | 68 | <SecurityLabelRoot alert={false} position={position} aria-hidden> |
72 | <IconGlobe fontSize="small" /> | 69 | <PublicIcon fontSize="small" /> |
73 | </SecurityLabelRoot> | 70 | </SecurityLabelRoot> |
74 | ); | 71 | ); |
75 | } | 72 | } |
76 | switch (type) { | 73 | if (kind === SecurityLabelKind.SecureConnection) { |
77 | case 'valid': { | 74 | return ( |
78 | const { secure } = splitResult; | 75 | <SecurityLabelRoot |
79 | return secure ? ( | 76 | alert={false} |
80 | <SecurityLabelRoot | 77 | position={position} |
81 | alert={false} | 78 | aria-label={t('securityLabel.secureConnection')} |
82 | position={position} | 79 | > |
83 | aria-label={t('secureConnection')} | 80 | <HttpsOutliedIcon fontSize="small" /> |
84 | > | 81 | </SecurityLabelRoot> |
85 | <IconHttps fontSize="small" /> | 82 | ); |
86 | </SecurityLabelRoot> | ||
87 | ) : ( | ||
88 | <SecurityLabelRoot alert position={position}> | ||
89 | <IconHttp fontSize="small" /> | ||
90 | <SecurityLabelText>{t('notSecureConnection')}</SecurityLabelText> | ||
91 | </SecurityLabelRoot> | ||
92 | ); | ||
93 | } | ||
94 | case 'invalid': | ||
95 | return ( | ||
96 | <SecurityLabelRoot alert position={position}> | ||
97 | <IconWarning fontSize="small" /> | ||
98 | <SecurityLabelText>{t('unknownSite')}</SecurityLabelText> | ||
99 | </SecurityLabelRoot> | ||
100 | ); | ||
101 | default: | ||
102 | /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions -- | ||
103 | Error handling for impossible case. | ||
104 | */ | ||
105 | throw new Error(`Unexpected SplitResult: ${type}`); | ||
106 | } | 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 | ); | ||
107 | } | 100 | } |