[Glitch] Profile editing: Add warning for links

Port 12c6c6dcf9 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/features/account_edit/modals/fields_modals.tsx

@@ -18,6 +18,7 @@ import {
   useAppDispatch,
   useAppSelector,
 } from '@/flavours/glitch/store';
+import { isUrlWithoutProtocol } from '@/flavours/glitch/utils/checks';
 
 import { ConfirmationModal } from '../../ui/components/confirmation_modals';
 import type { DialogModalProps } from '../../ui/components/dialog_modal';
@@ -48,7 +49,7 @@ const messages = defineMessages({
   },
   editValueHint: {
     id: 'account_edit.field_edit_modal.value_hint',
-    defaultMessage: 'E.g. “example.me”',
+    defaultMessage: 'E.g. “https://example.me”',
   },
   limitHeader: {
     id: 'account_edit.field_edit_modal.limit_header',
@@ -109,6 +110,10 @@ export const EditFieldModal: FC<DialogModalProps & { fieldKey?: string }> = ({
     );
     return hasLink && hasEmoji;
   }, [customEmojiCodes, newLabel, newValue]);
+  const hasLinkWithoutProtocol = useMemo(
+    () => isUrlWithoutProtocol(newValue),
+    [newValue],
+  );
 
   const dispatch = useAppDispatch();
   const handleSave = useCallback(() => {
@@ -175,6 +180,19 @@ export const EditFieldModal: FC<DialogModalProps & { fieldKey?: string }> = ({
           />
         </Callout>
       )}
+
+      {hasLinkWithoutProtocol && (
+        <Callout variant='warning'>
+          <FormattedMessage
+            id='account_edit.field_edit_modal.url_warning'
+            defaultMessage='To add a link, please include {protocol} at the beginning.'
+            description='{protocol} is https://'
+            values={{
+              protocol: <code>https://</code>,
+            }}
+          />
+        </Callout>
+      )}
     </ConfirmationModal>
   );
 };