diff --git a/app/components/identity/blocked.hbs b/app/components/identity/blocked.hbs
new file mode 100644
index 00000000..1a3d68fe
--- /dev/null
+++ b/app/components/identity/blocked.hbs
@@ -0,0 +1,8 @@
+
Status Blocked
+
The system failed to link
+ your profile service with the Identity service,
+ Please try again!
+
\ No newline at end of file
diff --git a/app/components/identity/verified.hbs b/app/components/identity/verified.hbs
new file mode 100644
index 00000000..ebad1442
--- /dev/null
+++ b/app/components/identity/verified.hbs
@@ -0,0 +1,6 @@
+
Verified
+
Congratulations!!!
+ You did it, go ahead and tell in the community that you verified your profile
+ service.
\ No newline at end of file
diff --git a/app/templates/identity.hbs b/app/templates/identity.hbs
index a9511781..ebe9143f 100644
--- a/app/templates/identity.hbs
+++ b/app/templates/identity.hbs
@@ -25,6 +25,8 @@
{{else if (eq this.state 'reload')}}
+ {{else if (eq this.state 'verified')}}
+
{{/if}}
diff --git a/tests/integration/components/identity/get-started.js b/tests/integration/components/identity/get-started.js
new file mode 100644
index 00000000..05de06db
--- /dev/null
+++ b/tests/integration/components/identity/get-started.js
@@ -0,0 +1,52 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'website-www/tests/helpers';
+import { render, click } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | identity/get-started', function (hooks) {
+ setupRenderingTest(hooks);
+
+ test('it renders the get started component correctly', async function (assert) {
+ this.set('setState', () => {});
+ await render(hbs`
+
+ `);
+
+ assert.dom('[data-test-getStarted-heading]').exists();
+ assert
+ .dom('[data-test-getStarted-heading]')
+ .hasText('Qualification Criteria');
+
+ assert.dom('[data-test-getStarted-desc]').exists();
+ assert
+ .dom('[data-test-getStarted-desc]')
+ .containsText('To update your profile details');
+ assert
+ .dom('[data-test-getStarted-desc] a')
+ .hasAttribute(
+ 'href',
+ 'https://github.com/Real-Dev-Squad/sample-profile-service',
+ );
+
+ assert.dom('[data-test-getStarted-button]').exists();
+ assert.dom('[data-test-getStarted-button]').hasText('Get Started');
+ });
+
+ test('clicking get started button triggers setState action with step1', async function (assert) {
+ assert.expect(1);
+
+ this.set('setState', (state) => {
+ assert.strictEqual(
+ state,
+ 'step1',
+ 'setState action is called with step1',
+ );
+ });
+
+ await render(hbs`
+
+ `);
+
+ await click('[data-test-getStarted-button]');
+ });
+});
diff --git a/tests/integration/components/identity/step1.js b/tests/integration/components/identity/step1.js
new file mode 100644
index 00000000..197c5b4b
--- /dev/null
+++ b/tests/integration/components/identity/step1.js
@@ -0,0 +1,71 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'website-www/tests/helpers';
+import { render, click, waitFor } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | identity/step1', function (hooks) {
+ setupRenderingTest(hooks);
+
+ test('it renders the initial state correctly', async function (assert) {
+ this.set('setState', () => {});
+ await render(hbs``);
+
+ assert
+ .dom('[data-test-step1-heading]')
+ .hasText('Step 1: Chaincode Generation');
+ assert.dom('[data-test-step1-desc]').exists();
+ assert.dom('[data-test-step1-button]').hasText('Generate Chaincode');
+ assert.dom('[data-test-step1-next-button]').doesNotExist();
+ });
+
+ test('it handles chaincode generation', async function (assert) {
+ this.set('setState', () => {});
+ await render(hbs``);
+
+ await click('[data-test-step1-button]');
+ await waitFor('.identity-chaincode-box');
+
+ assert.dom('[data-test-step1-chaincode]').hasText('********************');
+ assert.dom('[data-test-step1-next-button]').exists();
+ assert.dom('[data-test-step1-button]').doesNotExist();
+ });
+
+ test('it toggles chaincode visibility', async function (assert) {
+ this.set('setState', () => {});
+ await render(hbs``);
+
+ await click('[data-test-step1-button]');
+ await waitFor('.identity-chaincode-box');
+
+ const initialText = await document
+ .querySelector('[data-test-step1-chaincode]')
+ .textContent.trim();
+ await click('[data-test-step1-eye]');
+ const visibleText = await document
+ .querySelector('[data-test-step1-chaincode]')
+ .textContent.trim();
+
+ assert.notEqual(
+ initialText,
+ visibleText,
+ 'Chaincode visibility should toggle',
+ );
+ assert.notEqual(
+ visibleText,
+ '********************',
+ 'Chaincode should be visible',
+ );
+ });
+
+ test('it handles next button click', async function (assert) {
+ let nextClicked = false;
+ this.set('setState', () => (nextClicked = true));
+ await render(hbs``);
+
+ await click('[data-test-step1-button]');
+ await waitFor('[data-test-step1-next-button]');
+ await click('[data-test-step1-next-button]');
+
+ assert.true(nextClicked, 'Next button should trigger setState');
+ });
+});