diff options
Diffstat (limited to 'packages/renderer/src/components/locationBar/UrlAdornment.tsx')
-rw-r--r-- | packages/renderer/src/components/locationBar/UrlAdornment.tsx | 91 |
1 files changed, 91 insertions, 0 deletions
diff --git a/packages/renderer/src/components/locationBar/UrlAdornment.tsx b/packages/renderer/src/components/locationBar/UrlAdornment.tsx new file mode 100644 index 0000000..6ede378 --- /dev/null +++ b/packages/renderer/src/components/locationBar/UrlAdornment.tsx | |||
@@ -0,0 +1,91 @@ | |||
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 IconHttps from '@mui/icons-material/HttpsOutlined'; | ||
22 | import IconGlobe from '@mui/icons-material/Public'; | ||
23 | import IconWarning from '@mui/icons-material/Warning'; | ||
24 | import { styled } from '@mui/material'; | ||
25 | import Button from '@mui/material/Button'; | ||
26 | import React from 'react'; | ||
27 | |||
28 | import ButtonAdornment, { NO_LABEL_BUTTON_CLASS_NAME } from './ButtonAdornment'; | ||
29 | import IconAdornment from './IconAdornment'; | ||
30 | import type { SplitResult } from './splitUrl'; | ||
31 | |||
32 | const FastColorChangingButton = styled(Button)(({ theme }) => ({ | ||
33 | transition: theme.transitions.create( | ||
34 | ['background-color', 'box-shadow', 'border-color'], | ||
35 | { | ||
36 | duration: theme.transitions.duration.short, | ||
37 | easing: theme.transitions.easing.easeInOut, | ||
38 | }, | ||
39 | ), | ||
40 | })); | ||
41 | |||
42 | export default function UrlAdornment({ | ||
43 | splitResult, | ||
44 | changed, | ||
45 | }: { | ||
46 | splitResult: SplitResult; | ||
47 | changed: boolean; | ||
48 | }): JSX.Element { | ||
49 | const { type } = splitResult; | ||
50 | if (changed || type === 'empty') { | ||
51 | return ( | ||
52 | <IconAdornment position="start"> | ||
53 | <IconGlobe fontSize="small" /> | ||
54 | </IconAdornment> | ||
55 | ); | ||
56 | } | ||
57 | switch (type) { | ||
58 | case 'valid': { | ||
59 | const { secure } = splitResult; | ||
60 | return secure ? ( | ||
61 | <ButtonAdornment position="start"> | ||
62 | <FastColorChangingButton | ||
63 | aria-label="Show certificate" | ||
64 | color="inherit" | ||
65 | className={NO_LABEL_BUTTON_CLASS_NAME} | ||
66 | startIcon={<IconHttps />} | ||
67 | /> | ||
68 | </ButtonAdornment> | ||
69 | ) : ( | ||
70 | <ButtonAdornment position="start"> | ||
71 | <FastColorChangingButton color="error" startIcon={<IconWarning />}> | ||
72 | Not secure | ||
73 | </FastColorChangingButton> | ||
74 | </ButtonAdornment> | ||
75 | ); | ||
76 | } | ||
77 | case 'invalid': | ||
78 | return ( | ||
79 | <ButtonAdornment position="start"> | ||
80 | <FastColorChangingButton color="error" startIcon={<IconWarning />}> | ||
81 | Unknown site | ||
82 | </FastColorChangingButton> | ||
83 | </ButtonAdornment> | ||
84 | ); | ||
85 | default: | ||
86 | /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions -- | ||
87 | Error handling for impossible case. | ||
88 | */ | ||
89 | throw new Error(`Unexpected SplitResult: ${type}`); | ||
90 | } | ||
91 | } | ||