fix: changed frappe cloud login flow

frontend/package.json

@@ -25,7 +25,7 @@
     "codemirror-editor-vue3": "^2.8.0",
     "dayjs": "^1.11.6",
     "feather-icons": "^4.28.0",
-    "frappe-ui": "^0.1.109",
+    "frappe-ui": "^0.1.112",
     "lucide-vue-next": "^0.383.0",
     "markdown-it": "^14.0.0",
     "pinia": "^2.0.33",

frontend/src/components/Icons/FrappeCloudIcon.vue

@@ -0,0 +1,23 @@
+<template>
+	<svg
+		width="32"
+		height="32"
+		viewBox="0 0 32 32"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<rect
+			x="0.75"
+			y="0.75"
+			width="30.5"
+			height="30.5"
+			rx="6.25"
+			stroke="currentColor"
+			stroke-width="1.5"
+		/>
+		<path
+			d="M24.5011 14.1124C23.3954 12.4873 21.532 11.5477 19.594 11.6747C18.7616 10.1384 17.2211 9.12267 15.4198 9.0084C14.1651 8.93222 12.8979 9.3766 11.9165 10.24C11.2456 10.8367 10.7611 11.5223 10.463 12.2968C10.289 12.7539 9.89151 13.0459 9.46912 13.0459H6.5V15.5852H9.46912C10.9226 15.5852 12.2271 14.6584 12.7737 13.2237C12.9227 12.8301 13.1712 12.4873 13.5439 12.1571C14.0284 11.7255 14.662 11.4969 15.2583 11.535C16.1528 11.5985 16.7863 12.0175 17.1839 12.538C17.6063 13.0205 17.8423 13.7696 17.979 14.5187C18.774 14.2902 19.6437 14.0997 20.476 14.2394C21.1593 14.3536 21.7929 14.7218 22.2525 15.2678C22.327 15.3567 22.4016 15.4456 22.4637 15.5471C23.06 16.4232 23.1718 17.5024 22.7743 18.5689C22.414 19.5592 21.0847 20.4607 19.9791 20.4607H11.3326C10.1524 20.4607 9.18339 19.5592 9.03432 18.4038H6.54969C6.71119 20.9686 8.78585 23 11.3326 23H19.9915C22.1283 23 24.3769 21.451 25.1098 19.4704C25.7931 17.6167 25.5695 15.6614 24.5135 14.0997L24.5011 14.1124Z"
+			fill="currentColor"
+		/>
+	</svg>
+</template>

frontend/src/components/UserDropdown.vue

@@ -71,7 +71,9 @@ import { convertToTitleCase } from '@/utils'
 import { usersStore } from '@/stores/user'
 import { useSettings } from '@/stores/settings'
 import { markRaw, watch, ref, onMounted, computed } from 'vue'
+import { createDialog } from '@/utils/dialogs'
 import SettingsModal from '@/components/Modals/Settings.vue'
+import FrappeCloudIcon from '@/components/Icons/FrappeCloudIcon.vue'
 import {
 	ChevronDown,
 	LogIn,
@@ -80,7 +82,6 @@ import {
 	User,
 	Settings,
 	Sun,
-	LogInIcon,
 } from 'lucide-vue-next'
 
 const router = useRouter()
@@ -91,6 +92,7 @@ let { isLoggedIn } = sessionStore()
 const showSettingsModal = ref(false)
 const theme = ref('light')
 const frappeCloudBaseEndpoint = 'https://frappecloud.com'
+const $dialog = createDialog
 
 const props = defineProps({
 	isCollapsed: {
@@ -159,14 +161,25 @@ const userDropdownOptions = computed(() => {
 			},
 		},
 		{
-			icon: LogInIcon,
+			icon: FrappeCloudIcon,
 			label: 'Login to Frappe Cloud',
 			onClick: () => {
-				let redirect_to = '/dashboard/welcome'
-				if (userResource.data.site_info.is_payment_method_added) {
-					redirect_to = '/dashboard/sites/' + userResource.data.sitename
-				}
-				window.open(`${frappeCloudBaseEndpoint}${redirect_to}`, '_blank')
+				$dialog({
+					title: __('Login to Frappe Cloud?'),
+					message: __(
+						'Are you sure you want to login to your Frappe Cloud dashboard?'
+					),
+					actions: [
+						{
+							label: __('Confirm'),
+							variant: 'solid',
+							onClick(close) {
+								loginToFrappeCloud()
+								close()
+							},
+						},
+					],
+				})
 			},
 			condition: () => {
 				return (
@@ -198,4 +211,12 @@ const userDropdownOptions = computed(() => {
 		},
 	]
 })
+
+const loginToFrappeCloud = () => {
+	let redirect_to = '/dashboard/welcome'
+	if (userResource.data?.site_info.is_payment_method_added) {
+		redirect_to = '/dashboard/sites/' + userResource.data.sitename
+	}
+	window.open(`${frappeCloudBaseEndpoint}${redirect_to}`, '_blank')
+}
 </script>