fix: dark mode email account css
(cherry picked from commit 9c45877999234e72fed113639b767fb7594b66f6) # Conflicts: # frontend/src/components/Settings/EmailAccountCard.vue # frontend/src/components/Settings/EmailAccountList.vue # frontend/src/components/Settings/EmailAdd.vue # frontend/src/components/Settings/EmailEdit.vue # frontend/src/components/Settings/EmailProviderIcon.vue
This commit is contained in:
Pratik
Mergify
parent
4e3a85e03b
commit
7c4a697b9f
50
frontend/src/components/Settings/EmailAccountCard.vue
Normal file
50
frontend/src/components/Settings/EmailAccountCard.vue
Normal file
@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex items-center justify-between p-1 py-3 border-b border-gray-200 dark:border-gray-700 cursor-pointer"
|
||||
>
|
||||
<!-- avatar and name -->
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<EmailProviderIcon :logo="emailIcon[emailAccount.service]" />
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-ink-gray-9">
|
||||
{{ emailAccount.email_account_name }}
|
||||
</p>
|
||||
<div class="text-sm text-gray-500">{{ emailAccount.email_id }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Badge variant="subtle" :label="badgeTitleColor" :theme="gray" />
|
||||
</div>
|
||||
<!-- email id -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { emailIcon } from './emailConfig'
|
||||
import EmailProviderIcon from './EmailProviderIcon.vue'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
emailAccount: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const badgeTitleColor = computed(() => {
|
||||
if (
|
||||
props.emailAccount.default_incoming &&
|
||||
props.emailAccount.default_outgoing
|
||||
) {
|
||||
return 'Default Sending and Inbox'
|
||||
} else if (props.emailAccount.default_incoming) {
|
||||
return 'Default Inbox'
|
||||
} else if (props.emailAccount.default_outgoing) {
|
||||
return 'Default Sending'
|
||||
} else {
|
||||
return 'Inbox'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
64
frontend/src/components/Settings/EmailAccountList.vue
Normal file
64
frontend/src/components/Settings/EmailAccountList.vue
Normal file
@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- header -->
|
||||
<div class="flex items-center justify-between text-ink-gray-9">
|
||||
<h2 class="flex gap-2 text-xl font-semibold leading-none h-5">
|
||||
Email Accounts
|
||||
</h2>
|
||||
<Button
|
||||
label="Add Account"
|
||||
theme="gray"
|
||||
variant="solid"
|
||||
@click="emit('update:step', 'email-add')"
|
||||
class="mr-8"
|
||||
>
|
||||
<template #prefix>
|
||||
<LucidePlus class="w-4 h-4" />
|
||||
</template>
|
||||
</Button>
|
||||
</div>
|
||||
<!-- list accounts -->
|
||||
<div
|
||||
v-if="!emailAccounts.loading && Boolean(emailAccounts.data?.length)"
|
||||
class="mt-4"
|
||||
>
|
||||
<div v-for="emailAccount in emailAccounts.data" :key="emailAccount.name">
|
||||
<EmailAccountCard
|
||||
:emailAccount="emailAccount"
|
||||
@click="emit('update:step', 'email-edit', emailAccount)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- fallback if no email accounts -->
|
||||
<div v-else class="flex items-center justify-center h-64 text-gray-500">
|
||||
Please add an email account to continue.
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { createListResource } from 'frappe-ui'
|
||||
import EmailAccountCard from './EmailAccountCard.vue'
|
||||
|
||||
const emit = defineEmits(['update:step'])
|
||||
|
||||
const emailAccounts = createListResource({
|
||||
doctype: 'Email Account',
|
||||
cache: true,
|
||||
fields: ['*'],
|
||||
filters: {
|
||||
email_id: ['Not Like', '%example%'],
|
||||
},
|
||||
pageLength: 10,
|
||||
auto: true,
|
||||
onSuccess: (accounts) => {
|
||||
// convert 0 to false to handle boolean fields
|
||||
accounts.forEach((account) => {
|
||||
account.enable_incoming = Boolean(account.enable_incoming)
|
||||
account.enable_outgoing = Boolean(account.enable_outgoing)
|
||||
account.default_incoming = Boolean(account.default_incoming)
|
||||
account.default_outgoing = Boolean(account.default_outgoing)
|
||||
})
|
||||
},
|
||||
})
|
||||
</script>
|
||||
161
frontend/src/components/Settings/EmailAdd.vue
Normal file
161
frontend/src/components/Settings/EmailAdd.vue
Normal file
@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<div class="flex flex-col h-full gap-4">
|
||||
<!-- title and desc -->
|
||||
<div role="heading" aria-level="1" class="flex flex-col gap-1">
|
||||
<h2 class="text-xl font-semibold text-ink-gray-9">Setup Email</h2>
|
||||
<p class="text-sm text-gray-600">
|
||||
Choose the email service provider you want to configure.
|
||||
</p>
|
||||
</div>
|
||||
<!-- email service provider selection -->
|
||||
<div class="flex flex-wrap items-center">
|
||||
<div
|
||||
v-for="s in services"
|
||||
:key="s.name"
|
||||
class="flex flex-col items-center gap-1 mt-4 w-[70px]"
|
||||
@click="handleSelect(s)"
|
||||
>
|
||||
<EmailProviderIcon
|
||||
:service-name="s.name"
|
||||
:logo="s.icon"
|
||||
:selected="selectedService?.name === s?.name"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="selectedService" class="flex flex-col gap-4">
|
||||
<!-- email service provider info -->
|
||||
<div
|
||||
class="flex items-center gap-2 p-2 rounded-md ring-1 ring-gray-400 dark:ring-gray-700 text-gray-700 dark:text-gray-500"
|
||||
>
|
||||
<CircleAlert class="w-5 h-6 w-min-5 w-max-5 min-h-5 max-w-5" />
|
||||
<div class="text-xs text-wrap">
|
||||
{{ selectedService.info }}
|
||||
<a :href="selectedService.link" target="_blank" class="underline"
|
||||
>here</a
|
||||
>.
|
||||
</div>
|
||||
</div>
|
||||
<!-- service provider fields -->
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
<div
|
||||
v-for="field in fields"
|
||||
:key="field.name"
|
||||
class="flex flex-col gap-1"
|
||||
>
|
||||
<FormControl
|
||||
v-model="state[field.name]"
|
||||
:label="field.label"
|
||||
:name="field.name"
|
||||
:type="field.type"
|
||||
:placeholder="field.placeholder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div
|
||||
v-for="field in incomingOutgoingFields"
|
||||
:key="field.name"
|
||||
class="flex flex-col gap-1"
|
||||
>
|
||||
<FormControl
|
||||
v-model="state[field.name]"
|
||||
:label="field.label"
|
||||
:name="field.name"
|
||||
:type="field.type"
|
||||
/>
|
||||
<p class="text-gray-500 text-p-sm">{{ field.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<ErrorMessage v-if="error" class="ml-1" :message="error" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- action button -->
|
||||
<div v-if="selectedService" class="flex justify-between mt-auto">
|
||||
<Button
|
||||
label="Back"
|
||||
theme="gray"
|
||||
variant="outline"
|
||||
:disabled="addEmailRes.loading"
|
||||
@click="emit('update:step', 'email-list')"
|
||||
/>
|
||||
<Button
|
||||
label="Create"
|
||||
variant="solid"
|
||||
:loading="addEmailRes.loading"
|
||||
@click="createEmailAccount"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, reactive, ref } from 'vue'
|
||||
import { createResource } from 'frappe-ui'
|
||||
import CircleAlert from '~icons/lucide/circle-alert'
|
||||
import { createToast } from '@/utils'
|
||||
import {
|
||||
customProviderFields,
|
||||
popularProviderFields,
|
||||
services,
|
||||
validateInputs,
|
||||
incomingOutgoingFields,
|
||||
} from './emailConfig'
|
||||
import EmailProviderIcon from './EmailProviderIcon.vue'
|
||||
|
||||
const emit = defineEmits()
|
||||
|
||||
const state = reactive({
|
||||
service: '',
|
||||
email_account_name: '',
|
||||
email_id: '',
|
||||
password: '',
|
||||
api_key: '',
|
||||
api_secret: '',
|
||||
frappe_mail_site: '',
|
||||
enable_incoming: false,
|
||||
enable_outgoing: false,
|
||||
default_incoming: false,
|
||||
default_outgoing: false,
|
||||
})
|
||||
|
||||
const selectedService = ref(null)
|
||||
const fields = computed(() =>
|
||||
selectedService.value.custom ? customProviderFields : popularProviderFields,
|
||||
)
|
||||
|
||||
function handleSelect(service) {
|
||||
selectedService.value = service
|
||||
state.service = service.name
|
||||
}
|
||||
|
||||
const addEmailRes = createResource({
|
||||
url: 'crm.api.settings.create_email_account',
|
||||
makeParams: (val) => {
|
||||
return {
|
||||
...val,
|
||||
}
|
||||
},
|
||||
onSuccess: () => {
|
||||
createToast({
|
||||
title: 'Email account created successfully',
|
||||
icon: 'check',
|
||||
iconClasses: 'text-green-600',
|
||||
})
|
||||
emit('update:step', 'email-list')
|
||||
},
|
||||
onError: () => {
|
||||
error.value = 'Failed to create email account, Invalid credentials'
|
||||
},
|
||||
})
|
||||
|
||||
const error = ref()
|
||||
function createEmailAccount() {
|
||||
error.value = validateInputs(state, selectedService.value.custom)
|
||||
if (error.value) return
|
||||
|
||||
addEmailRes.submit({ data: state })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
220
frontend/src/components/Settings/EmailEdit.vue
Normal file
220
frontend/src/components/Settings/EmailEdit.vue
Normal file
@ -0,0 +1,220 @@
|
||||
<template>
|
||||
<div class="flex flex-col h-full gap-4">
|
||||
<!-- title and desc -->
|
||||
<div role="heading" aria-level="1" class="flex justify-between gap-1">
|
||||
<h2 class="text-xl font-semibold text-ink-gray-9">Edit Email</h2>
|
||||
</div>
|
||||
<div class="w-fit">
|
||||
<EmailProviderIcon
|
||||
:logo="emailIcon[accountData.service]"
|
||||
:service-name="accountData.service"
|
||||
/>
|
||||
</div>
|
||||
<!-- banner for setting up email account -->
|
||||
<div
|
||||
class="flex items-center gap-2 p-2 rounded-md ring-1 ring-gray-400 dark:ring-gray-700"
|
||||
>
|
||||
<CircleAlert
|
||||
class="size-6 text-gray-500 w-min-5 w-max-5 min-h-5 max-w-5"
|
||||
/>
|
||||
<div class="text-xs text-gray-700 dark:text-gray-500 text-wrap">
|
||||
{{ info.description }}
|
||||
<a :href="info.link" target="_blank" class="underline">here</a>
|
||||
.
|
||||
</div>
|
||||
</div>
|
||||
<!-- fields -->
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
<div
|
||||
v-for="field in fields"
|
||||
:key="field.name"
|
||||
class="flex flex-col gap-1"
|
||||
>
|
||||
<FormControl
|
||||
v-model="state[field.name]"
|
||||
:label="field.label"
|
||||
:name="field.name"
|
||||
:type="field.type"
|
||||
:placeholder="field.placeholder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div
|
||||
v-for="field in incomingOutgoingFields"
|
||||
:key="field.name"
|
||||
class="flex flex-col gap-1"
|
||||
>
|
||||
<FormControl
|
||||
v-model="state[field.name]"
|
||||
:label="field.label"
|
||||
:name="field.name"
|
||||
:type="field.type"
|
||||
/>
|
||||
<p class="text-gray-500 text-p-sm">{{ field.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<ErrorMessage v-if="error" class="ml-1" :message="error" />
|
||||
</div>
|
||||
<!-- action buttons -->
|
||||
<div class="flex justify-between mt-auto">
|
||||
<Button
|
||||
label="Back"
|
||||
theme="gray"
|
||||
variant="outline"
|
||||
:disabled="loading"
|
||||
@click="emit('update:step', 'email-list')"
|
||||
/>
|
||||
<Button
|
||||
label="Update Account"
|
||||
variant="solid"
|
||||
@click="updateAccount"
|
||||
:loading="loading"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, reactive, ref } from 'vue'
|
||||
import { call } from 'frappe-ui'
|
||||
import EmailProviderIcon from './EmailProviderIcon.vue'
|
||||
import {
|
||||
emailIcon,
|
||||
services,
|
||||
popularProviderFields,
|
||||
customProviderFields,
|
||||
validateInputs,
|
||||
incomingOutgoingFields,
|
||||
} from './emailConfig'
|
||||
import { createToast } from '@/utils'
|
||||
import CircleAlert from '~icons/lucide/circle-alert'
|
||||
|
||||
const props = defineProps({
|
||||
accountData: null,
|
||||
})
|
||||
|
||||
const emit = defineEmits()
|
||||
|
||||
const state = reactive({
|
||||
email_account_name: props.accountData.email_account_name || '',
|
||||
service: props.accountData.service || '',
|
||||
email_id: props.accountData.email_id || '',
|
||||
api_key: props.accountData?.api_key || null,
|
||||
api_secret: props.accountData?.api_secret || null,
|
||||
password: props.accountData?.password || null,
|
||||
frappe_mail_site: props.accountData?.frappe_mail_site || '',
|
||||
enable_incoming: props.accountData.enable_incoming || false,
|
||||
enable_outgoing: props.accountData.enable_outgoing || false,
|
||||
default_outgoing: props.accountData.default_outgoing || false,
|
||||
default_incoming: props.accountData.default_incoming || false,
|
||||
})
|
||||
|
||||
const info = {
|
||||
description: 'To know more about setting up email accounts, click',
|
||||
link: 'https://docs.erpnext.com/docs/user/manual/en/email-account',
|
||||
}
|
||||
|
||||
const isCustomService = computed(() => {
|
||||
return services.find((s) => s.name === props.accountData.service).custom
|
||||
})
|
||||
|
||||
const fields = computed(() => {
|
||||
if (isCustomService.value) {
|
||||
return customProviderFields
|
||||
}
|
||||
return popularProviderFields
|
||||
})
|
||||
|
||||
const error = ref()
|
||||
const loading = ref(false)
|
||||
async function updateAccount() {
|
||||
error.value = validateInputs(state, isCustomService.value)
|
||||
if (error.value) return
|
||||
const old = { ...props.accountData }
|
||||
const updatedEmailAccount = { ...state }
|
||||
|
||||
const nameChanged =
|
||||
old.email_account_name !== updatedEmailAccount.email_account_name
|
||||
delete old.email_account_name
|
||||
delete updatedEmailAccount.email_account_name
|
||||
|
||||
const otherFieldsChanged = isDirty.value
|
||||
const values = updatedEmailAccount
|
||||
|
||||
if (!nameChanged && !otherFieldsChanged) {
|
||||
createToast({
|
||||
title: 'No changes made',
|
||||
icon: 'info',
|
||||
iconClasses: 'text-blue-600',
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (nameChanged) {
|
||||
try {
|
||||
loading.value = true
|
||||
await callRenameDoc()
|
||||
succesHandler()
|
||||
} catch (err) {
|
||||
errorHandler()
|
||||
}
|
||||
}
|
||||
if (otherFieldsChanged) {
|
||||
try {
|
||||
loading.value = true
|
||||
await callSetValue(values)
|
||||
succesHandler()
|
||||
} catch (err) {
|
||||
errorHandler()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const isDirty = computed(() => {
|
||||
return (
|
||||
state.email_id !== props.accountData.email_id ||
|
||||
state.api_key !== props.accountData.api_key ||
|
||||
state.api_secret !== props.accountData.api_secret ||
|
||||
state.password !== props.accountData.password ||
|
||||
state.enable_incoming !== props.accountData.enable_incoming ||
|
||||
state.enable_outgoing !== props.accountData.enable_outgoing ||
|
||||
state.default_outgoing !== props.accountData.default_outgoing ||
|
||||
state.default_incoming !== props.accountData.default_incoming ||
|
||||
state.frappe_mail_site !== props.accountData.frappe_mail_site
|
||||
)
|
||||
})
|
||||
|
||||
async function callRenameDoc() {
|
||||
const d = await call('frappe.client.rename_doc', {
|
||||
doctype: 'Email Account',
|
||||
old_name: props.accountData.email_account_name,
|
||||
new_name: state.email_account_name,
|
||||
})
|
||||
return d
|
||||
}
|
||||
|
||||
async function callSetValue(values) {
|
||||
const d = await call('frappe.client.set_value', {
|
||||
doctype: 'Email Account',
|
||||
name: state.email_account_name,
|
||||
fieldname: values,
|
||||
})
|
||||
return d.name
|
||||
}
|
||||
|
||||
function succesHandler() {
|
||||
emit('update:step', 'email-list')
|
||||
createToast({
|
||||
title: 'Email account updated successfully',
|
||||
icon: 'check',
|
||||
iconClasses: 'text-green-600',
|
||||
})
|
||||
}
|
||||
|
||||
function errorHandler() {
|
||||
loading.value = false
|
||||
error.value = 'Failed to update email account, Invalid credentials'
|
||||
}
|
||||
</script>
|
||||
33
frontend/src/components/Settings/EmailProviderIcon.vue
Normal file
33
frontend/src/components/Settings/EmailProviderIcon.vue
Normal file
@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex items-center justify-center w-8 h-8 bg-gray-100 cursor-pointer rounded-xl hover:bg-gray-200"
|
||||
:class="{ 'ring-2 ring-gray-500 dark:ring-gray-100': selected }"
|
||||
>
|
||||
<img :src="logo" class="w-4 h-4" />
|
||||
</div>
|
||||
<p
|
||||
v-if="serviceName"
|
||||
class="text-xs text-center text-gray-700 dark:text-gray-500 mt-2"
|
||||
>
|
||||
{{ serviceName }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
logo: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
serviceName: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
selected: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
Loading…
x
Reference in New Issue
Block a user