Feature: Mobile - Added the custom logo handling for the login page.

.storybook/preview.ts

@@ -1,14 +1,16 @@
 // Copyright (C) 2012-2021 Zammad Foundation, https://zammad-foundation.org/
 
-import { app } from '@storybook/vue3'
+import initializeGlobalComponents from '@common/initializer/globalComponents'
+import '@common/styles/main.css'
 import { i18n } from '@common/utils/i18n'
+import { app } from '@storybook/vue3'
 import 'virtual:svg-icons-register' // eslint-disable-line import/no-unresolved
-import '@common/styles/main.css'
-import initializeGlobalComponents from '@common/initializer/globalComponents'
+import initializeStore from '@common/stores'
 
 // adds translation to app
 app.config.globalProperties.i18n = i18n
 initializeGlobalComponents(app)
+initializeStore(app)
 
 export default {
   actions: { argTypesRegex: '^on[A-Z].*' },

app/frontend/apps/mobile/views/Login.vue

@@ -11,11 +11,7 @@
           <div class="my-5 p-5 max-w-full bg-white flex-grow rounded-md">
             <div class="flex flex-col">
               <div class="flex justify-center p-4">
-                <img
-                  class="w-32 h-32"
-                  src="@common/assets/logo.svg"
-                  alt="Zammad"
-                />
+                <CommonLogo />
               </div>
 
               <div class="text-left">
@@ -90,6 +86,7 @@ import useApplicationConfigStore from '@common/stores/application/config'
 import useAuthenticationStore from '@common/stores/authenticated'
 import { useRouter } from 'vue-router'
 import { NotificationTypes } from '@common/types/notification'
+import CommonLogo from '@common/components/common/CommonLogo.vue'
 
 interface Props {
   invalidatedSession?: string

app/frontend/common/components/common/CommonLogo.vue

@@ -0,0 +1,23 @@
+<!-- Copyright (C) 2012-2021 Zammad Foundation, https://zammad-foundation.org/ -->
+
+<template>
+  <img class="w-32 h-32" v-bind:src="logoUrl" v-bind:alt="altText" />
+</template>
+
+<script setup lang="ts">
+import useApplicationConfigStore from '@common/stores/application/config'
+import { computed, ComputedRef } from 'vue'
+
+const assetsPath = '/assets/images'
+const config = useApplicationConfigStore()
+
+const logoUrl: ComputedRef<string> = computed(() => {
+  const productLogo = config.get('product_logo') as string
+  if (!productLogo) {
+    return `${assetsPath}/logo.svg`
+  }
+  return `${assetsPath}/${productLogo}`
+})
+
+const altText = config.get('product_name') as string
+</script>

app/frontend/stories/common/CommonLogo.stories.ts

@@ -0,0 +1,31 @@
+// Copyright (C) 2012-2021 Zammad Foundation, https://zammad-foundation.org/
+
+import CommonLogo from '@common/components/common/CommonLogo.vue'
+import useApplicationConfigStore from '@common/stores/application/config'
+import { Story } from '@storybook/vue3'
+
+export default {
+  title: 'Common/Logo',
+  component: CommonLogo,
+}
+
+const Template: Story = (args) => ({
+  components: { CommonLogo },
+  setup() {
+    const configStore = useApplicationConfigStore()
+    if (args.isCustomLogo) {
+      configStore.value.product_logo = 'icons/logotype.svg'
+    } else {
+      configStore.value.product_logo = undefined
+    }
+    return { args }
+  },
+  template: '<CommonLogo />',
+})
+
+export const DefaultLogo = Template.bind({})
+
+export const CustomLogo = Template.bind({})
+CustomLogo.args = {
+  isCustomLogo: true,
+}

app/frontend/tests/common/components/common/CommonLogo.spec.ts

@@ -0,0 +1,30 @@
+// Copyright (C) 2012-2021 Zammad Foundation, https://zammad-foundation.org/
+
+import CommonLogo from '@common/components/common/CommonLogo.vue'
+import useApplicationConfigStore from '@common/stores/application/config'
+import { createTestingPinia } from '@pinia/testing'
+import { shallowMount } from '@vue/test-utils'
+
+describe('CommonLogo.vue', () => {
+  createTestingPinia()
+  const configStore = useApplicationConfigStore()
+
+  it('renders custom logo', () => {
+    configStore.value.product_name = 'Zammad Custom Logo'
+
+    const wrapper = shallowMount(CommonLogo)
+
+    expect(wrapper.attributes().alt).toBe('Zammad Custom Logo')
+    expect(wrapper.attributes().src).toBe('/assets/images/logo.svg')
+  })
+
+  it('renders default zammad logo', () => {
+    configStore.value.product_logo = 'icons/logotype.svg'
+    configStore.value.product_name = undefined
+
+    const wrapper = shallowMount(CommonLogo)
+
+    expect(wrapper.attributes().alt).toBe(undefined)
+    expect(wrapper.attributes().src).toBe('/assets/images/icons/logotype.svg')
+  })
+})