Identity page new design

app/components/identity/blocked.hbs

@@ -0,0 +1,8 @@
+<div class='identity-box-heading' data-test-blocked-heading>Status Blocked</div>
+<div class='identity-box-desc' data-test-blocked-desc>The system failed to link
+  your profile service with the Identity service,
+  <span class='identity-box-desc-bold'>Please try again!</span></div>
+<button
+  class='identity-box-button'
+  data-test-blocked-button type="button" {{on 'click' (fn @setState 'step1')}}
+>Retry</button>

app/components/identity/get-started.hbs

@@ -0,0 +1,16 @@
+<div class='identity-box-heading' data-test-getStarted-heading>Qualification
+  Criteria</div>
+<div class='identity-box-desc' data-test-getStarted-desc>
+  To update your profile details, link your profile service URL with
+  RealDevSquad Service.<br />
+  <span class='identity-box-desc-bold'>Profile Service Template:</span>
+  <a
+    class='identity-box-desc-a'
+    target='_blank'
+    href='https://github.com/Real-Dev-Squad/sample-profile-service' rel="noopener noreferrer"
+  >https://github.com/Real-Dev-Squad/sample-profile-service</a>
+</div>
+<button
+  class='identity-box-button'
+  data-test-getStarted-button type="button" {{on 'click' (fn @setState 'step1')}}
+>Get Started</button>

app/components/identity/reload.hbs

@@ -0,0 +1,6 @@
+<div class='identity-box-heading' data-test-reload-heading>Status Pending</div>
+<div class='identity-box-desc' data-test-reload-desc>Reload to complete and
+  verify the link between Profile Service and RealDevSquad Service.</div>
+<button
+  class='identity-box-button' type="button" {{on 'click' this.handleReload}}
+>Reload</button>

app/components/identity/reload.js

@@ -0,0 +1,9 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class ReloadComponent extends Component {
+  @action async handleReload(e) {
+    e.preventDefault();
+    window.location.reload();
+  }
+}

app/components/identity/step1.hbs

