use toasts

SocialGouv · Nov 20, 2023 · 7adfcdc · 7adfcdc
1 parent bc397dc
commit 7adfcdc
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 59 deletions.
diff --git a/.talismanrc b/.talismanrc
@@ -1,14 +1,16 @@
-scopeconfig:
-- scope: node
 fileignoreconfig:
 - filename: packages/hasura/migrations/default/1691156416829_alter_table_public_users_add_column_disabled/down.sql
   checksum: cac3e070c06c7c7fbd6821009fef546e452a38184ac6539ccca609be4a82bd8b
 - filename: packages/hasura/migrations/default/1691156416829_alter_table_public_users_add_column_disabled/up.sql
   checksum: 390c88e78b3e8bd3153e028403a3ffea2b5da636eeab22c307788cbddb86e096
+- filename: src/components/users/toggle-account-modal.tsx
+  checksum: 2d0bd58b461814a6d2d934d96441ed7962a74f2d184e2581b38b4990562dde70
 - filename: src/services/disablers/ovh.ts
   checksum: 390c9e51cf01b5db14a4af94a4182c3d55ccddeb7905462b21b0a5f23b8d24e9
 - filename: src/services/enablers/ovh.ts
   checksum: 5e2adf5acd6e8f769a465b573cd9149226526bbce8402abf3c0cc8d6f5520a3a
 - filename: src/services/send-email.ts
   checksum: 0562c88a33c18be479847c12d3c05dfc00b6edea18ffd61b97bc389536d41cb1
+scopeconfig:
+- scope: node
 version: "1.0"
