diff --git a/CHANGELOG.md b/CHANGELOG.md index bfe774cc86..f84f0e7740 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,5 +17,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Ui-service: Contains the back-end for the front-end and contains the Policy Workflow Engine +## [v1.0.0-beta.2] - 2021-10-20 +### Added + +- New UI design applied + +### Fixed +- VP and trust chain display for NFT +- Display of errors during a transaction; +- @hashgraph/sdk version was downgraded to 2.1.0 because of the [issue](https://github.com/hashgraph/hedera-sdk-js/issues/675) \ No newline at end of file diff --git a/Demo Artifacts/irec-policy-config.txt b/Demo Artifacts/irec-policy-config.txt index 5956998d9c..9d718c74ef 100644 --- a/Demo Artifacts/irec-policy-config.txt +++ b/Demo Artifacts/irec-policy-config.txt @@ -31,25 +31,47 @@ "idType": "OWNER", "uiMetaData": { "type": "page", - "title": "iRec Application Form", - "description": "Please fill out this form for the iRec Registration", + "title": "New Installer", + "description": "Description", "privateFields": [ "policyId" ] - } + }, + "id": "644984c0-2b04-445e-9a67-d8e23a421744" }, { "tag": "save_new_approve_document", "blockType": "sendToGuardian", "dataType": "approve", "entityType": "Installer", - "stopPropagation": true + "stopPropagation": true, + "uiMetaData": {}, + "id": "7f2176d5-0c74-4998-b922-f2d2109a0a4e" + }, + { + "tag": "update_approve_document_status", + "blockType": "sendToGuardian", + "dataType": "approve", + "entityType": "Installer", + "uiMetaData": {}, + "id": "8991fbb7-5b2e-4028-8a18-7a3de455d49b" + }, + { + "tag": "send_installer_vc_to_hedera", + "blockType": "sendToGuardian", + "dataType": "hedera", + "entityType": "Installer", + "uiMetaData": {}, + "id": "2f291cb3-9a04-4c0c-955d-82fb8697de6b" }, { - "tag": "save_installer_vc_document", + "tag": "Submission_of_CSD01_Documentation", "blockType": "sendToGuardian", "dataType": "vc-documents", - "entityType": "Installer" + "entityType": "Installer", + "uiMetaData": {}, + "stopPropagation": false, + "id": "afead08a-cb8e-4705-b3d3-ff828d535c13" }, { "tag": "installer_header", @@ -95,7 +117,7 @@ { "name": "document.id", "title": "ID", - "type": "button" + "type": "test" }, { "name": "document.credentialSubject.0.id", @@ -125,52 +147,82 @@ "bindBlock": "download_config_btn" } ] - } + }, + "id": "df49da83-f03a-47c0-9c6b-246d0651f64c" }, { - "tag": "add_sensor_bnt", - "defaultActive": true, + "tag": "download_config_btn", + "blockType": "interfaceAction", "permissions": [ "INSTALLER" ], - "blockType": "requestVcDocument", - "schema": "Inverter", - "idType": "DID", + "type": "download", + "schema": "MRV", + "stopPropagation": true, + "targetUrl": "http://message-broker:3003/mrv", "uiMetaData": { - "type": "dialog", - "description": "Describe the sensor", - "privateFields": [ - "policyId" - ], - "content": "Create Sensors", - "uiClass": "btn", - "dialogContent": "Please Enter Sensor Information", - "dialogClass": "", - "dialogType": "" - } - }, - { - "tag": "save_sensor_vc_document", - "blockType": "sendToGuardian", - "dataType": "vc-documents", - "entityType": "Inverter", - "stopPropagation": true + "content": "download", + "options": [] + }, + "id": "87f6712f-4e1f-4d65-9871-5a2421a2fb04" }, { - "tag": "download_config_btn", - "blockType": "interfaceAction", + "defaultActive": true, + "tag": "create_new_sensor_steps", "permissions": [ "INSTALLER" ], - "type": "download", - "schema": "MRV", - "targetUrl": "http://message-broker:3003/mrv", - "stopPropagation": true, + "blockType": "interfaceStepBlock", "uiMetaData": { - "content": "download" - } + "type": "blank" + }, + "children": [ + { + "tag": "add_sensor_bnt", + "defaultActive": true, + "permissions": [ + "INSTALLER" + ], + "blockType": "requestVcDocument", + "schema": "Inverter", + "idType": "DID", + "uiMetaData": { + "type": "dialog", + "description": "Description", + "privateFields": [ + "policyId" + ], + "content": "New Sensors", + "uiClass": "btn", + "dialogContent": "New Sensors", + "dialogClass": "", + "dialogType": "" + }, + "id": "4f0408bd-6548-48b3-822f-e3e2c363da2f" + }, + { + "tag": "send_sensor_vc_to_hedera", + "blockType": "sendToGuardian", + "dataType": "hedera", + "entityType": "Inverter", + "uiMetaData": {}, + "id": "387b1ab7-6e20-4164-9869-c4e7534be879" + }, + { + "tag": "CSD02_device_registration", + "blockType": "sendToGuardian", + "dataType": "vc-documents", + "entityType": "Inverter", + "stopPropagation": false, + "uiMetaData": {}, + "id": "eadd87c7-6dae-4de2-9fd8-a945071f2406" + } + ], + "cyclic": true, + "id": "2916b697-0559-4940-8eb1-e2c6cb2bff68" } - ] + ], + "id": "091118b9-6674-4f8b-8385-13141fb00be8" }, { "tag": "mrv_page", @@ -209,7 +261,7 @@ }, { "name": "document.issuer", - "title": "DID", + "title": "Sensor DID", "type": "text" }, { @@ -225,13 +277,17 @@ "dialogType": "json" } ] - } + }, + "id": "f18af27b-4ea7-40cc-a16d-f27cb72f0e7f" } - ] + ], + "id": "066283a5-19d9-476b-b28f-dfbaff5f6276" } - ] + ], + "id": "4ce2f7ca-c1ff-4763-9fca-99186c85d3fc" } - ] + ], + "id": "56eca007-3c7f-473d-a2c4-e50b6fca2ee0" }, { "tag": "root_authority_header", @@ -273,7 +329,8 @@ { "name": "document.issuer", "title": "Owner", - "type": "text" + "type": "text", + "tooltip": "Installer did" }, { "name": "createDate", @@ -309,7 +366,8 @@ } ] }, - "children": [] + "children": [], + "id": "77c64bb1-2548-4d65-8fb4-d8125d9ed47f" }, { "tag": "approve_documents_btn", @@ -325,7 +383,7 @@ "name": "Approve", "value": "APPROVED", "uiClass": "btn-approve", - "bindBlock": "save_installer_vc_document" + "bindBlock": "update_approve_document_status" }, { "name": "Reject", @@ -334,18 +392,14 @@ "bindBlock": "add_new_installer_request" } ] - } - }, - { - "tag": "update_approve_document_status", - "blockType": "sendToGuardian", - "dataType": "approve", - "entityType": "Installer", - "stopPropagation": true + }, + "id": "2da3d43a-b2e4-4a78-a1f4-8aa6e2c2d2fb" } - ] + ], + "id": "fd7f8862-4155-4659-84a2-a094aaa1bf08" } - ] + ], + "id": "2be464b1-84b9-423f-ac57-28590b7b3d08" }, { "tag": "mint_events", @@ -360,25 +414,29 @@ }, "children": [ { + "tag": "mrv_source", "blockType": "externalDataBlock", "entityType": "MRV", - "schema": "MRV" + "schema": "MRV", + "id": "d0fd54aa-deff-468e-a20a-219bd5e3f272" }, { - "tag": "save_mrv_document", + "tag": "CSD04_requesting_i_Rec_issuance", "blockType": "sendToGuardian", "dataType": "vc-documents", - "entityType": "MRV" + "entityType": "MRV", + "id": "ff7601e1-f9ba-429d-932a-8efb545902da" }, { "tag": "mint_token", "blockType": "mintDocument", - "tokenId": "0.0.2776981", - "rule": "1" + "tokenId": "0.0.2880732", + "rule": "1", + "id": "5b64f3b3-d3a0-4026-8bf5-ac6a37c5a316" } - ] + ], + "id": "aaa11c02-21af-4609-a98b-fdd8e9934265" } - ] + ], + "id": "de4b3c4c-393d-4b89-9926-42a6c762ef09" } - - diff --git a/README.md b/README.md index 3fcd000c73..95494bed12 100644 --- a/README.md +++ b/README.md @@ -84,7 +84,6 @@ To get a local copy up and running, follow these simple example steps. When buil ``` OPERATOR_ID=0.0.123456789 OPERATOR_KEY=302e020100300506032b657004220420f4361ec73dc43e568f1620a7b7ecb7330790b8a1c7620f1ce353aa1de4f0eaa6 - TOPIC_ID=0.0.28583 ``` in `ui-service/.env.docker`: @@ -92,7 +91,6 @@ To get a local copy up and running, follow these simple example steps. When buil ``` OPERATOR_ID=0.0.123456789 OPERATOR_KEY=302e020100300506032b657004220420f4361ec73dc43e568f1620a7b7ecb7330790b8a1c7620f1ce353aa1de4f0eaa6 - TOPIC_ID=0.0.28583 ``` in `guardian-service/config.json`: @@ -179,15 +177,27 @@ To get a local copy up and running, follow these simple example steps. When buil - **Installer**: In our scenario, it can be either the project owner or developer. This is the entity (person or company) that owns the project whose activities will be the source of benefit claims in a process generically called measurement or monitoring, reporting and verification (MRV) to create a credit. - **Auditor**: This is a 3rd part who will need to view/audit the entire chain of events; from the establishment of the science-based standards through creation of the credit. +![Guardian step 1](https://user-images.githubusercontent.com/40637665/137935335-1c1cf58e-9b83-4080-9c76-125d2ec9af34.png) + 2. After running the installation commands, open a tab on your browser and navigate to http://localhost:3002/. Typically the way we start the reference implementation demonstration is by logging in as the Root Authority. Click the **Demo Admin Panel** drop-down located in the upper right-hand corner of the login screen and select the **Root Authority** user. -3. You'll now be prompted to configure your Root Authority account. Press the **Generate** button to generate a Hedera Operator ID and an Operator Key and enter the name of your Root Authority. Press OK when finished. This will now create Hedera Consensus Service Topics, fill the account with test hBar, create a DID document, create a Verifiable Credential, etc. +![guardian step 2](https://user-images.githubusercontent.com/40637665/137934753-e51db424-6142-42f8-8016-40cf9f38401e.png) + +3. You'll now be prompted to configure your Root Authority account. Press the **Generate** button to generate a Hedera Operator ID and an Operator Key and enter the name of your Root Authority. Press **Connect** when finished. This will now create Hedera Consensus Service Topics, fill the account with test hBar, create a DID document, create a Verifiable Credential, etc. + +![Guardian step 3](https://user-images.githubusercontent.com/40637665/137956842-d9b3d0a3-7021-4304-9d1b-83d06ac115e2.png) + +4. Next, we move over to the **Schemas** tab. Some schemas are populated during the build of the solution. These schemas are the structure of which Verifiable Credentials will be filled out. You can click on the **document** link on the right-hand side and notice fields that correlate to business requirements. Remember the iRec Policy we mentioned at the beginning of the section? We will be creating the first step of that Policy; which is to create an iRec registration applicant form. The current version of the solution allows you to either build schemas from scratch or import schemas. Navigate to the [Demo Artifacts folder](https://github.com/hashgraph/guardian/tree/main/Demo%20Artifacts) and download the `iRec_Application_Details.json` file. Then click on the **Import** button and upload the `iRec_Application_Details.json` file. + +![Guardian step 4](https://user-images.githubusercontent.com/40637665/137962816-b2791931-552e-4cbc-8290-002909421abb.png) + +5. The next step of the flow is to create a token. Click the **Tokens** tab and click on **Create Token.** Here, we can fill out the necessary token information and token parameters such as Fungible/Non-Fungible (for this demo flow we will select Non-Fungible), Freeze, KYC, etc. For purposes of this demo, let us keep everything selected. When you click "OK", this action triggers Hedera Token Service to create the token on Hedera's Testnet. Clicking on the "Token ID" will bring you to the Dragon Glass Hedera Testnet explorer to track all token activity. -4. Next, we move over to the **Schemas** tab. Some schemas are populated during the build of the solution. These schemas are the structure of which Verifiable Credentials will be filled out. You can click on the **document** link on the right-hand side and notice fields that correlate to business requirements. Remember the iRec Policy we mentioned at the beginning of the section? We will be creating the first step of that Policy; which is to create an iRec registration applicant form. The current version of the solution allows you to either build schemas from scratch or import schemas. Navigate to the `/Demo Artifacts/` folder and download the `iRec_Application_Details.json` file. +![Guardian step 5](https://user-images.githubusercontent.com/40637665/137963264-09779e4a-2127-4e4b-949f-f9c510350634.png) -5. The next step of the flow is to create a token. Click the **Tokens** tab and click on **Create Token.** Here, we can fill out the necessary token information and token parameters such as Fungible/Non-Fungible, Freeze, KYC, etc. For purposes of this demo, let us keep everything selected. When you click "OK", this action triggers Hedera Token Service to create the token on Hedera's Testnet. Clicking on the "Token ID" will bring you to the Dragon Glass Hedera Testnet explorer to track all token activity. +6. This could be one of the most interesting parts of the reference implementation. Now we will be creating the Policy. In our case, we will mimic the iRec Policy. Click **Create Policy** and fill the required information in the dialog box. Please note that you will need to create new **Tag** and **Version** numbers for each policy. identical Tags and Versions will cause an error. Once the Policy is complete, we have just **_created our first Policy Workflow and Policy Action Execution instance!_** -6. This could be one of the most interesting parts of the reference implementation. Now we will be creating the Policy. In our case, we will mimic the iRec Policy. Click **Create Policy** and fill out the dialog box. Once the Policy is complete, we have just **_created our first Policy Workflow and Policy Action Execution instance!_** +![Guardian step 6](https://user-images.githubusercontent.com/40637665/137963683-cd49e1a6-c372-4165-b150-7441da3a2818.png) 7. On the right-hand side of the Policies tab, click the **Edit** button. This will open the Guardian's Policy workflow editor. As described in the Hedera Improvement Proposal 28 (HIP-28), a Policy Workflow contains: @@ -196,29 +206,73 @@ To get a local copy up and running, follow these simple example steps. When buil - Policy Workflow State Objects - Policy Workflow State Transactions - The quickest way to go through this flow while learning how to configure a Policy Workflow is to import the configPolicy.ts file. To do so, navigate to the `/Demo Artifacts/` folder and copy everything inside the `irec-policy-config.txt` file. Go back into the Policy editor and click on the "code" icon on the upper right-hand side. Paste the mock configuration and then click on the "block" icon that is just to the right of the "code" icon. You'll notice that the Policy configuration editor now visually shows the Policy Workflow with all of the necessary Workgroups, Actions, State Objects, and Transactions. Click through on several blocks, and you'll notice that you can edit some elements on the right-hand side. Depending on what you are clicking on, different properties will display on the right-bottom box. You can edit properties from permissions, dependencies, tags, UI elements, etc. Moving along with our flow, we will now press the **Save** button and the **Publish** button. + The quickest way to go through this demo while learning how to configure a Policy Workflow is to import the configPolicy.ts file. To do so, navigate to the [Demo Artifacts folder](https://github.com/hashgraph/guardian/tree/main/Demo%20Artifacts) folder and copy everything inside the `irec-policy-config.txt` file. Go back into the Policy editor and click on the "code" icon on the upper right-hand side. Paste the mock configuration. + + ![Guardian step 7](https://user-images.githubusercontent.com/40637665/137964384-6e05ee6e-1e5a-41c3-801b-ec94a50de916.png) + + Click on the "block" icon that is just to the right of the "code" icon. You'll notice that the Policy configuration editor now visually shows the Policy Workflow with all of the necessary Workgroups, Actions, State Objects, and Transactions. Click through on several blocks, and you'll notice that you can edit some elements on the right-hand side. Depending on what you are clicking on, different properties will display on the right-bottom box. You can edit properties from permissions, dependencies, tags, UI elements, etc. Moving along with our flow. Click on the **mint_token** block and select the token we created from the properties box in the right hand side. We will now press the **Save** button and the **Publish** button. + + ![Guardian step 7 2](https://user-images.githubusercontent.com/40637665/137965045-951900d7-fd64-489a-9282-8131ca9216b4.png) 8. Click on the Root Authority's profile icon and select "Log Out." We will now go back into the **Admin Panel**. This time we will select **Installer** -9. When signing into the Installer profile, you must follow similar configuration steps as the Root Authority. After generating the Hedera Operating ID and Key, the Installer profile will be configured, test HBAR will be credited to the account, and a DID will be created. +![Guardian step 8](https://user-images.githubusercontent.com/40637665/137965200-bc63668e-cd94-4451-a495-ef0f32cd2b7c.png) + +9. When signing into the Installer profile, you must follow similar configuration steps as the Root Authority. Click the **Generate** button, then select **Submit**. After generating the Hedera Operating ID and Key, the Installer profile will be configured, test HBAR will be credited to the account, and a DID will be created. + +![Guardian step 9](https://user-images.githubusercontent.com/40637665/137965583-00d980fd-aa27-4dd4-b62e-2adc96b116ed.png) 10. Next, navigate to the **Token** tab and click the **link** icon to associate the Installer to the token we created as the Root Authority. -11. Now, we can click on the **Policies** tab. This is where the specific actions required by the Policy Workflow will be found. We can click the **Open** button to the right of the iRec Policy the Root Authority created. Here we will see the form that is based on the imported schema in step 4. This form is one of the Policy Workflow State Objects. Once you fill out the required information, press the **OK** button. Note: You'll see the progress bar spin right now. That's on purpose. +![Guardian step 10](https://user-images.githubusercontent.com/40637665/137965789-6e5b888d-88a2-4a6d-917e-fd797b060b2d.png) + +11. Now, we can click on the **Policies** tab. This is where the specific actions required by the Policy Workflow will be found. We can click the **Open** button to the right of the iRec Policy the Root Authority created. + +![Guardian step 11](https://user-images.githubusercontent.com/40637665/137966063-7add24f7-319b-472e-a93d-418075a74999.png) + + Here we will see the form that is based on the imported schema in step 4. This form is one of the Policy Workflow State Objects. Once you fill out the required information, press the **OK** button. Note: There is a known issue that no dialogue box comes up to let you know the form is completed. That's ok for now, we are working to provide a UI update. Everything works, so just move onto the next step :) + +![Guardian step 11 2](https://user-images.githubusercontent.com/40637665/137966739-1872360d-a7bd-45a3-8fe5-7fd7d59af66d.png) 12. The next step of our flow is to log out and sign back in as the Root Authority. Navigate to the **Policies** tab and click the **Open** button on the far right. Here you will find the approval actions based on our Policy Workflow required by the Root Authority. You will be able to view the Verifiable Credential prior to approval by selecting the **View Document** link. Once you are ready to approve the document, you can click on the **Approve** button. -13. Navigate to the **Tokens** tab and click on the blue people icon on the far right. This view shows the Root Authority all of the users who have been associated with the tokens the Root Authority created. We will now click the **Grant KYC** button. We can now log out of the Root Authority account and back in as the Installer. +![Guardian step 12](https://user-images.githubusercontent.com/40637665/137966774-7ffbe24e-0a41-40ab-b270-fa6252fced86.png) + +13. Navigate to the **Tokens** tab and click on the blue people icon on the far right. This view shows the Root Authority all of the users who have been associated with the tokens the Root Authority created. We will now click the **Grant KYC** button. + +![Guardian step 13](https://user-images.githubusercontent.com/40637665/137966876-52614098-c782-48d8-97bf-58a971a9e56a.png) + +14. We can now log out of the Root Authority account and back in as the Installer. Navigate to the **Policies** tab and click the **Open** button on the far right. The next Policy Workflow Action required by the Installer is to register their sensors. Click the **New Sensors** button, fill out the required information in the dialog box, and select **OK**. + +![Guardian step 14](https://user-images.githubusercontent.com/40637665/137967290-51ae0339-4272-4fbc-b628-eb39bf5e4e74.png) + +15. You'll notice that you just created a sensor (refreshing the page may be needed), and that sensor has been assigned a Decentralized Identifier and a Verifiable Credential. Click the **Configuration** button. This will begin the download of the Sensor configuration file. Save that in a handy place because we will need it. + +![Guardian step 15](https://user-images.githubusercontent.com/40637665/137970980-19ba060d-0686-4718-8e4e-2aede5db693e.png) + +16. Open another tab on your browser and enter http://localhost:3005/. We now see our IoT simulator. You can either drag and drop the sensor configuration file to the big `+` sign in the upper left, or you click the button to browse your computer. For simplicity's sake, click the button next to **Random Value** for the IoT simulator to generate random Measurement, Reporting, and Validation (MRV) data. Click **OK**. + +![Guardian step 16](https://user-images.githubusercontent.com/40637665/137971538-94b68559-a8e2-464d-b595-fd13f23b97e9.png) + + Press the **green triangle** to begin generating the data. Navigate back to the Guardian Policies tab, and you can click into the **MRV** tab. Here, you will see the data that the IoT sensor generated, such as date, period, amount, etc. + + ![Guardian step 16 2](https://user-images.githubusercontent.com/40637665/137971702-79cc597f-90a7-4038-8058-caa9f85a55e0.png) + +17. The last step is to log out of the Installer account and log into the Auditor account. + +![Guardian step 17](https://user-images.githubusercontent.com/40637665/137971921-041a209a-fec2-4f0a-854b-d46c7b26eaf7.png) -14. Navigate to the **Policies** tab and click the **Open** button on the far right. After the Installer has submitted the form, the next Policy Workflow Action required by the Installer is to register their sensors. Click the **Create Sensors**, fill out the required information in the dialog box, and select **OK**. + There are two tabs in this view: **Audit** and **Trust Chain**. Clicking into the Audit tab offers high-level public information from our reference implementation such as the Verifiable Presentation ID, the Hash of the Verifiable Presentation, the DID of the sensor, the date information the Verifiable Presentation was created, the type of activity, and the ability to view the Verifiable Presentation. + + ![Guardian step 17 2](https://user-images.githubusercontent.com/40637665/137972020-ea74c1ad-2ec3-49b4-9089-c807ed79241b.png) -15. You'll notice that you just created a sensor, and that sensor has been assigned a Decentralized Identifier and a Verifiable Credential. Click the **Configuration** button. This will begin the download of the Sensor configuration file. Save that in a handy place because we will need it. +18. Lastly, let's navigate to The Trust Chain tab. The Trust Chain tab will ask for one of two pieces of information, either the Verifiable Presentation ID (which can be found either in the Audit tab or the memo field of the transaction field on a Hedera explorer-like Dragon Glass) or the Transaction Hash. Entering either of those important identifiers will open all necessary information for you to discover. -16. Open another tab on your browser and enter http://localhost:3005/. We now see our IoT simulator. You can either drag and drop the sensor configuration file to the big `+` sign in the upper left, or you click the button to browse your computer. For simplicity's sake, click the button next to **Random Value** for the IoT simulator to generate random Measurement, Reporting, and Validation (MRV) data. Click **OK** and press the **green triangle** to begin generating the data. Navigate back to the Guardian Policies tab, and you can click into the **MRV** tab. Here, you will see the data that the IoT sensor generated, such as date, period, amount, etc. +![Guardian step 18](https://user-images.githubusercontent.com/40637665/137972170-7970a07e-7a76-410b-90a7-22a9f3586103.png) -17. The last step is to log out of the Installer account and log into the Auditor account. There are two tabs in this view: **Audit** and **Trust Chain**. Clicking into the Audit tab offers high-level public information from our reference implementation such as the Verifiable Presentation ID, the Hash of the Verifiable Presentation, the DID of the sensor, the date information the Verifiable Presentation was created, the type of activity, and the ability to view the Verifiable Presentation. +The **Trust Chain** view displays important elements that can be publicly discovered. Elements include token information, Policy information, and all of the important information regarding the Verifiable Credentials that make up the Verifiable Presentation. You'll notice "Cards" on the bottom of the screen. Those cards are Verifiable Credentials displayed in chronological order. For example, you will see when the Root Authority was created, when the policy was created, when the Installer submitted documentation, etc. Feel free to explore! -18. Lastly, let's navigate to The Trust Chain tab. The Trust Chain tab will ask for one of two pieces of information, either the Verifiable Presentation ID (which can be found either in the Audit tab or the memo field of the transaction field on a Hedera explorer-like Dragon Glass) or the Transaction Hash. Entering either of those important identifiers will open all necessary information for you to discover. Important elements that can be publicly discovered include token information, Policy information, and all of the important information regarding the Verifiable Credentials that make up the Verifiable Presentation. +![Guardian step 19](https://user-images.githubusercontent.com/40637665/137972740-a40ed2cb-2502-4da5-a9f2-3047c30e6773.png)