@@ -0,0 +1,45 @@
+<div class='identity-box-heading' data-test-step1-heading>Step 1: Chaincode
+  Generation</div>
+<div class='identity-box-desc' data-test-step1-desc>A private key that you need
+  to use in your profile service URL and deploy for validation that you’re the
+  source of URL.</div>
+{{#if this.isChaincodeGenerated}}
+  <div class='identity-chaincode-copy-box'>
+    <div class='identity-chaincode-box' data-test-step1-chaincode>
+      {{if this.isChaincodeVisible this.chaincode '********************'}}
+      <img
+        class='identity-box-eye
+          {{if this.isChaincodeVisible "" "identity-box-eye-margin"}}'
+        alt={{if this.isChaincodeVisible 'closeeye' 'openeye'}}
+        src={{if
+          this.isChaincodeVisible
+          'identity/closeeye.svg'
+          'identity/openeye.svg'
+        }}
+        role="button"
+        {{on 'click' this.handleEyeClick}}
+        data-test-step1-eye
+      /></div>
+    <div class='identity-copy-box' role="button" {{on 'click' this.handleCopy}}>
+      <img alt='copy' src='identity/copy.svg' />
+      <div class='identity-copy-text'>Copy</div>
+    </div>
+  </div>
+{{else}}
+  <button
+    class='identity-box-button'
+    data-test-step1-button
+    type='button'
+    {{on 'click' this.handleGenerateChaincode}}
+  >{{#if this.isGeneratingChaincode}}<div class='loader'></div>{{else}}
+      Generate Chaincode
+    {{/if}}</button>
+{{/if}}
+{{#if this.isChaincodeGenerated}}
+  <button
+    class='identity-next-button'
+    data-test-step1-next-button
+    type='button'
+    {{on 'click' this.handleNext}}
+  >Next</button>
+{{/if}}

app/components/identity/step1.js

@@ -0,0 +1,79 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { toastNotificationTimeoutOptions } from '../../constants/toast-notification';
+import ENV from 'website-my/config/environment';
+
+const BASE_URL = ENV.BASE_API_URL;
+
+export default class Step1Component extends Component {
+  @tracked isChaincodeGenerated = false;
+  @tracked isGeneratingChaincode = false;
+  @tracked chaincode = 'asxjdDZVNTfuDMQJiunJ';
+  @tracked isChaincodeVisible = false;
+  @service toast;
+
+  @action handleNext() {
+    if (
+      confirm(
+        'Make sure you copied the chaincode as you are not able to see it again. If not, click `Cancel` and copy it.'
+      )
+    ) {
+      this.args.setState('step2');
+    }
+  }
+
+  @action handleEyeClick() {
+    this.isChaincodeVisible = !this.isChaincodeVisible;
+  }
+
+  @action handleCopy() {
+    navigator.clipboard.writeText(this.chaincode);
+    this.toast.info('Chaincode Copied!!', '', toastNotificationTimeoutOptions);
+  }
+
+  @action async handleGenerateChaincode(e) {
+    e.preventDefault();
+    if (this.isGeneratingChaincode === false) {
+      this.isGeneratingChaincode = true;
+      try {
+        const response = await fetch(`${BASE_URL}/users/chaincode`, {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          credentials: 'include',
+        });
+
+        const { chaincode } = await response.json();
+
+        if (response.ok) {
+          this.chaincode = chaincode;
+          this.isChaincodeGenerated = true;
+          this.toast.info(
+            'Generated New Chaincode!!',
+            '',
+            toastNotificationTimeoutOptions
+          );
+        } else {
+          console.log(response);
+          this.toast.error(
+            'Something went wrong. Please check console errors.',
+            '',
+            toastNotificationTimeoutOptions
+          );
+        }
+      } catch (error) {
+        console.log('error', error);
+        this.toast.error(
+          'Something went wrong. Please check console errors.',
+          '',
+          toastNotificationTimeoutOptions
+        );
+      } finally {
+        this.isGeneratingChaincode = false;
+      }
+    }
+  }
+}

app/components/identity/step2.hbs

@@ -0,0 +1,19 @@
+<div class='identity-box-heading' data-test-step2-heading>Step 2: Profile
+  Service URL</div>
+<div class='identity-box-desc' data-test-step2-desc>Set the chaincode on your
+  profile service, deploy it and enter your profile service URL.</div>
+<Input
+  @value={{this.profileURL}}
+  class='identity-box-input'
+  placeholder='E.g.: https://my-profile-service.com'
+  data-test-step2-input
+/>
+{{#if this.profileURL}}
+  <button
+    class='identity-next-button'
+    data-test-step2-next-button
+    type='button'
+    {{on 'click' this.handleNext}}
+  >
+    {{#if this.savingURL}}<div class='loader'></div>{{else}}Next{{/if}}</button>
+{{/if}}

app/components/identity/step2.js

@@ -0,0 +1,73 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { toastNotificationTimeoutOptions } from '../../constants/toast-notification';
+import ENV from 'website-my/config/environment';
+
+const BASE_URL = ENV.BASE_API_URL;
+
+export default class Step2Component extends Component {
+  @tracked profileURL = this.args.profileURL || '';
+  @tracked savingURL = false;
+  @service toast;
+
+  @action async handleNext() {
+    const isValidUrl = (str) => {
+      try {
+        const newUrl = new URL(str);
+        return newUrl.protocol === 'https:';
+      } catch (err) {
+        return false;
+      }
+    };
+    if (this.profileURL) {
+      if (isValidUrl(this.profileURL)) {
+        if (this.savingURL === false) {
+          if (this.profileURL === this.args.profileURL) {
+            this.args.setState('step3');
+            return;
+          }
+          this.savingURL = true;
+          try {
+            const response = await fetch(`${BASE_URL}/users/profileURL`, {
+              method: 'PATCH',
+              body: JSON.stringify({ profileURL: this.profileURL }),
+              headers: {
+                'Content-Type': 'application/json',
+              },
+              credentials: 'include',
+            });
+            if (response.ok) {
+              this.toast.info(
+                'Updated profile URL!!',
+                '',
+                toastNotificationTimeoutOptions
+              );
+              this.args.setState('step3');
+            } else {
+              this.toast.error(
+                'Something went wrong. Please check console errors.',
+                '',
+                toastNotificationTimeoutOptions
+              );
+            }
+          } catch (error) {
+            console.error(error);
+            this.toast.error(
+              'Something went wrong. Please check console errors.',
+              '',
+              toastNotificationTimeoutOptions
+            );
+          } finally {
+            this.savingURL = false;
+          }
+        }
+      } else {
+        alert(
+          'Invalid URL! Make sure you entered the correct https profile URL.'
+        );
+      }
+    }
+  }
+}

app/components/identity/step3.hbs

@@ -0,0 +1,13 @@
+<div class='identity-box-heading' data-test-step3-heading>Step 3: Link Profile
+  Service</div>
+<div class='identity-box-desc' data-test-step3-desc>Ensure that you have
+  deployed your profile service URL and after that link with the RealDevSquad
+  service.</div>
+<button
+  class='identity-box-button'
+  data-test-step3-button
+  type='button'
+  {{on 'click' this.handleLink}}
+>{{#if this.linking}} <div class='loader'></div>{{else}}
+    Link
+  {{/if}}</button>

app/components/identity/step3.js

@@ -0,0 +1,57 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { toastNotificationTimeoutOptions } from '../../constants/toast-notification';
+import ENV from 'website-my/config/environment';
+
+const BASE_URL = ENV.BASE_API_URL;
+
+export default class Step3Component extends Component {
+  @tracked linking = false;
+  @service toast;
+
+  @action async handleLink(e) {
+    e.preventDefault();
+    if (
+      this.linking === false &&
+      confirm(
+        'Make sure to set the chaincode and re-deploy your profile service before linking.'
+      )
+    ) {
+      this.linking = true;
+      try {
+        const response = await fetch(`${BASE_URL}/users/verify`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          credentials: 'include',
+        });
+
+        if (response.ok) {
+          this.toast.info(
+            'Your linking request has been queued successfully',
+            '',
+            toastNotificationTimeoutOptions
+          );
+          this.args.setState('reload');
+        } else {
+          this.toast.error(
+            'Something went wrong. Please check console errors.',
+            '',
+            toastNotificationTimeoutOptions
+          );
+        }
+      } catch (error) {
+        this.toast.error(
+          'Something went wrong. Please check console errors.',
+          '',
+          toastNotificationTimeoutOptions
+        );
+      } finally {
+        this.linking = false;
+      }
+    }
+  }
+}

app/components/identity/verified.hbs

@@ -0,0 +1,6 @@
+<div class='identity-box-heading' data-test-verified-heading>Verified</div>
+<div class='identity-box-desc' data-test-verified-desc><span
+    class='identity-box-desc-bold'
+  >Congratulations!!!</span>
+  You did it, go ahead and tell in the community that you verified your profile
+  service.</div>

app/controllers/identity.js

@@ -11,6 +11,7 @@ const BASE_URL = ENV.BASE_API_URL;
 
 export default class IdentityController extends Controller {
   @service toast;
+  @service router;
   @tracked isEditClicked = false;
   @tracked isGenerateChaincodeClicked = false;
   @tracked isChecked = false;
@@ -25,6 +26,30 @@ export default class IdentityController extends Controller {
     this.generateChainCodeDisabled || this.model.chaincode === undefined;
   @tracked identityError = '';
 
+  get intialState() {
+    if (this.model.profileStatus === 'PENDING') {
+      return 'reload';
+    } else if (this.model.profileStatus === 'VERIFIED') {
+      return 'verified';
+    } else if (this.model.profileStatus === 'BLOCKED') {
+      return 'blocked';
+    }
+    return 'getStarted';
+  }
+
+  get isDev() {
+    if (this.router.currentRoute) {
+      return this.router.currentRoute.queryParams.dev;
+    }
+    return false;
+  }
+
+  @tracked state = this.intialState;
+
+  @action setState(value) {
+    this.state = value;
+  }
+
   @action async handleRefresh() {
     window.location.reload();
   }

app/router.js

@@ -13,6 +13,7 @@ Router.map(function () {
   this.route('tasks');
   this.route('profile');
   this.route('identity');
+  this.route('new-identity');
   this.route('404', { path: '/*' });
   this.route('discord');
   this.route('mobile');