From fe33d561315107f06b753f2ecedcf976e763f21c Mon Sep 17 00:00:00 2001
From: Anton Tranelis <mail@antontranelis.de>
Date: Thu, 21 Nov 2024 10:20:03 +0100
Subject: [PATCH 1/7] profile fix part 1

---
 .../ItemPopupComponents/HeaderView.tsx        |  1 +
 .../ItemPopupComponents/TextView.tsx          | 68 ++++++++++---------
 2 files changed, 38 insertions(+), 31 deletions(-)

diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
index 71c637b2..078ae834 100644
--- a/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
+++ b/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
@@ -103,6 +103,7 @@ export function HeaderView({
             <div className={`${avatar ? 'tw-ml-2' : ''} tw-overflow-hidden`}>
               <div
                 className={`${big ? 'xl:tw-text-3xl tw-text-2xl' : 'tw-text-xl'} tw-font-semibold tw-truncate`}
+                title={title}
               >
                 {title}
               </div>
diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx
index 8ba7f09b..dad03843 100644
--- a/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx
+++ b/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx
@@ -1,19 +1,17 @@
+/* eslint-disable no-console */
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
-/* eslint-disable @typescript-eslint/restrict-template-expressions */
-/* eslint-disable @typescript-eslint/no-unsafe-argument */
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/restrict-plus-operands */
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
-import { memo } from 'react'
+import { memo, useEffect } from 'react'
 import Markdown from 'react-markdown'
 import remarkBreaks from 'remark-breaks'
 
 import { useAddFilterTag } from '#components/Map/hooks/useFilter'
 import { useTags } from '#components/Map/hooks/useTags'
-import { Item } from '#src/types'
+import { Item, Tag } from '#src/types'
 import { decodeTag } from '#utils/FormatTags'
 import { getValue } from '#utils/GetValue'
 import { hashTagRegex } from '#utils/HashTagRegex'
@@ -76,47 +74,54 @@ export const TextView = ({
     })
   }
 
-  // eslint-disable-next-line react/prop-types
   const CustomH1 = ({ children }) => <h1 className='tw-text-xl tw-font-bold'>{children}</h1>
-  // eslint-disable-next-line react/prop-types
+
   const CustomH2 = ({ children }) => <h2 className='tw-text-lg tw-font-bold'>{children}</h2>
-  // eslint-disable-next-line react/prop-types
+
   const CustomH3 = ({ children }) => <h3 className='tw-text-base tw-font-bold'>{children}</h3>
-  // eslint-disable-next-line react/prop-types
+
   const CustomH4 = ({ children }) => <h4 className='tw-text-base tw-font-bold'>{children}</h4>
-  // eslint-disable-next-line react/prop-types
+
   const CustomH5 = ({ children }) => <h5 className='tw-text-sm tw-font-bold'>{children}</h5>
-  // eslint-disable-next-line react/prop-types
+
   const CustomH6 = ({ children }) => <h6 className='tw-text-sm tw-font-bold'>{children}</h6>
-  // eslint-disable-next-line react/prop-types
+
   const CustomParagraph = ({ children }) => <p className='!tw-my-2'>{children}</p>
-  // eslint-disable-next-line react/prop-types
+
   const CustomUnorderdList = ({ children }) => (
     <ul className='tw-list-disc tw-list-inside'>{children}</ul>
   )
-  // eslint-disable-next-line react/prop-types
+
   const CustomOrderdList = ({ children }) => (
     <ol className='tw-list-decimal tw-list-inside'>{children}</ol>
   )
-  // eslint-disable-next-line react/prop-types
+
   const CustomHorizontalRow = ({ children }) => <hr className='tw-border-current'>{children}</hr>
   // eslint-disable-next-line react/prop-types
   const CustomImage = ({ alt, src, title }) => (
     <img className='tw-max-w-full tw-rounded tw-shadow' src={src} alt={alt} title={title} />
   )
-  // eslint-disable-next-line react/prop-types
+
   const CustomExternalLink = ({ href, children }) => (
     <a className='tw-font-bold tw-underline' href={href} target='_blank' rel='noreferrer'>
       {' '}
       {children}
     </a>
   )
-  /* eslint-disable react/prop-types */
-  const CustomHashTagLink = ({ children, tag, item }) => {
+
+  const CustomHashTagLink = ({
+    children,
+    tag,
+    item,
+  }: {
+    children: string
+    tag: Tag
+    item?: Item
+  }) => {
     return (
       <a
         style={{ color: tag ? tag.color : '#faa', fontWeight: 'bold', cursor: 'pointer' }}
-        key={tag ? tag.name + item.id : item.id}
+        key={tag ? tag.name + item?.id : item?.id}
         onClick={(e) => {
           e.stopPropagation()
           addFilterTag(tag)
@@ -126,7 +131,6 @@ export const TextView = ({
       </a>
     )
   }
-  /* eslint-enable react/prop-types */
 
   // eslint-disable-next-line react/display-name
   const MemoizedVideoEmbed = memo(({ url }: { url: string }) => (
@@ -144,32 +148,34 @@ export const TextView = ({
       remarkPlugins={[remarkBreaks]}
       components={{
         p: CustomParagraph,
-        a: ({ href, children }) => {
-          // eslint-disable-next-line react/prop-types
+        a: ({ href, children }: { href: string; children: string }) => {
           const isYouTubeVideo = href?.startsWith('https://www.youtube.com/watch?v=')
-          // eslint-disable-next-line react/prop-types
+
           const isRumbleVideo = href?.startsWith('https://rumble.com/embed/')
 
           if (isYouTubeVideo) {
-            // eslint-disable-next-line react/prop-types
             const videoId = href?.split('v=')[1].split('&')[0]
             const youtubeEmbedUrl = `https://www.youtube-nocookie.com/embed/${videoId}`
 
             return <MemoizedVideoEmbed url={youtubeEmbedUrl}></MemoizedVideoEmbed>
           }
           if (isRumbleVideo) {
-            return <MemoizedVideoEmbed url={href!}></MemoizedVideoEmbed>
+            return <MemoizedVideoEmbed url={href}></MemoizedVideoEmbed>
           }
-          // eslint-disable-next-line react/prop-types
+
           if (href?.startsWith('#')) {
+            console.log(href.slice(1).toLowerCase())
+            console.log(tags)
             const tag = tags.find(
               (t) => t.name.toLowerCase() === decodeURI(href).slice(1).toLowerCase(),
             )
-            return (
-              <CustomHashTagLink tag={tag} item={item}>
-                {children}
-              </CustomHashTagLink>
-            )
+            if (tag)
+              return (
+                <CustomHashTagLink tag={tag} item={item}>
+                  {children}
+                </CustomHashTagLink>
+              )
+            else return children
           } else {
             return <CustomExternalLink href={href}>{children}</CustomExternalLink>
           }

From 3709c43a4bef572d993192bbd29d8cd498058b66 Mon Sep 17 00:00:00 2001
From: Anton Tranelis <mail@antontranelis.de>
Date: Thu, 21 Nov 2024 10:20:14 +0100
Subject: [PATCH 2/7] 3.0.21

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7d4ae293..1ec636d7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "utopia-ui",
-  "version": "3.0.20",
+  "version": "3.0.21",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "utopia-ui",
-      "version": "3.0.20",
+      "version": "3.0.21",
       "license": "GPL-3.0-only",
       "dependencies": {
         "@heroicons/react": "^2.0.17",
diff --git a/package.json b/package.json
index af771eaa..8551a808 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "utopia-ui",
-  "version": "3.0.20",
+  "version": "3.0.21",
   "description": "Reuseable React Components to build mapping apps for real life communities and networks",
   "repository": "https://github.com/utopia-os/utopia-ui",
   "homepage:": "https://utopia-os.org/",

From b6adca6a1ad9f5de4d7bc286763ab1e685fc0721 Mon Sep 17 00:00:00 2001
From: Anton Tranelis <mail@antontranelis.de>
Date: Thu, 21 Nov 2024 10:21:03 +0100
Subject: [PATCH 3/7] removed unused iport

---
 .../Map/Subcomponents/ItemPopupComponents/TextView.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx
index dad03843..33999ffc 100644
--- a/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx
+++ b/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx
@@ -5,7 +5,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
-import { memo, useEffect } from 'react'
+import { memo } from 'react'
 import Markdown from 'react-markdown'
 import remarkBreaks from 'remark-breaks'
 

From 30b46666d424eec5e699cced5f5ced0f4c47c776 Mon Sep 17 00:00:00 2001
From: Anton Tranelis <mail@antontranelis.de>
Date: Thu, 21 Nov 2024 10:21:33 +0100
Subject: [PATCH 4/7] adjust version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 8551a808..17a9274c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "utopia-ui",
-  "version": "3.0.21",
+  "version": "3.0.25",
   "description": "Reuseable React Components to build mapping apps for real life communities and networks",
   "repository": "https://github.com/utopia-os/utopia-ui",
   "homepage:": "https://utopia-os.org/",

From 975331c23da2dcf5fbf9bb6277384a7096f8a2a7 Mon Sep 17 00:00:00 2001
From: Anton Tranelis <mail@antontranelis.de>
Date: Thu, 21 Nov 2024 11:07:49 +0100
Subject: [PATCH 5/7] 3.0.26

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1ec636d7..1fe687eb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "utopia-ui",
-  "version": "3.0.21",
+  "version": "3.0.26",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "utopia-ui",
-      "version": "3.0.21",
+      "version": "3.0.26",
       "license": "GPL-3.0-only",
       "dependencies": {
         "@heroicons/react": "^2.0.17",
diff --git a/package.json b/package.json
index 17a9274c..57b0144d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "utopia-ui",
-  "version": "3.0.25",
+  "version": "3.0.26",
   "description": "Reuseable React Components to build mapping apps for real life communities and networks",
   "repository": "https://github.com/utopia-os/utopia-ui",
   "homepage:": "https://utopia-os.org/",

From 594784e77a1578822301849e5f1eec7891500cb1 Mon Sep 17 00:00:00 2001
From: Anton Tranelis <mail@antontranelis.de>
Date: Fri, 22 Nov 2024 13:25:41 +0100
Subject: [PATCH 6/7] fix removing custom profile image bug

---
 .../Profile/Subcomponents/GroupSubheaderForm.tsx         | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/Components/Profile/Subcomponents/GroupSubheaderForm.tsx b/src/Components/Profile/Subcomponents/GroupSubheaderForm.tsx
index cd4084dd..afd43c2f 100644
--- a/src/Components/Profile/Subcomponents/GroupSubheaderForm.tsx
+++ b/src/Components/Profile/Subcomponents/GroupSubheaderForm.tsx
@@ -30,13 +30,16 @@ export const GroupSubheaderForm = ({
   useEffect(() => {
     if (groupTypes && groupStates) {
       const groupType = groupTypes.find((gt) => gt.groupTypes_id.name === state.group_type)
-      // eslint-disable-next-line no-console
-      console.log(state.group_type)
+      const customImage = !groupTypes.some(
+        (gt) => gt.groupTypes_id.image === state.image || !state.image,
+      )
       setState((prevState) => ({
         ...prevState,
         color: groupType?.groupTypes_id.color || groupTypes[0].groupTypes_id.color,
         marker_icon: groupType?.groupTypes_id.markerIcon || groupTypes[0].groupTypes_id.markerIcon,
-        image: groupType?.groupTypes_id.image || groupTypes[0].groupTypes_id.image,
+        image: customImage
+          ? state.image
+          : groupType?.groupTypes_id.image || groupTypes[0].groupTypes_id.image,
         status: state.status || groupStates[0],
         group_type: state.group_type || groupTypes[0].groupTypes_id.name,
       }))

From 1923e180d4bf1e995fe2a7b42f317492e59b165a Mon Sep 17 00:00:00 2001
From: Anton Tranelis <mail@antontranelis.de>
Date: Fri, 22 Nov 2024 13:27:15 +0100
Subject: [PATCH 7/7] e-mail and phone validation in group-subheader component

---
 src/Components/Input/TextInput.tsx            |  7 +-
 src/Components/Profile/ProfileForm.tsx        | 98 ++++++++++---------
 .../Profile/Subcomponents/ContactInfoForm.tsx |  4 +
 .../Profile/Subcomponents/FormHeader.tsx      |  1 +
 4 files changed, 62 insertions(+), 48 deletions(-)

diff --git a/src/Components/Input/TextInput.tsx b/src/Components/Input/TextInput.tsx
index 0ab98c15..54217e7c 100644
--- a/src/Components/Input/TextInput.tsx
+++ b/src/Components/Input/TextInput.tsx
@@ -13,6 +13,8 @@ type InputTextProps = {
   defaultValue?: string
   placeholder?: string
   autocomplete?: string
+  pattern?: string
+  required?: boolean
   updateFormValue?: (value: string) => void
 }
 
@@ -26,6 +28,8 @@ export function TextInput({
   defaultValue,
   placeholder,
   autocomplete,
+  pattern,
+  required = true,
   updateFormValue,
 }: InputTextProps) {
   const [inputValue, setInputValue] = useState<string>(defaultValue || '')
@@ -50,7 +54,8 @@ export function TextInput({
         </label>
       ) : null}
       <input
-        required
+        required={required}
+        pattern={pattern}
         type={type || 'text'}
         name={dataField}
         value={inputValue}
diff --git a/src/Components/Profile/ProfileForm.tsx b/src/Components/Profile/ProfileForm.tsx
index d57c8f0c..1e52a85c 100644
--- a/src/Components/Profile/ProfileForm.tsx
+++ b/src/Components/Profile/ProfileForm.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-misused-promises */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
@@ -148,58 +147,63 @@ export function ProfileForm() {
         backdrop
         className='tw-mx-4 tw-mt-4 tw-mb-4 tw-overflow-x-hidden tw-w-[calc(100%-32px)]  md:tw-w-[calc(50%-32px)] tw-max-w-3xl !tw-left-auto tw-top-0 tw-bottom-0'
       >
-        <div className='tw-flex tw-flex-col tw-h-full'>
-          <FormHeader item={item} state={state} setState={setState} />
+        <form
+          onSubmit={(e) => {
+            e.preventDefault()
+            void onUpdateItem(
+              state,
+              item,
+              tags,
+              addTag,
+              setLoading,
+              navigate,
+              updateItem,
+              addItem,
+              user,
+              urlParams,
+            )
+          }}
+        >
+          <div className='tw-flex tw-flex-col tw-h-full'>
+            <FormHeader item={item} state={state} setState={setState} />
 
-          {template === 'onepager' && (
-            <OnepagerForm item={item} state={state} setState={setState}></OnepagerForm>
-          )}
+            {template === 'onepager' && (
+              <OnepagerForm item={item} state={state} setState={setState}></OnepagerForm>
+            )}
 
-          {template === 'simple' && <SimpleForm state={state} setState={setState}></SimpleForm>}
+            {template === 'simple' && <SimpleForm state={state} setState={setState}></SimpleForm>}
 
-          {template === 'flex' && (
-            <FlexForm item={item} state={state} setState={setState}></FlexForm>
-          )}
+            {template === 'flex' && (
+              <FlexForm item={item} state={state} setState={setState}></FlexForm>
+            )}
 
-          {template === 'tabs' && (
-            <TabsForm
-              loading={loading}
-              item={item}
-              state={state}
-              setState={setState}
-              updatePermission={updatePermission}
-              linkItem={(id) => linkItem(id, item, updateItem)}
-              unlinkItem={(id) => unlinkItem(id, item, updateItem)}
-              setUrlParams={setUrlParams}
-            ></TabsForm>
-          )}
+            {template === 'tabs' && (
+              <TabsForm
+                loading={loading}
+                item={item}
+                state={state}
+                setState={setState}
+                updatePermission={updatePermission}
+                linkItem={(id) => linkItem(id, item, updateItem)}
+                unlinkItem={(id) => unlinkItem(id, item, updateItem)}
+                setUrlParams={setUrlParams}
+              ></TabsForm>
+            )}
 
-          <div className='tw-mt-4'>
-            <button
-              className={loading ? ' tw-loading tw-btn tw-float-right' : 'tw-btn tw-float-right'}
-              onClick={() =>
-                onUpdateItem(
-                  state,
-                  item,
-                  tags,
-                  addTag,
-                  setLoading,
-                  navigate,
-                  updateItem,
-                  addItem,
-                  user,
-                  urlParams,
-                )
-              }
-              style={{
-                backgroundColor: `${item.layer?.itemColorField && getValue(item, item.layer?.itemColorField) ? getValue(item, item.layer?.itemColorField) : getItemTags(item) && getItemTags(item)[0] && getItemTags(item)[0].color ? getItemTags(item)[0].color : item?.layer?.markerDefaultColor}`,
-                color: '#fff',
-              }}
-            >
-              Update
-            </button>
+            <div className='tw-mt-4'>
+              <button
+                className={loading ? ' tw-loading tw-btn tw-float-right' : 'tw-btn tw-float-right'}
+                type='submit'
+                style={{
+                  backgroundColor: `${item.layer?.itemColorField && getValue(item, item.layer?.itemColorField) ? getValue(item, item.layer?.itemColorField) : getItemTags(item) && getItemTags(item)[0] && getItemTags(item)[0].color ? getItemTags(item)[0].color : item?.layer?.markerDefaultColor}`,
+                  color: '#fff',
+                }}
+              >
+                Update
+              </button>
+            </div>
           </div>
-        </div>
+        </form>
       </MapOverlayPage>
     </>
   )
diff --git a/src/Components/Profile/Subcomponents/ContactInfoForm.tsx b/src/Components/Profile/Subcomponents/ContactInfoForm.tsx
index 9a87fc6a..ed5cea1e 100644
--- a/src/Components/Profile/Subcomponents/ContactInfoForm.tsx
+++ b/src/Components/Profile/Subcomponents/ContactInfoForm.tsx
@@ -22,6 +22,7 @@ export const ContactInfoForm = ({
         <TextInput
           placeholder='Email'
           type='email'
+          required={false}
           defaultValue={state.contact}
           updateFormValue={(v) =>
             setState((prevState) => ({
@@ -41,6 +42,9 @@ export const ContactInfoForm = ({
         </label>
         <TextInput
           placeholder='Telefonnummer'
+          type='tel'
+          required={false}
+          pattern='^\+?[0-9\s\-]{7,15}$'
           defaultValue={state.telephone}
           updateFormValue={(v) =>
             setState((prevState) => ({
diff --git a/src/Components/Profile/Subcomponents/FormHeader.tsx b/src/Components/Profile/Subcomponents/FormHeader.tsx
index a20a778f..357ad7a4 100644
--- a/src/Components/Profile/Subcomponents/FormHeader.tsx
+++ b/src/Components/Profile/Subcomponents/FormHeader.tsx
@@ -44,6 +44,7 @@ export const FormHeader = ({ item, state, setState }) => {
         />
         <TextInput
           placeholder='Subtitle'
+          required={false}
           defaultValue={item?.subname ? item.subname : ''}
           updateFormValue={(v) =>
             setState((prevState) => ({