Add the trust and safety subsystem and the App Store compliance work
Implements the moderation and consent obligations a social platform carries, so the web version and any client that speaks to it enforce the same rules. Moderation core (services/moderation/, database/moderation.py): a reportable target registry, the content filter and its choke points, the report queue with atomic resolution, enforcement actions, consent tracking, maturity gating, and account deletion with a grace window. Surfaces: POST /reports plus the member report list, /admin/moderation and the per-report admin view, /workspaces, terms acceptance at /auth/terms, consent and account deletion under /profile, the report button and dialog partials, the maturity gate, and the moderation stylesheet and ReportDialog client. Every user-generated surface stays reportable by construction: new content tables are registered in REPORTABLE_TARGETS or listed in UNREPORTABLE_TABLES with a reason, and the registry test fails the suite on anything left unclassified. Docs: community guidelines, content moderation, intellectual property, privacy, terms, contact, and the admin-only moderation operations page, plus the moderation API group and the Devii moderation actions. Compliance record: applecomp.md is the requirement register, applechanges.md the gap analysis against this codebase, and appleimpl.md the implementation design they resolve to. Tests cover the report flow, admin moderation, consent, account deletion, terms acceptance, workspaces, and the registry invariant across the unit, api, and e2e tiers.
This commit is contained in:
@@ -47,6 +47,24 @@
|
||||
margin-bottom: 0.375rem;
|
||||
}
|
||||
|
||||
.auth-field-check label {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-sm);
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.auth-field-check input {
|
||||
margin-top: 0.2rem;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.auth-field-check a {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.auth-field .input-wrap {
|
||||
position: relative;
|
||||
}
|
||||
@@ -171,3 +189,15 @@
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.terms-links {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 var(--space-xl);
|
||||
display: grid;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.terms-links a {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
@@ -104,4 +104,36 @@
|
||||
text-align: right;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
.award-report-btn {
|
||||
position: absolute;
|
||||
top: var(--space-sm);
|
||||
left: var(--space-sm);
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
border: none;
|
||||
border-radius: var(--radius);
|
||||
background: var(--overlay-dark);
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.7rem;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.award-tile:hover .award-report-btn,
|
||||
.award-tile:focus-within .award-report-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.award-report-btn:hover {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.award-report-btn .label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
.award-report-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1376,3 +1376,51 @@ body:has(.page-messages) {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.recording-indicator {
|
||||
position: fixed;
|
||||
left: var(--space-lg);
|
||||
bottom: calc(var(--space-2xl) + var(--space-2xl));
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-light);
|
||||
color: var(--text-muted);
|
||||
font-size: 0.75rem;
|
||||
z-index: var(--z-fab);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.recording-indicator a {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.recording-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--danger);
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.maturity-gate {
|
||||
padding: var(--space-2xl);
|
||||
text-align: center;
|
||||
border: 1px dashed var(--border-light);
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg-card);
|
||||
margin: var(--space-lg) 0;
|
||||
}
|
||||
|
||||
.maturity-gate h3 {
|
||||
margin: 0 0 var(--space-md);
|
||||
}
|
||||
|
||||
.maturity-gate p {
|
||||
color: var(--text-secondary);
|
||||
margin: 0 0 var(--space-lg);
|
||||
}
|
||||
|
||||
|
||||
@@ -626,3 +626,32 @@ dp-chat[mode="embed"] {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.message-report-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
margin-top: var(--space-xs);
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.7rem;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.message-bubble:hover .message-report-btn,
|
||||
.message-bubble:focus-within .message-report-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.message-report-btn:hover {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
.message-report-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -498,6 +498,17 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.landing-feature p {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
margin: var(--space-xs) 0 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.landing-feature p a {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.landing-auth-link {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
|
||||
@@ -107,7 +107,8 @@
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.media-delete-btn {
|
||||
.media-delete-btn,
|
||||
.media-report-btn {
|
||||
margin-left: auto;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
@@ -122,10 +123,15 @@
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.media-delete-btn:hover {
|
||||
.media-delete-btn:hover,
|
||||
.media-report-btn:hover {
|
||||
background: var(--danger);
|
||||
}
|
||||
|
||||
.media-report-btn .label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.media-tile.media-removing {
|
||||
opacity: 0;
|
||||
transform: scale(0.92);
|
||||
|
||||
@@ -0,0 +1,179 @@
|
||||
/* retoor <retoor@molodetz.nl> */
|
||||
|
||||
.page-narrow {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: var(--space-lg);
|
||||
}
|
||||
|
||||
.report-intro {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
.report-hint {
|
||||
color: var(--text-muted);
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.sla-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
padding: var(--space-xs) var(--space-md);
|
||||
border-radius: var(--radius);
|
||||
font-weight: 600;
|
||||
border: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.sla-ok {
|
||||
color: var(--success);
|
||||
border-color: var(--success);
|
||||
}
|
||||
|
||||
.sla-breached {
|
||||
color: var(--danger);
|
||||
border-color: var(--danger);
|
||||
}
|
||||
|
||||
.severity-badge,
|
||||
.status-badge {
|
||||
display: inline-block;
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
border-radius: var(--radius);
|
||||
font-size: 0.85em;
|
||||
text-transform: capitalize;
|
||||
border: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.severity-info {
|
||||
color: var(--info);
|
||||
border-color: var(--info);
|
||||
}
|
||||
|
||||
.severity-warn {
|
||||
color: var(--warning);
|
||||
border-color: var(--warning);
|
||||
}
|
||||
|
||||
.severity-critical {
|
||||
color: var(--danger);
|
||||
border-color: var(--danger);
|
||||
}
|
||||
|
||||
.status-open {
|
||||
color: var(--warning);
|
||||
border-color: var(--warning);
|
||||
}
|
||||
|
||||
.status-acknowledged {
|
||||
color: var(--info);
|
||||
border-color: var(--info);
|
||||
}
|
||||
|
||||
.status-actioned {
|
||||
color: var(--success);
|
||||
border-color: var(--success);
|
||||
}
|
||||
|
||||
.status-dismissed {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.report-summary,
|
||||
.report-decision,
|
||||
.report-history {
|
||||
padding: var(--space-xl);
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
.report-facts {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: var(--space-lg);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.report-facts dt {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.85em;
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
.report-facts dd {
|
||||
margin: 0;
|
||||
color: var(--text-primary);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.report-detail {
|
||||
margin-top: var(--space-xl);
|
||||
padding: var(--space-lg);
|
||||
border-left: 3px solid var(--accent);
|
||||
background: var(--bg-card-hover);
|
||||
border-radius: var(--radius);
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.report-categories {
|
||||
margin-top: var(--space-lg);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.report-form {
|
||||
display: grid;
|
||||
gap: var(--space-lg);
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
.report-form-inline {
|
||||
margin-top: var(--space-lg);
|
||||
}
|
||||
|
||||
.reason-list {
|
||||
display: grid;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.reason-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(160px, 220px) 1fr;
|
||||
gap: var(--space-lg);
|
||||
padding: var(--space-md) 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.reason-row dt code {
|
||||
font-family: var(--font-mono);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.reason-row dd {
|
||||
margin: 0;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.reason-row {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.report-facts {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.workspace-desc {
|
||||
display: block;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.delete-list {
|
||||
margin: 0 0 var(--space-xl);
|
||||
padding-left: var(--space-xl);
|
||||
color: var(--text-secondary);
|
||||
display: grid;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
@@ -942,3 +942,29 @@ a.profile-stat-value:hover {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.privacy-panel h3 {
|
||||
margin: var(--space-xl) 0 var(--space-sm);
|
||||
}
|
||||
|
||||
.privacy-panel h3:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.privacy-intro {
|
||||
color: var(--text-secondary);
|
||||
margin: 0 0 var(--space-lg);
|
||||
}
|
||||
|
||||
.privacy-intro a {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.privacy-suspension {
|
||||
padding: var(--space-md);
|
||||
border-left: 3px solid var(--danger);
|
||||
background: var(--bg-card-hover);
|
||||
border-radius: var(--radius);
|
||||
color: var(--text-primary);
|
||||
margin: 0 0 var(--space-lg);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
/* retoor <retoor@molodetz.nl> */
|
||||
|
||||
.workspace-page {
|
||||
max-width: var(--content-width);
|
||||
max-width: var(--max-content);
|
||||
margin: 0 auto;
|
||||
padding: var(--space-md);
|
||||
display: flex;
|
||||
@@ -62,7 +62,7 @@
|
||||
}
|
||||
|
||||
.workspace-badge {
|
||||
background: var(--bg-hover);
|
||||
background: var(--bg-card-hover);
|
||||
color: var(--text-secondary);
|
||||
border-radius: var(--radius);
|
||||
padding: 0 var(--space-xs);
|
||||
|
||||
@@ -33,6 +33,7 @@ import { IssueReporter } from "./IssueReporter.js";
|
||||
import { IssueAttachments } from "./IssueAttachments.js";
|
||||
import { PlanningGenerator } from "./PlanningGenerator.js";
|
||||
import { MediaGallery } from "./MediaGallery.js";
|
||||
import { ReportDialog } from "./ReportDialog.js";
|
||||
import WindowManager from "./components/WindowManager.js";
|
||||
import { ContainerTerminalManager } from "./ContainerTerminalManager.js";
|
||||
import { PubSubClient } from "./PubSubClient.js";
|
||||
@@ -103,6 +104,7 @@ class Application {
|
||||
this.issueAttachments = new IssueAttachments();
|
||||
this.planningGenerator = new PlanningGenerator();
|
||||
this.mediaGallery = new MediaGallery();
|
||||
this.reportDialog = new ReportDialog();
|
||||
this.liveNotifications = new LiveNotifications(this.pubsub, this.toast);
|
||||
this.presence = new PresenceManager(this.pubsub);
|
||||
this.onlineUsers = new OnlineUsers(this.pubsub);
|
||||
|
||||
@@ -102,3 +102,7 @@ Every file-upload UI is the one custom element `dp-upload` (`static/js/component
|
||||
- `field` (create-post image, `feed.html`): wraps a real `<input type="file" name="image">` that submits with the form - no AJAX, inline-image flow unchanged.
|
||||
|
||||
The component validates size/type/count and reports errors via `app.toast`. CSS is `.dp-upload-*` in `components.css`; the old `.attachment-upload-*` upload-widget styles were removed, but the `.attachment-gallery`/`.attachment-lightbox` display styles (for already-saved attachments) remain.
|
||||
|
||||
## ReportDialog (`ReportDialog.js`, `app.reportDialog`)
|
||||
|
||||
One class, one dialog, every surface. It delegates a document-level click on `[data-report-type]` (emitted by `_report_button.html`), opens the single `#report-dialog` overlay with the standard `.visible` toggle, and submits through `Http.sendForm` to `/reports/{target_type}/{target_uid}`. The toast repeats the published response window returned by the endpoint, so the acknowledgement the user sees is the one the server actually committed to. It carries no reason list of its own - the options are server-rendered from the `REPORT_REASONS` Jinja global, so a client can never offer a reason the API would reject.
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
// retoor <retoor@molodetz.nl>
|
||||
|
||||
import { Http } from "./Http.js";
|
||||
|
||||
export class ReportDialog {
|
||||
constructor() {
|
||||
this.overlay = document.getElementById("report-dialog");
|
||||
this.form = document.getElementById("report-form");
|
||||
this.target = null;
|
||||
document.addEventListener("click", (e) => {
|
||||
const btn = e.target.closest("[data-report-type]");
|
||||
if (!btn || btn.disabled) return;
|
||||
e.preventDefault();
|
||||
this.open(btn.dataset.reportType, btn.dataset.reportUid);
|
||||
});
|
||||
if (this.form) {
|
||||
this.form.addEventListener("submit", (e) => {
|
||||
e.preventDefault();
|
||||
e.stopImmediatePropagation();
|
||||
this.submit();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
open(targetType, targetUid) {
|
||||
if (!this.overlay || !this.form) return;
|
||||
this.target = { targetType, targetUid };
|
||||
this.form.reset();
|
||||
this.overlay.classList.add("visible");
|
||||
const reason = this.form.querySelector("[name='reason']");
|
||||
if (reason) reason.focus();
|
||||
}
|
||||
|
||||
close() {
|
||||
if (this.overlay) this.overlay.classList.remove("visible");
|
||||
this.target = null;
|
||||
}
|
||||
|
||||
async submit() {
|
||||
if (!this.target) return;
|
||||
const data = new FormData(this.form);
|
||||
const button = this.form.querySelector("button[type='submit']");
|
||||
if (button) button.disabled = true;
|
||||
try {
|
||||
const result = await Http.sendForm(
|
||||
`/reports/${this.target.targetType}/${this.target.targetUid}`,
|
||||
{ reason: data.get("reason"), detail: data.get("detail") || "" },
|
||||
{ silent: true },
|
||||
);
|
||||
const hours = result && result.data ? result.data.sla_hours : null;
|
||||
this.close();
|
||||
this.notify(
|
||||
hours
|
||||
? `Report received. A moderator reviews it within ${hours} hours.`
|
||||
: "Report received.",
|
||||
"success",
|
||||
);
|
||||
} catch (err) {
|
||||
this.notify(err.message, "error");
|
||||
} finally {
|
||||
if (button) button.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
notify(message, type) {
|
||||
if (window.app && window.app.toast) {
|
||||
window.app.toast.show(message, { type });
|
||||
return;
|
||||
}
|
||||
console.info(message);
|
||||
}
|
||||
}
|
||||
|
||||
window.ReportDialog = ReportDialog;
|
||||
@@ -28,13 +28,19 @@ export class WorkspaceManager {
|
||||
|
||||
async send(form) {
|
||||
try {
|
||||
await Http.sendForm(form);
|
||||
await Http.sendForm(form.action, this.params(form));
|
||||
await this.refresh();
|
||||
} catch (error) {
|
||||
window.app?.toast?.show(error.message || "Action failed", { type: "error" });
|
||||
}
|
||||
}
|
||||
|
||||
params(form) {
|
||||
const params = [];
|
||||
new FormData(form).forEach((value, key) => params.push([key, value]));
|
||||
return params;
|
||||
}
|
||||
|
||||
subscribe() {
|
||||
const uid = this.root.dataset.workspaceUid;
|
||||
if (uid && window.app?.pubsub) {
|
||||
|
||||
Reference in New Issue
Block a user