Adding are you sure dialogs for transferring community and site.

- Fixes #241

ui/src/components/comment-node.tsx

@@ -22,6 +22,8 @@ interface CommentNodeState {
   banExpires: string;
   banType: BanType;
   collapsed: boolean;
+  showConfirmTransferSite: boolean;
+  showConfirmTransferCommunity: boolean;
 }
 
 interface CommentNodeProps {
@@ -46,6 +48,8 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     banExpires: null,
     banType: BanType.Community,
     collapsed: false,
+    showConfirmTransferSite: false,
+    showConfirmTransferCommunity: false,
   }
 
   constructor(props: any, context: any) {
@@ -151,7 +155,14 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                     {/* Community creators can transfer community to another mod */}
                     {this.amCommunityCreator && this.isMod &&
                       <li className="list-inline-item">
-                        <span class="pointer" onClick={linkEvent(this, this.handleTransferCommunity)}><T i18nKey="transfer_community">#</T></span>
+                        {!this.state.showConfirmTransferCommunity ?
+                        <span class="pointer" onClick={linkEvent(this, this.handleShowConfirmTransferCommunity)}><T i18nKey="transfer_community">#</T>
+                      </span> : <>
+                        <span class="d-inline-block mr-1"><T i18nKey="are_you_sure">#</T></span>
+                        <span class="pointer d-inline-block mr-1" onClick={linkEvent(this, this.handleTransferCommunity)}><T i18nKey="yes">#</T></span>
+                        <span class="pointer d-inline-block" onClick={linkEvent(this, this.handleCancelShowConfirmTransferCommunity)}><T i18nKey="no">#</T></span>
+                      </>
+                        }
                       </li>
                     }
                     {/* Admins can ban from all, and appoint other admins */}
@@ -175,7 +186,14 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                     {/* Site Creator can transfer to another admin */}
                     {this.amSiteCreator && this.isAdmin &&
                       <li className="list-inline-item">
-                        <span class="pointer" onClick={linkEvent(this, this.handleTransferSite)}><T i18nKey="transfer_site">#</T></span>
+                        {!this.state.showConfirmTransferSite ?
+                        <span class="pointer" onClick={linkEvent(this, this.handleShowConfirmTransferSite)}><T i18nKey="transfer_site">#</T>
+                      </span> : <>
+                        <span class="d-inline-block mr-1"><T i18nKey="are_you_sure">#</T></span>
+                        <span class="pointer d-inline-block mr-1" onClick={linkEvent(this, this.handleTransferSite)}><T i18nKey="yes">#</T></span>
+                        <span class="pointer d-inline-block" onClick={linkEvent(this, this.handleCancelShowConfirmTransferSite)}><T i18nKey="no">#</T></span>
+                      </>
+                        }
                       </li>
                     }
                   </>
@@ -457,6 +475,16 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     i.setState(i.state);
   }
 
+  handleShowConfirmTransferCommunity(i: CommentNode) { 
+    i.state.showConfirmTransferCommunity = true;
+    i.setState(i.state);
+  }
+
+  handleCancelShowConfirmTransferCommunity(i: CommentNode) { 
+    i.state.showConfirmTransferCommunity = false;
+    i.setState(i.state);
+  }
+
   handleTransferCommunity(i: CommentNode) {
     let form: TransferCommunityForm = {
       community_id: i.props.node.comment.community_id,
@@ -466,6 +494,16 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     i.setState(i.state);
   }
 
+  handleShowConfirmTransferSite(i: CommentNode) { 
+    i.state.showConfirmTransferSite = true;
+    i.setState(i.state);
+  }
+
+  handleCancelShowConfirmTransferSite(i: CommentNode) { 
+    i.state.showConfirmTransferSite = false;
+    i.setState(i.state);
+  }
+
   handleTransferSite(i: CommentNode) {
     let form: TransferSiteForm = {
       user_id: i.props.node.comment.creator_id,

ui/src/translations/en.ts

@@ -133,6 +133,9 @@ export const en = {
     to: 'to',
     transfer_community: 'transfer community',
     transfer_site: 'transfer site',
+    are_you_sure: 'are you sure?',
+    yes: 'yes',
+    no: 'no',
     powered_by: 'Powered by',
     landing_0: 'Lemmy is a <1>link aggregator</1> / reddit alternative, intended to work in the <2>fediverse</2>.<3></3>It\'s self-hostable, has live-updating comment threads, and is tiny (<4>~80kB</4>). Federation into the ActivityPub network is on the roadmap. <5></5>This is a <6>very early beta version</6>, and a lot of features are currently broken or missing. <7></7>Suggest new features or report bugs <8>here.</8><9></9>Made with <10>Rust</10>, <11>Actix</11>, <12>Inferno</12>, <13>Typescript</13>.',
     not_logged_in: 'Not logged in.',