From 641f252aa7825dbb48aed22c91543929ed9a2175 Mon Sep 17 00:00:00 2001
From: Michael Chadwick <michael.chadwick@gmail.com>
Date: Fri, 6 Dec 2024 15:13:02 -0800
Subject: [PATCH] wip versions of new UserProfileBioDetails and
 UserProfileBioManager components

---
 .../components/user-profile-bio-details.hbs   | 135 ++++++++
 .../components/user-profile-bio-details.js    |  35 +++
 .../components/user-profile-bio-manager.hbs   | 289 ++++++++++++++++++
 .../components/user-profile-bio-manager.js    |  36 +++
 4 files changed, 495 insertions(+)
 create mode 100644 packages/frontend/app/components/user-profile-bio-details.hbs
 create mode 100644 packages/frontend/app/components/user-profile-bio-details.js
 create mode 100644 packages/frontend/app/components/user-profile-bio-manager.hbs
 create mode 100644 packages/frontend/app/components/user-profile-bio-manager.js

diff --git a/packages/frontend/app/components/user-profile-bio-details.hbs b/packages/frontend/app/components/user-profile-bio-details.hbs
new file mode 100644
index 0000000000..5ba2fcea34
--- /dev/null
+++ b/packages/frontend/app/components/user-profile-bio-details.hbs
@@ -0,0 +1,135 @@
+{{#let (unique-id) as |templateId|}}
+  <div class="form">
+    <div
+      class="item {{if (includes 'firstName' this.updatedFieldsFromSync) 'synced-from-directory'}}"
+      data-test-firstname
+    >
+      <label for="firstname-{{templateId}}">
+        {{t "general.firstName"}}:
+      </label>
+      <span class="value">
+        {{@user.firstName}}
+      </span>
+    </div>
+    <div class="item" data-test-middlename>
+      <label for="middlename-{{templateId}}">
+        {{t "general.middleName"}}:
+      </label>
+      <span class="value">
+        {{@user.middleName}}
+      </span>
+    </div>
+    <div
+      class="item {{if (includes 'lastName' this.updatedFieldsFromSync) 'synced-from-directory'}}"
+      data-test-lastname
+    >
+      <label for="lastname-{{templateId}}">
+        {{t "general.lastName"}}:
+      </label>
+      <span class="value">
+        {{@user.lastName}}
+      </span>
+    </div>
+    <div
+      class="item
+        {{if (includes 'campusId' this.updatedFieldsFromSync) 'synced-from-directory'}}
+        campus-id"
+      data-test-campus-id
+    >
+      <label for="campus-id-{{templateId}}">
+        {{t "general.campusId"}}:
+      </label>
+      <span class="value">
+        {{@user.campusId}}
+      </span>
+    </div>
+    <div class="item" data-test-other-id>
+      <label for="other-id-{{templateId}}">
+        {{t "general.otherId"}}:
+      </label>
+      <span class="value">
+        {{@user.otherId}}
+      </span>
+    </div>
+    <div
+      class="item {{if (includes 'email' this.updatedFieldsFromSync) 'synced-from-directory'}}"
+      data-test-email
+    >
+      <label for="email-{{templateId}}">
+        {{t "general.email"}}:
+      </label>
+      <span class="value">
+        {{@user.email}}
+      </span>
+    </div>
+    <div
+      class="item
+        {{if (includes 'displayName' this.updatedFieldsFromSync) 'synced-from-directory'}}"
+      data-test-displayname
+    >
+      <label for="displayname-{{templateId}}">
+        {{t "general.displayName"}}:
+      </label>
+      <span class="value">
+        {{@user.displayName}}
+      </span>
+    </div>
+    <div
+      class="item {{if (includes 'pronouns' this.updatedFieldsFromSync) 'synced-from-directory'}}"
+      data-test-pronouns
+    >
+      <label for="pronouns-{{templateId}}">
+        {{t "general.pronouns"}}:
+      </label>
+      <span class="value">
+        {{@user.pronouns}}
+      </span>
+    </div>
+    <div
+      class="item
+        {{if (includes 'preferredEmail' this.updatedFieldsFromSync) 'synced-from-directory'}}"
+      data-test-preferred-email
+    >
+      <label for="preferred-email-{{templateId}}">
+        {{t "general.preferredEmail"}}:
+      </label>
+      <span class="value">
+        {{@user.preferredEmail}}
+      </span>
+    </div>
+    <div
+      class="item {{if (includes 'phone' this.updatedFieldsFromSync) 'synced-from-directory'}}"
+      data-test-phone
+    >
+      <label for="phone-{{templateId}}">
+        {{t "general.phone"}}:
+      </label>
+      <span class="value">
+        {{@user.phone}}
+      </span>
+    </div>
+    <div
+      class="item {{if (includes 'username' this.updatedFieldsFromSync) 'synced-from-directory'}}"
+      data-test-username
+    >
+      <label for="username-{{templateId}}">
+        {{t "general.username"}}:
+      </label>
+      <span class="value">
+        {{this.userAuthentication.username}}
+      </span>
+    </div>
+    {{#if this.canEditUsernameAndPassword}}
+      <div class="item password" data-test-password>
+        <label for="password-{{templateId}}">
+          {{t "general.password"}}:
+        </label>
+        <span class="value">
+          {{#if this.userAuthentication.username}}
+            *********
+          {{/if}}
+        </span>
+      </div>
+    {{/if}}
+  </div>
+{{/let}}
\ No newline at end of file
diff --git a/packages/frontend/app/components/user-profile-bio-details.js b/packages/frontend/app/components/user-profile-bio-details.js
new file mode 100644
index 0000000000..6590ef33df
--- /dev/null
+++ b/packages/frontend/app/components/user-profile-bio-details.js
@@ -0,0 +1,35 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+// import { action } from '@ember/object';
+// import { service } from '@ember/service';
+// import { TrackedAsyncData } from 'ember-async-data';
+
+export default class UserProfileBioDetailsComponent extends Component {
+  @tracked firstName;
+  @tracked middleName;
+  @tracked lastName;
+  @tracked campusId;
+  @tracked otherId;
+  @tracked email;
+  @tracked displayName;
+  @tracked pronouns;
+  @tracked preferredEmail;
+  @tracked phone;
+  @tracked username;
+  @tracked password;
+
+  constructor() {
+    super(...arguments);
+
+    this.firstName = this.args.user.firstName;
+    this.middleName = this.args.user.middleName;
+    this.lastName = this.args.user.lastName;
+    this.campusId = this.args.user.campusId;
+    this.otherId = this.args.user.otherId;
+    this.email = this.args.user.email;
+    this.displayName = this.args.user.displayName;
+    this.pronouns = this.args.user.pronouns;
+    this.preferredEmail = this.args.user.preferredEmail;
+    this.phone = this.args.user.phone;
+  }
+}
diff --git a/packages/frontend/app/components/user-profile-bio-manager.hbs b/packages/frontend/app/components/user-profile-bio-manager.hbs
new file mode 100644
index 0000000000..c6da654af0
--- /dev/null
+++ b/packages/frontend/app/components/user-profile-bio-manager.hbs
@@ -0,0 +1,289 @@
+{{#let (unique-id) as |templateId|}}
+  <div class="form">
+    <div
+      class="item {{if (includes 'firstName' this.updatedFieldsFromSync) 'synced-from-directory'}}"
+      data-test-firstname
+    >
+      <label for="firstname-{{templateId}}">
+        {{t "general.firstName"}}:
+      </label>
+      <input
+        id="firstname-{{templateId}}"
+        type="text"
+        value={{this.firstName}}
+        {{on "input" (pick "target.value" (set this "firstName"))}}
+        {{on "keyup" (fn this.addErrorDisplayFor "firstName")}}
+        {{on "keyup" this.keyboard}}
+        data-test-first-name-input
+      />
+      <ValidationError @validatable={{this}} @property="firstName" />
+    </div>
+    <div class="item" data-test-middlename>
+      <label for="middlename-{{templateId}}">
+        {{t "general.middleName"}}:
+      </label>
+      <input
+        id="middlename-{{templateId}}"
+        type="text"
+        value={{this.middleName}}
+        {{on "input" (pick "target.value" (set this "middleName"))}}
+        {{on "keyup" (fn this.addErrorDisplayFor "middleName")}}
+        {{on "keyup" this.keyboard}}
+        data-test-middle-name-input
+      />
+      <ValidationError @validatable={{this}} @property="middleName" />
+    </div>
+    <div
+      class="item {{if (includes 'lastName' this.updatedFieldsFromSync) 'synced-from-directory'}}"
+      data-test-lastname
+    >
+      <label for="lastname-{{templateId}}">
+        {{t "general.lastName"}}:
+      </label>
+      <input
+        id="lastname-{{templateId}}"
+        type="text"
+        value={{this.lastName}}
+        {{on "input" (pick "target.value" (set this "lastName"))}}
+        {{on "keyup" (fn this.addErrorDisplayFor "lastName")}}
+        {{on "keyup" this.keyboard}}
+        data-test-last-name-input
+      />
+      <ValidationError @validatable={{this}} @property="lastName" />
+    </div>
+    <div
+      class="item
+        {{if (includes 'campusId' this.updatedFieldsFromSync) 'synced-from-directory'}}
+        campus-id"
+      data-test-campus-id
+    >
+      <label for="campus-id-{{templateId}}">
+        {{t "general.campusId"}}:
+      </label>
+      <div class="campus-id-controls">
+        <input
+          id="campus-id-{{templateId}}"
+          type="text"
+          value={{this.campusId}}
+          {{on "input" (pick "target.value" (set this "campusId"))}}
+          {{on "keyup" (fn this.addErrorDisplayFor "campusId")}}
+          {{on "keyup" this.keyboard}}
+          data-test-campus-id-input
+        />
+        {{#unless this.canEditUsernameAndPassword}}
+          <button
+            type="button"
+            class="directory-sync"
+            title={{t "general.updateUserFromDirectory"}}
+            disabled={{this.directorySync.isRunning}}
+            {{on "click" (perform this.directorySync)}}
+            data-test-directory-sync
+          >
+            <FaIcon
+              @icon={{if this.directorySync.isRunning "spinner" "rotate"}}
+              @spin={{this.directorySync.isRunning}}
+            />
+          </button>
+        {{/unless}}
+        <ValidationError @validatable={{this}} @property="campusId" />
+      </div>
+      {{#if this.showSyncErrorMessage}}
+        <span class="validation-error-message" data-test-sync-error>
+          {{t "general.unableToSyncUser"}}
+        </span>
+      {{/if}}
+    </div>
+    <div class="item" data-test-other-id>
+      <label for="other-id-{{templateId}}">
+        {{t "general.otherId"}}:
+      </label>
+      <input
+        id="other-id-{{templateId}}"
+        type="text"
+        value={{this.otherId}}
+        {{on "input" (pick "target.value" (set this "otherId"))}}
+        {{on "keyup" (fn this.addErrorDisplayFor "otherId")}}
+        {{on "keyup" this.keyboard}}
+        data-test-other-id-input
+      />
+      <ValidationError @validatable={{this}} @property="otherId" />
+    </div>
+    <div
+      class="item {{if (includes 'email' this.updatedFieldsFromSync) 'synced-from-directory'}}"
+      data-test-email
+    >
+      <label for="email-{{templateId}}">
+        {{t "general.email"}}:
+      </label>
+      <input
+        id="email-{{templateId}}"
+        type="text"
+        value={{this.email}}
+        {{on "input" (pick "target.value" (set this "email"))}}
+        {{on "keyup" (fn this.addErrorDisplayFor "email")}}
+        {{on "keyup" this.keyboard}}
+        data-test-email-input
+      />
+      <ValidationError @validatable={{this}} @property="email" />
+    </div>
+    <div
+      class="item
+        {{if (includes 'displayName' this.updatedFieldsFromSync) 'synced-from-directory'}}"
+      data-test-displayname
+    >
+      <label for="displayname-{{templateId}}">
+        {{t "general.displayName"}}:
+      </label>
+      <input
+        id="displayname-{{templateId}}"
+        type="text"
+        value={{this.displayName}}
+        {{on "input" (pick "target.value" (set this "displayName"))}}
+        {{on "keyup" (fn this.addErrorDisplayFor "displayName")}}
+        {{on "keyup" this.keyboard}}
+        data-test-display-name-input
+      />
+      <ValidationError @validatable={{this}} @property="displayName" />
+    </div>
+    <div
+      class="item {{if (includes 'pronouns' this.updatedFieldsFromSync) 'synced-from-directory'}}"
+      data-test-pronouns
+    >
+      <label for="pronouns-{{templateId}}">
+        {{t "general.pronouns"}}:
+      </label>
+      <input
+        id="pronouns-{{templateId}}"
+        type="text"
+        value={{this.pronouns}}
+        {{on "input" (pick "target.value" (set this "pronouns"))}}
+        {{on "keyup" (fn this.addErrorDisplayFor "pronouns")}}
+        {{on "keyup" this.keyboard}}
+        data-test-pronouns-input
+      />
+      <ValidationError @validatable={{this}} @property="pronouns" />
+    </div>
+    <div
+      class="item
+        {{if (includes 'preferredEmail' this.updatedFieldsFromSync) 'synced-from-directory'}}"
+      data-test-preferred-email
+    >
+      <label for="preferred-email-{{templateId}}">
+        {{t "general.preferredEmail"}}:
+      </label>
+      <input
+        id="preferred-email-{{templateId}}"
+        type="text"
+        value={{this.preferredEmail}}
+        {{on "input" (pick "target.value" (set this "preferredEmail"))}}
+        {{on "keyup" (fn this.addErrorDisplayFor "preferredEmail")}}
+        {{on "keyup" this.keyboard}}
+        data-test-preferred-email-input
+      />
+      <ValidationError @validatable={{this}} @property="preferredEmail" />
+    </div>
+    <div
+      class="item {{if (includes 'phone' this.updatedFieldsFromSync) 'synced-from-directory'}}"
+      data-test-phone
+    >
+      <label for="phone-{{templateId}}">
+        {{t "general.phone"}}:
+      </label>
+      <input
+        id="phone-{{templateId}}"
+        type="text"
+        value={{this.phone}}
+        {{on "input" (pick "target.value" (set this "phone"))}}
+        {{on "keyup" (fn this.addErrorDisplayFor "phone")}}
+        {{on "keyup" this.keyboard}}
+        data-test-phone-input
+      />
+      <ValidationError @validatable={{this}} @property="phone" />
+    </div>
+    <div
+      class="item {{if (includes 'username' this.updatedFieldsFromSync) 'synced-from-directory'}}"
+      data-test-username
+    >
+      <label for="username-{{templateId}}">
+        {{t "general.username"}}:
+      </label>
+      <input
+        id="username-{{templateId}}"
+        type="text"
+        value={{this.username}}
+        {{on "input" (pick "target.value" (set this "username"))}}
+        {{on "input" (set this "showUsernameTakenErrorMessage" false)}}
+        {{on "keyup" (fn this.addErrorDisplayFor "username")}}
+        {{on "keyup" this.keyboard}}
+        disabled={{not this.canEditUsernameAndPassword}}
+        data-test-username-input
+      />
+      <ValidationError @validatable={{this}} @property="username" />
+      {{#if this.showUsernameTakenErrorMessage}}
+        <span class="validation-error-message" data-test-duplicate-username>
+          {{t "errors.duplicateUsername"}}
+        </span>
+      {{/if}}
+    </div>
+    {{#if this.canEditUsernameAndPassword}}
+      <div class="item password" data-test-password>
+        <label for="password-{{templateId}}">
+          {{t "general.password"}}:
+        </label>
+        {{#if this.changeUserPassword}}
+          <input
+            id="password-{{templateId}}"
+            type="password"
+            value={{this.password}}
+            {{on "input" (pick "target.value" this.setPassword)}}
+            {{on "keyup" (fn this.addErrorDisplayFor "password")}}
+            {{on "keyup" this.keyboard}}
+            data-test-password-input
+          />
+          {{#if this.hasErrorForPassword}}
+            <ValidationError @validatable={{this}} @property="password" />
+          {{else if (gt this.password.length 0)}}
+            <span
+              class="password-strength {{concat 'strength-' this.passwordStrengthScore}}"
+              data-test-password-strength-text
+            >
+              {{#if (eq this.passwordStrengthScore 0)}}
+                {{t "general.tryHarder"}}
+              {{else if (eq this.passwordStrengthScore 1)}}
+                {{t "general.bad"}}
+              {{else if (eq this.passwordStrengthScore 2)}}
+                {{t "general.weak"}}
+              {{else if (eq this.passwordStrengthScore 3)}}
+                {{t "general.good"}}
+              {{else if (eq this.passwordStrengthScore 4)}}
+                {{t "general.strong"}}
+              {{/if}}
+            </span>
+            <meter
+              max="4"
+              value={{this.passwordStrengthScore}}
+              data-test-password-strength-meter
+            ></meter>
+          {{/if}}
+          <button
+            class="link-button cancel-password-field"
+            type="button"
+            {{on "click" this.cancelChangeUserPassword}}
+            data-test-password-cancel
+          >
+            {{t "general.cancel"}}
+          </button>
+        {{else}}
+          <button
+            class="link-button activate-password-field"
+            type="button"
+            {{on "click" (set this "changeUserPassword" true)}}
+            data-test-change-password
+          >
+            {{t "general.modifyUserPassword"}}
+          </button>
+        {{/if}}
+      </div>
+    {{/if}}
+  </div>
+{{/let}}
\ No newline at end of file
diff --git a/packages/frontend/app/components/user-profile-bio-manager.js b/packages/frontend/app/components/user-profile-bio-manager.js
new file mode 100644
index 0000000000..e6a403e80d
--- /dev/null
+++ b/packages/frontend/app/components/user-profile-bio-manager.js
@@ -0,0 +1,36 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+// import { action } from '@ember/object';
+// import { service } from '@ember/service';
+// import { TrackedAsyncData } from 'ember-async-data';
+import { ValidateIf } from 'class-validator';
+import { validatable, IsEmail, NotBlank, Length } from 'ilios-common/decorators/validation';
+
+@validatable
+export default class UserProfileBioManagerComponent extends Component {
+  @tracked @Length(1, 50) @NotBlank() firstName;
+  @tracked @Length(0, 20) middleName;
+  @tracked @Length(1, 50) @NotBlank() lastName;
+  @tracked @Length(0, 16) campusId;
+  @tracked @Length(0, 16) otherId;
+  @tracked @IsEmail() @Length(1, 100) @NotBlank() email;
+  @tracked @Length(0, 200) displayName;
+  @tracked @Length(0, 50) pronouns;
+  @tracked @IsEmail() @Length(0, 100) preferredEmail;
+  @tracked @Length(0, 20) phone;
+  @tracked
+  @Length(1, 100)
+  @NotBlank()
+  username;
+  @tracked
+  @ValidateIf((o) => o.canEditUsernameAndPassword && o.changeUserPassword)
+  @Length(5)
+  @NotBlank()
+  password;
+
+  @tracked showSyncErrorMessage = false;
+  @tracked showUsernameTakenErrorMessage = false;
+  @tracked changeUserPassword = false;
+  @tracked updatedFieldsFromSync = [];
+  @tracked passwordStrengthScore = 0;
+}