mirror of
https://github.com/unraid/api.git
synced 2026-01-04 23:50:37 -06:00
86b6c4f85b
Added a Vite plugin to automatically inject the Tailwind CSS import into the `unraid-components.client.js` entry file, enhancing the integration of Tailwind CSS within the application. This change improves the setup for styling components consistently across the project. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added automated validation to ensure Tailwind CSS styles are correctly included in the custom elements build output. * **Chores** * Updated the build process to include a CSS validation step after manifest generation. * Enhanced development build configuration to enable CSS source maps and optimize Tailwind CSS injection into web components. * Extended CSS theme with new responsive breakpoint variables. * Improved CSS class specificity in user profile, server state, and update modal components for consistent styling. * Removed redundant style blocks and global CSS imports from multiple components to streamline styling and reduce duplication. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
82 lines
2.4 KiB
Vue
82 lines
2.4 KiB
Vue
<script lang="ts" setup>
|
|
import { computed, onBeforeMount, ref, watchEffect } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { storeToRefs } from 'pinia';
|
|
|
|
import { request } from '~/composables/services/request';
|
|
import { useServerStore } from '~/store/server';
|
|
|
|
export interface Props {
|
|
phpWanIp?: string;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const { t } = useI18n();
|
|
|
|
const { isRemoteAccess } = storeToRefs(useServerStore());
|
|
|
|
const wanIp = ref<string | null>();
|
|
const fetchError = ref<string>('');
|
|
const loading = ref(false);
|
|
|
|
const computedError = computed((): string => {
|
|
if (!props.phpWanIp) {
|
|
return t('DNS issue, unable to resolve wanip4.unraid.net');
|
|
}
|
|
if (fetchError.value) {
|
|
return fetchError.value;
|
|
}
|
|
return '';
|
|
});
|
|
|
|
onBeforeMount(() => {
|
|
wanIp.value = sessionStorage.getItem('unraidConnect_wanIp');
|
|
});
|
|
|
|
watchEffect(async () => {
|
|
// if we don't have a client WAN IP AND we have the server WAN IP then we fetch
|
|
if (!wanIp.value && props.phpWanIp) {
|
|
loading.value = true;
|
|
|
|
const response = await request.url('https://wanip4.unraid.net/').get().text();
|
|
|
|
if (response) {
|
|
loading.value = false;
|
|
wanIp.value = response as string; // response returns text nothing to traverse
|
|
// save in sessionStorage so we only make this request once per webGUI session
|
|
sessionStorage.setItem('unraidConnect_wanIp', wanIp.value);
|
|
} else {
|
|
loading.value = false;
|
|
fetchError.value = t('Unable to fetch client WAN IPv4');
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<span v-if="loading" class="italic">{{ t('Checking WAN IPs…') }}</span>
|
|
<template v-else>
|
|
<span v-if="computedError" class="text-unraid-red font-semibold">{{ computedError }}</span>
|
|
<template v-else>
|
|
<span v-if="isRemoteAccess || (phpWanIp === wanIp && !isRemoteAccess)">{{
|
|
t('Remark: your WAN IPv4 is {0}', [wanIp])
|
|
}}</span>
|
|
<span v-else class="inline-block w-1/2 whitespace-normal">
|
|
{{
|
|
t("Remark: Unraid's WAN IPv4 {0} does not match your client's WAN IPv4 {1}.", [
|
|
phpWanIp,
|
|
wanIp,
|
|
])
|
|
}}
|
|
{{
|
|
t('This may indicate a complex network that will not work with this Remote Access solution.')
|
|
}}
|
|
{{ t('Ignore this message if you are currently connected via Remote Access or VPN.') }}
|
|
</span>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
</template>
|