profile-pane 3.1.3 → 3.1.4

package/lib/editProfilePane/EditProfileView.js

@@ -10,9 +10,10 @@ var _EditFriendsCard = require("./EditFriendsCard");
 var _EditSocialCard = require("./EditSocialCard");
 var _EditCommunitiesCard = require("./EditCommunitiesCard");
 require("../styles/utilities.css");
-require("../styles/rdfFormsEnforced.css");
+require("../styles/profileRDFFormsEnforced.css");
 var _EditCVCard = require("./EditCVCard");
 var _EditOtherPreferences = require("./EditOtherPreferences");
+var _rdfFormsHelper = require("../rdfFormsHelper");
 /**
  * Profile Editing App Pane
  *
@@ -101,10 +102,13 @@ const editProfileView = {
       main.appendChild((0, _EditOtherPreferences.EditOtherPreferencesSection)(context, me, editableProfile, store));
 
       // People you know Section
-      main.appendChild((0, _EditFriendsCard.EditFriendsSection)(context, me, editableProfile, profile));
+      main.appendChild((0, _EditFriendsCard.EditFriendsSection)(context, me, editableProfile));
 
       // Communities you participate in Section
-      main.appendChild((0, _EditCommunitiesCard.EditProfileCommunitiesSection)(context, me, editableProfile, profile));
+      main.appendChild((0, _EditCommunitiesCard.EditProfileCommunitiesSection)(context, me, editableProfile));
+
+      // Ensure keyboard navigation skips labels (including those rendered as links).
+      (0, _rdfFormsHelper.skipLabelsFromTabbing)(main);
       main.setAttribute('aria-busy', 'false');
       main.focus();
     }).catch(error => {

package/lib/editProfilePane/EditSocialCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditSocialCard.d.ts","sourceRoot":"","sources":["../../src/editProfilePane/EditSocialCard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,KAAK,EAAC,MAAM,QAAQ,CAAA;AAOxC,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,kBAAkB,EAAE,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,SAAS,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,eAgC5H"}
+{"version":3,"file":"EditSocialCard.d.ts","sourceRoot":"","sources":["../../src/editProfilePane/EditSocialCard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,KAAK,EAAC,MAAM,QAAQ,CAAA;AAOxC,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,kBAAkB,EAAE,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,SAAS,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,eA2B5H"}

package/lib/editProfilePane/EditSocialCard.js

@@ -8,7 +8,7 @@ var _rdfFormsHelper = _interopRequireDefault(require("../rdfFormsHelper"));
 var _texts = require("../texts");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /* babel-plugin-inline-import '../ontology/socialMedia.ttl' */
