fernando
/
eeg_certs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[FE][Classroom] Add a warning if the expiration date is in less than a month

master
Araozu 2023-11-22 12:00:24 -05:00
parent 8d8c5b0cca
commit 853cc3eb99
1 changed files with 40 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
frontend/src/OnlineClassroom/ClassroomUserInfo/AccountExpiration.tsx
View File

@ -8,6 +8,12 @@ import { AxiosError } from "axios";
import { WarningIcon } from "../../icons/WarningIcon";
import { PlusIcon } from "../../icons/PlusIcon";
enum ExpiryStatus {
Ok,
Soon,
Expired,
}
export function AccountExpiration(props: {userId: number}) {
const [expirationDate, setExpirationDate] = createSignal<string | null>(null); // YYYY-MM-DD
const [localExpirationDate, setLocalExpirationDate] = createSignal<string | null>(null); // YYYY-MM-DD
@ -15,17 +21,38 @@ export function AccountExpiration(props: {userId: number}) {
const loading = createMemo(() => status() === LoadingStatus.Loading);
const expired = createMemo(() => {
const expired = createMemo<ExpiryStatus>(() => {
if (expirationDate() === null) {
return false;
return ExpiryStatus.Ok;
}
const date = new Date(`${expirationDate()}T00:00:00`);
const today = new Date();
const expiryDate = new Date(`${expirationDate()}T00:00:00`);
return date < today;
const today = new Date();
const aMonthFromNow = new Date();
aMonthFromNow.setDate(aMonthFromNow.getDate() + 30);
if (expiryDate < today) {
return ExpiryStatus.Expired;
} else if (expiryDate < aMonthFromNow) {
return ExpiryStatus.Soon;
} else {
return ExpiryStatus.Ok;
}
});
const dateColor = createMemo(() => {
switch (expired()) {
case ExpiryStatus.Ok:
return "var(--c-success)";
case ExpiryStatus.Soon:
return "#9e4300";
case ExpiryStatus.Expired:
return "var(--c-error)";
}
});
const loadExpiration = () => {
setError("");
setStatus(LoadingStatus.Loading);
@ -98,8 +125,8 @@ export function AccountExpiration(props: {userId: number}) {
<span
class="font-mono font-bold text-center"
style={{color: expired() ? "var(--c-error)" : "var(--c-on-surface)"}}
title={expired() ? "Esta cuenta ha expirado" : ""}
style={{color: dateColor()}}
title={expired() === ExpiryStatus.Expired ? "Esta cuenta ha expirado" : ""}
>
<Show when={loading()}>
<LoadingIcon
@ -108,9 +135,9 @@ export function AccountExpiration(props: {userId: number}) {
/>
</Show>
<Show when={!loading()}>
{formatDate(expirationDate() ?? "")}
{formatDate(expirationDate() ?? "0-0-0")}
</Show>
<Show when={expired()}>
<Show when={expired() === ExpiryStatus.Expired}>
<WarningIcon
class="mx-2"
fill="var(--c-error)"
@ -123,7 +150,7 @@ export function AccountExpiration(props: {userId: number}) {
<div class="grid grid-cols-2">
<div class="border-r border-c-outline pt-2 pr-1">
<p>Ampliar por preset:</p>
<p>Establecer expiracion:</p>
<button
class="bg-c-primary text-c-on-primary px-3 py-2 rounded-full cursor-pointer
@ -133,7 +160,7 @@ export function AccountExpiration(props: {userId: number}) {
onclick={setExpiration2Months}
>
<span class="mr-6">
Agregar 2 meses
2 meses d. hoy
</span>
<span
class="absolute top-1 right-2"
@ -155,7 +182,7 @@ export function AccountExpiration(props: {userId: number}) {
</button>
</div>
<div class="pt-2 pl-1 text-right">
<p>Ampliar manualmente:</p>
<p>Establecer expiracion:</p>
<input
class="bg-c-surface text-c-on-surface border border-c-outline rounded-lg py-1 px-2 font-mono
@ -176,7 +203,7 @@ export function AccountExpiration(props: {userId: number}) {
onclick={setExpiration}
>
<span class="mr-6">
Actualizar
Establecer
</span>
<span
class="absolute top-1 right-2"