1 files changed, 45 insertions, 4 deletions

diff --git a/sdnr/wt/odlux/framework/src/views/about.tsx b/sdnr/wt/odlux/framework/src/views/about.tsx
index db0411793..ca3953af1 100644
--- a/sdnr/wt/odlux/framework/src/views/about.tsx
+++ b/sdnr/wt/odlux/framework/src/views/about.tsx
@@ -19,29 +19,51 @@ import * as React from 'react';
 import * as marked from 'marked';
 import * as hljs from 'highlight.js';
 import { requestRestExt } from '../services/restService';
+import { Button, Typography } from '@material-ui/core';
 const defaultRenderer = new marked.Renderer();
 defaultRenderer.link = (href, title, text) => (
   `<a target="_blank" rel="noopener noreferrer" href="${href}" title="${title}">${text}</a>`
 );
 interface AboutState {
   content: string | null;
+  isCopiedSuccessfully: boolean;
+  isContentLoadedSucessfully: boolean;
 }
 
 class AboutComponent extends React.Component<any, AboutState> {
+  textarea: React.RefObject<HTMLTextAreaElement>;
 
 
   constructor(props: any) {
     super(props);
-    this.state = { content: null }
+    this.state = { content: null, isCopiedSuccessfully:false, isContentLoadedSucessfully: false }
+    this.textarea = React.createRef();
     this.loadAboutContent();
   }
   private loadAboutContent(): void {
     requestRestExt<string>('/about').then((response) => {
-      this.setState({ content: response.status == 200 ? response.data : `${response.status} ${response.message}` || "Server error" })
+      const content = response.status == 200 ? response.data : `${response.status} ${response.message}` || "Server error";
+      const loadedSucessfully = response.status == 200 ? true : false;
+      this.setState({ content: content, isContentLoadedSucessfully: loadedSucessfully });
     }).catch((error) => {
       this.setState({ content: error })
     })
   }
+
+  copyToClipboard = (e: React.MouseEvent<HTMLButtonElement>) =>{
+    e.preventDefault();
+
+    if(this.textarea.current!==null){
+      this.textarea.current.select();
+      document.execCommand('copy');
+      if(e.currentTarget != null){ // refocus on button, otherwhise the textarea would be focused
+        e.currentTarget.focus();
+      }
+      this.setState({isCopiedSuccessfully: true});
+      window.setTimeout(()=>{this.setState({isCopiedSuccessfully: false});},2000);
+    }
+  }
+
   render() {
 
     const markedOptions: marked.MarkedOptions = {
@@ -70,14 +92,33 @@ class AboutComponent extends React.Component<any, AboutState> {
 
     return (
       <div style={containerStyle}>
+        { this.state.isContentLoadedSucessfully &&
+        <div style={{float: "right", marginRight: "10px"}}>
+        <Button variant="contained" onClick={e => this.copyToClipboard(e)}>
+           Copy to clipboard
+        </Button>
+          {
+            this.state.isCopiedSuccessfully && 
+            <Typography variant="body1" style={{color: "green"}} align="center">
+             copied successfully
+            </Typography>
+          }
+        </div>
+      }
+       
         <div
           dangerouslySetInnerHTML={{ __html: html }}
           className={className}
           style={style}
         />
+         <form>
+          <textarea
+           style={{opacity: ".01"}}
+            ref={this.textarea}
+            value={this.state.content || ''}
+          />
+        </form>
       </div>
-
-
     );
   }
 };