-const socialMediaForm = "@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>.\n@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#>.\n@prefix foaf: <http://xmlns.com/foaf/0.1/>.\n@prefix owl: <http://www.w3.org/2002/07/owl#>.\n@prefix solid: <http://www.w3.org/ns/solid/terms#>.\n@prefix ui: <http://www.w3.org/ns/ui#>.\n@prefix schema: <http://schema.org/>.\n@prefix vcard: <http://www.w3.org/2006/vcard/ns#>.\n@prefix org: <http://www.w3.org/ns/org#>.\n@prefix : <#>.\n\n########### ATTENTION - we cannot rename this ontology file name without migrating existing data on existing accounts\n\n########### Social Media - other accounts\n#\n# Twitter, linked In, Orkid, Mastodon, Matrix, Bluesky, Instagram, Facebook, Github,\n# Snapchat, TikTok, etc\n\n:this\n    <http://purl.org/dc/elements/1.1/title> \"Social media form\" ;\n    a ui:Form ;\n    ui:parts (\n      :SocialsForm\n      ).\n\n:SocialsForm a ui:Multiple;\n    ui:label \"online account\";\n    ui:property foaf:account; # the triple is created with the foaf:acccounts predicate\n    ui:ordered true; # Allow user to order occounts most important first.\n    ui:part :AccountsForm.\n\n:AccountsForm a ui:Group; \n    ui:weight 1; \n    ui:parts ( \n        :AccountField \n        :AccountIdField ).\n\n:AccountField a ui:Classifier; \n    ui:label \"Choose account\"@en;\n    ui:multiple false ; \n    ui:category foaf:Account. # the accounts are described by the foaf:Account predicate\n\n# this is what is needed to make a dropdown box\nfoaf:Account a rdfs:Class;\n    rdfs:label \"Online Account Provider\";\n    owl:disjointUnionOf ( \n        :BlueSkyAccount :DiggAccount :FacebookAccount :GithubAccount :InstagramAccount\n        :LinkedInAccount :MastodonAccount :MatrixAccount :MediumAccount :NostrAccount \n        :OrcidAccount :PinterestAccount :RedditAccount :SnapchatAccount :StravaAccount \n        :TiktokAccount  :TumblrAccount  :TwitterAccount :OtherAccount) .\n\n:AccountIdField a ui:Options; \n    ui:dependingOn rdf:type; \n    ui:case\n     [ ui:for :BlueSkyAccount; ui:use :BlueSkyIdField ],\n     [ ui:for :DiggAccount; ui:use :DiggIdField],\n     [ ui:for :FacebookAccount; ui:use :FacebookIdField ],\n     [ ui:for :GithubAccount; ui:use :GithubIdField ],\n     [ ui:for :InstagramAccount; ui:use :InstagramIdField ],\n     [ ui:for :LinkedInAccount; ui:use :LinkedInIdField ],\n     [ ui:for :MastodonAccount; ui:use :MastodonIdField ],\n     [ ui:for :MatrixAccount; ui:use :MatrixIdField ],\n     [ ui:for :MediumAccount; ui:use :MediumIdField ],\n     [ ui:for :NostrAccount; ui:use :NostrIdField ],\n     [ ui:for :OrcidAccount; ui:use :OrcidIdField ],\n     [ ui:for :PinterestAccount; ui:use :PinterestIdField ],\n     [ ui:for :RedditAccount; ui:use :RedditIdField ],\n     [ ui:for :StravaAccount; ui:use :StravaIdField ],\n     [ ui:for :SnapchatAccount; ui:use :SnapchatIdField ],\n     [ ui:for :TiktokAccount; ui:use :TiktokIdField ],\n     [ ui:for :TumblrAccount; ui:use :TumblrIdField ],\n     [ ui:for :TwitterAccount; ui:use :TwitterIdField ],\n     [ ui:for :OtherAccount; ui:use :OtherIdForm  ] .\n\n:BlueSkyAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Bluesky\";\n    foaf:userProfilePrefix \"https://bsky.app/profile/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/bluesky-1.svg>;\n    foaf:homepage <https://bsky.app/> .\n\n:DiggAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Digg\";\n    foaf:userProfilePrefix \"https://www.digg.com/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/digg-icon.svg>;\n    foaf:homepage <https://www.digg.com/> .\n\n:FacebookAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Facebook\";\n    foaf:userProfilePrefix \"https://www.facebook.com/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/facebook-2020-2-1.svg>;\n    foaf:homepage <https://www.facebook.com/> .\n\n:GithubAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Github\";\n    foaf:userProfilePrefix \"https://www.github.com/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/github-icon.svg>;\n    foaf:homepage <https://github.com/> .\n\n:InstagramAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Instagram\";\n    foaf:userProfilePrefix \"https://www.instagram.com/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/instagram-2016-5.svg>;\n    foaf:homepage <https://www.instagram.com/> .\n\n:LinkedInAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"LinkedIn\";\n    foaf:userProfilePrefix \"https://www.linkedin.com/in/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/linkedin-icon.svg>;\n    foaf:homepage <https://linkedin.com/> .\n\n:MastodonAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Mastodon\" ;\n    foaf:userProfilePrefix \"https://mastodon.social/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/mastodon-2.svg>;\n    foaf:homepage <https://joinmastodon.org/> .\n\n:MatrixAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Matrix\" ;\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/matrix-logo-black.svg> ;\n    foaf:userProfilePrefix \"https://matrix.to/#/\" ;\n    foaf:homepage <https://matrix.org/> .\n\n:MediumAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Medium\";\n    foaf:userProfilePrefix \"https://medium.com/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/medium-logo-wordmark-black.svg>;\n    foaf:homepage <https://medium.com/> .\n\n:NostrAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Nostr\";\n    foaf:userProfilePrefix \"https://primal.net/p/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/nostr-icon-purple-on-white.svg>;\n    foaf:homepage <https://nostr.net/> .\n\n:OrcidAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"ORCiD\";\n    foaf:userProfilePrefix \"https://orcid.org/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/ORCID-1.svg>;\n    foaf:homepage <https://orcid.org/> .\n\n:PinterestAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Pinterest\";\n    foaf:userProfilePrefix \"https://pin.it/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/pinterest-2-1.svg>;\n    foaf:homepage <https://pinterest.com/> .\n\n:RedditAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Reddit\";\n    foaf:userProfilePrefix \"https://www.reddit.com/user/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/reddit-4.svg>;\n    foaf:homepage <https://reddit.com/> .\n\n:SnapchatAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Snapchat\";\n    foaf:userProfilePrefix \"https://www.snapchat.com/add/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/snapchat-1.svg>;\n    foaf:homepage <https://www.snapchat.com/> .\n\n:StravaAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Strava\";\n    foaf:userProfilePrefix \"https://www.strava.com/athletes/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/strava-2.svg>;\n    foaf:homepage <https://strava.com/> .\n\n:TiktokAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"TikTok\";\n    foaf:userProfilePrefix \"https://www.tiktok.com/@\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/tiktok-icon-2.svg>;\n    foaf:homepage <https://www.tiktok.com/> .\n\n:TumblrAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Tumblr\";\n    foaf:userProfilePrefix \"https://www.tumblr.com/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/tumblr-icon.svg>;\n    foaf:homepage <https://www.tumblr.com/> .\n\n:TwitterAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"X\";\n    foaf:userProfilePrefix \"https://x.com/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/x-2.svg>;\n    foaf:homepage <https://x.com/> .\n\n:OtherAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Other\" ;\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/noun_1689339.svg> .\n\n:BlueSkyIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"@[a-z0-9A-Z_-](.[a-z0-9A-Z_-])*\".\n\n:DiggIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"@[a-z0-9A-Z_-](.[a-z0-9A-Z_-])*\".\n\n:FacebookIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:property foaf:accountName ; \n    ui:pattern \"[a-z0-9A-Z_-]*\".\n\n:GithubIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"[a-z0-9A-Z_-]*\".\n\n:InstagramIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"[a-z0-9A-Z_-]*\".\n\n:LinkedInIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"[a-z0-9A-Z_-]*(.[a-z0-9A-Z_-])*\".\n\n:MastodonIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"@[a-z0-9A-Z_-]*(.[a-z0-9A-Z_-])*\".\n\n:MatrixIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"@[a-z0-9A-Z_-]*(.[a-z0-9A-Z_-])*\".\n\n:MediumIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"@[a-z0-9A-Z_-]*(.[a-z0-9A-Z_-])*\".\n\n:NostrIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"[a-z0-9A-Z_-]*(.[a-z0-9A-Z_-])*\".\n\n:OrcidIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"[a-z0-9A-Z_-]*\".\n\n:PinterestIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"[a-z0-9A-Z_-]*\".\n\n:RedditIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"[a-z0-9A-Z_-]*\".\n\n:StravaIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"[a-z0-9A-Z_-]*\".\n\n:SnapchatIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"@[a-z0-9A-Z_-]*\".\n\n:TiktokIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"@[a-z0-9A-Z_-]*\".\n\n:TumblrIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"@[a-z0-9A-Z_-]*\".\n\n:TwitterIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"@[a-z0-9A-Z_-]*\".\n\n# an unknown online account needs more info\n\n:OtherIdForm a ui:Group; \n    ui:weight 0; \n    ui:parts ( \n        :OtherIdField \n        :OtherIconField \n        :OtherLabelField ).\n\n:OtherIdField\n    a ui:NamedNodeURIField ;\n    ui:label \"Account link\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:homepage.\n\n:OtherIconField\n    a ui:NamedNodeURIField ;\n    ui:label \"Icon link\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:icon.\n\n:OtherLabelField\n    a ui:SingleLineTextField ;\n    ui:label \"Name\";\n    ui:maxLength \"200\" ;\n    ui:property rdfs:label.\n\n# ends\n";
+const socialMediaForm = "@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>.\n@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#>.\n@prefix foaf: <http://xmlns.com/foaf/0.1/>.\n@prefix owl: <http://www.w3.org/2002/07/owl#>.\n@prefix solid: <http://www.w3.org/ns/solid/terms#>.\n@prefix ui: <http://www.w3.org/ns/ui#>.\n@prefix schema: <http://schema.org/>.\n@prefix vcard: <http://www.w3.org/2006/vcard/ns#>.\n@prefix org: <http://www.w3.org/ns/org#>.\n@prefix : <#>.\n\n########### ATTENTION - we cannot rename this ontology file name without migrating existing data on existing accounts\n\n########### Social Media - other accounts\n#\n# Twitter, linked In, Orkid, Mastodon, Matrix, Bluesky, Instagram, Facebook, Github,\n# Snapchat, TikTok, etc\n\n:this\n    <http://purl.org/dc/elements/1.1/title> \"Social media form\" ;\n    a ui:Form ;\n    ui:parts (\n      :SocialsForm\n      ).\n\n:SocialsForm a ui:Multiple;\n    ui:label \"online account\";\n    ui:property foaf:account; # the triple is created with the foaf:acccounts predicate\n    ui:ordered true; # Allow user to order occounts most important first.\n    ui:part :AccountsForm.\n\n:AccountsForm a ui:Group; \n    ui:weight 1; \n    ui:parts ( \n        :AccountField \n        :AccountIdField ).\n\n:AccountField a ui:Classifier; \n    ui:label \"Account\"@en;\n    ui:multiple false ; \n    ui:category foaf:Account. # the accounts are described by the foaf:Account predicate\n\n# this is what is needed to make a dropdown box\nfoaf:Account a rdfs:Class;\n    rdfs:label \"Online Account Provider\";\n    owl:disjointUnionOf ( \n        :BlueSkyAccount :DiggAccount :FacebookAccount :GithubAccount :InstagramAccount\n        :LinkedInAccount :MastodonAccount :MatrixAccount :MediumAccount :NostrAccount \n        :OrcidAccount :PinterestAccount :RedditAccount :SnapchatAccount :StravaAccount \n        :TiktokAccount  :TumblrAccount  :TwitterAccount :OtherAccount) .\n\n:AccountIdField a ui:Options; \n    ui:dependingOn rdf:type; \n    ui:case\n     [ ui:for :BlueSkyAccount; ui:use :BlueSkyIdField ],\n     [ ui:for :DiggAccount; ui:use :DiggIdField],\n     [ ui:for :FacebookAccount; ui:use :FacebookIdField ],\n     [ ui:for :GithubAccount; ui:use :GithubIdField ],\n     [ ui:for :InstagramAccount; ui:use :InstagramIdField ],\n     [ ui:for :LinkedInAccount; ui:use :LinkedInIdField ],\n     [ ui:for :MastodonAccount; ui:use :MastodonIdField ],\n     [ ui:for :MatrixAccount; ui:use :MatrixIdField ],\n     [ ui:for :MediumAccount; ui:use :MediumIdField ],\n     [ ui:for :NostrAccount; ui:use :NostrIdField ],\n     [ ui:for :OrcidAccount; ui:use :OrcidIdField ],\n     [ ui:for :PinterestAccount; ui:use :PinterestIdField ],\n     [ ui:for :RedditAccount; ui:use :RedditIdField ],\n     [ ui:for :StravaAccount; ui:use :StravaIdField ],\n     [ ui:for :SnapchatAccount; ui:use :SnapchatIdField ],\n     [ ui:for :TiktokAccount; ui:use :TiktokIdField ],\n     [ ui:for :TumblrAccount; ui:use :TumblrIdField ],\n     [ ui:for :TwitterAccount; ui:use :TwitterIdField ],\n     [ ui:for :OtherAccount; ui:use :OtherIdForm  ] .\n\n:BlueSkyAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Bluesky\";\n    foaf:userProfilePrefix \"https://bsky.app/profile/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/bluesky-1.svg>;\n    foaf:homepage <https://bsky.app/> .\n\n:DiggAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Digg\";\n    foaf:userProfilePrefix \"https://www.digg.com/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/digg-icon.svg>;\n    foaf:homepage <https://www.digg.com/> .\n\n:FacebookAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Facebook\";\n    foaf:userProfilePrefix \"https://www.facebook.com/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/facebook-2020-2-1.svg>;\n    foaf:homepage <https://www.facebook.com/> .\n\n:GithubAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Github\";\n    foaf:userProfilePrefix \"https://www.github.com/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/github-icon.svg>;\n    foaf:homepage <https://github.com/> .\n\n:InstagramAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Instagram\";\n    foaf:userProfilePrefix \"https://www.instagram.com/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/instagram-2016-5.svg>;\n    foaf:homepage <https://www.instagram.com/> .\n\n:LinkedInAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"LinkedIn\";\n    foaf:userProfilePrefix \"https://www.linkedin.com/in/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/linkedin-icon.svg>;\n    foaf:homepage <https://linkedin.com/> .\n\n:MastodonAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Mastodon\" ;\n    foaf:userProfilePrefix \"https://mastodon.social/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/mastodon-2.svg>;\n    foaf:homepage <https://joinmastodon.org/> .\n\n:MatrixAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Matrix\" ;\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/matrix-logo-black.svg> ;\n    foaf:userProfilePrefix \"https://matrix.to/#/\" ;\n    foaf:homepage <https://matrix.org/> .\n\n:MediumAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Medium\";\n    foaf:userProfilePrefix \"https://medium.com/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/medium-logo-wordmark-black.svg>;\n    foaf:homepage <https://medium.com/> .\n\n:NostrAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Nostr\";\n    foaf:userProfilePrefix \"https://primal.net/p/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/nostr-icon-purple-on-white.svg>;\n    foaf:homepage <https://nostr.net/> .\n\n:OrcidAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"ORCiD\";\n    foaf:userProfilePrefix \"https://orcid.org/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/ORCID-1.svg>;\n    foaf:homepage <https://orcid.org/> .\n\n:PinterestAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Pinterest\";\n    foaf:userProfilePrefix \"https://pin.it/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/pinterest-2-1.svg>;\n    foaf:homepage <https://pinterest.com/> .\n\n:RedditAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Reddit\";\n    foaf:userProfilePrefix \"https://www.reddit.com/user/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/reddit-4.svg>;\n    foaf:homepage <https://reddit.com/> .\n\n:SnapchatAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Snapchat\";\n    foaf:userProfilePrefix \"https://www.snapchat.com/add/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/snapchat-1.svg>;\n    foaf:homepage <https://www.snapchat.com/> .\n\n:StravaAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Strava\";\n    foaf:userProfilePrefix \"https://www.strava.com/athletes/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/strava-2.svg>;\n    foaf:homepage <https://strava.com/> .\n\n:TiktokAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"TikTok\";\n    foaf:userProfilePrefix \"https://www.tiktok.com/@\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/tiktok-icon-2.svg>;\n    foaf:homepage <https://www.tiktok.com/> .\n\n:TumblrAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Tumblr\";\n    foaf:userProfilePrefix \"https://www.tumblr.com/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/tumblr-icon.svg>;\n    foaf:homepage <https://www.tumblr.com/> .\n\n:TwitterAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"X\";\n    foaf:userProfilePrefix \"https://x.com/\";\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/social/x-2.svg>;\n    foaf:homepage <https://x.com/> .\n\n:OtherAccount rdfs:subClassOf foaf:Account ;\n    rdfs:label \"Other\" ;\n    foaf:icon <https://solidos.github.io/solid-ui/src/icons/noun_1689339.svg> .\n\n:BlueSkyIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"@[a-z0-9A-Z_-](.[a-z0-9A-Z_-])*\".\n\n:DiggIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"@[a-z0-9A-Z_-](.[a-z0-9A-Z_-])*\".\n\n:FacebookIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:property foaf:accountName ; \n    ui:pattern \"[a-z0-9A-Z_-]*\".\n\n:GithubIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"[a-z0-9A-Z_-]*\".\n\n:InstagramIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"[a-z0-9A-Z_-]*\".\n\n:LinkedInIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"[a-z0-9A-Z_-]*(.[a-z0-9A-Z_-])*\".\n\n:MastodonIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"@[a-z0-9A-Z_-]*(.[a-z0-9A-Z_-])*\".\n\n:MatrixIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"@[a-z0-9A-Z_-]*(.[a-z0-9A-Z_-])*\".\n\n:MediumIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"@[a-z0-9A-Z_-]*(.[a-z0-9A-Z_-])*\".\n\n:NostrIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"[a-z0-9A-Z_-]*(.[a-z0-9A-Z_-])*\".\n\n:OrcidIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"[a-z0-9A-Z_-]*\".\n\n:PinterestIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"[a-z0-9A-Z_-]*\".\n\n:RedditIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"[a-z0-9A-Z_-]*\".\n\n:StravaIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"[a-z0-9A-Z_-]*\".\n\n:SnapchatIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"@[a-z0-9A-Z_-]*\".\n\n:TiktokIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"@[a-z0-9A-Z_-]*\".\n\n:TumblrIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"@[a-z0-9A-Z_-]*\".\n\n:TwitterIdField\n    a ui:SingleLineTextField ;\n    ui:label \"Username\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:accountName ; \n    ui:pattern \"@[a-z0-9A-Z_-]*\".\n\n# an unknown online account needs more info\n\n:OtherIdForm a ui:Group; \n    ui:weight 0; \n    ui:parts ( \n        :OtherIdField \n        :OtherIconField \n        :OtherLabelField ).\n\n:OtherIdField\n    a ui:NamedNodeURIField ;\n    ui:label \"Account link\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:homepage.\n\n:OtherIconField\n    a ui:NamedNodeURIField ;\n    ui:label \"Icon link\";\n    ui:maxLength \"200\" ;\n    ui:property foaf:icon.\n\n:OtherLabelField\n    a ui:SingleLineTextField ;\n    ui:label \"Name\";\n    ui:maxLength \"200\" ;\n    ui:property rdfs:label.\n\n# ends\n";
 const socialMediaFormName = 'socialMedia.ttl'; // The name of the form file
 
 function EditSocialSection(context, me, editableProfile, store) {
@@ -24,12 +24,7 @@ function EditSocialSection(context, me, editableProfile, store) {
   heading.textContent = _texts.socialAccountsHeadingText;
   header.appendChild(heading);
   section.appendChild(header);
-  if (editableProfile) {
-    const comment2 = context.dom.createElement('p');
-    comment2.classList.add('p-md');
-    comment2.textContent = 'Add links to your social media accounts here. These will be publicly visible on your profile.';
-    section.appendChild(comment2);
-  } else {
+  if (!editableProfile) {
     const comment1 = context.dom.createElement('p');
     comment1.classList.add('p-md');
     comment1.textContent = 'Login to add social media accounts to your profile.';

package/lib/editProfilePane/editProfilePresenter.d.ts

@@ -0,0 +1,4 @@
+import { NamedNode } from 'rdflib';
+export declare function refresh(dom: Document, attachmentTable: HTMLTableElement, me: NamedNode, editableProfile: NamedNode | null, predicate: NamedNode): void;
+export declare function isAWebID(subject: NamedNode): boolean;
+//# sourceMappingURL=editProfilePresenter.d.ts.map

package/lib/editProfilePane/editProfilePresenter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editProfilePresenter.d.ts","sourceRoot":"","sources":["../../src/editProfilePane/editProfilePresenter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAO,MAAM,QAAQ,CAAA;AAMvC,wBAAgB,OAAO,CAAC,GAAG,EAAE,QAAQ,EAAE,eAAe,EAAE,gBAAgB,EAAE,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,SAAS,GAAG,IAAI,EAAE,SAAS,EAAE,SAAS,QAmB/I;AAiFD,wBAAgB,QAAQ,CAAC,OAAO,EAAE,SAAS,GAAG,OAAO,CAMpD"}

package/lib/editProfilePane/editProfilePresenter.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isAWebID = isAWebID;
+exports.refresh = refresh;
+var _rdflib = require("rdflib");
+var _solidLogic = require("solid-logic");
+var _solidUi = require("solid-ui");
+const DEFAULT_ICON_URI = _solidUi.icons.iconBase + 'noun_10636_grey.svg'; // grey disc
+
+function refresh(dom, attachmentTable, me, editableProfile, predicate) {
+  // Keep the RDF terms so downstream Solid-UI helpers (e.g. findImage) can call term.sameTerm().
+  // We still sort by string value so the list order is stable.
+  const friendsList = _solidLogic.store.each(me, predicate);
+  // Ensure profiles are loaded before we render rows, otherwise widgets.findImage / utils.label may return empty.
+  void (async () => {
+    if (_solidLogic.store.fetcher) {
+      await Promise.all(friendsList.map(friend => {
+        if (!_solidLogic.store.holds(friend, null, null, null)) {
+          return _solidLogic.store.fetcher?.load(friend.value).catch(() => undefined);
+        }
+        return Promise.resolve();
+      }));
+    }
+    friendsList.sort((a, b) => a.value > b.value ? 1 : a.value < b.value ? -1 : 0);
+    _solidUi.utils.syncTableToArray(attachmentTable, friendsList, target => createNewRow(dom, attachmentTable, target, me, editableProfile, predicate));
+  })();
+}
+function createNewRow(dom, attachmentTable, target, me, editableProfile, predicate) {
+  const theTarget = target;
+  const profileImg = dom.createElement('img');
+  profileImg.src = getProfileImg((0, _rdflib.sym)(target), profileImg);
+  profileImg.alt = `Image of ${_solidUi.utils.label((0, _rdflib.sym)(target))}`;
+  const opt = {
+    image: profileImg,
+    title: _solidUi.utils.label((0, _rdflib.sym)(target)),
+    link: true
+  };
+  if (!!editableProfile) {
+    opt.deleteFunction = function () {
+      deleteAttachment(dom, attachmentTable, me, editableProfile, theTarget, predicate);
+    };
+  }
+  return _solidUi.widgets.renderAsRow(dom, predicate, target, opt);
+}
+function getProfileImg(subject, profileImg) {
+  const img = _solidUi.widgets.findImage(subject);
+  if (img) {
+    profileImg.classList.add('profile-image');
+    return img;
+  }
+  profileImg.classList.add('default-profile-image');
+  return DEFAULT_ICON_URI;
+}
+async function deleteAttachment(dom, attachmentTable, me, editableProfile, target, predicate) {
+  if (!_solidLogic.store.updater) {
+    throw new Error('Store has no updater.');
+  }
+
+  // Delete the exact statements in the store so we don't rely on doc() matching
+  const statementsToDelete = _solidLogic.store.statementsMatching(me, predicate, target, null);
+  if (!statementsToDelete.length) {
+    console.warn('No matching statement found to delete for', target.value);
+    refresh(dom, attachmentTable, me, editableProfile, predicate);
+    return;
+  }
+  try {
+    await _solidLogic.store.updater.update(statementsToDelete, []);
+
+    // UpdateManager may mutate store asynchronously, so only remove locally if it still exists
+    if (typeof _solidLogic.store.removeStatements === 'function') {
+      const stillThere = _solidLogic.store.holds(me, predicate, target, null);
+      if (stillThere) {
+        try {
+          _solidLogic.store.removeStatements(statementsToDelete);
+        } catch (e) {
+          // Ignore if already gone
+        }
+      }
+    }
+
+    // Ensure store is up-to-date before re-rendering
+    if (_solidLogic.store.fetcher) await _solidLogic.store.fetcher.load(me.doc());
+    refresh(dom, attachmentTable, me, editableProfile, predicate);
+  } catch (error) {
+    console.error('Error deleting:', error);
+
+    // If update failed, try to keep UI in sync anyway
+    if (typeof _solidLogic.store.removeStatements === 'function') {
+      try {
+        _solidLogic.store.removeStatements(statementsToDelete);
+      } catch (e) {
+        /* ignore */
+      }
+    }
+    if (_solidLogic.store.fetcher) await _solidLogic.store.fetcher.load(me.doc());
+    refresh(dom, attachmentTable, me, editableProfile, predicate);
+  }
+}
+function isAWebID(subject) {
+  if (subject && subject.doc) {
+    const t = _solidLogic.store.findTypeURIs(subject.doc());
+    return !!t[_solidUi.ns.foaf('PersonalProfileDocument').uri];
+  }
+  return false;
+}