Update user edit page and user table for picture login (#14573)

* Update utility to use constants

* Add ambiguous key for iconName

* Update user edit page to show picture password and disable learner role

* Disable reset password when piclo enabled

* Create basic test for UserEditPage changes

Author: bjester

kolibri/plugins/facility/frontend/views/UserEditPage.vue

@@ -9,13 +9,14 @@
       <form
         v-if="!loading"
         class="form"
+        data-testid="form"
         @submit.prevent="submitForm"
       >
-        <h1>
-          {{ $tr('editUserDetailsHeader') }}
-        </h1>
-
         <section>
+          <h1>
+            {{ $tr('editUserDetailsHeader') }}
+          </h1>
+
           <FullNameTextbox
             ref="fullNameTextbox"
             :autofocus="true"
@@ -35,6 +36,17 @@
             :errors.sync="caughtErrors"
           />
 
+          <section
+            v-if="showPicturePasswordSection"
+            class="picture-password-section"
+            data-testid="picture-password-section"
+          >
+            <h3>
+              {{ picturePassword$() }}
+            </h3>
+            <UserPicturePassword :picturePassword="userPicturePassword" />
+          </section>
+
           <template v-if="editingSuperAdmin">
             <h2 class="header user-type">
               {{ coreString('userTypeLabel') }}
@@ -56,11 +68,31 @@
           <template v-else>
             <KSelect
               v-model="typeSelected"
-              class="select"
+              :class="{ select: true, 'learner-role-disabled': disableLearnerRoleOption }"
               :disabled="formDisabled"
               :label="coreString('userTypeLabel')"
               :options="userTypeOptions"
+              data-testid="user-type"
             />
+            <div
+              v-if="disableLearnerRoleOption"
+              class="learner-limit-message"
+              data-testid="learner-limit-message"
+            >
+              <KIcon
+                class="icon"
+                icon="warningIncomplete"
+              />
+              <p :style="{ color: $themeTokens.annotation }">
+                {{ learnerCreationDisabled$() }}
+                <KButton
+                  appearance="basic-link"
+                  :text="coreString('learnMoreAction')"
+                  data-testid="learner-limit-modal-trigger"
+                  @click="isLearnerLimitModalOpen = true"
+                />
+              </p>
+            </div>
 
             <fieldset
               v-if="coachIsSelected"
@@ -128,6 +160,11 @@
           </KButtonGroup>
         </div>
       </form>
+      <LearnerLimitReachedModal
+        v-if="isLearnerLimitModalOpen"
+        data-testid="learner-limit-modal"
+        @close="isLearnerLimitModalOpen = false"
+      />
     </KPageContainer>
   </ImmersivePage>
 
@@ -156,7 +193,10 @@
   import useSnackbar from 'kolibri/composables/useSnackbar';
   import { handleApiError } from 'kolibri/utils/appError';
   import useFacility from 'kolibri-common/composables/useFacility';
+  import { picturePasswordStrings } from 'kolibri-common/strings/picturePasswords';
+  import UserPicturePassword from 'kolibri-common/components/UserPicturePassword.vue';
   import IdentifierTextbox from './users/sidePanels/UserCreate/IdentifierTextbox.vue';
+  import LearnerLimitReachedModal from './LearnerLimitReachedModal.vue';
 
   export default {
     name: 'UserEditPage',
@@ -174,19 +214,29 @@
       UsernameTextbox,
       UserTypeDisplay,
       ExtraDemographics,
+      LearnerLimitReachedModal,
+      UserPicturePassword,
     },
     mixins: [commonCoreStrings],
     setup() {
       const { createSnackbar } = useSnackbar();
       const { currentUserId, logout } = useUser();
-      const { updateFacilityConfig, facilityConfig } = useFacility();
+      const { updateFacilityConfig, selectedFacility, facilityConfig } = useFacility();
+      const { picturePassword$, learnerCreationDisabled$ } = picturePasswordStrings;
+
       return {
+        // state
+        currentUserId,
+        facilityConfig,
+        selectedFacility,
+        // actions
         logout,
         createSnackbar,
-        currentUserId,
         updateFacilityConfig,
-        facilityConfig,
         handleApiError,
+        // strings
+        learnerCreationDisabled$,
+        picturePassword$,
       };
     },
     data() {
@@ -207,6 +257,8 @@
         userCopy: {},
         caughtErrors: [],
         status: '',
+        userPicturePassword: null,
+        isLearnerLimitModalOpen: false,
       };
     },
     computed: {
@@ -228,6 +280,7 @@
           {
             label: this.coreString('learnerLabel'),
             value: UserKinds.LEARNER,
+            disabled: this.disableLearnerRoleOption,
           },
           {
             label: this.coreString('coachLabel'),
@@ -256,6 +309,23 @@
 
         return '';
       },
+      picturePasswordEnabled() {
+        return Boolean(this.facilityConfig.picture_password_settings);
+      },
+      disableLearnerRoleOption() {
+        return (
+          this.picturePasswordEnabled &&
+          this.selectedFacility.picture_passwords_exhausted &&
+          this.kind !== UserKinds.LEARNER
+        );
+      },
+      showPicturePasswordSection() {
+        return (
+          this.picturePasswordEnabled &&
+          this.kind === UserKinds.LEARNER &&
+          Boolean(this.userPicturePassword)
+        );
+      },
       newUserKind() {
         const { value } = this.typeSelected;
         if (value === UserKinds.COACH && this.classCoachIsSelected) {
@@ -278,6 +348,7 @@
         this.gender = user.gender;
         this.birthYear = user.birth_year;
         this.extraDemographics = user.extra_demographics;
+        this.userPicturePassword = user.picture_password;
         this.setKind(user);
         this.makeCopyOfUser(user);
       });
@@ -358,6 +429,11 @@
       submitForm() {
         this.formSubmitted = true;
 
+        if (this.disableLearnerRoleOption && this.newUserKind === UserKinds.LEARNER) {
+          this.isLearnerLimitModalOpen = true;
+          return;
+        }
+
         if (!this.formIsValid) {
           return this.focusOnInvalidField();
         }
@@ -434,7 +510,7 @@
 
   .coach-selector {
     padding: 0;
-    margin: 0;
+    margin: 0 0 10px;
     border: 0;
   }
 
@@ -463,6 +539,35 @@
     }
   }
 
+  .learner-role-disabled {
+    margin-bottom: 4px;
+  }
+
+  .learner-limit-message {
+    display: flex;
+    align-items: baseline;
+    margin-bottom: 12px;
+
+    .icon {
+      flex-shrink: 0;
+      margin-top: 2px;
+      font-size: 14px;
+    }
+
+    p {
+      margin: 0 0 0 4px;
+      font-size: 14px;
+    }
+  }
+
+  .picture-password-section {
+    margin: 12px 0 24px;
+
+    h3 {
+      margin-bottom: 8px;
+    }
+  }
+
   .narrow-container {
     max-width: 500px;
     margin: auto;