(back to top)

@@ -242,18 +296,18 @@ The Guardian solution is built with the following major frameworks/libraries. ### Backend -- NodeJS -- MongoDB -- Express -- FastMQ -- TypeORM -- Hedera-DID-JS-SDK -- W3C VC-JS-HTTP +- [NodeJS](https://nodejs.org/) +- [MongoDB](https://www.mongodb.com/) +- [Express](https://expressjs.com/) +- [FastMQ](https://www.npmjs.com/package/fastmq) +- [TypeORM](https://typeorm.io/) +- [Hedera-DID-JS-SDK](https://github.com/hashgraph/did-sdk-js) +- [W3C VC-JS-HTTP](https://w3c.github.io/vc-data-model/) ### Frontend -- Angular -- crypto-browserify +- [Angular](https://angular.io/) +- [crypto-browserify](https://www.npmjs.com/package/crypto-browserify)

(back to top)

diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index 54c4ea6dc4..a56a02206e 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -1,4 +1,5 @@
+
diff --git a/frontend/src/app/app.component.scss b/frontend/src/app/app.component.scss index d9ccf3b32f..c0e68831fa 100644 --- a/frontend/src/app/app.component.scss +++ b/frontend/src/app/app.component.scss @@ -29,7 +29,17 @@ body { } .app { - background: center / cover no-repeat url('../assets/bg.jpg') #fff; width: 100vw; min-height: 100vh; + position: relative; + + .background { + filter: brightness(0.5); + background: center / cover no-repeat url('../assets/bg.jpg') #fff; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + } } \ No newline at end of file diff --git a/frontend/src/app/components/dialogs/token-dialog/token-dialog.component.css b/frontend/src/app/components/dialogs/token-dialog/token-dialog.component.css index 124ffdc759..6472f3a515 100644 --- a/frontend/src/app/components/dialogs/token-dialog/token-dialog.component.css +++ b/frontend/src/app/components/dialogs/token-dialog/token-dialog.component.css @@ -10,7 +10,7 @@ form { } form[ft='false'] { - height: 400px + height: 510px } form[ft='true'] { diff --git a/frontend/src/app/components/header/header.component.css b/frontend/src/app/components/header/header.component.css index d373f71d55..3491eeaa06 100644 --- a/frontend/src/app/components/header/header.component.css +++ b/frontend/src/app/components/header/header.component.css @@ -50,11 +50,11 @@ padding: 15px 35px 0px 35px; position: relative; height: 40px; - color: rgba(0, 0, 0, 1); + color: #fff; } mat-icon { - color: #000; + color: #fff; width: 48px; height: 48px; line-height: 48px !important; @@ -72,7 +72,7 @@ a[hidden="true"] { font-size: 40px; line-height: 45px; font-weight: bold; - color: #000; + color: #fff; transition: color .3s linear; } diff --git a/frontend/src/app/components/header/header.component.html b/frontend/src/app/components/header/header.component.html index eef2053fbc..8f0c07d6c6 100644 --- a/frontend/src/app/components/header/header.component.html +++ b/frontend/src/app/components/header/header.component.html @@ -25,7 +25,7 @@ - +
-
+ + +
diff --git a/frontend/src/app/views/register/register.component.css b/frontend/src/app/views/register/register.component.css index 9ccb35fa67..a4e74b8372 100644 --- a/frontend/src/app/views/register/register.component.css +++ b/frontend/src/app/views/register/register.component.css @@ -22,7 +22,8 @@ align-content: center; } -form { +form, +.role-select-step { display: flex; flex-direction: column; /*width: 400px;*/ @@ -36,7 +37,7 @@ form { background: #fff; border-radius: 30px; width: 839px; - height: 653px; + /*height: 653px;*/ box-sizing: border-box; align-items: center; } @@ -46,6 +47,15 @@ form { font-size: 20px; color: #838383; padding-bottom: 20px; + display: flex; + cursor: pointer; +} + +.login-header mat-icon { + font-size: 30px; + position: relative; + top: -4px; + left: -10px; } .overlay { @@ -85,4 +95,30 @@ form ::ng-deep .mat-raised-button.mat-button-disabled.mat-button-disabled { mat-form-field { width: 653px; margin: 18px 0; +} + +.role-name { + display: block; + font-size: 20px; + font-weight: bold; + line-height: 23px; + color: #2F2F2F; +} + +.role-select-step { + height: auto; +} + +.role-select-step button:not(.close-button) { + height: 106px; + width: 90%; + border-radius: 53px; + margin: 12px 0; +} + +.role-description { + font-size: 20px; + font-weight: normal; + color: #2F2F2F; + line-height: 23px; } \ No newline at end of file diff --git a/frontend/src/app/views/register/register.component.html b/frontend/src/app/views/register/register.component.html index 4f309aa6c4..129238336b 100644 --- a/frontend/src/app/views/register/register.component.html +++ b/frontend/src/app/views/register/register.component.html @@ -1,8 +1,8 @@