feat: add step2 on identity linking page

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> 
+<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/controllers/identity.js

@@ -8,11 +8,12 @@ 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,30 @@
   bottom: 8%;
 }
 
+.identity-box-input {
+  border: 1px solid rgb(0 0 0 / 50%);
+  background: #fff;
+  width: 50%;
+  margin-top: 16px;
+  padding: 8px;
+  color: #0000af;
+  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: #808080;
+  font-family: Inter, sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
 @media (width <= 460px) {
   .identity-box-input {
     width: 90%;

app/templates/identity.hbs

@@ -16,6 +16,11 @@
       <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}}
+      />
     {{/if}}
   </div>