[My Site Migration] Identity Linking step2,3 page

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/step2.hbs

@@ -0,0 +1,21 @@
+<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>
+<label class="identity-box-input-label"> 
+<Input
+  @value={{this.profileURL}}
+  class='identity-box-input'
+  placeholder='E.g.: https://my-profile-service.com'
+  data-test-step2-input
+/>
+</label>
+{{#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 { APPS } from '../../constants/urls';
+
+const BASE_URL = APPS.API_BACKEND;
+
+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 { APPS } from '../../constants/urls';
+
+const BASE_URL = APPS.API_BACKEND;
+
+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/controllers/identity.js

@@ -8,11 +8,13 @@ export default class IdentityController extends Controller {
 
   @tracked userData = null;
   @tracked state = 'getStarted';
+  @tracked profileURL = null;
 
   constructor() {
     super(...arguments);
     this.userData = this.login.userData;
     this.state = this.initialState;
+    this.profileURL = this.userData?.profileURL;
   }
 
   get initialState() {

app/styles/identity.module.css

@@ -230,6 +230,37 @@
   bottom: 8%;
 }
 
+.identity-box-input {
+  border: 1px solid var(--color-black-50);
+  background: var(--color-white);
+  width: 50%;
+  margin-top: 16px;
+  padding: 8px;
+  color: var(--color-navy-link);
+  font-family: Inter, sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  border-radius: 8px;
+}
+
+.identity-box-input::placeholder {
+  color: var(--color-darkgrey);
+  font-family: Inter, sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.identity-box-input-label {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+
 @media (width <= 460px) {
   .identity-box-input {
     width: 90%;

app/templates/identity.hbs

@@ -16,6 +16,15 @@
       <Identity::GetStarted @setState={{this.setState}} />
     {{else if (eq this.state 'step1')}}
       <Identity::Step1 @setState={{this.setState}} />
+    {{else if (eq this.state 'step2')}}
+      <Identity::Step2
+        @setState={{this.setState}}
+        @profileURL={{this.profileURL}}
+      />
+    {{else if (eq this.state 'step3')}}
+      <Identity::Step3 @setState={{this.setState}} />
+     {{else if (eq this.state 'reload')}}
+      <Identity::Reload />
     {{/if}}
   </div>