create toast for Registration

src/views/auth/Register.vue

@@ -91,18 +91,36 @@
                 </div>
             </template>
             <!-- Register button -->
-            <div>
-                <Button
-                    type="submit"
-                    class="justify-center w-full gap-2"
-                    :disabled="registerForm.processing"
-                    v-slot="{ iconSizeClasses }"
-                >
-                    <UserAddIcon aria-hidden="true" :class="iconSizeClasses" />
-                    <span>Register</span>
-                </Button>
-            </div>
 
+            
+            <template v-if="send_status == 'ready'">         
+                <div class="flex items-center justify-end space-x-2" >
+                    <div>
+                        <Button
+                            type="submit"
+                            class="justify-center w-full gap-2"
+                            :disabled="registerForm.processing"
+                            v-slot="{ iconSizeClasses }"
+                        >
+                            <UserAddIcon aria-hidden="true" :class="iconSizeClasses" />
+                            <span>Register</span>
+                        </Button>
+                    </div>
+                </div>
+            </template>
+            <template v-else-if="send_status == 'sending'">
+                <div class="flex items-center justify-end space-x-2" >
+                    <button 
+                    class="mt-auto py-3 px-4 bg-gray-500 rounded-lg text-white font-bold"
+                    :disabled="isEnabled">
+                        Sending Email ...
+                        <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                        </svg>
+                    </button>
+                </div>
+            </template>
             <!-- Login link -->
             <p class="text-sm text-gray-600 dark:text-gray-400">
                 Already have an account?
@@ -126,8 +144,14 @@ import { UserIcon, MailIcon, LockClosedIcon, UserAddIcon } from '@heroicons/vue/
 
 <script>
 import axios from 'axios';
-
+import { useToast } from "vue-toastification";
 export default {
+    setup() {
+        const toast = useToast();
+        return {
+            toast
+        }
+    },  
     data(){
         return{
             registerForm:{
@@ -136,7 +160,8 @@ export default {
                 password1: '',
                 password2: '',
                 terms: false,
-                processing: false,          
+                processing: false,
+                send_status: 'ready',
             },
             errors: []
         }
@@ -158,6 +183,7 @@ export default {
             if(this.errors.length === 0){
                 console.log(this.registerForm);
                 this.registerForm.name = this.registerForm.email.split('@')[0];
+                this.send_status = 'sending'
                 axios
                 .post('/api/signup/', this.registerForm)
                 .then(response => {
@@ -166,9 +192,12 @@ export default {
                             this.registerForm.email = ''
                             this.registerForm.password1 = ''
                             this.registerForm.password2 = ''
+                            this.send_status = 'ready'
+                            this.toast.success("Confirmation email sent. Please check your inbox!");
                             this.$router.push({ name: 'VerifyEmail' })
                         } else {
-                            console.log('response.data.message', response.data.message)
+                            this.send_status = 'ready'
+                            this.toast.error("Registration in Cat4KIT UI is currently restricted. Please contact the administrator for assistance.");
                             const data = JSON.parse(response.data.message)
                             for (const key in data) {
                                 this.errors.push(data[key][0].message)