Merge pull request #8 from rnsdomains/registration

Registration

.gitignore

@@ -1,3 +1,4 @@
 build/
 node_modules/
 .DS_Store
+.secret

README.md

@@ -2,6 +2,9 @@
 
 Register subdomains in batch - ✨ invite your users to the experience.
 
+Mainnet: [0x1867670c5eee8a850462ffb5d7b5f4eb25b0ffab](https://explorer.rsk.co/address/0x1867670c5eee8a850462ffb5d7b5f4eb25b0ffab)
+Testnet: [0x128b878c2dedacc211a6324fa51b6bf006cad25e](https://explorer.testnet.rsk.co/address/0x128b878c2dedacc211a6324fa51b6bf006cad25e)
+
 ## Setup
 
 ```
@@ -15,17 +18,3 @@ npm test
 ```
 
 > Remove /build dir
-
-## Deploy
-
-```
-truffle migrate [--reset] [--network NETWORK] --rootNode ROOT_NODE
-```
-
-- `ROOT_NODE`: the node to register subnodes of.
-
-Example:
-
-```
-truffle migrate --reset --network ganache --rootNode javi.rsk
-```

app/.env.production

@@ -0,0 +1,4 @@
+REACT_APP_RSK_NODE=https://public-node.rsk.co/
+REACT_APP_RNS_REGISTRY=0xcb868aeabd31e2b66f74e9a55cf064abb31a4ad5
+REACT_APP_BATCH_REGISTRAR=0x1867670c5eee8a850462ffb5d7b5f4eb25b0ffab
+REACT_APP_RSK_EXPLORER=https://explorer.rsk.co

app/package.json

@@ -2,6 +2,7 @@
   "name": "app",
   "version": "0.1.0",
   "private": true,
+  "homepage": "https://rnsdomains.github.io/rns-subdomain-batch/",
   "dependencies": {
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
@@ -26,7 +27,9 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "predeploy": "yarn build",
+    "deploy": "gh-pages -d build"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -49,6 +52,7 @@
     "eslint-plugin-import": "^2.19.1",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.17.0",
-    "eslint-plugin-react-hooks": "^1.7.0"
+    "eslint-plugin-react-hooks": "^1.7.0",
+    "gh-pages": "^2.1.1"
   }
 }

app/src/App.js

@@ -2,6 +2,7 @@ import React from 'react';
 import {
   Switch,
   Route,
+  Redirect,
 } from 'react-router-dom';
 import {
   Header,
@@ -10,17 +11,35 @@ import {
   Setup,
   Subdomains,
   FAQ,
+  Auth,
+  NotFound,
+  Register,
 } from './components';
+import Admin from './components/Admin';
+import { connect } from 'react-redux';
+import { NODE_OWNER, REGISTRANT } from './types';
 
-export default () => (
+const App = ({ showRegister, showAdmin }) => (
   <>
     <Header />
     <Switch>
+      <Route exact path="/" render={() => <Home />} />
       <Route path="/setup" render={() => <Setup />} />
-      <Route path="/subdomains" render={() => <Subdomains />} />
+      <Route path="/subdomains" render={() => showRegister ? <Subdomains /> : <Redirect to="/login" />} />
+      <Route path="/register" render={() => showRegister ? <Register /> : <Redirect to="/login" />} />
+      <Route path="/admin" render={() => showAdmin ? <Admin /> : <Redirect to="/login" />} />
+      <Route path="/login" render={() => <Auth />} />
       <Route path="/faq" render={() => <FAQ />} />
-      <Route path="/" render={() => <Home />} />
+      <Route render={() => <NotFound />} />
     </Switch>
     <Footer />
   </>
 );
+
+
+const mapStateToProps = ({ app }) => ({
+  showRegister: app.auth.permissions.includes(REGISTRANT),
+  showAdmin: app.auth.permissions.includes(NODE_OWNER),
+});
+
+export default connect(mapStateToProps)(App);

app/src/actions.js

@@ -3,6 +3,8 @@ import {
   ERROR_VALIDATE_OWNERSHIP, CLEAN_VALIDATE_OWNERSHIP,
   REQUEST_TRANSFER_TO_REGISTRAR, ERROR_TRANSFER_TO_REGISTRAR, RECEIVE_TRANSFER_TO_REGISTRAR,
   REQUEST_CLAIM, RECEIVE_CLAIM, ERROR_CLAIM,
+  REQUEST_AUTH, RECEIVE_AUTH, ERROR_AUTH, CONFIRM_PARSED,
+  REQUEST_REGISTER, RECEIVE_REGISTER, ERROR_REGISTER,
 } from './types';
 
 export const requestValidateOwnership = () => ({
@@ -51,3 +53,41 @@ export const errorTransferToRegistrar = (error) => ({
   type: ERROR_TRANSFER_TO_REGISTRAR,
   error,
 });
+
+export const requestAuth = () => ({
+  type: REQUEST_AUTH,
+});
+
+export const receiveAuth = (domain, owner, permissions) => ({
+  type: RECEIVE_AUTH,
+  domain,
+  owner,
+  permissions,
+});
+
+export const errorAuth = (error) => ({
+  type: ERROR_AUTH,
+  error,
+});
+
+export const confirmParsed = (parsed) => ({
+  type: CONFIRM_PARSED,
+  parsed,
+});
+
+export const requestRegister = (index) => ({
+  type: REQUEST_REGISTER,
+  index,
+});
+
+export const receiveRegister = (tx, index) => ({
+  type: RECEIVE_REGISTER,
+  tx,
+  index,
+});
+
+export const errorRegister = (error, index) => ({
+  type: ERROR_REGISTER,
+  error,
+  index,
+});

app/src/components/Admin.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Container, Row, Col } from 'react-bootstrap';
+
+export default () => (
+  <Container>
+    <Row>
+      <div className="col-lg-12 text-center main-title-box">
+        <h1><b>Admin</b></h1>
+      </div>
+      <Col>
+        <ul>
+          <li>Add registrant</li>
+          <li>Remove registrant</li>
+          <li>Check registrant</li>
+          <li>Recover domain ownership</li>
+        </ul>
+      </Col>
+    </Row>
+    <Row>
+      <Col>
+        <p>
+          This section is in development. Find the
+          <span> </span>
+          <a href="https://github.com/rnsdomains/rns-subdomain-batch/projects/1" target="_blank" rel="noopener noreferrer">Github project</a>
+          <span> </span>
+          to collaborate.
+        </p>
+      </Col>
+    </Row>
+  </Container>
+);

app/src/components/Auth.js

@@ -0,0 +1,105 @@
+import React, { Component } from 'react';
+import {
+  Container, Row, Col, Form, FormControl, Button, InputGroup, Spinner,
+} from 'react-bootstrap';
+import { connect } from 'react-redux';
+import { auth } from '../operations';
+import { Link } from 'react-router-dom';
+
+class ValidateOwnershipComponent extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      value: '',
+    };
+
+    this.authenticate = this.authenticate.bind(this);
+    this.handleChangeValue = this.handleChangeValue.bind(this);
+  }
+
+  handleChangeValue(e) {
+    this.setState({ value: e.target.value });
+  }
+
+  authenticate(event) {
+    event.preventDefault();
+    const { auth } = this.props;
+    const { value } = this.state;
+
+    auth(value);
+  }
+
+  render() {
+    const { authenticating, error, permissions, domain } = this.props;
+
+    return (
+      <Container className="text-center">
+        <Row>
+          <Col>
+            {
+              permissions.length === 0 ?
+              <Form onSubmit={this.authenticate}>
+                <Form.Group>
+                  <InputGroup>
+                    <FormControl type="text" placeholder="domain.rsk" disabled={authenticating} onChange={this.handleChangeValue} />
+                    <InputGroup.Append>
+                      <Button type="submit" disabled={authenticating}>Log in</Button>
+                    </InputGroup.Append>
+                  </InputGroup>
+                  {
+                    authenticating && <Spinner variant="grow" />
+                  }
+                  {
+                    error
+                    && (
+                      <>
+                        <small className="text-danger">{error}</small>
+                        <br />
+                        <small>
+                          Check you are connected to RSK network with
+                          <span> </span>
+                          the owner&aposs wallet unlocked.
+                        </small>
+                      </>
+                    )
+                  }
+                </Form.Group>
+              </Form> :
+              <>
+                <p>Welcome {domain}!</p>
+                <Link className="btn btn-success" to="/subdomains">Register subdomains</Link>
+              </>
+            }
+          </Col>
+        </Row>
+        <hr />
+        <Row>
+          <Col>
+            <p>
+              Please complete the
+              <span> </span><Link to="/setup">setup</Link><span> </span>
+              before logging in.
+            </p>
+          </Col>
+        </Row>
+      </Container>
+    );
+  }
+}
+
+const mapStateToProps = ({ app }) => ({
+  permissions: app.auth.permissions,
+  authenticating: app.auth.authenticating,
+  error: app.auth.error,
+  domain: app.domain,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  auth: (domain) => dispatch(auth(domain)),
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(ValidateOwnershipComponent);

app/src/components/Header.js

@@ -1,12 +1,17 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { connect } from 'react-redux';
+import { NODE_OWNER, REGISTRANT } from '../types';
 
-export default () => (
+const Header = ({ authenticatedAs, showRegister, showAdmin }) => (
   <nav className="navbar navbar-expand-md navbar-light bg-light fixed-top">
     <div className="container">
-      <a className="navbar-brand" href=".">
+      <Link className="navbar-brand" to="/">
         <img src="assets/img/logo.svg" className="logo" alt="logo" />
-      </a>
+      </Link>
+      <h3>
+        Subdomain batch
+      </h3>
       <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
         <span className="navbar-toggler-icon" />
       </button>
@@ -18,14 +23,36 @@ export default () => (
           <li className="nav-item">
             <Link className="nav-link" to="/setup">Setup</Link>
           </li>
+          {
+            showRegister &&
+            <li className="nav-item">
+              <Link className="nav-link" to="/subdomains">Register subdomains</Link>
+            </li>
+          }
+          {
+            showAdmin &&
+            <li className="nav-item">
+              <Link className="nav-link" to="/admin">Admin</Link>
+            </li>
+          }
           <li className="nav-item">
-            <Link className="nav-link" to="/subdomains">Create subdomains</Link>
+            <Link className="nav-link" to="/faq">FAQ</Link>
           </li>
           <li className="nav-item">
-            <Link className="nav-link" to="/faq">FAQ</Link>
+            <Link className="btn btn btn-primary my-2 my-sm-0" to={!authenticatedAs ? '/login' : ''}>
+              {authenticatedAs || 'Login'}
+            </Link>
           </li>
         </ul>
       </div>
     </div>
   </nav>
 );
+
+const mapStateToProps = ({ app }) => ({
+  authenticatedAs: app.auth.permissions.length > 0 && app.domain,
+  showRegister: app.auth.permissions.includes(REGISTRANT),
+  showAdmin: app.auth.permissions.includes(NODE_OWNER),
+});
+
+export default connect(mapStateToProps)(Header);