Migrate Password Nag Bar Banner to a Toast

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/structures/LoggedInView.tsx

@@ -43,6 +43,11 @@ import ResizeNotifier from "../../utils/ResizeNotifier";
 import PlatformPeg from "../../PlatformPeg";
 import { RoomListStoreTempProxy } from "../../stores/room-list/RoomListStoreTempProxy";
 import { DefaultTagID } from "../../stores/room-list/models";
+import {
+    showToast as showSetPasswordToast,
+    hideToast as hideSetPasswordToast
+} from "../../toasts/SetPasswordToast";
+
 // We need to fetch each pinned message individually (if we don't already have it)
 // so each pinned message may trigger a request. Limit the number per room for sanity.
 // NB. this is just for server notices rather than pinned messages in general.
@@ -66,7 +71,6 @@ interface IProps {
     leftDisabled: boolean;
     rightDisabled: boolean;
     hasNewVersion: boolean;
-    userHasGeneratedPassword: boolean;
     page_type: string;
     autoJoin: boolean;
     thirdPartyInvite?: object;
@@ -96,7 +100,6 @@ interface IState {
     syncErrorData: any;
     useCompactLayout: boolean;
     serverNoticeEvents: MatrixEvent[];
-    userHasGeneratedPassword: boolean;
 }
 
 /**
@@ -139,7 +142,6 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
         this.state = {
             mouseDown: undefined,
             syncErrorData: undefined,
-            userHasGeneratedPassword: false,
             // use compact timeline view
             useCompactLayout: SettingsStore.getValue('useCompactLayout'),
             // any currently active server notice events
@@ -180,8 +182,7 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
     componentDidUpdate(prevProps, prevState) {
         // attempt to guess when a banner was opened or closed
         if (
-            (prevProps.hasNewVersion !== this.props.hasNewVersion) ||
+            (prevProps.hasNewVersion !== this.props.hasNewVersion)
-            (prevState.userHasGeneratedPassword !== this.state.userHasGeneratedPassword)
         ) {
             this.props.resizeNotifier.notifyBannersChanged();
         }
@@ -216,9 +217,11 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
     };
 
     _setStateFromSessionStore = () => {
-        this.setState({
+        if (this._sessionStore.getCachedPassword()) {
-            userHasGeneratedPassword: Boolean(this._sessionStore.getCachedPassword()),
+            showSetPasswordToast();
-        });
+        } else {
+            hideSetPasswordToast();
+        }
     };
 
     _createResizer() {
@@ -597,7 +600,6 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
         const ToastContainer = sdk.getComponent('structures.ToastContainer');
         const NewVersionBar = sdk.getComponent('globals.NewVersionBar');
         const UpdateCheckBar = sdk.getComponent('globals.UpdateCheckBar');
-        const PasswordNagBar = sdk.getComponent('globals.PasswordNagBar');
         const ServerLimitBar = sdk.getComponent('globals.ServerLimitBar');
 
         let pageElement;
@@ -666,8 +668,6 @@ class LoggedInView extends React.PureComponent<IProps, IState> {
             />;
         } else if (this.props.checkingForUpdate) {
             topBar = <UpdateCheckBar {...this.props.checkingForUpdate} />;
-        } else if (this.state.userHasGeneratedPassword) {
-            topBar = <PasswordNagBar />;
         }
 
         let bodyClasses = 'mx_MatrixChat';

src/components/views/globals/PasswordNagBar.js

@@ -1,53 +0,0 @@
-/*
-Copyright 2017 Vector Creations Ltd
-Copyright 2018 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 React from 'react';
-import createReactClass from 'create-react-class';
-import * as sdk from '../../../index';
-import Modal from '../../../Modal';
-import { _t } from '../../../languageHandler';
-
-export default createReactClass({
-    onUpdateClicked: function() {
-        const SetPasswordDialog = sdk.getComponent('dialogs.SetPasswordDialog');
-        Modal.createTrackedDialog('Set Password Dialog', 'Password Nag Bar', SetPasswordDialog);
-    },
-
-    render: function() {
-        const toolbarClasses = "mx_MatrixToolbar mx_MatrixToolbar_clickable";
-        return (
-            <div className={toolbarClasses} onClick={this.onUpdateClicked}>
-                <img className="mx_MatrixToolbar_warning"
-                    src={require("../../../../res/img/warning.svg")}
-                    width="24"
-                    height="23"
-                    alt=""
-                />
-                <div className="mx_MatrixToolbar_content">
-                    { _t(
-                        "To return to your account in future you need to <u>set a password</u>",
-                        {},
-                        { 'u': (sub) => <u>{ sub }</u> },
-                    ) }
-                </div>
-                <button className="mx_MatrixToolbar_action">
-                    { _t("Set Password") }
-                </button>
-            </div>
-        );
-    },
-});

src/toasts/SetPasswordToast.ts

@@ -0,0 +1,47 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+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 { _t } from "../languageHandler";
+import Modal from "../Modal";
+import SetPasswordDialog from "../components/views/dialogs/SetPasswordDialog";
+import GenericToast from "../components/views/toasts/GenericToast";
+import ToastStore from "../stores/ToastStore";
+
+const onAccept = () => {
+    Modal.createTrackedDialog('Set Password Dialog', 'Password Nag Bar', SetPasswordDialog);
+};
+
+const TOAST_KEY = "setpassword";
+
+export const showToast = () => {
+    ToastStore.sharedInstance().addOrReplaceToast({
+        key: TOAST_KEY,
+        title: _t("Set password"),
+        props: {
+            description: _t("To return to your account in future you need to set a password"),
+            acceptLabel: _t("Set Password"),
+            onAccept,
+            rejectLabel: _t("Later"),
+            onReject: hideToast, // it'll return on reload
+        },
+        component: GenericToast,
+        priority: 60,
+    });
+};
+
+export const hideToast = () => {
+    ToastStore.sharedInstance().dismissToast(TOAST_KEY);
+};