[FE][Classroom] Fixes #19 - Show when an account is expired

frontend/src/OnlineClassroom/ClassroomUserInfo/AccountExpiration.tsx

@@ -1,10 +1,11 @@
 import { Show, createMemo, createSignal, onMount } from "solid-js";
 import { OutlinedCard } from "../../components/OutlinedCard";
-import { LoadingStatus, backend, useLoading } from "../../utils/functions";
+import { LoadingStatus, backend, formatDate, useLoading } from "../../utils/functions";
 import { LoadingIcon } from "../../icons/LoadingIcon";
 import { ArrowsClockwiseIcon } from "../../icons/ArrowsClockwiseIcon";
 import { JsonResult } from "../../types/JsonResult";
 import { AxiosError } from "axios";
+import { WarningIcon } from "../../icons/WarningIcon";
 
 export function AccountExpiration(props: {userId: number}) {
     const [expirationDate, setExpirationDate] = createSignal<string | null>(null); // YYYY-MM-DD
@@ -12,6 +13,17 @@ export function AccountExpiration(props: {userId: number}) {
 
     const loading = createMemo(() => status() === LoadingStatus.Loading);
 
+    const expired = createMemo(() => {
+        if (expirationDate() === null) {
+            return false;
+        }
+
+        const date = new Date(`${expirationDate()}T00:00:00`);
+        const today = new Date();
+
+        return date < today;
+    });
+
     const loadExpiration = () => {
         setError("");
         setStatus(LoadingStatus.Loading);
@@ -66,12 +78,16 @@ export function AccountExpiration(props: {userId: number}) {
             </h2>
 
             <div class="px-4 py-4">
-                <p class="grid grid-cols-[auto_9rem] items-center">
+                <p class="grid grid-cols-[auto_9rem] items-center h-10">
                     <span>
                     Esta cuenta expira el:
                     </span>
 
-                    <span>
+                    <span
+                        class="font-mono font-bold text-center"
+                        style={{color: expired() ? "var(--c-error)" : "var(--c-on-surface)"}}
+                        title={expired() ? "Esta cuenta ha expirado" : ""}
+                    >
                         <Show when={loading()}>
                             <LoadingIcon
                                 class="animate-spin"
@@ -79,7 +95,13 @@ export function AccountExpiration(props: {userId: number}) {
                             />
                         </Show>
                         <Show when={!loading()}>
-                            {expirationDate()}
+                            {formatDate(expirationDate() ?? "")}
+                        </Show>
+                        <Show when={expired()}>
+                            <WarningIcon
+                                class="mx-2"
+                                fill="var(--c-error)"
+                            />
                         </Show>
                     </span>
                 </p>

frontend/src/icons/WarningIcon.tsx

@@ -0,0 +1,15 @@
+
+export function WarningIcon(props: {fill: string, size?: number, class?: string}) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class={`inline-block w-6 ${props.class}`}
+            width={props.size ?? 32}
+            height={props.size ?? 32}
+            fill={props.fill}
+            viewBox="0 0 256 256"
+        >
+            <path d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z" />
+        </svg>
+    );
+}