Add person, group or software agent URL.
+
+
+ ${ACCESS_ROLES
+ .filter(role => role !== 'No Access')
+ .map(role => html`
+ ${role}
+ `)}
+
+
+
+
+ ${this.inputError}
` + : nothing} + ${this.renderPendingAccessGrants()} +
+ ${this.pendingAccessGrants.map((grant, index) => html`
+
+ `
+ }
+}
diff --git a/src/components/access-control-modal/AccessControlErrors.styles.css b/src/components/access-control-modal/AccessControlErrors.styles.css
new file mode 100644
index 000000000..9d30cb117
--- /dev/null
+++ b/src/components/access-control-modal/AccessControlErrors.styles.css
@@ -0,0 +1,48 @@
+:host {
+ display: block;
+ width: 100%;
+ contain: inline-size;
+
+ solid-ui-error-state {
+ width: 100%;
+ max-width: 100%;
+ contain: inline-size;
+ }
+
+ .access-control-save-errors {
+ display: grid;
+ gap: 8px;
+ width: 100%;
+ margin: 0;
+ padding-left: 0;
+ box-sizing: border-box;
+ list-style: none;
+
+ li {
+ display: grid;
+ grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
+ align-items: baseline;
+ gap: 6px;
+ min-width: 0;
+ color: var(--solid-ui-color-red-600, #be2e48);
+ font-size: var(--solid-ui-font-size-sm, .875rem);
+ line-height: 1.4;
+ }
+
+ .access-control-save-error-label {
+ font-weight: 500;
+ overflow-wrap: anywhere;
+ }
+
+ .access-control-save-error-detail {
+ min-width: 0;
+ overflow-wrap: anywhere;
+ }
+ }
+
+ @media (max-width: 600px) {
+ .access-control-save-errors li {
+ grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
+ }
+ }
+}
diff --git a/src/components/access-control-modal/AccessControlErrors.ts b/src/components/access-control-modal/AccessControlErrors.ts
new file mode 100644
index 000000000..4558b7419
--- /dev/null
+++ b/src/components/access-control-modal/AccessControlErrors.ts
@@ -0,0 +1,58 @@
+import { customElement, WebComponent } from '@/lib/components'
+import { html } from 'lit'
+import { property } from 'lit/decorators.js'
+
+import '@/components/error-state'
+
+import styles from './AccessControlErrors.styles.css'
+import type { AccessSaveError } from './types'
+
+@customElement('solid-ui-access-control-errors')
+export default class AccessControlErrors extends WebComponent {
+ static styles = styles
+
+ @property({ attribute: false })
+ accessor errors: AccessSaveError[] = []
+
+ @property({ attribute: false })
+ accessor successfulChangesRefreshed = true
+
+ private onClose (event: Event) {
+ event.stopPropagation()
+ this.dispatchEvent(new CustomEvent('close', {
+ bubbles: true,
+ composed: true
+ }))
+ }
+
+ protected render () {
+ if (!this.errors.length) {
+ return html``
+ }
+
+ return html`
+
+ ${grant.label}
+ this.onPendingGrantRemove(index)}
+ >
+ Remove ${grant.label}
+
+
+ `)}
+ -
+ ${this.errors.map(error => html`
+
- + ${error.label} + + ${error.action === 'grant' + ? `Could not grant ${error.role ?? 'access'}` + : error.action === 'revoke' + ? 'Could not remove access' + : 'Could not save access changes'} + + + `)} +
+
+ ${options.variant === 'authenticated'
+ ? this.renderAuthenticatedModeSelector()
+ : this.renderPublicModeSelector()}
+
+ `
+ }
+
+ protected render () {
+ return html`
+
+
+
+
+ ${this.renderGeneralShareRow({
+ title: 'Share with Anyone Signed In',
+ description: 'Users must sign in to SolidOS to access this shared item using the link.',
+ variant: 'authenticated'
+ })}
+ ${this.renderGeneralShareRow({
+ title: 'Anyone with the Link',
+ description: 'Anyone on the internet with the link can view.',
+ variant: 'public'
+ })}
+ General Access
+-
- ${accessGrants.length > 0
- ? accessGrants.map(entry => this.renderAccessGrant(entry))
- : html`
- No access grants `} -
${entry.subjectLabel}
- ${this.renderAuthorizationRole(entry.role, entry.index)} -
- ${badge.image ? html`` : html``}
-
- `
+ private get inputError (): string {
+ return this.errors.find(error => error.action === 'input')?.message ?? ''
}
- private getInitials (label: string, maxWords = 2): string {
- const parts = label.split(/\s+/).filter(Boolean).slice(0, maxWords)
- const initials = parts.map(part => part[0]).join('')
- return (initials || label.slice(0, maxWords)).toUpperCase()
+ private get saveErrors (): AccessSaveError[] {
+ return this.errors.filter((error): error is AccessSaveError => error.action !== 'input')
}
- private getAuthorizationSubjectIris (authorization: Authorization) {
- return [
- ...authorization.agent,
- ...authorization.agentGroup,
- ...authorization.agentClass,
- ...authorization.origin,
+ private setInputError (error: InputAccessControlError) {
+ this.errors = [
+ ...this.errors.filter(item => item.action !== 'input'),
+ error
]
}
- private getAuthorizationSubjectLabel (authorization: Authorization): string {
- const subjects = this.getAuthorizationSubjectIris(authorization)
- return subjects.length ? subjects.map(subject => label(sym(subject))).join(', ') : 'Unknown access holder'
+ private clearInputError () {
+ this.errors = this.errors.filter(error => error.action !== 'input')
}
- private getAuthorizationRole (authorization: Authorization): AccessRole {
- return solidLogicSingleton.acl.roleFromModes(authorization.mode)
- }
+ protected willUpdate (changedProperties: PropertyValues
-
- `
- }
+ return getAuthorizationSubjectLabel(getSharedAuthorization(authorization))
+ }))
- private renderPendingAccessGrants () {
- if (!this.pendingAccessGrants.length) {
- return nothing
+ if (requestVersion === this.accessGrantLabelRequestVersion && this.accessGrants === grants) {
+ const labelsById = new Map(
+ grants.map((authorization, index) => [
+ getAccessGrantId(getSharedAuthorization(authorization)),
+ labels[index]
+ ])
+ )
+ this.accessGrantDrafts = this.accessGrantDrafts.map(draft => ({
+ ...draft,
+ subjectLabel: labelsById.get(draft.id) ?? draft.subjectLabel
+ }))
}
-
- return html`
- Add person, group or software agent URL.
-
-
-
-
- ${this.renderModeSelector('add')}
-
- ${this.pendingAccessGrants.map((grant, index) => html`
-
- `
- }
-
- private renderAccessGrantsSection () {
- return html`
-
- ${grant.label}
-
- Remove ${grant.label}
-
-
- `)}
-
-
- ${this.getSharedAccessGrantEntries().map(({ subjectLabel }) => html`
-
- ${subjectLabel}
-
- `)}
-
-
- Share with
-
- ${this.renderAccessGrants()}
-
- `
- }
-
- private renderGeneralAccessSection () {
- return html`
-
-
- `
- }
-
- private renderGeneralShareRow (options: {
- title: string
- description: string
- variant: 'authenticated' | 'public'
- }) {
- return html`
-
-
-
-
- ${this.renderGeneralShareRow({
- title: 'Share with Anyone Signed In',
- description: 'Users must sign in to SolidOS to access this shared item using the link.',
- variant: 'authenticated'
- })}
- ${this.renderGeneralShareRow({
- title: 'Anyone with the Link',
- description: 'Anyone on the internet with the link can view.',
- variant: 'public'
- })}
- General Access
-
-
- ${this.renderModeSelector(options.variant)}
-
- `
- }
-
- private renderGeneralAccessIcon () {
- return html`
-
- `
- }
-
- private getRoleModes (role: AccessRole): AccessMode[] {
- return solidLogicSingleton.acl.modesFromRole(role)
}
private getDialogTitle (): string {
@@ -514,9 +171,33 @@ export default class AccessControlModal extends WebComponent {