From 3cef00b6b695133eae551bee608a795afd4dad2f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Thu, 6 Jul 2023 11:10:00 +0200 Subject: [PATCH] Add E2EE banner MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/Banner.module.css | 22 +++++++++++++++++++++ src/Banner.tsx | 27 +++++++++++++++++++++++++ src/E2EEBanner.module.css | 22 +++++++++++++++++++++ src/E2EEBanner.tsx | 34 ++++++++++++++++++++++++++++++++ src/home/RegisteredView.tsx | 2 ++ src/home/UnauthenticatedView.tsx | 2 ++ 6 files changed, 109 insertions(+) create mode 100644 src/Banner.module.css create mode 100644 src/Banner.tsx create mode 100644 src/E2EEBanner.module.css create mode 100644 src/E2EEBanner.tsx diff --git a/src/Banner.module.css b/src/Banner.module.css new file mode 100644 index 00000000..6acc9418 --- /dev/null +++ b/src/Banner.module.css @@ -0,0 +1,22 @@ +/* +Copyright 2023 New Vector Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.banner { + flex: 1; + border-radius: 8px; + padding: 16px; + background-color: var(--subtle-primary); +} diff --git a/src/Banner.tsx b/src/Banner.tsx new file mode 100644 index 00000000..fcc68a3b --- /dev/null +++ b/src/Banner.tsx @@ -0,0 +1,27 @@ +/* +Copyright 2023 New Vector Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import { ReactNode } from "react"; + +import styles from "./Banner.module.css"; + +interface Props { + children: ReactNode; +} + +export const Banner = ({ children }: Props) => { + return
{children}
; +}; diff --git a/src/E2EEBanner.module.css b/src/E2EEBanner.module.css new file mode 100644 index 00000000..80b06bba --- /dev/null +++ b/src/E2EEBanner.module.css @@ -0,0 +1,22 @@ +/* +Copyright 2023 New Vector Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.e2eeBanner { + display: flex; + flex-direction: row; + align-items: center; + gap: 16px; +} diff --git a/src/E2EEBanner.tsx b/src/E2EEBanner.tsx new file mode 100644 index 00000000..78e68155 --- /dev/null +++ b/src/E2EEBanner.tsx @@ -0,0 +1,34 @@ +/* +Copyright 2023 New Vector Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import { Trans } from "react-i18next"; + +import { Banner } from "./Banner"; +import styles from "./E2EEBanner.module.css"; +import { ReactComponent as LockOffIcon } from "./icons/LockOff.svg"; + +export const E2EEBanner = () => { + return ( + +
+ + + Element Call is temporarily not encrypted while we test scalability. + +
+ + ); +}; diff --git a/src/home/RegisteredView.tsx b/src/home/RegisteredView.tsx index ee696d20..f46376a8 100644 --- a/src/home/RegisteredView.tsx +++ b/src/home/RegisteredView.tsx @@ -39,6 +39,7 @@ import { Form } from "../form/Form"; import { CallType, CallTypeDropdown } from "./CallTypeDropdown"; import { useOptInAnalytics } from "../settings/useSetting"; import { AnalyticsNotice } from "../analytics/AnalyticsNotice"; +import { E2EEBanner } from "../E2EEBanner"; interface Props { client: MatrixClient; @@ -146,6 +147,7 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) { )} + {error && ( diff --git a/src/home/UnauthenticatedView.tsx b/src/home/UnauthenticatedView.tsx index 1fb1a84b..e8f96722 100644 --- a/src/home/UnauthenticatedView.tsx +++ b/src/home/UnauthenticatedView.tsx @@ -41,6 +41,7 @@ import commonStyles from "./common.module.css"; import { generateRandomName } from "../auth/generateRandomName"; import { AnalyticsNotice } from "../analytics/AnalyticsNotice"; import { useOptInAnalytics } from "../settings/useSetting"; +import { E2EEBanner } from "../E2EEBanner"; export const UnauthenticatedView: FC = () => { const { setClient } = useClient(); @@ -168,6 +169,7 @@ export const UnauthenticatedView: FC = () => { Terms and conditions + {error && (