mirror/api
1
0
Fork 0
mirror of https://github.com/unraid/api.git synced 2026-01-01 14:10:10 -06:00
Code Issues Packages Projects Releases Wiki Activity

refactor(web): update os styles for regExp expiration

Browse Source
This commit is contained in:
Zack Spear
2023-10-03 18:01:54 -07:00
committed by Zack Spear
parent 37d548db8c
commit 27deaf91cc
4 changed files with 138 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/components/UpdateOs/CheckButton.vue
View File

@@ -105,7 +105,7 @@ watchEffect(() => {
</span>
</span>
</Switch>
<SwitchLabel class="text-14px">{{ t('Check Prereleases') }}</SwitchLabel>
<SwitchLabel class="text-14px">{{ t('Check for Prereleases') }}</SwitchLabel>
</div>
</SwitchGroup>
<span class="flex flex-col gap-y-8px">

44
web/components/UpdateOs/Status.vue
View File

@@ -8,6 +8,7 @@ import {
} from '@heroicons/vue/24/solid';
import { storeToRefs } from 'pinia';
import useTimeHelper from '~/composables/time';
import { useServerStore } from '~/store/server';
import { useUpdateOsStore, useUpdateOsActionsStore } from '~/store/updateOsActions';
@@ -23,9 +24,44 @@ const serverStore = useServerStore();
const updateOsStore = useUpdateOsStore();
const updateOsActionsStore = useUpdateOsActionsStore();
const { guid, keyfile, osVersion } = storeToRefs(serverStore);
const { dateTimeFormat, osVersion, regExp, regUpdatesExpired } = storeToRefs(serverStore);
const { available, parsedReleaseTimestamp } = storeToRefs(updateOsStore);
const { ineligibleText, rebootType, rebootTypeText } = storeToRefs(updateOsActionsStore);
const { buildStringFromValues, dateDiff, formatDate } = useTimeHelper(dateTimeFormat.value, props.t);
const parsedTime = ref<string>('');
const formattedTime = computed<string>(() => formatDate(regExp.value));
const regExpOutput = computed(() => {
if (!regExp.value) {
return undefined;
}
return {
text: regUpdatesExpired.value
? props.t('Ineligible for updates released after {0}', [formattedTime.value])
: props.t('Eligible for updates until {0}', [formattedTime.value]),
title: regUpdatesExpired.value
? props.t('Ineligible as of {0}', [parsedTime.value])
: props.t('Eligible for updates for {0}', [parsedTime.value]),
};
});
const runDiff = () => {
parsedTime.value = buildStringFromValues(dateDiff((regExp.value).toString(), false));
};
let interval: string | number | NodeJS.Timeout | undefined;
onBeforeMount(() => {
runDiff();
interval = setInterval(() => {
runDiff();
}, 1000);
});
onBeforeUnmount(() => {
clearInterval(interval);
});
</script>
<template>
@@ -44,12 +80,12 @@ const { ineligibleText, rebootType, rebootTypeText } = storeToRefs(updateOsActio
</button>
<UiBadge
v-if="!guid || !keyfile"
v-if="ineligibleText"
:color="'red'"
:icon="ExclamationTriangleIcon"
:title="t(ineligibleText)"
:title="regExpOutput?.text"
>
{{ t('Ineligible for updates') }}
{{ t('Ineligible for new updates') }}
</UiBadge>
<UiBadge
v-else-if="rebootType === ''"

161
web/components/UpdateOs/Update.vue
View File

@@ -11,6 +11,7 @@ import {
ArrowSmallRightIcon,
ArrowTopRightOnSquareIcon,
BellAlertIcon,
EyeIcon,
ShieldExclamationIcon,
WrenchScrewdriverIcon,
} from '@heroicons/vue/24/solid';
@@ -23,6 +24,7 @@ import '~/assets/main.css';
import { useServerStore } from '~/store/server';
import { useUpdateOsStore, useUpdateOsActionsStore } from '~/store/updateOsActions';
import type { UserProfileLink } from '~/types/userProfile';
import { LazyUiCardWrapper } from '.nuxt/components';
const props = defineProps<{
t: any;
@@ -45,22 +47,12 @@ const heading = computed(() => {
});
const headingIcon = computed(() => {
if (ineligibleText.value) {
return ShieldExclamationIcon;
}
if (available.value) {
return BellAlertIcon;
}
return ArrowPathIcon;
});
const subheading = computed(() => {
if (ineligibleText.value) {
return props.t('Ineligible for Unraid OS updates');
}
return '';
});
const flashBackupCopy = computed(() => {
const base = props.t('We recommend backing up your USB Flash Boot Device before starting the update.');
if (connectPluginInstalled.value && flashBackupActivated.value) {
@@ -116,11 +108,18 @@ const checkFlashBackupStatus = () => {
}, 500);
};
const disableCallbackButton = computed(() => {
if (!ineligibleText.value) { // if we're eilgibe acknowledgeBackup is required or flashBackupBasicStatus must be complete
return !acknowledgeBackup.value || flashBackupBasicStatus.value === 'started'
}
return false;
});
watchEffect(() => {
if (available.value) {
updateButton.value = updateOsActionsStore.initUpdateOsCallback();
} else {
updateButton.value = undefined;
updateButton.value = updateOsActionsStore.initUpdateOsCallback();
}
if (flashBackupBasicStatus.value === 'complete') {
acknowledgeBackup.value = true; // auto check the box
@@ -129,20 +128,31 @@ watchEffect(() => {
</script>
<template>
<UiCardWrapper :error="!!ineligibleText" :increased-padding="true">
<!-- :warning="!!ineligibleText" -->
<UiCardWrapper :increased-padding="true">
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-20px sm:gap-24px">
<div class="grid gap-y-16px">
<h3 class="text-20px font-semibold leading-normal flex flex-row items-center gap-8px">
<RegistrationUpdateExpiration
v-if="ineligibleText"
component-is="h3"
:t="t"
class="text-unraid-red text-20px font-semibold leading-normal flex flex-row items-center gap-8px"
>
<ShieldExclamationIcon class="w-20px shrink-0" />
</RegistrationUpdateExpiration>
<h3
v-else
class="text-20px font-semibold leading-normal flex flex-row items-center gap-8px"
>
<component :is="headingIcon" class="w-20px shrink-0" />
<span>
{{ heading }}
</span>
</h3>
<h4 v-if="subheading" class="text-18px font-semibold leading-normal">
{{ subheading }}
</h4>
<div class="prose text-16px leading-relaxed whitespace-normal" :class="!ineligibleText ? 'opacity-75' : ''">
<p v-if="ineligibleText">{{ ineligibleText }}</p>
<p v-if="ineligibleText">{{ t(ineligibleText) }} {{ t('You may still update to releases dated prior to your update expiration date.') }}</p>
<template v-else>
<p>{{ t('Receive the latest and greatest for Unraid OS. Whether it new features, security patches, or bug fixes – keeping your server up-to-date ensures the best experience that Unraid has to offer.') }}</p>
<p v-if="available">{{ flashBackupCopy }}</p>
@@ -150,81 +160,84 @@ watchEffect(() => {
</div>
</div>
<BrandButton
v-if="ineligibleText"
btn-style="white"
href="/Tools/Registration"
:icon="WrenchScrewdriverIcon"
:icon-right="ArrowSmallRightIcon"
:text="t('Learn more and fix')"
class="flex-none"
/>
<div v-else-if="available && updateButton" class="flex flex-col sm:flex-shrink-0 items-center gap-16px">
<div class="flex flex-col sm:flex-shrink-0 items-center gap-16px">
<BrandButton
@click="startFlashBackup"
btn-style="outline"
:disabled="flashBackupBasicStatus === 'started'"
:icon="ArchiveBoxArrowDownIcon"
:name="'flashBackup'"
:text="flashBackupText"
v-if="ineligibleText"
href="/Tools/Registration"
:icon="WrenchScrewdriverIcon"
:icon-right="ArrowSmallRightIcon"
:text="t('Learn more and fix')"
class="flex-none" />
<p v-if="flashBackupBasicStatus === 'started'" class="text-12px italic opacity-75 shrink">
{{ t('Backing up...this may take a few minutes') }}
</p>
<template v-else-if="available && updateButton">
<BrandButton
@click="startFlashBackup"
btn-style="outline"
:disabled="flashBackupBasicStatus === 'started'"
:icon="ArchiveBoxArrowDownIcon"
:name="'flashBackup'"
:text="flashBackupText"
class="flex-none" />
<SwitchGroup as="div">
<div class="flex flex-shrink-0 items-center gap-16px">
<Switch
v-model="acknowledgeBackup"
:disabled="flashBackupBasicStatus === 'started'"
:class="[
acknowledgeBackup ? 'bg-green-500' : 'bg-gray-200',
'relative inline-flex h-24px w-[44px] flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2',
]"
>
<span
<p v-if="flashBackupBasicStatus === 'started'" class="text-12px italic opacity-75 shrink">
{{ t('Backing up...this may take a few minutes') }}
</p>
<SwitchGroup as="div">
<div class="flex flex-shrink-0 items-center gap-16px">
<Switch
v-model="acknowledgeBackup"
:disabled="flashBackupBasicStatus === 'started'"
:class="[
acknowledgeBackup ? 'translate-x-20px' : 'translate-x-0',
'pointer-events-none relative inline-block h-20px w-20px transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out',
acknowledgeBackup ? 'bg-green-500' : 'bg-gray-200',
'relative inline-flex h-24px w-[44px] flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2',
]"
>
<span
:class="[
acknowledgeBackup ? 'opacity-0 duration-100 ease-out' : 'opacity-100 duration-200 ease-in',
'absolute inset-0 flex h-full w-full items-center justify-center transition-opacity',
acknowledgeBackup ? 'translate-x-20px' : 'translate-x-0',
'pointer-events-none relative inline-block h-20px w-20px transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out',
]"
aria-hidden="true"
>
<svg class="h-12px w-12px text-gray-400" fill="none" viewBox="0 0 12 12">
<path d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span
:class="[
acknowledgeBackup ? 'opacity-0 duration-100 ease-out' : 'opacity-100 duration-200 ease-in',
'absolute inset-0 flex h-full w-full items-center justify-center transition-opacity',
]"
aria-hidden="true"
>
<svg class="h-12px w-12px text-gray-400" fill="none" viewBox="0 0 12 12">
<path d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
<span
:class="[
acknowledgeBackup ? 'opacity-100 duration-200 ease-in' : 'opacity-0 duration-100 ease-out',
'absolute inset-0 flex h-full w-full items-center justify-center transition-opacity',
]"
aria-hidden="true"
>
<svg class="h-12px w-12px text-green-500" fill="currentColor" viewBox="0 0 12 12">
<path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z" />
</svg>
</span>
</span>
<span
:class="[
acknowledgeBackup ? 'opacity-100 duration-200 ease-in' : 'opacity-0 duration-100 ease-out',
'absolute inset-0 flex h-full w-full items-center justify-center transition-opacity',
]"
aria-hidden="true"
>
<svg class="h-12px w-12px text-green-500" fill="currentColor" viewBox="0 0 12 12">
<path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z" />
</svg>
</span>
</span>
</Switch>
<SwitchLabel class="text-14px">{{ t('I have made a Flash Backup') }}</SwitchLabel>
</div>
</SwitchGroup>
</Switch>
<SwitchLabel class="text-14px">{{ t('I have made a Flash Backup') }}</SwitchLabel>
</div>
</SwitchGroup>
</template>
<BrandButton
@click="updateButton?.click"
:disabled="!acknowledgeBackup || flashBackupBasicStatus === 'started'"
:btn-style="ineligibleText ? 'outline' : 'fill'"
:disabled="disableCallbackButton"
:external="updateButton?.external"
:icon="EyeIcon"
:icon-right="ArrowTopRightOnSquareIcon"
:name="updateButton?.name"
:text="t('View Changelog & Update')"
:title="!acknowledgeBackup ? t('Acklowledge that you have made a Flash Backup to enable this action') : ''"
:text="!ineligibleText ? t('View Changelog & Update') : t('View Available Updates')"
:title="!acknowledgeBackup && !ineligibleText ? t('Acklowledge that you have made a Flash Backup to enable this action') : ''"
class="flex-none" />
</div>
</div>

18
web/locales/en_US.json
View File

@@ -220,7 +220,7 @@
"Begin restore to Unraid {0}": "Begin restore to Unraid {0}",
"Version available for restore {0}": "Version available for restore {0}",
"Check for Updates": "Check for Updates",
"Check Prereleases": "Check Prereleases",
"Check for Prereleases": "Check for Prereleases",
"Receive the latest and greatest for Unraid OS. Whether it new features, security patches, or bug fixes – keeping your server up-to-date ensures the best experience that Unraid has to offer.": "Receive the latest and greatest for Unraid OS. Whether it new features, security patches, or bug fixes – keeping your server up-to-date ensures the best experience that Unraid has to offer.",
"Check For Updates": "Check For Updates",
"Checking...": "Checking...",
@@ -258,10 +258,10 @@
"License key actions": "License key actions",
"License key type": "License key type",
"OS Update Eligibility Expiration": "OS Update Eligibility Expiration",
"Ineligible since {0}": "Ineligible since {0}",
"Valid until {0}": "Valid until {0}",
"Ineligible for updates released after {0}": "Ineligible for updates released after {0}",
"Eligible for updates until {0}": "Eligible for updates until {0}",
"Ineligible as of {0}": "Ineligible as of {0}",
"Valid for {0}": "Valid for {0}",
"Eligible for updates for {0}": "Eligible for updates for {0}",
"Renew your license key now": "Renew your license key now",
"Renew Key to Enable OS Updates": "Renew Key to Enable OS Updates",
"Check Eligibility": "Check Eligibility",
@@ -275,13 +275,13 @@
"Starter": "Starter",
"Unleashed": "Unleashed",
"Lifetime": "Lifetime",
"Renew your license key to continue receiving OS updates.": "Renew your license key to continue receiving OS updates.",
"Pay your annual fee to continue receiving OS updates.": "Pay your annual fee to continue receiving OS updates.",
"Renew Key": "Renew Key",
"A valid GUID is required to check for updates.": "A valid GUID is required to check for updates.",
"A valid keyfile is required to check for updates.": "A valid keyfile is required to check for updates.",
"A valid OS version is required to check for updates.": "A valid OS version is required to check for updates.",
"Your OS update eligibility has expired. Please renew your license key enable updates.": "Your OS update eligibility has expired. Please renew your license key enable updates.",
"Ineligible for updates": "Ineligible for updates",
"Your OS update eligibility has expired. Please renew your license key to enable updates released after your expiration date.": "Your OS update eligibility has expired. Please renew your license key to enable updates released after your expiration date.",
"Ineligible for new updates": "Ineligible for new updates",
"Ineligible for Unraid OS updates": "Ineligible for Unraid OS updates",
"Learn more and fix": "Learn more and fix",
"Expires at {0}": "Expires at {0}",
@@ -300,5 +300,7 @@
"Acklowledge that you have made a Flash Backup to enable this action": "Acklowledge that you have made a Flash Backup to enable this action",
"You can also manually create a new backup by clicking the Create Flash Backup button.": "You can also manually create a new backup by clicking the Create Flash Backup button.",
"You can manually create a backup by clicking the Create Flash Backup button.": "You can manually create a backup by clicking the Create Flash Backup button.",
"I have made a Flash Backup": "I have made a Flash Backup"
"I have made a Flash Backup": "I have made a Flash Backup",
"You may still update to releases dated prior to your update expiration date.": "You may still update to releases dated prior to your update expiration date.",
"View Available Updates": "View Available Updates"
}