Merge pull request #5 from mcstoer/login-provisioning

Add Provisioning and Update UI to Match Mobile

eslint.config.mjs

@@ -0,0 +1,25 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import pluginReact from "eslint-plugin-react";
+import stylisticJs from '@stylistic/eslint-plugin-js';
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+  {files: ["**/*.{js,mjs,cjs,jsx}"]},
+  {
+    plugins: {
+      '@stylistic/js': stylisticJs
+    },
+    rules: {
+      "indent": ["warn", 2],
+      "semi": ["warn", "always"],
+    },
+  },
+  {
+    languageOptions: {
+      globals: globals.browser,
+    }
+  },
+  pluginJs.configs.recommended,
+  pluginReact.configs.flat.recommended,
+];

package.json

@@ -10,6 +10,7 @@
     "@testing-library/jest-dom": "5.11.4",
     "@testing-library/react": "11.1.0",
     "@testing-library/user-event": "12.1.10",
+    "axios": "1.7.7",
     "base64url": "https://github.com/VerusCoin/base64url.git",
     "bignumber.js": "9.1.2",
     "blake2b": "https://github.com/VerusCoin/blake2b.git",
@@ -68,8 +69,13 @@
     "@babel/polyfill": "7.0.0",
     "@babel/preset-env": "7.0.0",
     "@babel/preset-react": "7.0.0",
+    "@eslint/js": "9.16.0",
+    "@stylistic/eslint-plugin-js": "2.11.0",
     "babel-loader": "8.3.0",
     "css-loader": "4.3.0",
+    "eslint": "9.16.0",
+    "eslint-plugin-react": "7.37.2",
+    "globals": "15.13.0",
     "html-webpack-plugin": "4.5.2",
     "mini-css-extract-plugin": "1.6.2",
     "node-sass": "9.0.0",

src/components/LoginConsent/Consent/Consent.render.js

@@ -86,15 +86,15 @@ export const ConsentRender = function () {
             </Button>
             <Button
               variant="contained"
-              color="primary"
+              color="success"
               disabled={loading}
               onClick={() => this.tryLogin()}
               style={{
                 width: 120,
                 padding: 8,
               }}
             >
-              {"Agree"}
+              {"Continue"}
             </Button>
           </div>
         </div>

src/components/LoginConsent/Login/Login.js

@@ -4,11 +4,21 @@ import { setExternalAction, setNavigationPath } from '../../../redux/reducers/na
 import { 
   LoginRender
 } from './Login.render';
-import { CONSENT_TO_SCOPE, EXTERNAL_ACTION, EXTERNAL_CHAIN_START, REDIRECT } from '../../../utils/constants'
+import {
+  CONSENT_TO_SCOPE,
+  EXTERNAL_ACTION,
+  EXTERNAL_CHAIN_START,
+  REDIRECT,
+  PROVISIONING_FORM
+} from '../../../utils/constants'
 import { checkAndUpdateIdentities, setActiveVerusId } from '../../../redux/reducers/identity/identity.actions';
 import { signResponse } from '../../../rpc/calls/signResponse';
 import { setError } from '../../../redux/reducers/error/error.actions';
-import { LoginConsentDecision, LoginConsentResponse } from 'verus-typescript-primitives';
+import { 
+  ID_ADDRESS_VDXF_KEY,
+  LOGIN_CONSENT_ID_PROVISIONING_WEBHOOK_VDXF_KEY,
+  LoginConsentDecision, LoginConsentResponse
+} from 'verus-typescript-primitives';
 import BigNumber from 'bignumber.js';
 
 class Login extends React.Component {
@@ -19,7 +29,31 @@ class Login extends React.Component {
       loading: false
     }
 
+    // Check to see if provisioning is an option.
+    const { request } = this.props.loginConsentRequest;
+
+    // See if the webhook exists.
+    let canProvision = request.challenge.provisioning_info && request.challenge.provisioning_info.some(x => {
+      return (
+        x.vdxfkey === LOGIN_CONSENT_ID_PROVISIONING_WEBHOOK_VDXF_KEY.vdxfid
+      );
+    });
+
+    // Provisioning is not an option if the subject is specified to be one of the identities that the user owns.
+    if (this.props.identities.length > 0) {
+      const identitySubjects = 
+        request.challenge.subject.filter(item => item.vdxfkey === ID_ADDRESS_VDXF_KEY.vdxfid).map(id => id.data);
+
+      const identitySubjectMatches = this.props.identities.filter(id => identitySubjects.includes(id.identity.identityaddress));
+
+      if (identitySubjectMatches.length > 0) {
+        canProvision = false;
+      }
+    }
+
+    this.canProvision = canProvision;
     this.tryLogin = this.tryLogin.bind(this);
+    this.tryProvision = this.tryProvision.bind(this);
     this.selectId = this.selectId.bind(this);
     this.cancel = this.cancel.bind(this);
   }
@@ -62,6 +96,10 @@ class Login extends React.Component {
     })
   }
 
