add valid until date on apikey card

daikoku/javascript/src/components/backoffice/apikeys/TeamApiKeysForApi.tsx

@@ -7,7 +7,6 @@ import moment from 'moment';
 import { useContext, useEffect, useState } from 'react';
 import { Link, useLocation, useParams } from 'react-router-dom';
 import { toast } from 'sonner';
-import { Key } from 'react-feather/dist/icons/key';
 
 import {
   I18nContext,
@@ -618,7 +617,6 @@ export const ApiKeyCard = ({
 
           <div className='api-subscription__infos'>
             <div className='api-subscription__infos__name'>{_customName}</div>
-            <div className='api-subscription__infos__value'>{`${subscription.apiKey.clientId}:${subscription.apiKey.clientSecret}`}</div>
             <div className='d-flex gap-2'>
               <BeautifulTitle title={translate("subscription.copy.apikey.help")}>
                 <button className='btn btn-sm btn-outline-info' onClick={() => {
@@ -670,9 +668,14 @@ export const ApiKeyCard = ({
               translate("subscription.for")}
               <Link to={subscription.apiLink} className='ms-1 underline'>{subscription.apiName}</Link>/<Link to={subscription.planLink} className='me-1 underline'>{subscription.planName}</Link>
               {translate({
-                key: 'subscription.create.at', replacements: [moment(subscription.createdAt).format(translate('moment.date.format.without.hours'))]
-              })
-              }</div>
+                key: 'subscription.created.at', replacements: [moment(subscription.createdAt).format(translate('moment.date.format.without.hours'))]
+              })}
+              <span className={classNames('ms-1', {
+                "danger-color": moment(subscription.validUntil).isBefore(moment())
+              })}>
+                {subscription.validUntil && translate({
+                  key: 'subscription.valid.until', replacements: [moment(subscription.validUntil).format(translate('moment.date.format.without.hours'))]
+                })}</span></div>
           </div>
         </div>
         <div className="api-subscriptions__links">

daikoku/javascript/src/locales/en/translation.json

@@ -1438,7 +1438,8 @@
     "apikeys.view.api": "View API",
     "apikeys.view.apikeys": "View APIkeys",
     "subscription.for": "Subscription to",
-    "subscription.create.at": "created on %s",
+    "subscription.created.at": "created on %s",
+    "subscription.valid.until": "valid until %s",
     "subscription.nota.part.1": "Check out the documentation",
     "subscription.nota.part.2": "or explore",
     "subscription.nota.link.api": "to using the API",
@@ -1484,7 +1485,7 @@
     "subscription.copy.basic.auth.label": "basic auth.",
     "subscription.copy.basic.auth.help": "Copy credentials as basic auth. value",
     "subscription.copy.apikey.label": "clientId:clientToken",
-    "subscription.copy.apikey.help": "Copy credentials as clientId:pclientSecret",
+    "subscription.copy.apikey.help": "Copy credentials as clientId:clientSecret",
     "subscription.copy.token.label": "token",
     "subscription.copy.token.help": "Copy daikoku token, used for retrieve credentials by API"
 }

daikoku/javascript/src/locales/fr/translation.json

@@ -940,7 +940,7 @@
   "aggregation api keys security": "Autoriser l'agrégation de clés d'APIs",
   "aggregation api keys security for environment mode": "Autoriser l'agrégation de clés d'APIs pour le mode environnement",
   "aggregation_apikeys.security.help": "Active la possibilité d'utiliser une même clé d'API sur plusieurs plans.",
-  "aggregation_apikeys.environment.security.help" : "Active la possibilité d'utiliser une même clé d'API sur plusieurs plans ayant le même environnement.",
+  "aggregation_apikeys.environment.security.help": "Active la possibilité d'utiliser une même clé d'API sur plusieurs plans ayant le même environnement.",
   "aggregation.api_key.security.notification": "L'agrégation des clés API est une utilisation avancée. Gardez à l'esprit que les métadonnées et les quotas seront partagés entre chaque clé d'API parente et ses clés d'API agrégées. Daikoku n'appliquera aucun contrôle en cas de conflit de métadonnées.",
   "aggregation.environment.api_key.security.notification": "Même si la sécurité d'agrégation est activée, un contrôle est effectué pour vérifier les noms des plans d'utilisation lorsque vous étendez une souscription à une autre. Cela garantit que les clés API ne peuvent être agrégées que dans des environnements compatibles.",
   "disabled.due.to.aggregation.security": "désactivé en raison de l'activation de l'aggégation des clés",
@@ -1438,7 +1438,8 @@
   "apikeys.view.api": "Voir l'API",
   "apikeys.view.apikeys": "Voir les clés d'API",
   "subscription.for": "Souscription à",
-  "subscription.create.at": "crée le %s",
+  "subscription.created.at": "crée le %s",
+  "subscription.valid.until": "valid until %s",
   "subscription.nota.part.1": "Consultez la documentation",
   "subscription.nota.part.2": "ou explorez",
   "subscription.nota.link.api": "pour utiliser l'API",
@@ -1448,8 +1449,8 @@
   "subscription.successfully.enabled": "Votre souscription a été activée avec succès",
   "subscription.successfully.disabled": "Votre souscription a été désactivée avec succès",
   "subscription.custom.name.update.label": "Mettre à jour le nom perso.",
-  "subscription.custom.name.update.message":"Nom de la souscription",
-  "subscription.custom.name.update.placeholder":"Nom personnalisé",
+  "subscription.custom.name.update.message": "Nom de la souscription",
+  "subscription.custom.name.update.placeholder": "Nom personnalisé",
   "subscription.rotation.update.label": "Paramétrer la rotation",
   "subscription.reset.secret.label": "Réinit. le secret",
   "subscription.show.aggregate.label": "Voir l'agrégat",
@@ -1477,8 +1478,8 @@
   "login.required": "Connexion requise",
   "subscription.retrieve.login.required.message": "Veuillez vous connecter pour continuer. Vous devez être authentifié pour accéder à cette fonctionnalité.",
   "subscription.retrieve.token.unavalaible": "Le jeton n'est plus valable",
-  "Daikoku.home" : "Accueil Daikoku",
-  "API.list" : "Liste des APIs",
+  "Daikoku.home": "Accueil Daikoku",
+  "API.list": "Liste des APIs",
   "more.nav.options": "Plus d'options",
   "api.access.modal.title": "demande d'accès à une API",
   "subscription.copy.basic.auth.label": "Basic auth.",

daikoku/javascript/src/style/components/apiSubscription.scss

@@ -108,7 +108,7 @@
       color: $success-color;
     }
     .api-subscription__infos__creation {
-      font-size: 12px;
+      font-size: 14px;
     }
   }
 

daikoku/javascript/src/style/layout/style.scss

@@ -21,6 +21,10 @@ main {
   }
 }
 
+.danger-color {
+  color: $danger-color
+}
+
 .section,
 .album {
   background-color: $level2_bg-color;