diff --git a/src/components/common/toast-provider.tsx b/src/components/common/toast-provider.tsx
@@ -0,0 +1,15 @@
+"use client"
+
+import { ToastContainer, toast } from "react-toastify"
+import "react-toastify/dist/ReactToastify.css"
+import useIsDarkTheme from "@/hooks/use-is-dark-theme"
+
+export function ToastProvider() {
+  const { isDarkTheme } = useIsDarkTheme()
+  return (
+    <ToastContainer
+      position={toast.POSITION.BOTTOM_RIGHT}
+      theme={isDarkTheme ? "dark" : "light"}
+    />
+  )
+}
diff --git a/src/components/users/index.tsx b/src/components/users/index.tsx
@@ -75,10 +75,10 @@ const Users = () => {
     <DndProvider backend={HTML5Backend}>
       <div className="users-view">
         <AccountToggleModal
-          disable={accountToToggle?.disable}
+          account={accountToToggle}
           isOpen={!!accountToToggle}
-          onConfirm={() =>
-            handleConfirmToggleAccount(accountToToggle as AccountToToggle)
+          onConfirm={(accountToToggle: AccountToToggle) =>
+            handleConfirmToggleAccount(accountToToggle)
           }
           onRequestClose={() => setAccountToToggle(undefined)}
         />

diff --git a/src/components/users/toggle-account-modal.tsx b/src/components/users/toggle-account-modal.tsx
@@ -1,34 +1,29 @@
-import { useState } from "react"
 import Modal from "react-modal"
-import Loader from "../common/loader"
+import { toast } from "react-toastify"
 
 const AccountToggleModal = ({
-  disable,
+  account,
   isOpen,
   onConfirm,
   onRequestClose,
 }: {
-  disable: boolean | undefined
+  account: AccountToToggle | undefined
   isOpen: boolean
-  onConfirm: () => Promise<{ status: number; body: string }>
+  onConfirm: (
+    accountTotoggle: AccountToToggle
+  ) => Promise<{ status: number; body: string }>
   onRequestClose: () => void
 }) => {
-  const [isConfirmed, setIsConfirmed] = useState(false)
-  const [response, setResponse] = useState<{ status: number; body: string }>()
-
   const handleConfirm = async () => {
-    setIsConfirmed(true)
-    const response = await onConfirm()
-    try {
-      setResponse({ status: response.status, body: JSON.parse(response.body) })
-    } catch {
-      setResponse(response)
-    }
+    toast.promise(onConfirm(account as AccountToToggle), {
+      pending: "En attente",
+      success: "Succès",
+      error: "Échec",
+    })
+    onRequestClose()
   }
 
   const handleRequestClose = () => {
-    setIsConfirmed(false)
-    setResponse(undefined)
     onRequestClose()
   }
 
@@ -44,39 +39,35 @@ const AccountToggleModal = ({
       <button className="close" onClick={handleRequestClose}>
         <i className="ri-close-line"></i>
       </button>
-      <h2>{disable ? "Désactiver" : "Activer"} un accès</h2>
+      <h2>{account?.disable ? "Désactiver" : "Activer"} un accès</h2>
       <br />
-      {!isConfirmed ? (
-        <>
-          <p>
-            Vous allez {disable ? "désactiver" : "activer"} un accès utilisateur
-            sur un outil de la Fabrique.
-          </p>
-          <p>Cela sera répercuté sur le service concerné.</p>
-          <br />
-          <div className="confirm-buttons">
-            <button className="secondary" onClick={handleRequestClose}>
-              Annuler
-            </button>
-            <button className="primary" onClick={handleConfirm}>
-              Confirmer
-            </button>
-          </div>
-        </>
-      ) : !response ? (
-        <Loader />
+      <p>
+        Vous allez {account?.disable ? "désactiver" : "activer"} un accès
+        utilisateur sur un outil de la Fabrique.
+      </p>
+      <br />
+      {account?.disable && account?.account.type === "ovh" ? (
+        <p>
+          La désactivation d&apos;un compte OVH consiste à{" "}
+          <b>changer le mot de passe</b> du compte de manière à ce que
+          l&apos;utilisateur ne le connaisse plus. La réactivation consiste à
+          changer de nouveau le mot de passe et à l&apos;envoyer par email à
+          l&apos;utilisateur. Si l&apos;<b>email</b> de l&apos;utilisateur{" "}
+          <b>n&apos;est pas connu</b>, la <b>réactivation</b> par Secrétariat{" "}
+          <b>est impossible</b>.
+        </p>
       ) : (
-        <>
-          <p>Réponse du service :</p>
-          <br />
-          <pre>{JSON.stringify(response, null, 2)}</pre>
-          <div className="close-button">
-            <button className="secondary" onClick={handleRequestClose}>
-              Fermer
-            </button>
-          </div>
-        </>
+        <p>Cela sera répercuté sur le service concerné.</p>
       )}
+      <br />
+      <div className="confirm-buttons">
+        <button className="secondary" onClick={handleRequestClose}>
+          Annuler
+        </button>
+        <button className="primary" onClick={handleConfirm}>
+          Confirmer
+        </button>
+      </div>
     </Modal>
   )
 }

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -8,6 +8,7 @@ import Layout from "@/components/layout"
 
 import "@/styles/tailwind.scss"
 import "@/styles/globals.scss"
+import { ToastProvider } from "@/components/common/toast-provider"
 
 const MATOMO_URL = process.env.NEXT_PUBLIC_MATOMO_URL || ""
 const MATOMO_SITE_ID = process.env.NEXT_PUBLIC_MATOMO_SITE_ID || ""
@@ -25,6 +26,7 @@ function App({
       <Layout>
         <Component {...pageProps} />
       </Layout>
+      <ToastProvider />
     </SessionProvider>
   )
 }

diff --git a/src/styles/components/modal.scss b/src/styles/components/modal.scss
@@ -1,7 +1,7 @@
-.ReactModalPortal { /* stylelint-disable-line */
+.ReactModalPortal {
+  /* stylelint-disable-line */
   .modal-overlay {
-    @apply
-      flex
+    @apply flex
       z-30
       mt-28
       fixed
@@ -25,10 +25,10 @@
   }
 
   .modal {
-    @apply
-      p-4
+    @apply p-4
       rounded
       min-w-[50vw]
+      max-w-[50vw]
       relative
       shadow-lg
       outline-none
@@ -46,8 +46,7 @@
       @apply flex items-center;
 
       & > .user {
-        @apply
-          flex-1
+        @apply flex-1
           bg-grey-950-main
           dark:bg-grey-100-main;
       }