From 304dcf79e186c1cb69a745d3c25ea73a7b84b7a5 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Fri, 13 Mar 2020 19:00:22 -0400
Subject: [PATCH] add sign out confirmation modal for desktop

---
 ui/component/header/index.js   |  6 ++----
 ui/component/header/view.jsx   |  4 +++-
 ui/constants/modal_types.js    |  1 +
 ui/modal/modalRouter/view.jsx  |  3 +++
 ui/modal/modalSignOut/index.js |  8 ++++++++
 ui/modal/modalSignOut/view.jsx | 33 +++++++++++++++++++++++++++++++++
 6 files changed, 50 insertions(+), 5 deletions(-)
 create mode 100644 ui/modal/modalSignOut/index.js
 create mode 100644 ui/modal/modalSignOut/view.jsx

diff --git a/ui/component/header/index.js b/ui/component/header/index.js
index da1eee65b..5877c6825 100644
--- a/ui/component/header/index.js
+++ b/ui/component/header/index.js
@@ -25,9 +25,7 @@ const perform = dispatch => ({
   signOut: () => dispatch(doSignOut()),
   openMobileNavigation: () => dispatch(doOpenModal(MODALS.MOBILE_NAVIGATION)),
   openChannelCreate: () => dispatch(doOpenModal(MODALS.CREATE_CHANNEL)),
+  openSignOutModal: () => dispatch(doOpenModal(MODALS.SIGN_OUT)),
 });
 
-export default connect(
-  select,
-  perform
-)(Header);
+export default connect(select, perform)(Header);
diff --git a/ui/component/header/view.jsx b/ui/component/header/view.jsx
index c8b427a0f..ed110d78c 100644
--- a/ui/component/header/view.jsx
+++ b/ui/component/header/view.jsx
@@ -39,6 +39,7 @@ type Props = {
   signOut: () => void,
   openMobileNavigation: () => void,
   openChannelCreate: () => void,
+  openSignOutModal: () => void,
 };
 
 const Header = (props: Props) => {
@@ -56,6 +57,7 @@ const Header = (props: Props) => {
     syncError,
     openMobileNavigation,
     openChannelCreate,
+    openSignOutModal,
   } = props;
 
   // on the verify page don't let anyone escape other than by closing the tab to keep session data consistent
@@ -175,7 +177,7 @@ const Header = (props: Props) => {
                     </MenuItem>
 
                     {authenticated ? (
-                      <MenuItem onSelect={signOut}>
+                      <MenuItem onSelect={IS_WEB ? signOut : openSignOutModal}>
                         <div className="menu__link">
                           <Icon aria-hidden icon={ICONS.SIGN_OUT} />
                           {__('Sign Out')}
diff --git a/ui/constants/modal_types.js b/ui/constants/modal_types.js
index 611043e7f..316c3aec0 100644
--- a/ui/constants/modal_types.js
+++ b/ui/constants/modal_types.js
@@ -36,3 +36,4 @@ export const YOUTUBE_WELCOME = 'youtube_welcome';
 export const MOBILE_NAVIGATION = 'mobile_navigation';
 export const SET_REFERRER = 'set_referrer';
 export const REPOST = 'repost';
+export const SIGN_OUT = 'sign_out';
diff --git a/ui/modal/modalRouter/view.jsx b/ui/modal/modalRouter/view.jsx
index a0622f9bc..6c3a97ab3 100644
--- a/ui/modal/modalRouter/view.jsx
+++ b/ui/modal/modalRouter/view.jsx
@@ -35,6 +35,7 @@ import ModalCreateChannel from 'modal/modalChannelCreate';
 import ModalMobileNavigation from 'modal/modalMobileNavigation';
 import ModalSetReferrer from 'modal/modalSetReferrer';
 import ModalRepost from 'modal/modalRepost';
+import ModalSignOut from 'modal/modalSignOut';
 
 type Props = {
   modal: { id: string, modalProps: {} },
@@ -128,6 +129,8 @@ function ModalRouter(props: Props) {
       return <ModalSetReferrer {...modalProps} />;
     case MODALS.REPOST:
       return <ModalRepost {...modalProps} />;
+    case MODALS.SIGN_OUT:
+      return <ModalSignOut {...modalProps} />;
     default:
       return null;
   }
diff --git a/ui/modal/modalSignOut/index.js b/ui/modal/modalSignOut/index.js
new file mode 100644
index 000000000..2b6db94e6
--- /dev/null
+++ b/ui/modal/modalSignOut/index.js
@@ -0,0 +1,8 @@
+import { connect } from 'react-redux';
+import { doSignOut, doHideModal } from 'redux/actions/app';
+import ModalSignOut from './view';
+
+export default connect(null, {
+  doSignOut,
+  doHideModal,
+})(ModalSignOut);
diff --git a/ui/modal/modalSignOut/view.jsx b/ui/modal/modalSignOut/view.jsx
new file mode 100644
index 000000000..376017f7d
--- /dev/null
+++ b/ui/modal/modalSignOut/view.jsx
@@ -0,0 +1,33 @@
+// @flow
+import React from 'react';
+import { Modal } from 'modal/modal';
+import Card from 'component/common/card';
+import Button from 'component/button';
+
+type Props = {
+  doHideModal: () => void,
+  doSignOut: () => void,
+};
+
+function ModalRepost(props: Props) {
+  const { doHideModal, doSignOut } = props;
+
+  return (
+    <Modal isOpen type="card">
+      <Card
+        title={__('Sign Out')}
+        subtitle={__(
+          'Are you sure you want to sign out? Your wallet data will be merged with another account if they sign in on this device.'
+        )}
+        actions={
+          <div className="section__actions">
+            <Button button="primary" label={__('Sign Out')} onClick={doSignOut} />
+            <Button button="link" label={__('Cancel')} onClick={doHideModal} />
+          </div>
+        }
+      />
+    </Modal>
+  );
+}
+
+export default ModalRepost;