Polished creation for quick create user

src/components/QuickCreateUser.vue

@@ -2,6 +2,7 @@
 import { onMounted, ref } from 'vue';
 
 import PopoutCardFooter from './PopoutCardFooter.vue';
+import FullscreenOverlay from '@/components/slds/FullscreenOverlay.vue';
 import SalesforceToolingService from '@/services/salesforce-tooling-service';
 import Context from '@/models/context';
 import QuickCreateUserSettingsModal from '@/components/modals/quick-create-user-settings/QuickCreateUserSettingsModal.vue';
@@ -17,6 +18,7 @@ const props = defineProps<{
     context: Context
 }>();
 
+const overlay = ref<InstanceType<typeof FullscreenOverlay> | null>(null);
 const settingsModal = ref<InstanceType<typeof QuickCreateUserSettingsModal> | null>(null);
 
 let userService: SalesforceUserService;
@@ -158,10 +160,13 @@ async function onCreateAndCloseClick() {
             }
         }
 
-        error.value = `User created!`;
+        // Show overlay
+        const message = form.value.resetPassword ? 'User created and password reset sent!' : 'User created!';
+        await overlay.value?.show(message, 2000);
 
-        // const currentPopup = await chrome.windows.getCurrent();
-        // await chrome.windows.remove(currentPopup.id!);
+        // Close window
+        const currentPopup = await chrome.windows.getCurrent();
+        await chrome.windows.remove(currentPopup.id!);
     } finally {
         creating.value = false;
     }
@@ -377,6 +382,7 @@ async function onCreateAndCloseClick() {
     </article>
 
     <QuickCreateUserSettingsModal ref="settingsModal" />
+    <FullscreenOverlay ref="overlay" />
 </template>
 
 <style>

src/components/modals/user-select/UserSelectModal.vue

@@ -4,7 +4,7 @@ import { ref } from 'vue';
 import type User from '@/models/User';
 import SearchLookup from '../../slds/SearchLookup.vue';
 import SearchLookupItem from '@/components/slds/SearchLookupItem';
-import type Context from '@/models/context';
+import Context from '@/models/context';
 import SalesforceRESTService from '@/services/salesforce-rest-service';
 
 let restService: SalesforceRESTService;

src/components/slds/FullscreenOverlay.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const visible = ref(false);
+const message = ref('');
+
+function show(messageInput: string, duration: number): Promise<void> {
+    message.value = messageInput;
+
+    visible.value = true;
+
+    return new Promise<void>((resolve) => {
+        setTimeout(() => {
+            visible.value = false;
+            resolve();
+        }, duration);
+    });
+}
+
+defineExpose<{
+    show(message: string, duration: number): Promise<void>
+}>({
+    show
+});
+</script>
+
+<template>
+    <Transition>
+        <div class="overlay slds-align_absolute-center" v-if="visible">
+            <div class="overlay-content">
+                <span class="slds-icon_container slds-icon-utility-success slds-m-bottom_x-small">
+                    <svg class="slds-icon slds-icon-text-default">
+                        <use xlink:href="slds/assets/icons/utility-sprite/svg/symbols.svg#success"></use>
+                    </svg>
+                </span>
+                <div class="slds-text-heading_medium">{{ message }}</div>
+            </div>
+        </div>
+    </Transition>
+</template>
+
+<style scoped>
+.overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgb(69, 198, 90);
+    z-index: 2;
+}
+
+.overlay-content {
+    text-align: center;
+    color: white;
+}
+
+.overlay .slds-icon {
+    fill: white;
+}
+
+.v-enter-active {
+  animation: scale-in 0.25s;
+}
+
+@keyframes scale-in {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+</style>