[My Site Migration] Identity Linking step1 page

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/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
+          '/assets/images/identity/closeeye.svg'
+          '/assets/images/identity/openeye.svg'
+        }}
+        role="button"
+        {{on 'click' this.handleEyeClick}}
+        data-test-step1-eye
+      /></div>
+    <button class='identity-copy-box' type="button" {{on 'click' this.handleCopy}}>
+      <img alt='copy' src='/assets/images/identity/copy.svg' />
+      <div class='identity-copy-text'>Copy</div>
+    </button>
+  </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,78 @@
+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 { APPS } from '../../constants/urls';
+const BASE_URL = APPS.API_BACKEND;
+
+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/controllers/identity.js

@@ -0,0 +1,33 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class IdentityController extends Controller {
+  @service login;
+
+  @tracked userData = null;
+  @tracked state = 'getStarted';
+
+  constructor() {
+    super(...arguments);
+    this.userData = this.login.userData;
+    this.state = this.initialState;
+  }
+
+  get initialState() {
+    if (this.userData?.profileStatus === 'PENDING') {
+      return 'reload';
+    } else if (this.userData?.profileStatus === 'VERIFIED') {
+      return 'verified';
+    } else if (this.userData?.profileStatus === 'BLOCKED') {
+      return 'blocked';
+    }
+    return 'getStarted';
+  }
+
+  @action
+  setState(newState) {
+    this.state = newState;
+  }
+}

app/router.js

@@ -17,4 +17,5 @@ Router.map(function () {
   this.route('debug');
   this.route('subscribe');
   this.route('login');
+  this.route('identity');
 });

app/routes/identity.js

@@ -0,0 +1,11 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+export default class IdentityRoute extends Route {
+  @service router;
+
+  beforeModel(transition) {
+    if (transition?.to?.queryParams?.dev !== 'true') {
+      this.router.transitionTo('/page-not-found');
+    }
+  }
+}

app/styles/app.css

@@ -44,6 +44,7 @@
 @import url("subscribe.module.css");
 @import url("phone-input.module.css");
 @import url("login.module.css");
+@import url("identity.module.css");
 
 * {
   margin: 0;