frontend: Visual improvements on themes details page

Dockerfile-admin

@@ -1,4 +1,4 @@
-FROM golang:1-alpine as gobuild
+FROM golang:1-alpine AS gobuild
 
 RUN apk add --no-cache git
 

Dockerfile-checker

@@ -1,4 +1,4 @@
-FROM golang:1-alpine as gobuild
+FROM golang:1-alpine AS gobuild
 
 RUN apk add --no-cache git
 

Dockerfile-dashboard

@@ -1,4 +1,4 @@
-FROM golang:1-alpine as gobuild
+FROM golang:1-alpine AS gobuild
 
 RUN apk add --no-cache git
 

Dockerfile-evdist

@@ -1,4 +1,4 @@
-FROM golang:1-alpine as gobuild
+FROM golang:1-alpine AS gobuild
 
 RUN apk add --no-cache git
 

Dockerfile-frontend-ui

@@ -1,4 +1,4 @@
-FROM node:23-alpine as nodebuild
+FROM node:23-alpine AS nodebuild
 
 WORKDIR /ui
 

Dockerfile-generator

@@ -1,4 +1,4 @@
-FROM golang:1-alpine as gobuild
+FROM golang:1-alpine AS gobuild
 
 RUN apk add --no-cache git
 

Dockerfile-get-remote-files

@@ -1,4 +1,4 @@
-FROM golang:1-alpine as gobuild
+FROM golang:1-alpine AS gobuild
 
 RUN apk add --no-cache git
 

Dockerfile-nginx

@@ -1,4 +1,4 @@
-FROM node:23-alpine as nodebuild
+FROM node:23-alpine AS nodebuild
 
 WORKDIR /ui
 
@@ -10,9 +10,16 @@ RUN npm install --network-timeout=100000 && \
 
 FROM nginx:stable-alpine-slim
 
-ENV FIC_BASEURL=/ \
+ENV FIC_BASEURL /
-    HOST_RECEIVER=receiver:8080 HOST_ADMIN=admin:8081 HOST_DASHBOARD=dashboard:8082 HOST_QA=qa:8083 \
+ENV HOST_RECEIVER receiver:8080
-    PATH_FILES=/srv/FILES PATH_STARTINGBLOCK=/srv/STARTINGBLOCK PATH_STATIC=/srv/htdocs-frontend PATH_SETTINGS=/srv/SETTINGSDIST PATH_TEAMS=/srv/TEAMS
+ENV HOST_ADMIN admin:8081
+ENV HOST_DASHBOARD dashboard:8082
+ENV HOST_QA qa:8083
+ENV PATH_FILES /srv/FILES
+ENV PATH_STARTINGBLOCK /srv/STARTINGBLOCK
+ENV PATH_STATIC /srv/htdocs-frontend
+ENV PATH_SETTINGS /srv/SETTINGSDIST
+ENV PATH_TEAMS /srv/TEAMS
 
 EXPOSE 80
 

Dockerfile-qa

@@ -1,4 +1,4 @@
-FROM node:23-alpine as nodebuild
+FROM node:23-alpine AS nodebuild
 
 WORKDIR /ui
 
@@ -8,7 +8,7 @@ RUN npm install --network-timeout=100000 && \
     npm run build
 
 
-FROM golang:1-alpine as gobuild
+FROM golang:1-alpine AS gobuild
 
 RUN apk add --no-cache git
 

Dockerfile-receiver

@@ -1,4 +1,4 @@
-FROM golang:1-alpine as gobuild
+FROM golang:1-alpine AS gobuild
 
 RUN apk add --no-cache git
 

Dockerfile-remote-challenge-sync-airbus

@@ -1,4 +1,4 @@
-FROM golang:1-alpine as gobuild
+FROM golang:1-alpine AS gobuild
 
 RUN apk add --no-cache git
 

Dockerfile-remote-scores-sync-zqds

@@ -1,4 +1,4 @@
-FROM golang:1-alpine as gobuild
+FROM golang:1-alpine AS gobuild
 
 RUN apk add --no-cache git
 

Dockerfile-repochecker

@@ -1,4 +1,4 @@
-FROM golang:1-alpine as gobuild
+FROM golang:1-alpine AS gobuild
 
 RUN apk add --no-cache git
 

frontend/fic/src/lib/components/CardTheme.svelte

@@ -44,7 +44,7 @@
                 style:filter={theme.locked ? "grayscale(60%)":null}
             ></div>
         {/if}
