feat: added domain name in interface (#13)

src/composables/useConfig.ts

@@ -0,0 +1,14 @@
+import { ref } from 'vue'
+import axios from 'axios'
+
+interface ConfigResponse {
+  domain?: string
+}
+
+export function useConfig() {
+  const domainName = ref<string>()
+
+  axios.get<ConfigResponse>('/config.json').then(({ data }) => (domainName.value = data.domain))
+
+  return { domainName }
+}

src/i18n/en-US.json

@@ -15,7 +15,8 @@
     "password": "Password",
     "remember_me": "Remember me",
     "sign_in": "Sign in",
-    "invalid_credentials": "Invalid credentials"
+    "invalid_credentials": "Invalid credentials",
+    "domain": "Domain"
   },
   "account_settings": {
     "title": "Account settings",

src/views/BaseTemplate.vue

@@ -10,10 +10,12 @@ import { faBars, faXmark } from '@fortawesome/free-solid-svg-icons'
 import { ref } from 'vue'
 import { NeButton } from '@nethserver/vue-tailwind-lib'
 import NotificationHandler from '@/components/NotificationHandler.vue'
+import { useConfig } from '@/composables/useConfig'
 
 const { logout, uid } = useAuth()
 
 const router = useRouter()
+const { domainName } = useConfig()
 
 const sidebarRef = ref<HTMLElement | null>(null)
 
@@ -60,7 +62,9 @@ function handleLogout() {
         >
           <FontAwesomeIcon :icon="faBars" class="h-full w-full" />
         </button>
+
         <div class="ml-auto flex items-center text-gray-700 dark:text-gray-200">
+          <p class="pr-6 text-sm">{{ domainName }}</p>
           <div class="mr-2 h-8 w-8">
             <FontAwesomeIcon :icon="faCircleUser" class="h-full w-full" />
           </div>

src/views/LoginView.vue

@@ -1,13 +1,15 @@
 <script lang="ts" setup>
-import { NeCheckbox, NeTextInput, NeButton } from '@nethserver/vue-tailwind-lib'
+import { NeButton, NeCheckbox, NeTextInput } from '@nethserver/vue-tailwind-lib'
 import { NeInlineNotification } from '@nethesis/vue-components'
 import { ref } from 'vue'
 import { useAuth } from '@/composables/useAuth'
 import axios from 'axios'
 import { useRouter } from 'vue-router'
+import { useConfig } from '@/composables/useConfig'
 
 const { login } = useAuth()
 const router = useRouter()
+const { domainName } = useConfig()
 
 const username = ref('')
 const password = ref('')
@@ -57,6 +59,12 @@ async function handleLogin() {
           <p class="text-sm font-normal">{{ $t('login_form.sign_in_description') }}</p>
         </div>
         <NeInlineNotification v-if="errorMessage" :title="$t(errorMessage)" kind="error" />
+        <NeTextInput
+          v-if="domainName"
+          v-model="domainName"
+          disabled
+          :label="$t('login_form.domain')"
+        />
         <NeTextInput
           v-model="username"
           :disabled="loading"