feat: Admin Dashboard

frontend/package.json

@@ -14,7 +14,7 @@
     "@vueuse/core": "^10.4.1",
     "dayjs": "^1.11.11",
     "feather-icons": "^4.28.0",
-    "frappe-ui": "^0.1.60",
+    "frappe-ui": "^0.1.108",
     "gemoji": "^8.1.0",
     "lucide-vue-next": "^0.383.0",
     "markdown-it": "^14.1.0",

frontend/src/components/AppSidebar.vue

@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="flex h-full flex-col justify-between transition-all duration-300 ease-in-out bg-gray-100"
+		class="flex h-full flex-col justify-between transition-all duration-300 ease-in-out bg-gray-50 border-r"
 		:class="isSidebarCollapsed ? 'w-14' : 'w-56'"
 	>
 		<div
@@ -40,14 +40,21 @@
 </template>
 
 <script setup>
+import { useRoute } from 'vue-router'
 import UserDropdown from '@/components/UserDropdown.vue'
 import SidebarLink from '@/components/SidebarLink.vue'
 import { useStorage } from '@vueuse/core'
 import { ref, computed } from 'vue'
 import { ArrowLeftFromLine } from 'lucide-vue-next'
 import { getSidebarLinks } from '../utils'
 
-const sidebarLinks = computed(() => getSidebarLinks())
+const route = useRoute()
+
+const sidebarLinks = computed(() =>
+	getSidebarLinks().filter((link) =>
+		route.meta.isDashboard ? link.forDashboard : !link.forDashboard
+	)
+)
 
 const getSidebarFromStorage = () => {
 	return useStorage('sidebar_is_collapsed', false)

frontend/src/components/Controls/Copy.vue

@@ -1,16 +1,16 @@
 <template>
-	<label class="block pt-2 text-sm">
+	<div class="block pt-2 text-sm">
 		<span class="mb-2 block leading-4 text-gray-700">{{ props.label }}</span>
 		<button
 			class="border-2 rounded-lg bg-gray-100 p-2 w-full flex items-center"
 			@click="copyToClipBoard(props.value)"
 		>
-			<span class="text-gray-800">{{ props.value }}</span>
+			<span class="text-gray-800 text-nowrap overflow-x-scroll">{{ props.value }}</span>
 			<span class="border rounded bg-white p-1 text-gray-600 text-xs ml-auto">
 				{{ message }}
 			</span>
 		</button>
-	</label>
+	</div>
 </template>
 <script setup>
 import { ref } from 'vue'
@@ -29,10 +29,14 @@ const props = defineProps({
 })
 
 const copyToClipBoard = async (text) => {
-	await navigator.clipboard.writeText(text)
-	message.value = 'Copied!'
-	setTimeout(() => {
-		message.value = 'Copy'
-	}, 2000)
+	try {
+		await navigator.clipboard.writeText(text)
+		message.value = 'Copied!'
+		setTimeout(() => {
+			message.value = 'Copy'
+		}, 2000)
+	} catch (e) {
+		alert('Failed to copy text. Please copy from here: ' + text)
+	}
 }
 </script>

frontend/src/components/Modals/AddDomain.vue

@@ -0,0 +1,86 @@
+<template>
+	<Dialog
+		v-model="show"
+		:options="{
+			title: __('Add Domain'),
+			actions: [
+				{
+					label: __(domainRequest?.data ? 'Verify DNS' : 'Add Domain'),
+					variant: 'solid',
+					onClick: domainRequest?.data ? verifyDNS.submit : domainRequest.submit,
+				},
+			],
+		}"
+	>
+		<template #body-content>
+			<div class="space-y-4">
+				<p class="text-p-base">
+					{{
+						__(
+							`To add a domain, you must already own it. If you don't have one, purchase one and return here.`
+						)
+					}}
+				</p>
+				<FormControl
+					type="text"
+					:label="__('Domain Name')"
+					placeholder="example.com"
+					v-model="domainName"
+					:readonly="!!domainRequest?.data"
+					autocomplete="off"
+				/>
+				<ErrorMessage :message="domainRequest.error?.messages[0]" />
+				<div v-if="domainRequest.data?.verification_key" class="space-y-4">
+					<p class="text-p-base">
+						{{
+							__(
+								`Add the following TXT record to your domain's DNS records to verify your ownership:`
+							)
+						}}
+					</p>
+					<Copy
+						:label="__('Verification Key')"
+						:value="domainRequest.data.verification_key"
+					/>
+					<ErrorMessage :message="verifyDNS.error?.messages[0] || verificationError" />
+				</div>
+			</div>
+		</template>
+	</Dialog>
+</template>
+
+<script setup>
+import { ref, computed, inject } from 'vue'
+import { Dialog, FormControl, ErrorMessage, createResource } from 'frappe-ui'
+import Copy from '@/components/Controls/Copy.vue'
+import { raiseToast } from '@/utils'
+
+const show = defineModel()
+const user = inject('$user')
+
+const domainName = ref('')
+const verificationError = ref('')
+
+const emit = defineEmits(['reloadDomains'])
+
+const domainRequest = createResource({
+	url: 'mail.api.admin.create_domain_request',
+	makeParams() {
+		return { domain_name: domainName.value, mail_tenant: user.data.tenant }
+	},
+})
+
+const verifyDNS = createResource({
+	url: 'mail.api.admin.verify_dns_record',
+	makeParams() {
+		return { domain_request: domainRequest?.data.name }
+	},
+	onSuccess(data) {
+		if (data) {
+			show.value = false
+			emit('reloadDomains')
+			raiseToast('Domain added successfully!')
+		} else verificationError.value = __('Failed to verify DNS record.')
+	},
+})
+</script>

