Disable profile page for developers

app/components/profile-field.hbs

@@ -10,6 +10,7 @@
       placeholder={{@placeholder}} 
       class="profile-field-input"
       required={{@required}}
+      disabled={{@isDeveloper}}
       {{on 'input' (fn this.inputFieldChanged)}}
       {{on 'blur' (fn this.checkInputValidation)}}
     />

app/routes/profile.js

@@ -8,13 +8,18 @@ export default class ProfileRoute extends Route {
   @service toast;
   async model() {
     try {
+      const res = await fetch(`${ENV.BASE_API_URL}/users/isDeveloper`, {
+        credentials: 'include',
+      });
+      const { developerRoleExistsOnUser } = await res.json();
       const response = await fetch(`${ENV.BASE_API_URL}/users/self`, {
         credentials: 'include',
       });
       const userData = await response.json();
       if (response.status === 401) {
         throw new Error('You are not logged in. Please login to continue.');
       }
+      userData.isDeveloper = developerRoleExistsOnUser;
       return userData;
     } catch (error) {
       console.error(error.message);

app/styles/profile.css

@@ -39,13 +39,24 @@
   border-color: var(--profile-input-outline-clr);
 }
 
+.profile-page-error {
+  text-align: center; 
+  color: red;
+}
+
 .profile-field-input {
   padding: 0 1.25rem;
   border: none;
   background: none;
   outline: none;
 }
 
+.profile-field-input:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
 .profile-field-input:active {
   border-color: var(--profile-input-outline-clr);
 }

app/templates/profile.hbs

@@ -1,35 +1,58 @@
 {{page-title 'Profile'}}
 
-<div class="profile-container">
-  <form class="profile-form" {{on 'submit' (fn this.handleSubmit)}}>
+<div class='profile-container'>
+  <form class='profile-form' {{on 'submit' (fn this.handleSubmit)}}>
     <div class='picture_container'>
       {{#if @model.picture.url}}
-      <img class='user__pic' src={{@model.picture.url}} alt='user profile ' />
+        <img class='user__pic' src={{@model.picture.url}} alt='user profile ' />
       {{else}}
-      <img class='user__pic' src={{'dummyProfilePicture.png'}} alt='user profile ' />
+        <img
+          class='user__pic'
+          src={{'dummyProfilePicture.png'}}
+          alt='user profile '
+        />
       {{/if}}
-      <Button @onClick={{this.handleShowEditProfilePictureModal}} @class='edit-btn btn' @data-test-btn='edit'>
+      <Button
+        @onClick={{this.handleShowEditProfilePictureModal}}
+        @class='edit-btn btn'
+        @data-test-btn='edit'
+      >
         Update Picture
       </Button>
     </div>
     <div class='profile-form-grid'>
+      {{#if (get @model 'isDeveloper')}}
+        <p class='profile-page-error'>You can't update the profile data from UI.
+          You have to create a profile service(if not created yet). Find more
+          details about profile service
+          <a
+            href='https://github.com/Real-Dev-Squad/sample-profile-service'
+            target='_blank'
+            rel="noopener noreferrer"
+          >here</a>.</p>
+      {{/if}}
       {{#each this.fields as |field|}}
-        <ProfileField 
-          @id={{field.id}} 
+        <ProfileField
+          @id={{field.id}}
           @type={{field.type}}
           @value={{get @model field.id}}
-          @placeholder={{field.placeholder}} 
+          @placeholder={{field.placeholder}}
           @label={{field.label}}
-          @icon_url={{field.icon_url}} 
+          @icon_url={{field.icon_url}}
           @errorMessage={{field.errorMessage}}
           @showError={{field.showError}}
           @required={{field.required}}
           @onChange={{this.handleFieldChange}}
           @onBlur={{this.handleFieldValidation}}
+          @isDeveloper={{get @model 'isDeveloper'}}
         />
       {{/each}}
     </div>
-    <button type="submit" class="profile-form-submit" disabled={{this.isSubmitDisabled}}>Submit</button>
+    <button
+      type='submit'
+      class='profile-form-submit'
+      disabled={{this.isSubmitDisabled}}
+    >Submit</button>
   </form>
 </div>
 

tests/integration/components/profile-field-test.js

@@ -44,4 +44,58 @@ module('Integration | Component | profile-field', function (hooks) {
     assert.dom('[data-test-profile-field]').hasClass('profile-field-error');
     assert.dom('[data-test-profile-field-error]').hasText(this.errorMessage);
   });
+
+  test('disabled profile field renders when isDeveloper is true', async function (assert) {
+    this.setProperties({
+      label: 'First Name*',
+      icon_url: 'icons/user.svg',
+      isDeveloper: true,
+    });
+
+    await render(hbs`
+      <ProfileField 
+        @label={{this.label}} 
+        @icon_url={{this.icon_url}}
+        @isDeveloper={{this.isDeveloper}}
+      />
+    `);
+
+    assert.dom('[data-test-profile-field-label]').hasText(this.label);
+    assert
+      .dom('[data-test-profile-field-icon]')
+      .exists()
+      .hasAttribute('src', this.icon_url);
+    assert
+      .dom('[data-test-profile-field-input]')
+      .hasProperty('disabled', true)
+      .exists();
+    assert.dom('[data-test-profile-field-error]').exists();
+  });
+
+  test('profile field renders when isDeveloper is false', async function (assert) {
+    this.setProperties({
+      label: 'First Name*',
+      icon_url: 'icons/user.svg',
+      isDeveloper: false,
+    });
+
+    await render(hbs`
+      <ProfileField 
+        @label={{this.label}} 
+        @icon_url={{this.icon_url}}
+        @isDeveloper={{this.isDeveloper}}
+      />
+    `);
+
+    assert.dom('[data-test-profile-field-label]').hasText(this.label);
+    assert
+      .dom('[data-test-profile-field-icon]')
+      .exists()
+      .hasAttribute('src', this.icon_url);
+    assert
+      .dom('[data-test-profile-field-input]')
+      .hasProperty('disabled', false)
+      .exists();
+    assert.dom('[data-test-profile-field-error]').exists();
+  });
 });