FIX #771

MAIF · Dec 4, 2024 · 276e0a5 · 276e0a5
1 parent d0c83ab
commit 276e0a5
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 18 deletions.
diff --git a/daikoku/app/utils/ApiService.scala b/daikoku/app/utils/ApiService.scala
@@ -2461,7 +2461,7 @@ class ApiService(
               )
             ).map(s =>
               Ok(
-                Json.obj("creation" -> "done", "subscription" -> s.asSafeJson)
+                Json.obj("creation" -> "done", "subscription" -> s.asJson)
               )
             )
           case steps =>

diff --git a/daikoku/javascript/src/components/backoffice/apikeys/TeamApiKeysForApi.tsx b/daikoku/javascript/src/components/backoffice/apikeys/TeamApiKeysForApi.tsx
@@ -590,7 +590,6 @@ export const ApiKeyCard = ({
       planQuery.data.customName ||
       planQuery.data.type
 
-    console.debug({ subscription })
     return (
       <div className='api-subscription'>
         <div className="api-subscription__container flex-column flex-xl-row">
@@ -814,3 +813,85 @@ export const Help = ({ message }: HelpProps) => {
     </BeautifulTitle>
   );
 };
+
+type SimpleApiKeyCardProps = {
+  subscription: ISubscription,
+  plan: IUsagePlan,
+  api: IApi
+  apiTeam: ITeamSimple
+}
+
+export const SimpleApiKeyCard = (props: SimpleApiKeyCardProps) => {
+  const { translate } = useContext(I18nContext);
+
+  const _customName = props.subscription.customName || props.plan.customName
+
+  return (
+    <div className='api-subscription'>
+      <div className="api-subscription__container flex-column flex-xl-row">
+        <div className='api-subscription__infos'>
+          <div className='api-subscription__infos__name'>{_customName}</div>
+          <div className='d-flex gap-2'>
+            <BeautifulTitle title={translate("subscription.copy.apikey.help")}>
+              <button className='btn btn-sm btn-outline-info' onClick={() => {
+                navigator.clipboard
+                  .writeText(`${props.subscription.apiKey.clientId}:${props.subscription.apiKey.clientSecret}`)
+                  .then(() =>
+                    toast.info(translate('credential.copy.success'))
+                  )
+                  .catch(() =>
+                    toast.warning(translate('credential.copy.error'))
+                  );
+              }}>
+                <i className="fa fa-copy me-1" />
+                {translate("subscription.copy.apikey.label")}
+              </button>
+            </BeautifulTitle>
+            <BeautifulTitle title={translate("subscription.copy.token.help")}>
+              <button className='btn btn-sm btn-outline-info' onClick={() => {
+                navigator.clipboard
+                  .writeText(props.subscription.integrationToken)
+                  .then(() =>
+                    toast.info(translate('credential.copy.success'))
+                  )
+                  .catch(() =>
+                    toast.warning(translate('credential.copy.error'))
+                  );
+              }}>
+                <i className="fa fa-copy me-1" />
+                {translate("subscription.copy.token.label")}
+              </button>
+            </BeautifulTitle>
+            <BeautifulTitle title={translate("subscription.copy.basic.auth.help")}>
+              <button className='btn btn-sm btn-outline-info' onClick={() => {
+                navigator.clipboard
+                  .writeText(`Basic ${btoa(`${props.subscription.apiKey?.clientId}:${props.subscription.apiKey?.clientSecret}`)}`)
+                  .then(() =>
+                    toast.info(translate('credential.copy.success'))
+                  )
+                  .catch(() =>
+                    toast.warning(translate('credential.copy.error'))
+                  );
+              }}>
+                <i className="fa fa-copy me-1" />
+                {translate("subscription.copy.basic.auth.label")}
+              </button>
+            </BeautifulTitle>
+          </div>
+          <div className='api-subscription__infos__creation'>{
+            translate("subscription.for")} 
+            <span className='ms-1 underline'>{props.api.name}</span>/<span className='me-1 underline'>{props.plan.customName}</span>
+            {translate({
+              key: 'subscription.created.at', replacements: [moment(props.subscription.createdAt).format(translate('moment.date.format.without.hours'))]
+            })}
+            <span className={classNames('ms-1', {
+              "danger-color": moment(props.subscription.validUntil).isBefore(moment())
+            })}>
+              {props.subscription.validUntil && translate({
+                key: 'subscription.valid.until', replacements: [moment(props.subscription.validUntil).format(translate('moment.date.format.without.hours'))]
+              })}</span></div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/daikoku/javascript/src/components/frontend/api/ApiHome.tsx b/daikoku/javascript/src/components/frontend/api/ApiHome.tsx
@@ -19,6 +19,7 @@ import classNames from 'classnames';
 import 'highlight.js/styles/monokai.css';
 import { GlobalContext } from '../../../contexts/globalContext';
 import { CmsViewer } from '../CmsViewer';
+import { ApiKeyCard, SimpleApiKeyCard } from '../../backoffice/apikeys/TeamApiKeysForApi';
 
 (window as any).hljs = hljs;
 
@@ -135,7 +136,8 @@ export const ApiHome = ({
   const [showAccessModal, setAccessModalError] = useState<any>();
   const [showGuestModal, setGuestModal] = useState(false);
 
-  const { connectedUser, tenant, reloadContext } = useContext(GlobalContext)
+  const { connectedUser, tenant, reloadContext } = useContext(GlobalContext);
+  const { openCustomModal, openRightPanel } = useContext(ModalContext);
 
   const navigate = useNavigate();
   const defaultParams = useParams();
@@ -144,8 +146,6 @@ export const ApiHome = ({
     .map((match: any) => match.params)
     .getOrElse(defaultParams);
 
-  console.log(params)
-
   const { translate, Translation } = useContext(I18nContext);
   const { openLoginOrRegisterModal } = useContext(ModalContext);
   const { client } = useContext(getApolloContext());
@@ -243,7 +243,6 @@ export const ApiHome = ({
     );
   };
 
-
   const askForApikeys = ({ team, plan, apiKey, motivation }: { team: string, plan: IUsagePlan, apiKey?: ISubscription, motivation?: object }) => {
     const planName = formatPlanType(plan, translate);
 
@@ -258,16 +257,16 @@ export const ApiHome = ({
           return toast.error(result.error);
         } else if (Services.isCheckoutUrl(result)) {
           window.location.href = result.checkoutUrl
-        } else if (result.creation === 'done') {
-          const teamName = myTeams.find((t) => t._id === result.subscription.team)!.name;
-          return toast.success(translate({ key: 'subscription.plan.accepted', replacements: [planName, teamName] }), {
-            actionButtonStyle: {
-              color: 'inherit',
-              backgroundColor: 'inherit'
-            },
-            action: <Navigation size='1.5rem' className="cursor-pointer" onClick={() => navigate(`/${result.subscription.team}/settings/apikeys/${api._humanReadableId}/${api.currentVersion}`)} />,
-
-          });
+        } else if (Services.isCreationDone(result)) {
+          openRightPanel({
+            title: translate('api.pricing.created.subscription.panel.title'),
+            content: <SimpleApiKeyCard
+              api={api!}
+              plan={plan!}
+              apiTeam={ownerTeam!}
+              subscription={result.subscription}
+            />
+          })
         } else if (result.creation === 'waiting') {
           const teamName = myTeams.find((t) => t._id === team)!.name;
           return toast.info(translate({ key: 'subscription.plan.waiting', replacements: [planName, teamName] }));

diff --git a/daikoku/javascript/src/locales/en/translation.json b/daikoku/javascript/src/locales/en/translation.json
@@ -1399,5 +1399,6 @@
     "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",
-    "setting.panel.reset.confirm.message": "Are you sure you want to reset your organization's data?"
+    "setting.panel.reset.confirm.message": "Are you sure you want to reset your organization's data?",
+    "api.pricing.created.subscription.panel.title": "Your API Key is Ready"
 }
diff --git a/daikoku/javascript/src/locales/fr/translation.json b/daikoku/javascript/src/locales/fr/translation.json
@@ -1400,5 +1400,6 @@
   "subscription.copy.apikey.help": "Copier les identifiants sous la forme clientId:clientSecret",
   "subscription.copy.token.label": "Jeton",
   "subscription.copy.token.help": "Copier le jeton Daikoku, utilisable pour récupérer les identifiants par API",
-  "setting.panel.reset.confirm.message": "Êtes-vous sûr de vouloir réinitialiser les données de votre organisation ?"
+  "setting.panel.reset.confirm.message": "Êtes-vous sûr de vouloir réinitialiser les données de votre organisation ?",
+  "api.pricing.created.subscription.panel.title": "Votre clé d'API est prête"
 }