-        <CardBody class="text-indent">
+        <CardBody>
             {#if exercice}
                 {#if $exercices_idx[exercice.id].tags.includes("Reverse") || $exercices_idx[exercice.id].tags.includes("Reverse Engineering")}
                     <Badge class="float-end">#Reverse</Badge>

frontend/fic/src/lib/components/NavTags.svelte

@@ -29,8 +29,8 @@
             bind:value={filter}
         >
         <div>
-            {#each Object.keys($tags).sort(function (a, b) { return a.toLowerCase().localeCompare(b.toLowerCase()); }) as itag, index}
+            {#each Object.keys($tags).sort(function (a, b) { return a.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().localeCompare(b.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase()); }) as itag, index}
-                {#if (filter === "" && $tags[itag].count > 1) || (filter !== "" && itag.toLowerCase().indexOf(filter.toLowerCase()) >= 0)}
+                {#if (filter === "" && $tags[itag].count > 1) || (filter !== "" && itag.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().indexOf(filter.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase()) >= 0)}
                     <DropdownItem href="tags/{itag}">
                         #{itag}
                         <Badge>

frontend/fic/src/lib/components/RegistrationFormJoinTeam.svelte

@@ -30,6 +30,12 @@
      partJ = true;
  }
 
+ function JchangeTeam() {
+     value = { };
+
+     partJ = false;
+ }
+
  function submit(event) {
      if (!partJ) {
          JvalidateTeam();
@@ -62,7 +68,11 @@
                             </option>
                         {/each}
                     </select>
+                    {#if partJ}
+	                <Button color="info" type="button" on:click={JchangeTeam}>Changer</Button>
+                    {:else}
 	                <Button color="info" type="button" on:click={JvalidateTeam} disabled={partJ}>Valider</Button>
+                    {/if}
 	            <div class="invalid-feedback">
 	                Veuillez indiquer une équipe valide.
 	            </div>

frontend/fic/src/lib/stores/my.js

@@ -37,6 +37,9 @@ function createMyStore() {
       });
     } else if (res_my.status === 404) {
       update((m) => (null));
+      if (cb) {
+        cb(null);
+      }
     }
   }
 

frontend/fic/src/lib/stores/mythemes.js

@@ -59,6 +59,7 @@ export const tags = derived([my, themesStore], ([$my, $themesStore]) => {
   for (const key in $themesStore) {
     for (const exercice of $themesStore[key].exercices) {
       exercice.tags.forEach((tag) => {
+        tag = tag.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
 	if (!tags[tag])
 	  tags[tag] = {count: 1, solved: 0};
 	else

frontend/fic/src/routes/+layout.svelte

@@ -3,7 +3,9 @@
  import "bootstrap-icons/font/bootstrap-icons.css";
 
  import { base } from '$app/paths';
+ import { page } from '$app/stores';
  import {
+     Alert,
      Container,
      //Styles,
  } from '@sveltestrap/sveltestrap';
@@ -11,6 +13,7 @@
  import Header from '$lib/components/Header.svelte';
 
  import { challengeInfo } from '$lib/stores/challengeinfo';
+ import { my } from '$lib/stores/my.js';
  import { settings } from '$lib/stores/settings';
 </script>
 
@@ -32,6 +35,21 @@
     </div>
 {/if}
 <Header />
+
+{#if !$my && $page.route.id != "/register"}
+    <Container class="mt-3 mb-3">
+        {#if $settings.allowRegistration}
+            <Alert color="warning" class="text-justify" fade={false}>
+                <strong>Votre équipe n'est pas encore enregistrée.</strong> Rendez-vous sur <a href="register">cette page</a> pour procéder à votre inscription.
+            </Alert>
+        {:else}
+            <Alert color="danger" class="text-justify" fade={false}>
+                <strong>Il semblerait qu'il y ait eu un problème lors de l'attribution de votre certificat.</strong> Veuillez vous signaler auprès de notre équipe afin de corriger ce problème.
+            </Alert>
+        {/if}
+    </Container>
+{/if}
+
 <slot></slot>
 
 <style>

frontend/fic/src/routes/+page.svelte

@@ -77,17 +77,8 @@
 </script>
 
 <Container class="mt-3 mb-5">
-    {#if !$my}
+    {#if $my}
-        {#if $settings.allowRegistration}
+      {#if !($my.team_id)}
-            <Alert color="warning" class="text-justify" fade={false}>
-                <strong>Votre équipe n'est pas encore enregistrée.</strong> Rendez-vous sur <a href="register">cette page</a> pour procéder à votre inscription.
-            </Alert>
-        {:else}
-            <Alert color="danger" class="text-justify" fade={false}>
-                <strong>Il semblerait qu'il y ait eu un problème lors de l'attribution de votre certificat.</strong> Veuillez vous signaler auprès de notre équipe afin de corriger ce problème.
-            </Alert>
-        {/if}
-    {:else if !($my.team_id)}
         <Alert color="danger" fade={false}>
             <strong>Attention&nbsp;:</strong> puisqu'il s'agit de captures effectuées dans le but de découvrir si des actes malveillants ont été commis sur différents systèmes d'information, les contenus qui sont téléchargeables <em>peuvent</em> contenir du contenu malveillant&nbsp;!
         </Alert>
@@ -103,7 +94,7 @@
             </Alert>
         {/if}
       {/if}
-
+    {/if}
 
     <Masonry
         {items}

frontend/fic/src/routes/[theme]/+page.svelte

@@ -84,24 +84,27 @@
     </Col>
     <Col lg={6} xl={5}>
     {#if $current_theme.exercices && $current_theme.exercices.length}
-    <ul class="list-group">
+    <ul class="list-group h-100 d-flex flex-column">
         {#each $current_theme.exercices as exercice, index}
             <li
-                class="list-group-item"
+                class="list-group-item flex-fill border-0 rounded-0"
                 class:list-group-item-action={$my && $my.exercices[exercice.id]}
                 on:click={goto(`${$current_theme.urlid}/${exercice.urlid}`)}
                 on:keypress={goto(`${$current_theme.urlid}/${exercice.urlid}`)}
             >
-                <div class="row">
+                <div class="row h-100">
-                    <div class="col-1" style="margin-top: -0.5rem; margin-bottom: -0.5rem; text-align: right; border-right: 5px solid #{$my && $my.exercices[exercice.id] && $my.exercices[exercice.id].solved_rank ? '62c462' : 'bbb'}">
+                    {#if index + 1 == $current_theme.exercices.length}
-                    </div>
+                        <div class="col-1"></div>
+                    {:else}
+                        <div class="col-1" style="margin-top: -0.5rem; margin-bottom: -0.5rem; text-align: right; border-right: 5px solid #{$my && $my.exercices[exercice.id] && $my.exercices[exercice.id].solved_rank ? '62c462' : 'bbb'}"></div>
+                    {/if}
                     <div class="col-10">
                         <div style="position: absolute; margin-left: calc(var(--bs-gutter-x) * -.5 - 15px); margin-top: -0.5rem;">
 	                    <svg style="height: 50px; width: 23px;">
 	                        <rect
 	                            style="fill:#{$my && $my.exercices[exercice.id] && (index < 1 || ($my.exercices[$current_theme.exercices[index-1].id] && $my.exercices[$current_theme.exercices[index-1].id].solved_rank)) ? '62c462' : 'bbb'}"
 	                            width="5"
-	                            height="30"
+	                            height="27"
 	                            x="10"
 	                            y="0" />
 	                        <path
@@ -111,24 +114,17 @@
                         </div>
                         <div class="d-flex justify-content-between flex-wrap">
 	                    <h5 class="fw-bold text-truncate">
-                                {#if $my && $my.exercices[exercice.id]}
 	                        <span style="white-space: nowrap">
-                                        {#if $my.exercices[exercice.id].wip}
+                                    {#if $my && $my.exercices[exercice.id] && $my.exercices[exercice.id].wip}
 	                                <Icon name="cone-striped" aria-hidden="true" title="Cette étape est encore en construction." />
                                     {/if}
 	                            {exercice.title}
                                 </span>
-                                {:else}
-	                            <span style="white-space: nowrap">
-	                                <Icon name="lock-fill" aria-hidden="true" title="Vous n'avez pas encore accès à ce défi" />
-	                                {exercice.title}
-	                            </span>
-                                {/if}
                                 {#if exercice.curcoeff > 1.0}
 	                            <Icon name="gift" aria-hidden="true" title="Un bonus est actuellement appliqué lors de la résolution de ce défi" />
                                 {/if}
 	                    </h5>
-                            <div>
+                            <div class="mb-2">
                                 {#each exercice.tags as tag, idx}
 	                            <Badge href="tags/{tag}" pill color="secondary" class="mx-1 float-end">#{tag}</Badge>
                                 {/each}
@@ -136,14 +132,14 @@
                         </div>
 	                <p>{@html exercice.headline}</p>
                     </div>
-                    <div class="d-none d-md-block col-1 pe-0">
+                    <div class="d-none d-md-flex flex-column h-100 justify-content-center align-items-end col-1 pe-0">
                         {#if $my && $my.exercices[exercice.id]}
-	                    <a class="float-end" href="{$current_theme.urlid}/{exercice.urlid}" style="font-size: 3rem">
+	                    <a href="{$current_theme.urlid}/{exercice.urlid}" style="font-size: 3rem">
                                 <Icon name="chevron-right" aria-hidden="true" />
                             </a>
                         {:else}
-	                    <span class="float-end" style="font-size: 3rem">
+	                    <span style="font-size: 3rem">
-                                <Icon name="chevron-right" aria-hidden="true" />
+	                        <Icon name="lock-fill" aria-hidden="true" title="Vous n'avez pas encore accès à ce défi" />
                             </span>
                         {/if}
                     </div>

frontend/fic/src/routes/register/+page.svelte

@@ -7,6 +7,7 @@
      Container,
      Icon,
      Row,
+     Spinner,
  } from '@sveltestrap/sveltestrap';
 
  import { goto } from '$app/navigation';
@@ -23,8 +24,10 @@
  let partJ = false;
  let messageClass;
  let message;
+ let registrationInProgress = false;
 
  function gotoHomeOnDiff(i) {
+     registrationInProgress = true;
      my.refresh((my) => {
          if (my && my.team_id) {
              themesStore.refresh(() => {
@@ -32,6 +35,10 @@
              });
          } else if (i > 0) {
              setTimeout(gotoHomeOnDiff, 650, i-1);
+         } else {
+             registrationInProgress = false;
+	     messageClass = 'danger';
+             message = "Temps d'attente dépassé.";
          }
      })
  }
@@ -106,9 +113,13 @@
                 <strong>Oups, il semblerait qu'il y ait eu un problème lors de l'attribution de votre certificat.</strong>
                 Veuillez vous signaler auprès de notre équipe afin de corriger ce problème.
             </Alert>
+        {:else if registrationInProgress}
+            <div class="d-flex justify-content-center align-items-center gap-4 mt-5 fw-bold text-primary">
+                <Spinner size="lg" color="primary" /> Inscription en cours&hellip;
+            </div>
         {:else}
             {#if !$settings.denyTeamCreation && !partJ}
-                <Card body class="niceborder my-3">
+                <Card body class="niceborder my-3 text-white">
                     <p>
                         Votre équipe n'est pas encore enregistrée sur notre serveur. Afin de
                         pouvoir participer au challenge, nous vous remercions de bien vouloir
@@ -118,7 +129,7 @@
                 </Card>
             {/if}
             {#if $settings.canJoinTeam && !partR}
-                <Card body class="niceborder my-3">
+                <Card body class="niceborder my-3 text-white">
                     <p>
                         {#if !$settings.denyTeamCreation}
                             Si votre équipe est déjà créée, rejoignez-là&nbsp;!

frontend/fic/src/routes/tags/[tag]/+page.js

@@ -1,4 +1,8 @@
+import { set_current_theme } from '$lib/stores/themes';
+
 export async function load({ params }) {
+  set_current_theme.set(null);
+
   return {
     tag: params.tag,
   };

frontend/fic/src/routes/tags/[tag]/+page.svelte

@@ -25,8 +25,8 @@
      for (let k in $themes) {
          const th = $themes[k];
          for (const ex of th.exercices) {
-             if (ex.tags.indexOf(data.tag) >= 0) {
+             if (ex.tags.map(t => t.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase()).indexOf(data.tag.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase()) >= 0) {
-                 tmp_exercices.push({theme: th, exercice: ex, index: k + "," + ex});
+                 tmp_exercices.push({theme: th, exercice: ex, index: k + "," + ex.id});
              }
          }
      }

frontend/fic/svelte.config.js

@@ -7,7 +7,7 @@ const config = {
 			fallback: 'index.html'
 		}),
                 paths: {
-                        relative: true
+                        relative: false
                 },
 	}
 };