[My Site Migration] migration of profile page [PR-3]

app/components/button.hbs

@@ -0,0 +1,12 @@
+<button
+  data-test-btn={{@data-test-btn}}
+  type='button'
+  class={{if @disabled (concat @class ' btn-disabled') @class}}
+  disabled={{@disabled}}
+  {{on 'click' @onClick}}
+>
+  {{#if @isLoading}}
+    <i class='fa fa-spinner fa-spin' data-test-button-spinner></i>
+  {{/if}}
+  {{yield}}
+</button>

app/components/header.hbs

@@ -140,7 +140,7 @@
     </a>
     <a
       data-test-dropdown-profile
-      href={{this.PROFILE_URL}}
+      href={{if @dev "/profile?dev=true" this.PROFILE_URL}}
       class="menu__link"
       rel="noopener noreferrer"
       target="_blank"

app/components/profile/image-cropper.hbs

@@ -0,0 +1,10 @@
+<div class='image-cropper-container'>
+  <img
+    data-test-image-cropper
+    class='image-cropper'
+    id='image-cropper'
+    alt='Cropper'
+    src={{this.image}}
+    onload={{this.loadCropper}}
+  />
+</div>

app/components/profile/image-cropper.js

@@ -0,0 +1,38 @@
+import Component from '@glimmer/component';
+import Cropper from 'cropperjs';
+import { action } from '@ember/object';
+
+export default class ImageCropperComponent extends Component {
+  get image() {
+    if (this.cropper) {
+      this.cropper.destroy();
+    }
+    return this.args.image;
+  }
+
+  @action loadCropper() {
+    const image = document.getElementById('image-cropper');
+    this.cropper = new Cropper(image, {
+      autoCrop: true,
+      viewMode: 1,
+      dragMode: 'crop',
+      aspectRatio: 1,
+      cropBoxResizable: true,
+      movable: false,
+      zoomOnWheel: false,
+      rotatable: false,
+      toggleDragModeOnDblclick: false,
+      ready: () => {
+        this.setImageData();
+      },
+      cropend: () => {
+        this.setImageData();
+      },
+    });
+  }
+
+  setImageData() {
+    const { x, y, width, height } = this.cropper.getData(true);
+    this.args.setImageCoordinates({ x, y, width, height });
+  }
+}

app/components/profile/profile-field.hbs

@@ -0,0 +1,23 @@
+<section data-test-profile-field class={{if @showError 'profile-field profile-field-error' 'profile-field'}}>
+  <label data-test-profile-field-label class='profile-field-label' for={{@id}}>{{@label}}</label>
+  <div class="profile-field-input-container">
+    <img data-test-profile-field-icon src={{@icon_url}} alt="">
+    <Input 
+      data-test-profile-field-input
+      @type="text" 
+      id={{@id}}
+      @value={{@value}}
+      placeholder={{@placeholder}} 
+      class="profile-field-input"
+      required={{@required}}
+      disabled={{@isDeveloper}}
+      {{on 'input' this.inputFieldChanged}}
+      {{on 'blur' this.checkInputValidation}}
+    />
+  </div>
+  {{#if @showError}}
+  <p data-test-profile-field-error class="profile-field-error-message">
+    {{@errorMessage}}
+  </p>
+  {{/if}}
+</section>

app/components/profile/profile-field.js

@@ -0,0 +1,20 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class ProfileFieldComponent extends Component {
+  @action
+  inputFieldChanged(event) {
+    const { id, onChange } = this.args;
+    const value = event.target.value;
+
+    onChange(id, value);
+  }
+
+  @action
+  checkInputValidation(event) {
+    const { id, onBlur } = this.args;
+    let isValid = event.target.validity.valid;
+
+    onBlur(id, isValid);
+  }
+}

app/components/profile/upload-image.hbs

@@ -0,0 +1,78 @@
+{{#if this.isImageSelected}}
+  <h1 class="image-h1">
+    Crop Selected Image
+  </h1>
+
+  <Profile::ImageCropper
+    @image={{this.image}}
+    @setImageCoordinates={{this.setImageCoordinates}}
+  />
+  <div>
+    <button
+      class='image-form__button btn'
+      type='button'
+      disabled={{this.isImageUploading}}
+      data-test-btn='back'
+      {{on 'click' this.goBack}}
+    >
+      Back
+    </button>
+    <button
+      class='image-form__button btn'
+      type='button'
+      data-test-btn='upload-image'
+      disabled={{this.isImageUploading}}
+      {{on 'click' this.onSubmit}}
+    >
+      {{#if this.isImageUploading}}
+        <Spinner />
+      {{else}}
+        Upload
+      {{/if}}
+    </button>
+  </div>
+  <p
+    class='{{if
+        this.imageUploadSuccess
+        "message-text__success"
+        "message-text__failure"
+      }}'
+  >
+    {{this.statusMessage}}
+  </p>
+
+{{else}}
+  <h1 class="image-h1">
+    Upload Image
+  </h1>
+  <p class="image-p">( Max size 2MB )</p>
+  <div
+    data-test-drop-area
+    class='drop-area {{if this.overDropZone "drop-area__highlight"}}'
+    {{on 'drop' this.handleDrop}}
+    {{on 'dragover' this.handleDragOver}}
+    {{on 'dragenter' this.handleDragEnter}}
+    {{on 'dragleave' this.handleDragLeave}}
+  >
+    <form class='image-form'>
+      <p class='image-form__text'>
+        Drag and drop file here or
+      </p>
+      <label
+        class='image-form__button btn
+          {{if this.isImageUploading "image-form__button--disabled"}}'
+        for='image'
+        data-test-btn='browse'
+      >
+        Browse
+      </label>
+      <input
+        class='image-form__input'
+        type='file'
+        id='image'
+        accept='image/png, image/jpeg'
+        {{on 'change' this.handleBrowseImage}}
+      />
+    </form>
+  </div>
+{{/if}}

app/components/profile/upload-image.js

@@ -0,0 +1,145 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { TOAST_OPTIONS } from '../../constants/toast-options';
+import { inject as service } from '@ember/service';
+
+export default class UploadImageComponent extends Component {
+  formData;
+  @service toast;
+  @service router;
+  @tracked image;
+  @tracked isImageSelected = false;
+  @tracked overDropZone = false;
+  @tracked isImageUploading = false;
+  @tracked imageUploadSuccess = false;
+  @tracked statusMessage;
+  @tracked imageFileName;
+  imageCoordinates = null;
+  uploadUrl = this.args.uploadUrl;
+  formKeyName = this.args.formKeyName;
+
+  @action goBack() {
+    this.image = null;
+    this.setImageSelected(false);
+  }
+  @action updateImage(file) {
+    this.setStatusMessage('');
+    const reader = new FileReader();
+
+    if (file) {
+      this.updateFormData(file, this.formKeyName);
+      reader.readAsDataURL(file);
+      this.imageFileName = file.name;
+    }
+    reader.onload = () => {
+      const image = reader.result;
+      this.image = image;
+    };
+  }
+
+  @action setImageCoordinates(data) {
+    this.imageCoordinates = data;
+  }
+
+  @action handleBrowseImage(e) {
+    const [file] = e.target.files;
+    this.updateImage(file);
+    this.setImageSelected(true);
+  }
+
+  @action handleDrop(e) {
+    this.preventDefaults(e); // This is used to prevent opening of image in new tab while drag and drop
+    const [file] = e.dataTransfer.files;
+    this.updateImage(file);
+    this.setImageSelected(true);
+    this.setOverDropZone(false);
+  }
+  @action handleDragOver(e) {
+    this.preventDefaults(e);
+    this.setOverDropZone(true);
+    e.dataTransfer.dropEffect = 'move';
+  }
+  @action handleDragEnter(e) {
+    this.preventDefaults(e);
+    this.setOverDropZone(true);
+  }
+  @action handleDragLeave(e) {
+    this.preventDefaults(e);
+    this.setOverDropZone(false);
+  }
+
+  @action onSubmit(e) {
+    this.preventDefaults(e);
+    this.formData.set('coordinates', JSON.stringify(this.imageCoordinates));
+    this.uploadImage(this.formData);
+  }
+
+  uploadImage(data) {
+    const url = this.uploadUrl;
+    this.setImageUploading(true);
+    fetch(`${url}`, {
+      method: 'POST',
+      credentials: 'include',
+      body: data,
+    })
+      .then(async (res) => {
+        const status = res.status;
+        const data = await res.json();
+        const message = data.message;
+        this.handleResponseStatusMessage(status, message);
+      })
+      .catch((err) => {
+        this.setImageUploadSuccess(false);
+        this.setStatusMessage(
+          'Error occured, please try again and if the issue still exists contact administrator and create a issue on the repo with logs',
+        );
+        console.error(err);
+      })
+      .finally(() => {
+        this.setImageUploading(false);
+      });
+  }
+
+  updateFormData(file, key) {
+    const formData = new FormData();
+    formData.append(key, file);
+    this.formData = formData;
+  }
+
+  handleResponseStatusMessage(status, message) {
+    if (status === 200) {
+      this.setImageUploadSuccess(true);
+      this.args.outsideClickModel();
+      this.toast.success(message, '', TOAST_OPTIONS);
+    } else {
+      this.setImageUploadSuccess(false);
+      this.setStatusMessage(message);
+    }
+  }
+
+  preventDefaults(e) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  setOverDropZone(bool) {
+    this.overDropZone = bool;
+  }
+
+  setImageSelected(bool) {
+    this.isImageSelected = bool;
+  }
+
+  setImageUploading(bool) {
+    this.isImageUploading = bool;
+  }
+
+  setImageUploadSuccess(bool) {
+    this.imageUploadSuccess = bool;
+  }
+
+  setStatusMessage(message) {
+    this.statusMessage = message;
+  }
+}

app/components/spinner.hbs

@@ -0,0 +1 @@
+<i class="fa fa-spinner fa-spin"></i>

app/index.html

@@ -12,6 +12,7 @@
   <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css" />
   <link integrity="" rel="stylesheet" href="{{rootURL}}assets/website-www.css" />
   <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400..900&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
   <link
   rel="stylesheet"
   href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css"

app/styles/app.css

@@ -43,11 +43,11 @@
 @import url("unauthenticated.module.css");
 @import url("subscribe.module.css");
 @import url("phone-input.module.css");
-@import url("profile.css");
 @import url("404.css");
 @import url("image-upload.css");
 @import url("login.module.css");
 @import url("identity.module.css");
+@import url("profile.css");
 @import url("discord.module.css");
 
 * {