Merge pull request #4503 from EshaanAgg/create.vue

Migrate `Create.vue` from `VCheckbox` to `Checkbox`
learningequality · Apr 9, 2024 · a4a1c8a · a4a1c8a
2 parents 9ed0725 + 91dc0e6
commit a4a1c8a
Showing 1 changed file with 15 additions and 9 deletions.
diff --git a/contentcuration/contentcuration/frontend/accounts/pages/Create.vue b/contentcuration/contentcuration/frontend/accounts/pages/Create.vue
@@ -132,14 +132,20 @@
         </VSlideYTransition>
 
         <!-- Agreements -->
-        <VCheckbox
+        <Checkbox
           v-model="acceptedAgreement"
           :label="$tr('agreement')"
-          required
-          :rules="tosAndPolicyRules"
-          :hide-details="false"
           class="my-1 policy-checkbox"
         />
+        <!-- Error message for Agreements -->
+        <VSlideYTransition>
+          <div v-if="!acceptedAgreement" class="error--text policy-error theme--light v-messages">
+            <div class="v-messages__message">
+              {{ $tr("ToSRequiredMessage") }}
+            </div>
+          </div>
+        </VSlideYTransition>
+
         <div class="span-spacing">
           <span>
             <ActionLink
@@ -241,9 +247,6 @@
       passwordConfirmRules() {
         return [value => (this.form.password1 === value ? true : this.$tr('passwordMatchMessage'))];
       },
-      tosAndPolicyRules() {
-        return [value => (value ? true : this.$tr('ToSRequiredMessage'))];
-      },
       acceptedAgreement: {
         get() {
           return this.form.accepted_tos && this.form.accepted_policy;
@@ -424,7 +427,9 @@
         return id === uses.OTHER && this.form.uses.includes(id);
       },
       submit() {
-        if (this.$refs.form.validate()) {
+        // We need to check the "acceptedAgreement" here explicitly because it is not a
+        // Vuetify form field and does not trigger the form validation.
+        if (this.$refs.form.validate() && this.acceptedAgreement) {
           const cleanedData = this.clean(this.form);
           return this.register(cleanedData)
             .then(() => {
@@ -528,8 +533,9 @@
     }
   }
 
-  .policy-checkbox /deep/ .v-messages {
+  .policy-error {
     min-height: 0;
+    margin-bottom: 4px;
     margin-left: 40px;
   }