Dev to Main Sync

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
+          '/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/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/components/join-section.hbs

@@ -34,8 +34,20 @@
       @route='index'
       class='join__link join__link--new'
       @disabled={{true}}
-    >Join the Squad</LinkTo>
+    >
+      Join the Squad
+    </LinkTo>
+
+    {{!-- NOTE: This has the new code on feature flag off --}}
+    {{!-- If something goes wrong, we can enable a flag to restore previous behaviour --}}
+    {{!-- TODO: Clean up by Jan, 2025 --}}
     <p data-test-join-later-text class='join__later-text'>
-      We're currently not accepting new applications. Please come back later.</p>
+      {{#if this.isDevMode}}
+      We're currently not accepting new applications. Please come back later.
+      {{else}}
+      <NoticeForJoining />
+      {{/if}}
+    </p>
+
   </section>
-{{/if}}
+{{/if}}

app/components/notice-for-joining.hbs

@@ -0,0 +1 @@
+We're currently not accepting new applications. Please come back later.

app/controllers/identity.js

@@ -0,0 +1,35 @@
+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';
+  @tracked profileURL = null;
+
+  constructor() {
+    super(...arguments);
+    this.userData = this.login.userData;
+    this.state = this.initialState;
+    this.profileURL = this.userData?.profileURL;
+  }
+
+  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;
+  }
+}