From 31e754b386efc043c4caba6f2116c08f91180253 Mon Sep 17 00:00:00 2001
From: Crt Ahlin <crt.ahlin@gmail.com>
Date: Tue, 20 Aug 2019 15:41:45 +0200
Subject: [PATCH 1/4] add some descriptions of functionality

---
 src/components/CrEditorViewer.js | 33 ++++++++++++++++++++++++--------
 src/pages/Home.js                |  6 ++++--
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/src/components/CrEditorViewer.js b/src/components/CrEditorViewer.js
index af2f20f..f597e48 100644
--- a/src/components/CrEditorViewer.js
+++ b/src/components/CrEditorViewer.js
@@ -1,7 +1,7 @@
 /**
  * Datafund Consent generator & viewer
  * Licensed under the MIT license
- * Created by Markus Zevnik, Tadej Fius, �rt Ahlin
+ * Created by Markus Zevnik, Tadej Fius, Črt Ahlin
  */
 
 import React, {Component} from 'react';
@@ -374,19 +374,25 @@ class CrEditorViewer extends Component {
                                 <ListGroup>
 
                                     <ListGroupItem>
-                                        <ListGroupItemHeading className="m-0" onClick={(e) => {
+                                        <ListGroupItemHeading className="m-0" title="Structure of Consent Receipt" onClick={(e) => {
                                             _this.setState({schemaVisible: !_this.state.schemaVisible})
                                         }}><i
                                             className={_this.state.schemaVisible ? "fas text-muted fa-minus-square" : "fas text-muted fa-plus-square"}></i> JSON
                                             Schema</ListGroupItemHeading>
                                         <Collapse isOpen={_this.state.schemaVisible}>
                                             <div>
+                                                <br></br>
+
+                                                <p>JSON Schema defines the structure of the Consent Receipt. Kantara compliant consent receipts must follow a prescribed schema.</p>
+
+                                                <p>The forms below can be used to view the currently loaded JSON Schema or edit it.</p>
 
 
                                                 <Nav tabs className="mt-4">
                                                     <NavItem>
                                                         <NavLink
                                                             className={classnames({active: this.state.activeSchemaTab === '1'})}
+                                                            title="View JSON Schema"
                                                             onClick={() => {
                                                                 this.setState({activeSchemaTab: '1'});
                                                             }}>
@@ -396,6 +402,7 @@ class CrEditorViewer extends Component {
                                                     <NavItem>
                                                         <NavLink
                                                             className={classnames({active: this.state.activeSchemaTab === '2'})}
+                                                            title="Edit JSON Schema"
                                                             onClick={() => {
                                                                 this.setState({activeSchemaTab: '2'});
                                                             }}>
@@ -440,7 +447,7 @@ class CrEditorViewer extends Component {
                                     </ListGroupItem>
 
                                     <ListGroupItem>
-                                        <ListGroupItemHeading className="m-0" onClick={(e) => {
+                                        <ListGroupItemHeading className="m-0" title="Displayed elements of Consent Receipt" onClick={(e) => {
                                             _this.setState({uiSchemaVisible: !_this.state.uiSchemaVisible})
                                         }}><i
                                             className={_this.state.uiSchemaVisible ? "fas text-muted fa-minus-square" : "fas text-muted fa-plus-square"}></i> UI
@@ -498,7 +505,7 @@ class CrEditorViewer extends Component {
                                     </ListGroupItem>
 
                                     <ListGroupItem>
-                                        <ListGroupItemHeading className="m-0" onClick={(e) => {
+                                        <ListGroupItemHeading className="m-0" title="Data entered into the Consent Receipt" onClick={(e) => {
                                             _this.setState({formDataVisible: !_this.state.formDataVisible})
                                         }}><i
                                             className={_this.state.formDataVisible ? "fas text-muted fa-minus-square" : "fas text-muted fa-plus-square"}></i> Form
@@ -522,7 +529,7 @@ class CrEditorViewer extends Component {
                                 <ListGroup className="mt-3">
 
                                     <ListGroupItem>
-                                        <ListGroupItemHeading className="m-0" onClick={(e) => {
+                                        <ListGroupItemHeading className="m-0" title="Use private key to encode JSON Web Token (JWT)" onClick={(e) => {
                                             _this.setState({encodeJwtVisible: !_this.state.encodeJwtVisible})
                                         }}><i
                                             className={_this.state.encodeJwtVisible ? "fas text-muted fa-minus-square" : "fas text-muted fa-plus-square"}></i> Encode
@@ -623,7 +630,7 @@ class CrEditorViewer extends Component {
 
                                     <ListGroupItem
                                         className={_.isEmpty(_this.state.jwtToken, true) ? "disabled" : ""}>
-                                        <ListGroupItemHeading className="m-0" onClick={(e) => {
+                                        <ListGroupItemHeading className="m-0" title="View encoded JSON Web Token (JWT)" onClick={(e) => {
                                             _this.setState({jwtTokenEncodedVisible: !_this.state.jwtTokenEncodedVisible})
                                         }}><i
                                             className={_this.state.jwtTokenEncodedVisible ? "fas text-muted fa-minus-square" : "fas text-muted fa-plus-square"}></i> Encoded
@@ -733,7 +740,7 @@ class CrEditorViewer extends Component {
 
                                     <ListGroupItem
                                         className={_.isEmpty(_this.state.jwtTokenDecoded, true) ? "disabled" : ""}>
-                                        <ListGroupItemHeading className="m-0" onClick={(e) => {
+                                        <ListGroupItemHeading className="m-0" title="Decoded JSON Web Token (JWT)" onClick={(e) => {
                                             _this.setState({jwtTokenDecodedVisible: !_this.state.jwtTokenDecodedVisible})
                                         }}><i
                                             className={_this.state.jwtTokenDecodedVisible ? "fas text-muted fa-minus-square" : "fas text-muted fa-plus-square"}></i> Decoded
@@ -755,7 +762,7 @@ class CrEditorViewer extends Component {
                                 <ListGroup className="mt-3 mb-3">
 
                                     <ListGroupItem>
-                                        <ListGroupItemHeading className="m-0" onClick={(e) => {
+                                        <ListGroupItemHeading className="m-0" title="Download / upload Project Configuration File" onClick={(e) => {
                                             _this.setState({projectConfigurationVisible: !_this.state.projectConfigurationVisible})
                                         }}><i
                                             className={_this.state.projectConfigurationVisible ? "fas text-muted fa-minus-square" : "fas text-muted fa-plus-square"}></i> Project
@@ -854,8 +861,10 @@ class CrEditorViewer extends Component {
 
                         <ButtonGroup className="mt-2 mb-3">
                             <Button className={classnames({active: this.state.mode === 'editor'})}
+                                    title="Editable Consent Receipt"
                                     onClick={e => this.setState({mode: 'editor'})}>CR Editor</Button>
                             <Button className={classnames({active: this.state.mode === 'viewer'})}
+                                    title="Read-only Consent Receipt"
                                     onClick={e => this.setState({mode: 'viewer'})}>CR Viewer</Button>
                         </ButtonGroup>
 
@@ -870,6 +879,10 @@ class CrEditorViewer extends Component {
                                 message={loadingText}
                             >
 
+                            <p>Consent Receipt Editor allows for editing of data in the Consent Receipt. For example, it could be used by the Data controller when constructing a proposal to send to a Data principal.</p>
+
+                            <p>The structure of the form bellow depends on JSON Schema, while the functionality depends on the UI Schema. Entered data is stored in FormData.</p>
+
                                 <Form
                                     ref={(form) => {
                                         reactJsonSchemaForm = form;
@@ -890,6 +903,10 @@ class CrEditorViewer extends Component {
                         {_this.state.mode === 'viewer' &&
                         <div className="card card-body bg-light mb-5">
 
+                            <p>Consent Receipt Viewer allows a read only view of the Consent Receipt. For example, it could be used to view details of a saved Consent Receipt.</p>
+
+                            <p>The aestethics are free to be customized for a particular use.</p>
+
                             <h4 className="mt-1">Consent receipt viewer</h4>
 
                             <div className="mt-3">
diff --git a/src/pages/Home.js b/src/pages/Home.js
index 565feca..6c4de2c 100644
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -1,7 +1,7 @@
 /**
  * Datafund Consent generator & viewer
  * Licensed under the MIT license
- * Created by Markus Zevnik, Tadej Fius, �rt Ahlin
+ * Created by Markus Zevnik, Tadej Fius, Črt Ahlin
  */
 
 import React, {Component} from 'react';
@@ -70,13 +70,15 @@ class App extends Component {
                 <Navbar color="faded" className="" light expand="lg">
                     <div className="container-fluid">
 
-                        <Link className="navbar-brand" to="/"><img src={logo} alt={logo}
+                        <Link className="navbar-brand" to="/"><img src={logo} alt={logo} title="Datafund"
                                                                    className="img-fluid"/></Link>
 
                         <Collapse isOpen={this.state.isOpen} navbar>
                             <Nav className="ml-auto" navbar>
                             </Nav>
                         </Collapse>
+                        <p>Consent Receipt Generator and Viewer demo application is meant only for demonstration purposes - as a reference implementation of different modules - and is not suitable to be used in production environments.
+                        <br/>The modules are open sourced and free to use in your own configuration.</p>
                     </div>
                 </Navbar>
 

From 730feceb61b3b5ad5d6e338594fa15d5d364da28 Mon Sep 17 00:00:00 2001
From: Crt Ahlin <crt.ahlin@gmail.com>
Date: Tue, 20 Aug 2019 17:24:26 +0200
Subject: [PATCH 2/4] add comments to first tab; change a to label

---
 src/components/CrEditorViewer.js       | 67 ++++++++++++++++++++------
 src/components/ReceivedDataReceipts.js |  2 +-
 2 files changed, 53 insertions(+), 16 deletions(-)

diff --git a/src/components/CrEditorViewer.js b/src/components/CrEditorViewer.js
index f597e48..7f6de2a 100644
--- a/src/components/CrEditorViewer.js
+++ b/src/components/CrEditorViewer.js
@@ -453,6 +453,10 @@ class CrEditorViewer extends Component {
                                             className={_this.state.uiSchemaVisible ? "fas text-muted fa-minus-square" : "fas text-muted fa-plus-square"}></i> UI
                                             Schema</ListGroupItemHeading>
                                         <Collapse isOpen={this.state.uiSchemaVisible}>
+
+                                        <br/>
+                                        <p>UI Schema JSON file defines the way the Consent Receipt will be displayed on the user interface. For example, the entry form for a particual piece of data could be a selectable menu with 5 available options.</p>
+                                        <p>The UI Schema is most useful in the part of the process, where a Data controler is constructing a proposal via the Consent receipt editor and needs a user friendly graphical user interface.</p>
                                             <div>
 
 
@@ -460,6 +464,7 @@ class CrEditorViewer extends Component {
                                                     <NavItem>
                                                         <NavLink
                                                             className={classnames({active: this.state.uiSchemaTab === '1'})}
+                                                            title="View UI Schema JSON"
                                                             onClick={() => {
                                                                 this.setState({uiSchemaTab: '1'});
                                                             }}>
@@ -469,6 +474,7 @@ class CrEditorViewer extends Component {
                                                     <NavItem>
                                                         <NavLink
                                                             className={classnames({active: this.state.uiSchemaTab === '2'})}
+                                                            title="Edit UI Schema JSON"
                                                             onClick={() => {
                                                                 this.setState({uiSchemaTab: '2'});
                                                             }}>
@@ -511,6 +517,9 @@ class CrEditorViewer extends Component {
                                             className={_this.state.formDataVisible ? "fas text-muted fa-minus-square" : "fas text-muted fa-plus-square"}></i> Form
                                             Data</ListGroupItemHeading>
                                         <Collapse isOpen={this.state.formDataVisible}>
+
+                                            <br/>
+                                            <p>Form Data JSON contains all the actual data in the Consent Receipt. This is the part that gets saved into the Consent Receipt JSON Web Token and signed.</p>
                                             <div>
 
 
@@ -535,6 +544,11 @@ class CrEditorViewer extends Component {
                                             className={_this.state.encodeJwtVisible ? "fas text-muted fa-minus-square" : "fas text-muted fa-plus-square"}></i> Encode
                                             JWT</ListGroupItemHeading>
                                         <Collapse isOpen={this.state.encodeJwtVisible}>
+
+                                            <br/>
+                                            <p>The Form Data JSON gets encoded into a JSON Web Token (JWT) and signed. Supported methods of signing are RS256 (default) and HS256.</p>
+                                            <p>RS256 needs as input an RSA private key. Example private/public key pair is <a href="https://github.com/datafund/dr-editor-sample/blob/master/example_files/private_and_public_key.txt">here</a>. You need to include the BEGIN/END parts.</p>
+                                            <p>HS256 needs a string as input (shared secret principle). </p>
                                             <div>
 
                                                 {_.isEmpty(_this.state.formData, true) &&
@@ -550,6 +564,7 @@ class CrEditorViewer extends Component {
                                                         <NavItem>
                                                             <NavLink
                                                                 className={classnames({active: this.state.algorithmTab === '1'})}
+                                                                title="Encode JWT with RS256 signing"
                                                                 onClick={() => {
                                                                     this.setState({algorithmTab: '1'});
                                                                 }}>
@@ -559,6 +574,7 @@ class CrEditorViewer extends Component {
                                                         <NavItem>
                                                             <NavLink
                                                                 className={classnames({active: this.state.algorithmTab === '2'})}
+                                                                title="Encode JWT with HS256 signing"
                                                                 onClick={() => {
                                                                     this.setState({algorithmTab: '2'});
                                                                 }}>
@@ -584,7 +600,7 @@ class CrEditorViewer extends Component {
                                                                     defaultValue={_this.state.privateKey}></textarea>
                                                             </div>
 
-                                                            <a className="btn btn-success text-white mt-3 mb-3"
+                                                            <label className="btn btn-success text-white mt-3 mb-3"
                                                                onClick={(e) => {
                                                                    if (_this.state.privateKey === '') {
                                                                        alert("Valid private key is required!");
@@ -593,7 +609,7 @@ class CrEditorViewer extends Component {
                                                                    _this.generateJwtRS256()
                                                                }}><i className="fas fa-lock"></i> Encode JWT
                                                                 (RS256)
-                                                            </a>
+                                                            </label>
 
                                                         </TabPane>
 
@@ -609,7 +625,7 @@ class CrEditorViewer extends Component {
                                                             }}/></div>
 
 
-                                                            <a className="btn btn-success text-white mt-3 mb-3"
+                                                            <label className="btn btn-success text-white mt-3 mb-3"
                                                                onClick={(e) => {
                                                                    if (_this.state.secret === '') {
                                                                        alert("256 bit secret string is required!");
@@ -617,7 +633,7 @@ class CrEditorViewer extends Component {
                                                                    }
                                                                    _this.generateJwtHS256()
                                                                }}><i className="fas fa-lock"></i> Encode JWT
-                                                                (HS256)</a>
+                                                                (HS256)</label>
 
                                                         </TabPane>
                                                     </TabContent>
@@ -637,6 +653,10 @@ class CrEditorViewer extends Component {
                                             JWT</ListGroupItemHeading>
                                         {!_.isEmpty(_this.state.jwtToken, true) &&
                                         <Collapse isOpen={this.state.jwtTokenEncodedVisible}>
+
+                                            <br/>
+                                            <p>Encoded JSON Web token (JWT) is a long string composed of three parts, separated with two periods. It can be decoded/verified independently on the <a href="https://jwt.io">jwt.io</a> webpage. </p>
+                                            <p>It can also be downloaded and saved for later reference.</p>
                                             <div>
 
                                                     <pre
@@ -644,20 +664,25 @@ class CrEditorViewer extends Component {
 
 
                                                 <div>
-                                                    <a className="btn btn-success text-white mt-3 mr-1"
+                                                    <label className="btn btn-success text-white mt-3 mr-1"
                                                        onClick={(e) => {
                                                            _this.downloadJwt()
-                                                       }}><i className="fas fa-download"></i> Download JWT</a>
+                                                       }}><i className="fas fa-download"></i> Download JWT</label>
                                                 </div>
 
 
                                                 <h5 className="mt-4">Verify signature</h5>
 
+                                                <p>The JWT is signed, and the signature can be verified to see if contents have been tampered with.</p>
+                                                <p>The RS256 public key is taken from JWT part with Form Data, if found in appropriate field.</p>
+                                                <p>Decoding the JWT means the three parts of the JWT are shown as "human readable" JSON.</p>
+
                                                 <Nav tabs>
 
                                                     <NavItem>
                                                         <NavLink
                                                             className={classnames({active: this.state.algorithmTab === '1'})}
+                                                            title="Verify RS256 signature"
                                                             onClick={() => {
                                                                 this.setState({algorithmTab: '1'});
                                                             }}>
@@ -667,6 +692,7 @@ class CrEditorViewer extends Component {
                                                     <NavItem>
                                                         <NavLink
                                                             className={classnames({active: this.state.algorithmTab === '2'})}
+                                                            title="Verify HS256 signature"
                                                             onClick={() => {
                                                                 this.setState({algorithmTab: '2'});
                                                             }}>
@@ -692,11 +718,11 @@ class CrEditorViewer extends Component {
                                                             defaultValue={_this.state.formData.publicKey}></textarea>
                                                         </div>
 
-                                                        <a className="btn btn-success text-white mt-3"
+                                                        <label className="btn btn-success text-white mt-3"
                                                            onClick={(e) => {
                                                                _this.verifyJwtRS256()
                                                            }}><i className="fas fa-certificate"></i> Verify
-                                                            Signature (RS256)</a>
+                                                            Signature (RS256)</label>
 
                                                     </TabPane>
 
@@ -711,20 +737,20 @@ class CrEditorViewer extends Component {
                                                         }}/></div>
 
 
-                                                        <a className="btn btn-success text-white mt-3"
+                                                        <label className="btn btn-success text-white mt-3"
                                                            onClick={(e) => {
                                                                _this.verifyJwtHS256()
                                                            }}><i className="fas fa-certificate"></i> Verify
-                                                            Signature (HS256)</a>
+                                                            Signature (HS256)</label>
 
                                                     </TabPane>
 
                                                 </TabContent>
 
 
-                                                <a className="btn btn-success text-white mt-3" onClick={(e) => {
+                                                <label className="btn btn-success text-white mt-3" onClick={(e) => {
                                                     _this.decodeJwt()
-                                                }}><i className="fas fa-unlock"></i> Decode JWT</a><br/>
+                                                }}><i className="fas fa-unlock"></i> Decode JWT</label><br/>
 
                                                 {/*{!_.isEmpty(_this.state.signature, true) &&*/}
                                                 {/*<JSONPretty*/}
@@ -747,6 +773,9 @@ class CrEditorViewer extends Component {
                                             JWT</ListGroupItemHeading>
                                         {!_.isEmpty(_this.state.jwtTokenDecoded, true) &&
                                         <Collapse isOpen={this.state.jwtTokenDecodedVisible}>
+
+                                        <br/>
+                                        <p>Decoded JWT is shown as JSON, containing all three parts of the JWT (including Form Data as payload).</p>
                                             <div>
                                                 <JSONPretty
                                                     className="p-2 mt-3"
@@ -770,6 +799,10 @@ class CrEditorViewer extends Component {
 
                                         <Collapse isOpen={this.state.projectConfigurationVisible}>
 
+                                        <br/>
+                                        <p>Project Configuration JSON file contains some general settings as well as all other JSON files nested inside it (JSON Schema, UI Schema, FormData).</p>
+                                        <p>With forms below you can view or edit the part of the Project Configuration file with general settings.</p>
+
 
                                             <div>
 
@@ -777,6 +810,7 @@ class CrEditorViewer extends Component {
                                                     <NavItem>
                                                         <NavLink
                                                             className={classnames({active: this.state.projectConfigurationTab === '1'})}
+                                                            title="View JSON Project Configuration settings"
                                                             onClick={() => {
                                                                 this.setState({projectConfigurationTab: '1'});
                                                             }}>
@@ -786,6 +820,7 @@ class CrEditorViewer extends Component {
                                                     <NavItem>
                                                         <NavLink
                                                             className={classnames({active: this.state.projectConfigurationTab === '2'})}
+                                                            title="Edit JSON Project Configuration settings"
                                                             onClick={() => {
                                                                 this.setState({projectConfigurationTab: '2'});
                                                             }}>
@@ -820,17 +855,19 @@ class CrEditorViewer extends Component {
                                                 </TabContent>
 
                                                 <div className="pt-3 pb-2">
-                                                    <a className="btn btn-primary d-inline"
+                                                    <label className="btn btn-primary d-inline"
+                                                        title="Download Project Configuration JSON File"
                                                        onClick={_this.downloadProjectConfigFile}><i
                                                         className="fa fa-download"></i> Download Project
                                                         Configuration
-                                                        File</a>
+                                                        File</label>
                                                 </div>
 
                                                 <hr className="mb-4"/>
 
                                                 <div className="mb-3">
-                                                    <label className="btn btn-primary d-inline" htmlFor={"file"}><i
+                                                    <label className="btn btn-primary d-inline" 
+                                                    title="Upload Project Configuration JSON File" htmlFor={"file"}><i
                                                         className="fa fa-upload"></i> Upload Project Configuration
                                                         File <input id="file" className="mt-4" type="file"
                                                                     accept=".json,application/json"
diff --git a/src/components/ReceivedDataReceipts.js b/src/components/ReceivedDataReceipts.js
index 65abf56..d0115c3 100644
--- a/src/components/ReceivedDataReceipts.js
+++ b/src/components/ReceivedDataReceipts.js
@@ -1,7 +1,7 @@
 /**
  * Datafund Consent generator & viewer
  * Licensed under the MIT license
- * Created by Markus Zevnik, Tadej Fius, �rt Ahlin
+ * Created by Markus Zevnik, Tadej Fius, Črt Ahlin
  */
 
 import React, {Component} from 'react';

From 27fb0c572e3486cfa6ed8af9b67139d2aed56d5f Mon Sep 17 00:00:00 2001
From: Crt Ahlin <crt.ahlin@gmail.com>
Date: Wed, 21 Aug 2019 11:49:38 +0200
Subject: [PATCH 3/4] add titles, description, change a to label

---
 src/components/CrStoreSendBlockchain.js | 66 +++++++++++++++----------
 src/pages/Home.js                       |  6 +--
 2 files changed, 42 insertions(+), 30 deletions(-)

diff --git a/src/components/CrStoreSendBlockchain.js b/src/components/CrStoreSendBlockchain.js
index eff189a..aa5e922 100644
--- a/src/components/CrStoreSendBlockchain.js
+++ b/src/components/CrStoreSendBlockchain.js
@@ -976,12 +976,18 @@ class CrStoreSendBlockchain extends Component {
                                 >
 
                                     <ListGroupItem>
-                                        <ListGroupItemHeading className="m-0" onClick={(e) => {
+                                        <ListGroupItemHeading className="m-0" title="Set the account/wallet to work with" onClick={(e) => {
                                             _this.setState({dataControllerAccountVisible: !_this.state.dataControllerAccountVisible})
                                         }}><i
                                             className={_this.state.dataControllerAccountVisible ? "fas text-muted fa-minus-square" : "fas text-muted fa-plus-square"}></i> Data
-                                            Controller Account & wallet</ListGroupItemHeading>
+                                            Controller Account & Wallet</ListGroupItemHeading>
                                         <Collapse isOpen={this.state.dataControllerAccountVisible}>
+
+                                            <br/>
+                                            <p>Fairdrop account must be used. It can be created or imported via a JSON file containing the private key.</p>
+                                            <p>It is browser specific - on a different browser or computer you need to re-import it.</p>
+                                            <p>It has to be unlocked to be used.</p>
+
                                             <div className="mt-3 mb-3">
 
                                                 <div className="form-group"><label
@@ -1083,7 +1089,7 @@ class CrStoreSendBlockchain extends Component {
                                     <ListGroup className="mt-3 mb-3">
 
                                         <ListGroupItem>
-                                            <ListGroupItemHeading className="m-0" onClick={(e) => {
+                                            <ListGroupItemHeading className="m-0" title="Set the Project configuration file to use" onClick={(e) => {
                                                 _this.setState({projectConfigurationVisible: !_this.state.projectConfigurationVisible})
                                             }}><i
                                                 className={_this.state.projectConfigurationVisible ? "fas text-muted fa-minus-square" : "fas text-muted fa-plus-square"}></i> Project
@@ -1091,6 +1097,9 @@ class CrStoreSendBlockchain extends Component {
 
                                             <Collapse isOpen={this.state.projectConfigurationVisible}>
 
+                                            <br/>
+                                            <p>Use a Project Configuration file generated and saved on the first tab.</p>
+
                                                 <div>
 
                                                     <div className="mt-3 mb-3">
@@ -1123,12 +1132,16 @@ class CrStoreSendBlockchain extends Component {
                                     <ListGroup className="mt-3">
 
                                         <ListGroupItem>
-                                            <ListGroupItemHeading className="m-0" onClick={(e) => {
+                                            <ListGroupItemHeading className="m-0" title="Encode the Consent Receipt JWT" onClick={(e) => {
                                                 _this.setState({encodeJwtVisible: !_this.state.encodeJwtVisible})
                                             }}><i
                                                 className={_this.state.encodeJwtVisible ? "fas text-muted fa-minus-square" : "fas text-muted fa-plus-square"}></i> Encode
                                                 JWT</ListGroupItemHeading>
                                             <Collapse isOpen={this.state.encodeJwtVisible}>
+
+                                            <br/>
+                                            <p>The Form Data JSON gets encoded into a JSON Web Token (JWT) and signed. </p>
+                                            <p>RS256 needs as input an RSA private key. Example private/public key pair is <a href="https://github.com/datafund/dr-editor-sample/blob/master/example_files/private_and_public_key.txt">here</a>. You need to include the BEGIN/END parts.</p>
                                                 <div>
 
 
@@ -1139,7 +1152,6 @@ class CrStoreSendBlockchain extends Component {
 
                                                     {!_.isEmpty(_this.state.formData, true) &&
                                                     <div>
-                                                        <h5 className="mt-4">Encode</h5>
 
                                                         <div className="mt-3">
 
@@ -1155,14 +1167,14 @@ class CrStoreSendBlockchain extends Component {
                                                                     defaultValue={_this.state.privateKey}></textarea>
                                                             </div>
 
-                                                            <a className="btn btn-success text-white mt-3 mb-3"
+                                                            <label className="btn btn-success text-white mt-3 mb-3"
                                                                onClick={(e) => {
                                                                    if (_this.state.privateKey === '') {
                                                                        alert("Valid private key is required!");
                                                                        return;
                                                                    }
                                                                    _this.generateJwtRS256()
-                                                               }}><i className="fas fa-lock"></i> Encode JWT (RS256)</a>
+                                                               }}><i className="fas fa-lock"></i> Encode JWT (RS256)</label>
 
                                                             {!_.isEmpty(_this.state.jwtToken, true) &&
                                                             <pre
@@ -1183,12 +1195,16 @@ class CrStoreSendBlockchain extends Component {
 
                                     <ListGroup className="mt-3">
                                         <ListGroupItem>
-                                            <ListGroupItemHeading className="m-0" onClick={(e) => {
+                                            <ListGroupItemHeading className="m-0" title="Send the Consent receipt proposal to another Fairdrop user to sign via blockchain" onClick={(e) => {
                                                 _this.setState({sendCRVisible: !_this.state.sendCRVisible})
                                             }}><i
                                                 className={_this.state.sendCRVisible ? "fas text-muted fa-minus-square" : "fas text-muted fa-plus-square"}></i> Send
                                                 Consent Receipt JWT</ListGroupItemHeading>
                                             <Collapse isOpen={this.state.sendCRVisible}>
+
+
+                                            <br/>
+                                            <p>Receiver has to have a Fairdrop account. </p>
                                                 <div className="mt-3 mb-3">
 
                                                     <div className="form-group"><label
@@ -1206,27 +1222,23 @@ class CrStoreSendBlockchain extends Component {
                                                     />
                                                     </div>
 
+                                                    <p>You can "send" the Consent Receipt by saving it into receiver's Fairdrop mailbox.</p>
+
                                                     <div className="mt-3">
-                                                        <a className={"btn btn-primary btn-block " + (_this.state.recipientAccountValid ? '' : 'disabled') }
+                                                        <label className={"btn btn-primary btn-block " + (_this.state.recipientAccountValid ? '' : 'disabled') }
                                                            onClick={_this.sendTokenToDP}> Data controller - send CR
-                                                            JWT to Data principal</a>
-                                                    </div>
-
-
-                                                    <div className="row">
-                                                        <div className="col-md-12 mt-5">
-                                                            <h5>Blockchain signing</h5>
-                                                        </div>
+                                                            JWT to Data principal</label>
                                                     </div>
 
+                                                    <p>You can additionaly sign the Consent Receipt with your private key and send it to receiver. In this case, you would expect the receiver to also sign, to make the consent transaction legitimate.</p>
 
                                                     <div className="row">
                                                         <div className="col-md-12">
-                                                            <a className={"btn btn-primary btn-block " + (_this.state.recipientAccountValid ? '' : 'disabled') }
+                                                            <label className={"btn btn-primary btn-block " + (_this.state.recipientAccountValid ? '' : 'disabled') }
                                                                onClick={_this.blockchainSignAndSendTokenToDP}> Data
                                                                 controller - Blockchain sign and
                                                                 send CR
-                                                                JWT to Data principal</a>
+                                                                JWT to Data principal</label>
                                                         </div>
                                                     </div>
 
@@ -1402,12 +1414,12 @@ class CrStoreSendBlockchain extends Component {
 
                                                         return (
                                                             <div className="text-center">
-                                                                <a className="btn btn-primary btn-sm pt-1 pb-1"
+                                                                <label className="btn btn-primary btn-sm pt-1 pb-1"
                                                                    onClick={(e) => {
                                                                        e.preventDefault();
                                                                        e.stopPropagation();
                                                                        _this.showConsentDetails(row.original, 'sent')
-                                                                   }}>View</a>
+                                                                   }}>View</label>
                                                             </div>
                                                         )
                                                     }
@@ -1551,12 +1563,12 @@ class CrStoreSendBlockchain extends Component {
 
                                                         return (
                                                             <div className="text-center">
-                                                                <a className="btn btn-primary btn-sm pt-1 pb-1"
+                                                                <label className="btn btn-primary btn-sm pt-1 pb-1"
                                                                    onClick={(e) => {
                                                                        e.preventDefault();
                                                                        e.stopPropagation();
                                                                        _this.showConsentDetails(row.original, 'received')
-                                                                   }}>View</a>
+                                                                   }}>View</label>
                                                             </div>
                                                         )
                                                     }
@@ -1617,12 +1629,12 @@ class CrStoreSendBlockchain extends Component {
                                     <div className="row">
                                         {_this.state.typeOfMessageInModal === 'received' &&
                                         <div className="col-md-7 mb-3">
-                                            <a className="btn btn-primary" onClick={_this.crDetailsModalGiveConsent}>Give
+                                            <label className="btn btn-primary" onClick={_this.crDetailsModalGiveConsent}>Give
                                                 Consent and Sign on <i
-                                                    className="fa fa-link"></i></a>
-                                            <a className="btn btn-primary mt-2"
+                                                    className="fa fa-link"></i></label>
+                                            <label className="btn btn-primary mt-2"
                                                onClick={_this.crDetailsModalRevokeConsent}>Revoke
-                                                Consent</a>
+                                                Consent</label>
                                         </div>
                                         }
                                         <div className="col-md-4 mb-2">
diff --git a/src/pages/Home.js b/src/pages/Home.js
index 6c4de2c..495b4fa 100644
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -88,13 +88,13 @@ class App extends Component {
                         <div className="col-md-12">
 
                             <ButtonGroup className="mb-4">
-                                <Button active={this.state.activeMainTab === '1'} onClick={() => {
+                                <Button active={this.state.activeMainTab === '1'} title="Generate and view a Consent Receipt" onClick={() => {
                                     this.setState({activeMainTab: '1'});
                                 }}>Consent Receipt Editor &<br/> Viewer</Button>
-                                <Button active={this.state.activeMainTab === '2'} onClick={() => {
+                                <Button active={this.state.activeMainTab === '2'} title="Sign & send a Consent Receipt as Data controller" onClick={() => {
                                     this.setState({activeMainTab: '2'});
                                 }}>Consent Receipt Storage & Sending &<br/> Blockchain signing (data controller / user)</Button>
-                                <Button active={this.state.activeMainTab === '3'} onClick={() => {
+                                <Button active={this.state.activeMainTab === '3'} title="Browse and sign Consent Receipts as Data principal" onClick={() => {
                                     this.setState({activeMainTab: '3'});
                                 }}>Received Data Receipts<br/> (data principal / giver)</Button>
                             </ButtonGroup>

From 9d3cc37e6de8a2b04fe92f47041d12eb5255cdf3 Mon Sep 17 00:00:00 2001
From: Crt Ahlin <crt.ahlin@gmail.com>
Date: Wed, 21 Aug 2019 11:55:05 +0200
Subject: [PATCH 4/4] add / edit descriptions

---
 src/components/CrStoreSendBlockchain.js |  6 ------
 src/components/ReceivedDataReceipts.js  | 24 +++++++++++-------------
 2 files changed, 11 insertions(+), 19 deletions(-)

diff --git a/src/components/CrStoreSendBlockchain.js b/src/components/CrStoreSendBlockchain.js
index aa5e922..df20a97 100644
--- a/src/components/CrStoreSendBlockchain.js
+++ b/src/components/CrStoreSendBlockchain.js
@@ -957,12 +957,6 @@ class CrStoreSendBlockchain extends Component {
 
                     <div className="col-md-4 border-right">
 
-                        <div className="row">
-                            <div className="col-md-12">
-                                <h5>Decentralized storage and sending</h5>
-                            </div>
-                        </div>
-
 
                         <div className="row">
                             <div className="col-md-12">
diff --git a/src/components/ReceivedDataReceipts.js b/src/components/ReceivedDataReceipts.js
index d0115c3..ab4d0f6 100644
--- a/src/components/ReceivedDataReceipts.js
+++ b/src/components/ReceivedDataReceipts.js
@@ -471,23 +471,21 @@ class ReceivedDataReceipts extends Component {
 
                     <div className="col-md-4 border-right">
 
-                        <div className="row">
-                            <div className="col-md-12">
-                                <h5>Decentralized storage and sending</h5>
-                            </div>
-                        </div>
-
-
                         <div className="row">
                             <div className="col-md-12">
 
                                 <ListGroupItem>
-                                    <ListGroupItemHeading className="m-0" onClick={(e) => {
+                                    <ListGroupItemHeading className="m-0" title="Set the account/wallet to work with" onClick={(e) => {
                                         _this.setState({dataControllerAccountVisible: !_this.state.dataControllerAccountVisible})
                                     }}><i
                                         className={_this.state.dataControllerAccountVisible ? "fas text-muted fa-minus-square" : "fas text-muted fa-plus-square"}></i> Data
                                         Account & Wallet</ListGroupItemHeading>
                                     <Collapse isOpen={this.state.dataControllerAccountVisible}>
+
+                                        <br/>
+                                        <p>Fairdrop account must be used. It can be created or imported via a JSON file containing the private key.</p>
+                                        <p>It is browser specific - on a different browser or computer you need to re-import it.</p>
+                                        <p>It has to be unlocked to be used.</p>
                                         <div className="mt-3 mb-3">
 
                                             <div className="form-group"><label
@@ -735,11 +733,11 @@ class ReceivedDataReceipts extends Component {
 
                                                         return (
                                                             <div className="text-center">
-                                                                <a className="btn btn-primary btn-sm pt-1 pb-1" onClick={(e) => {
+                                                                <label className="btn btn-primary btn-sm pt-1 pb-1" onClick={(e) => {
                                                                     e.preventDefault();
                                                                     e.stopPropagation();
                                                                     _this.showConsentDetails(row.original, 'received')
-                                                                }}>View</a>
+                                                                }}>View</label>
                                                             </div>
                                                         )
                                                     }
@@ -800,9 +798,9 @@ class ReceivedDataReceipts extends Component {
                                 <div className="row">
                                     {_this.state.typeOfMessageInModal === 'received' &&
                                     <div className="col-md-7 mb-3">
-                                        <a className="btn btn-primary" onClick={_this.crDetailsModalGiveConsent}>Give Consent and Sign on <i
-                                            className="fa fa-link"></i></a>
-                                        <a className="btn btn-primary mt-2" onClick={_this.crDetailsModalRevokeConsent}>Revoke Consent</a>
+                                        <label className="btn btn-primary" onClick={_this.crDetailsModalGiveConsent}>Give Consent and Sign on <i
+                                            className="fa fa-link"></i></label>
+                                        <label className="btn btn-primary mt-2" onClick={_this.crDetailsModalRevokeConsent}>Revoke Consent</label>
                                     </div>
                                     }
                                     <div className="col-md-4 mb-2">