+  tryProvision() {
+    this.props.dispatch(setNavigationPath(PROVISIONING_FORM));
+  }
+
   cancel() {
     this.props.dispatch(setNavigationPath(CONSENT_TO_SCOPE));
   }

src/components/LoginConsent/Login/Login.render.js

@@ -44,7 +44,8 @@ export const LoginRender = function () {
               padding: 8,
             }}
           >
-            {`Select an Identity`}
+            {`Select an Identity` +
+              (this.canProvision ? " or Request an Identity" : "")}
           </div>
         </div>
         <div
@@ -55,6 +56,7 @@ export const LoginRender = function () {
             alignItems: "flex-start",
             justifyContent: "center",
             flex: 1,
+            paddingTop: 2,
           }}
         >
           <FormControl style={{ maxWidth: 560, flex: 1 }}>
@@ -88,6 +90,29 @@ export const LoginRender = function () {
             </Select>
           </FormControl>
         </div>
+        <div
+           style={{
+            width: "100%",
+            display: "flex",
+            flexDirection: "column-reverse",
+            alignItems: "center",
+            justifyContent: "flex-end",
+            flex: 1,
+          }}
+        >
+          {this.canProvision && <Button
+            variant="contained"
+            color="primary"
+            disabled={loading}
+            onClick={() => this.tryProvision()}
+            style={{
+              width: 240,
+              padding: 8,
+            }}
+          >
+            {"Request a new VerusID"}
+          </Button>}
+        </div>
         <div
           style={{
             width: "100%",

src/components/LoginConsent/LoginConsent.render.js

@@ -1,7 +1,13 @@
 import React from 'react';
 import {
   CONSENT_TO_SCOPE,
-  EXTERNAL_ACTION, LOADING_DISPLAY, REDIRECT, SELECT_LOGIN_ID
+  EXTERNAL_ACTION,
+  LOADING_DISPLAY,
+  REDIRECT,
+  SELECT_LOGIN_ID,
+  PROVISIONING_FORM,
+  PROVISIONING_CONFIRM,
+  PROVISIONING_RESULT,
 } from '../../utils/constants'
 import ExternalAction from './ExternalAction/ExternalAction'
 import Loading from '../Loading';
@@ -10,6 +16,9 @@ import Login from './Login/Login';
 import { setError } from '../../redux/reducers/error/error.actions';
 import Redirect from './Redirect/Redirect';
 import Consent from './Consent/Consent';
+import ProvisionIdentityForm from './ProvisionIdentity/ProvisionIdentityForm/ProvisionIdentityForm';
+import ProvisionIdentityConfirm from './ProvisionIdentity/ProvisionIdentityConfirm/ProvisionIdentityConfirm';
+import ProvisionIdentityResult from './ProvisionIdentity/ProvisionIdentityResult/ProvisionIdentityResult';
 
 export const LoginConsentRender = function() {
   const COMPONENT_PROPS = {
@@ -43,6 +52,21 @@ export const LoginConsentRender = function() {
         {...COMPONENT_PROPS}
       />
     ),
+    [PROVISIONING_FORM]: (
+      <ProvisionIdentityForm
+        {...COMPONENT_PROPS}
+      />
+    ),
+    [PROVISIONING_CONFIRM]: (
+      <ProvisionIdentityConfirm
+        {...COMPONENT_PROPS}
+      />
+    ),
+    [PROVISIONING_RESULT]: (
+      <ProvisionIdentityResult
+        {...COMPONENT_PROPS}
+      />
+    ),
     [LOADING_DISPLAY]: (
       <Loading />
     )