frontend/src/components/Modals/Settings.vue

@@ -42,6 +42,7 @@ import { Dialog, Button } from 'frappe-ui'
 import { User, Mailbox } from 'lucide-vue-next'
 
 const show = defineModel()
+
 const tabs = [
 	{
 		label: 'User',

frontend/src/components/UserDropdown.vue

@@ -60,11 +60,14 @@
 
 <script setup>
 import { ref } from 'vue'
+import { useRouter } from 'vue-router'
 import MailLogo from '@/components/Icons/MailLogo.vue'
 import Settings from '@/components/Modals/Settings.vue'
 import { sessionStore } from '@/stores/session'
 import { Dropdown } from 'frappe-ui'
 import {
+	Home,
+	LayoutDashboard,
 	ChevronDown,
 	LogIn,
 	LogOut,
@@ -74,9 +77,10 @@ import {
 import { convertToTitleCase } from '../utils'
 import { userStore } from '@/stores/user'
 
-const { logout, branding } = sessionStore()
+const { isLoggedIn, logout, branding } = sessionStore()
 const { userResource } = userStore()
-let { isLoggedIn } = sessionStore()
+const router = useRouter()
+
 const showSettings = ref(false)
 
 const props = defineProps({
@@ -87,17 +91,28 @@ const props = defineProps({
 })
 
 const userDropdownOptions = [
+	{
+		icon: Home,
+		label: 'Home',
+		onClick: () => router.push('/'),
+		condition: () => userResource.data.roles.includes('Mail Admin'),
+	},
+	{
+		icon: LayoutDashboard,
+		label: 'Admin Dashboard',
+		onClick: () => router.push('/dashboard'),
+		condition: () => userResource.data.roles.includes('Mail Admin'),
+	},
 	{
 		icon: ArrowRightLeft,
 		label: 'Switch to Desk',
 		onClick: () => {
 			window.location.href = '/app'
 		},
 		condition: () => {
-			let cookies = new URLSearchParams(document.cookie.split('; ').join('&'))
-			let system_user = cookies.get('system_user')
-			if (system_user === 'yes') return true
-			else return false
+			const cookies = new URLSearchParams(document.cookie.split('; ').join('&'))
+			const system_user = cookies.get('system_user')
+			return system_user === 'yes'
 		},
 	},
 	{
@@ -106,29 +121,11 @@ const userDropdownOptions = [
 		onClick: () => {
 			showSettings.value = true
 		},
-		condition: () => {
-			return isLoggedIn
-		},
 	},
 	{
 		icon: LogOut,
-		label: 'Log out',
-		onClick: () => {
-			logout.submit()
-		},
-		condition: () => {
-			return isLoggedIn
-		},
-	},
-	{
-		icon: LogIn,
-		label: 'Log in',
-		onClick: () => {
-			window.location.href = '/login'
-		},
-		condition: () => {
-			return !isLoggedIn
-		},
+		label: 'Log Out',
+		onClick: logout.submit,
 	},
 ]
 </script>

frontend/src/pages/Drafts.vue

@@ -3,7 +3,7 @@
 		<header
 			class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
 		>
-			<Breadcrumbs :items="breadcrumbs">
+			<Breadcrumbs :items="[{ label: 'Drafts' }]">
 				<template #suffix>
 					<div v-if="draftMailsCount.data" class="self-end text-xs text-gray-600 ml-2">
 						{{
@@ -57,7 +57,7 @@
 </template>
 <script setup>
 import { Breadcrumbs, createResource, createListResource } from 'frappe-ui'
-import { ref, computed, inject, watch } from 'vue'
+import { ref, inject, watch } from 'vue'
 import HeaderActions from '@/components/HeaderActions.vue'
 import { formatNumber, startResizing, singularize } from '@/utils'
 import MailDetails from '@/components/MailDetails.vue'
@@ -105,13 +105,4 @@ const draftMailsCount = createResource({
 const loadMoreEmails = useDebounceFn(() => {
 	if (draftMails.hasNextPage) draftMails.next()
 }, 500)
-
-const breadcrumbs = computed(() => {
-	return [
-		{
-			label: `Drafts`,
-			route: { name: 'Drafts' },
-		},
-	]
-})
 </script>

frontend/src/pages/Inbox.vue

@@ -3,7 +3,7 @@
 		<header
 			class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
 		>
-			<Breadcrumbs :items="breadcrumbs">
+			<Breadcrumbs :items="[{ label: 'Inbox' }]">
 				<template #suffix>
 					<div v-if="incomingMailCount.data" class="self-end text-xs text-gray-600 ml-2">
 						{{
@@ -52,7 +52,7 @@
 </template>
 <script setup>
 import { Breadcrumbs, createListResource, createResource } from 'frappe-ui'
-import { computed, inject, ref, onMounted } from 'vue'
+import { inject, ref, onMounted } from 'vue'
 import { formatNumber, startResizing, singularize } from '@/utils'
 import HeaderActions from '@/components/HeaderActions.vue'
 import MailDetails from '@/components/MailDetails.vue'
@@ -99,13 +99,4 @@ const incomingMailCount = createResource({
 const loadMoreEmails = useDebounceFn(() => {
 	if (incomingMails.hasNextPage) incomingMails.next()
 }, 500)
-
-const breadcrumbs = computed(() => {
-	return [
-		{
-			label: `Inbox`,
-			route: { name: 'Inbox' },
-		},
-	]
-})
 </script>

frontend/src/pages/Sent.vue

@@ -3,7 +3,7 @@
 		<header
 			class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
 		>
-			<Breadcrumbs :items="breadcrumbs">
+			<Breadcrumbs :items="[{ label: 'Sent' }]">
 				<template #suffix>
 					<div v-if="sentMailsCount.data" class="self-end text-xs text-gray-600 ml-2">
 						{{
@@ -52,7 +52,7 @@
 </template>
 <script setup>
 import { Breadcrumbs, createResource, createListResource } from 'frappe-ui'
-import { computed, inject, ref, onMounted } from 'vue'
+import { inject, ref, onMounted } from 'vue'
 import HeaderActions from '@/components/HeaderActions.vue'
 import { formatNumber, startResizing, singularize } from '@/utils'
 import MailDetails from '@/components/MailDetails.vue'
@@ -100,13 +100,4 @@ const sentMailsCount = createResource({
 const loadMoreEmails = useDebounceFn(() => {
 	if (sentMails.hasNextPage) sentMails.next()
 }, 500)
-
-const breadcrumbs = computed(() => {
-	return [
-		{
-			label: 'Sent',
-			route: { name: 'Sent' },
-		},
-	]
-})
 </script>

frontend/src/pages/Setup.vue

@@ -1,5 +1,5 @@
 <template>
-	<FormControl type="text" label="User" :value="user.data?.name" disabled class="mb-4" />
+	<FormControl type="text" label="User" :value="user.data?.name" readonly class="mb-4" />
 
 	<form
 		v-if="!user.data?.tenant"
@@ -33,7 +33,7 @@ const { logout } = sessionStore()
 const tenantName = ref('')
 
 const createTenant = createResource({
-	url: 'mail.api.account.create_tenant',
+	url: 'mail.api.admin.create_tenant',
 	makeParams() {
 		return { tenant_name: tenantName.value }
 	},

frontend/src/pages/SignUp.vue

@@ -6,7 +6,7 @@
 			placeholder="[email protected]"
 			autocomplete="email"
 			v-model="email"
-			:disabled="!!props.requestKey || isVerificationStep"
+			:readonly="!!props.requestKey || isVerificationStep"
 			required
 		/>
 		<FormControl