react/kiezradar: add modal and save filters on login redirect

changelog/_8872.md

@@ -0,0 +1,3 @@
+## Added
+
+- Added `Modal` component for when logging in on project overview.

meinberlin/assets/scss/components_user_facing/_kiezradar.scss

@@ -192,58 +192,6 @@
   z-index: 1001;
 }
 
-.kiezradar__modal {
-  border: none;
-  max-width: 43rem;
-  padding: 2rem 1.125rem;
-  margin: auto 3px 0;
-
-  @media screen and (min-width: $breakpoint-palm) {
-    margin: auto;
-  }
-}
-
-.kiezradar__modal::backdrop {
-  background: rgba(0, 0, 0, 0.5);
-}
-
-.kiezradar__modal-title {
-  font-size: 1.375rem;
-  margin: 0;
-  margin-bottom: 0.625rem;
-}
-
-.kiezradar__modal-text {
-  margin-bottom: 2.5rem;
-}
-
-.kiezradar__modal-buttons {
-  display: flex;
-
-  @media screen and (min-width: $breakpoint-palm) {
-    justify-content: flex-end;
-    gap: 2rem;
-  }
-}
-
-.kiezradar__modal-button-open {
-  margin-left: auto;
-
-  @media screen and (min-width: $breakpoint-palm) {
-    margin-left: 0;
-  }
-}
-
-.kiezradar__modal-close {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  padding: 0.25rem;
-  border: 0;
-  color: inherit;
-  cursor: pointer;
-}
-
 .kiezradar__controls--tablet {
   display: none;
 

meinberlin/assets/scss/components_user_facing/_modal.scss

@@ -0,0 +1,59 @@
+.modal {
+  border: none;
+  max-width: 43rem;
+  padding: 2rem 1.125rem;
+  margin: auto 3px 0;
+
+  @media screen and (min-width: $breakpoint-palm) {
+    margin: auto;
+  }
+}
+
+.modal::backdrop {
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.modal__title {
+  font-size: 1.375rem;
+  margin: 0;
+  margin-bottom: 0.625rem;
+}
+
+.modal__text {
+  margin-bottom: 2.5rem;
+}
+
+.modal__content {
+  margin-bottom: 40px;
+}
+
+.modal__content > div {
+  margin: 0;
+}
+
+.modal__buttons {
+  display: flex;
+
+  @media screen and (min-width: $breakpoint-palm) {
+    justify-content: flex-end;
+    gap: 2rem;
+  }
+}
+
+.modal__confirm-button {
+  margin-left: auto;
+
+  @media screen and (min-width: $breakpoint-palm) {
+    margin-left: 0;
+  }
+}
+
+.modal__close {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  padding: 0.25rem;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+}

meinberlin/assets/scss/style_user_facing.scss

@@ -70,6 +70,7 @@
 @import "components_user_facing/project-tile";
 @import "components_user_facing/status-bar";
 @import "components_user_facing/video-wall";
+@import "components_user_facing/modal";
 
 // a4 overwrites
 @import "components_user_facing/adhocracy4/a4-address-search";

meinberlin/react/kiezradar/DeleteModal.jsx → meinberlin/react/contrib/Modal.jsx

@@ -2,9 +2,8 @@ import React, { useEffect, useRef } from 'react'
 import django from 'django'
 
 const closeText = django.gettext('Close')
-const deleteText = django.gettext('Delete')
 
-export default function DeleteModal ({ title, message, onDelete, onClose }) {
+export default function Modal ({ title, message, buttonText, onConfirm, onClose, children }) {
   const dialogRef = useRef(null)
 
   const closeModal = () => {
@@ -22,24 +21,25 @@ export default function DeleteModal ({ title, message, onDelete, onClose }) {
 
   return (
     <dialog
-      className="kiezradar__modal"
+      className="modal"
       ref={dialogRef}
-      aria-labelledby="modal-title"
+      aria-labelledby="modal__title"
       onKeyDown={(event) => {
         if (event.key === 'Escape') closeModal()
       }}
     >
-      <button type="button" className="kiezradar__modal-close" aria-label={closeText} onClick={closeModal}>
+      <button type="button" className="modal__close" aria-label={closeText} onClick={closeModal}>
         <span className="fa fa-times" aria-hidden="true" />
       </button>
-      <h3 id="modal-title" className="kiezradar__modal-title">{title}</h3>
-      <p className="kiezradar__modal-text">{message}</p>
-      <div className="kiezradar__modal-buttons">
+      <h3 id="modal__title" className="modal__title">{title}</h3>
+      <p className="modal__text">{message}</p>
+      {children && <div className="modal__content">{children}</div>}
+      <div className="modal__buttons">
         <button className="link" onClick={closeModal}>
           {closeText}
         </button>
-        <button className="button kiezradar__modal-button-open" onClick={onDelete}>
-          {deleteText}
+        <button className="button modal__confirm-button" onClick={onConfirm}>
+          {buttonText}
         </button>
       </div>
     </dialog>

meinberlin/react/kiezradar/KiezradarList.jsx

@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom'
 import Loading from './Loading'
 import { alert as Alert } from 'adhocracy4'
 import { updateItem } from '../contrib/helpers'
-import DeleteModal from './DeleteModal'
+import Modal from '../contrib/Modal'
 
 const noSavedKiezradarsText = django.gettext('No saved Kiezes')
 const addKiezText = django.gettext('Add Kiez')
@@ -69,10 +69,11 @@ export default function KiezradarList ({
           : (
             <>
               {deleteModal?.kiezradar && (
-                <DeleteModal
+                <Modal
                   title={confirmDeletionText(deleteModal.kiezradar.name)}
                   message={confirmDeletionDescriptionText}
-                  onDelete={() => handleDelete(deleteModal.kiezradar)}
+                  buttonText={deleteText}
+                  onConfirm={() => handleDelete(deleteModal.kiezradar)}
                   onClose={() => setDeleteModal(null)}
                 />
               )}

meinberlin/react/kiezradar/SearchProfile.jsx

@@ -4,12 +4,13 @@ import SearchProfileButtons from './SearchProfileButtons'
 import { toSearchParams, updateItem } from '../contrib/helpers'
 import PushNotificationToggle from './PushNotificationToggle'
 import { alert as Alert } from 'adhocracy4'
-import DeleteModal from './DeleteModal'
+import Modal from '../contrib/Modal'
 
 const renameSearchProfileText = django.gettext('Rename search profile')
 const cancelText = django.gettext('Cancel')
 const saveText = django.gettext('Save')
 const savingText = django.gettext('Saving')
+const deleteText = django.gettext('Delete')
 const viewProjectsText = django.gettext('View projects')
 const plansText = django.gettext('Plans')
 const errorText = django.gettext('Error')
@@ -103,10 +104,11 @@ export default function SearchProfile ({ apiUrl, planListUrl, searchProfile, onS
   return (
     <>
       {deleteModal?.searchProfile && (
-        <DeleteModal
+        <Modal
           title={confirmDeletionText(deleteModal.searchProfile.name)}
           message={confirmDeletionDescriptionText}
-          onDelete={() => handleDelete()}
+          buttonText={deleteText}
+          onConfirm={() => handleDelete()}
           onClose={() => setDeleteModal(null)}
         />
       )}

meinberlin/react/plans/SaveSearchProfile.jsx

@@ -1,8 +1,15 @@
-import React from 'react'
+import React, { useState } from 'react'
 import django from 'django'
 import { useCreateSearchProfile } from '../kiezradar/use-create-search-profile'
+import Modal from '../contrib/Modal'
+import { alert as Alert } from 'adhocracy4'
+import { useSearchParams } from 'react-router-dom'
 
-const loginText = django.gettext('Login to save search profiles')
+const modalTitleText = django.gettext('Login or register to save a search profile')
+const modalMessageText = django.gettext('To save your search profile and access it later, please log in or create an account.')
+const modalButtonText = django.gettext('Continue to login')
+const alertTitleText = django.gettext('Please note, your current selection won’t be saved automatically')
+const alertMessageText = django.gettext('After logging in, you can create and save a new search profile.')
 const viewText = django.gettext('View search profiles')
 const limitText = django.gettext('You can only create 10 search profiles.')
 const saveText = django.gettext('Save search profile')
@@ -14,21 +21,42 @@ export default function SaveSearchProfile ({
   searchProfilesCount,
   ...props
 }) {
+  const [searchParams] = useSearchParams()
+  const [modal, setModal] = useState(false)
+
   if (!isAuthenticated) {
     return (
-      <div className="save-search-profile">
-        <a
-          className="save-search-profile__action save-search-profile__action--link"
-          href={
-            '/accounts/login/?next=' +
-            window.location.pathname +
-            window.location.search
-          }
-        >
-          <Icon />
-          {loginText}
-        </a>
-      </div>
+      <>
+        {modal && (
+          <Modal
+            title={modalTitleText}
+            message={modalMessageText}
+            buttonText={modalButtonText}
+            onConfirm={() => {
+              const nextUrl = window.location.pathname + '?' + searchParams.toString()
+              const encodedNext = encodeURIComponent(nextUrl)
+              window.location = '/accounts/login/?next=' + encodedNext
+              setModal(false)
+            }}
+            onClose={() => setModal(false)}
+          >
+            <Alert
+              title={alertTitleText}
+              message={alertMessageText}
+            />
+          </Modal>
+        )}
+        <div className="save-search-profile">
+          <button
+            className="save-search-profile__action save-search-profile__action--button"
+            type="button"
+            onClick={() => setModal(!modal)}
+          >
+            <Icon />
+            {saveText}
+          </button>
+        </div>
+      </>
     )
   }