feat(Register): implement email verification on register

frontend/src/components/Dashboard/Input.spec.js

@@ -26,6 +26,11 @@ const mountComponent = (isPosting = false, showWarning = false) => {
           return isPosting;
         },
       },
+      user: {
+        get() {
+          return { verified: true };
+        },
+      },
     },
   });
 };

frontend/src/components/Dashboard/Input.vue

@@ -3,11 +3,15 @@
     class="relative bg-white border-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-100 px-6 pt-10 pb-8 mb-2 ring-1 ring-gray-900/5 sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10"
   >
     <form>
-      <label
-        for="default-search"
-        class="shadow-xl mb-2 text-sm font-medium text-gray-900 sr-only dark:text-gray-300"
-        >{{ inputLabel }}</label
-      >
+      <p>
+        <span
+          v-if="!user.verified"
+          class="text-red-700 dark:text-red-300 text-xs"
+        >
+          You need to verify your email address to access the fully-featured
+          Fluunker.
+        </span>
+      </p>
       <div class="relative">
         <div
           class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"
@@ -63,20 +67,26 @@ export default {
     inputLabel: () => process.env.VUE_APP_INPUT_LABEL,
     inputCtaLabel: () => process.env.VUE_APP_INPUT_CTA_LABEL,
     placeholder() {
-      return `You have ${this.remainingMessages} ${process.env.VUE_APP_MESSAGE_NAME}s left today`;
+      return `You have ${this.remainingMessagesForUser} ${process.env.VUE_APP_MESSAGE_NAME}s left today`;
     },
     isInputDisabled() {
       return (
         this.isPosting ||
-        this.remainingMessages === 0 ||
+        this.remainingMessagesForUser === 0 ||
         this.message.length === 0 ||
         this.message.length > 120
       );
     },
     showWarning() {
       return this.message.length > 100;
     },
+    remainingMessagesForUser() {
+      return this.user.verified
+        ? this.remainingMessages
+        : parseInt(this.remainingMessages / 10, 10);
+    },
     ...mapGetters({
+      user: 'user',
       posts: 'getPosts',
       isPosting: 'isCreatingPost',
       remainingMessages: 'getRemainingMessages',

frontend/src/components/Register.spec.js

@@ -39,12 +39,12 @@ describe('Register', () => {
             appName: () => 'Fluu',
             userEmailExists: {
               get() {
-                return true;
+                return false;
               },
             },
             userNameExists: {
               get() {
-                return true;
+                return false;
               },
             },
           },
@@ -65,7 +65,7 @@ describe('Register', () => {
         await confirm.setValue('password');
         await acceptTerms.setChecked(true);
 
-        const button = wrapper.find('button');
+        const button = wrapper.find('button[type="submit"]');
         expect(button.element.disabled).toEqual(false);
       });
     });

frontend/src/components/Register.vue

@@ -163,7 +163,11 @@
 
 <script>
 import { getAuth } from '../auth';
-import { createUserWithEmailAndPassword, updateProfile } from 'firebase/auth';
+import {
+  createUserWithEmailAndPassword,
+  updateProfile,
+  sendEmailVerification,
+} from 'firebase/auth';
 import Email from './misc/icons/Email.vue';
 import Password from './misc/icons/Password.vue';
 import { mapGetters } from 'vuex';
@@ -214,6 +218,7 @@ export default {
         displayName: this.form.name,
       });
       this.$router.replace({ name: 'Dashboard' });
+      await sendEmailVerification(user);
     },
     async validate(field) {
       if (this.form[field]) {