Files
Oxicloud/static/profile.html
T
zjean 54eedf5483 feat(nextcloud): add Nextcloud-compatible API layer
Implement a complete Nextcloud client compatibility layer so that
Nextcloud desktop/mobile sync clients can connect to OxiCloud.

Key additions:
- Login Flow v2 (device auth) with OIDC bridge support
- WebDAV handler compatible with Nextcloud clients (PROPFIND, GET,
  PUT, DELETE, MKCOL, MOVE, COPY, HEAD, PROPPATCH)
- OCS API endpoints (user info, capabilities, notifications stubs,
  sharees, unified search)
- Basic Auth middleware with app password verification, account
  lockout integration, and blake3-keyed auth cache
- App password management: create, list, revoke via both native
  API (JWT-authenticated profile page) and Nextcloud OCS endpoints
- Nextcloud file ID mapping (oc:fileid) with persistent DB storage
- Chunked upload support (Nextcloud v2 chunking protocol)
- Trashbin WebDAV interface
- Avatar (SVG placeholder) and preview (redirect) handlers
- User profile page with app password management UI
- URL user validation on all DAV routes (403 on mismatch)
- Database schema for app_passwords and nextcloud_object_ids tables

All services are behind a `nextcloud.enabled` config flag and
cleanly separated under src/interfaces/nextcloud/.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-05 20:46:07 +01:00

169 lines
6.8 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OxiCloud — My Profile</title>
<script src="/js/core/theme-init.js"></script>
<script src="/js/core/icons.js" defer></script>
<script src="/js/core/csrf.js" defer></script>
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/css/views/profile.css">
</head>
<body>
<div class="profile-header">
<div class="profile-header-left">
<a href="/" class="profile-logo-link link-reset-flex">
<div class="profile-logo">
<svg viewBox="0 0 500 500">
<path d="M345 310c32 0 58-26 58-58s-26-58-58-58c-6.2 0-12 0.9-17.5 2.7C318 166 289 143 255 143c-34.3 0-63.1 22.6-73 53.7C176.9 195.7 171 195 165 195c-32 0-58 26-58 58s26 58 58 58h180z"/>
</svg>
</div>
<span class="profile-title-text">OxiCloud</span>
</a>
<span class="profile-title-separator">· Profile</span>
</div>
<div class="profile-header-right">
<a href="/"><i class="fas fa-arrow-left"></i> Back to OxiCloud</a>
</div>
</div>
<div class="profile-container">
<div id="loading"><i class="fas fa-circle-notch"></i> Loading…</div>
<div id="auth-error">
<div class="err-icon"><i class="fas fa-lock"></i></div>
<h2>Not Authenticated</h2>
<p>Please sign in to view your profile.</p>
<a href="/login"><i class="fas fa-sign-in-alt"></i> Sign in</a>
</div>
<div id="main-content">
<div class="profile-card">
<div class="avatar-section">
<div class="avatar-large" id="p-avatar">—</div>
<div class="avatar-info">
<h1 id="p-username">—</h1>
<div class="email" id="p-email">—</div>
<span class="role-badge" id="p-role-badge">—</span>
</div>
</div>
</div>
<div class="profile-card">
<h2><i class="fas fa-id-card"></i> Account Details</h2>
<div class="info-grid">
<div class="info-item">
<div class="info-label"><i class="fas fa-user"></i> Username</div>
<div class="info-value" id="p-detail-username">—</div>
</div>
<div class="info-item">
<div class="info-label"><i class="fas fa-envelope"></i> Email</div>
<div class="info-value" id="p-detail-email">—</div>
</div>
<div class="info-item">
<div class="info-label"><i class="fas fa-shield-alt"></i> Role</div>
<div class="info-value" id="p-detail-role">—</div>
</div>
<div class="info-item">
<div class="info-label"><i class="fas fa-clock"></i> Last Login</div>
<div class="info-value" id="p-detail-login">—</div>
</div>
</div>
</div>
<div class="profile-card">
<h2><i class="fas fa-hdd"></i> Storage</h2>
<div class="storage-stats">
<div class="storage-stat">
<div class="stat-value" id="p-storage-used">—</div>
<div class="stat-label">Used</div>
</div>
<div class="storage-stat">
<div class="stat-value" id="p-storage-quota">—</div>
<div class="stat-label">Quota</div>
</div>
<div class="storage-stat">
<div class="stat-value" id="p-storage-pct">—</div>
<div class="stat-label">Usage</div>
</div>
</div>
<div class="storage-bar-wrap">
<div class="storage-bar"><div class="storage-fill green width-zero" id="p-storage-bar"></div></div>
<div class="storage-text" id="p-storage-text">—</div>
</div>
</div>
<div class="profile-card" id="app-passwords-section">
<h2><i class="fas fa-key"></i> App Passwords</h2>
<p class="app-pw-desc">Generate passwords for WebDAV, CalDAV, and CardDAV clients. Each password is shown only once.</p>
<div class="app-pw-create">
<input type="text" id="app-pw-label" placeholder="Label (e.g. Thunderbird, macOS)" maxlength="128">
<button class="btn btn-primary" id="app-pw-generate" onclick="createAppPassword()"><i class="fas fa-plus"></i> Generate</button>
</div>
<div id="app-pw-created" class="app-pw-created" style="display:none">
<div class="app-pw-created-label">New password for <strong id="app-pw-created-label"></strong>:</div>
<div class="app-pw-created-value">
<code id="app-pw-created-password"></code>
<button class="btn btn-copy" onclick="copyAppPassword()" title="Copy to clipboard"><i class="fas fa-copy"></i></button>
</div>
<small>Copy this password now. You won't be able to see it again.</small>
</div>
<div id="app-pw-status"></div>
<table class="app-pw-table" id="app-pw-table">
<thead>
<tr><th>Label</th><th>Created</th><th>Last Used</th><th></th></tr>
</thead>
<tbody id="app-pw-tbody"></tbody>
</table>
<div id="app-pw-empty" class="app-pw-empty" style="display:none">No app passwords yet.</div>
<div id="app-pw-auto-section" class="app-pw-auto-section" style="display:none">
<button class="app-pw-auto-toggle" id="app-pw-auto-toggle" onclick="toggleAutoPasswords()">
<i class="fas fa-chevron-right" id="app-pw-auto-chevron"></i>
<span>Client sessions</span>
<span class="app-pw-auto-count" id="app-pw-auto-count">0</span>
</button>
<div id="app-pw-auto-body" style="display:none">
<p class="app-pw-auto-desc">Auto-generated when you connect a Nextcloud-compatible client.</p>
<table class="app-pw-table" id="app-pw-auto-table">
<thead>
<tr><th>Client</th><th>Created</th><th>Last Used</th><th></th></tr>
</thead>
<tbody id="app-pw-auto-tbody"></tbody>
</table>
</div>
</div>
</div>
<div class="profile-card" id="password-section">
<h2><i class="fas fa-key"></i> Change Password</h2>
<form id="password-form">
<div class="form-group">
<label for="current-password">Current Password</label>
<input type="password" id="current-password" required autocomplete="current-password">
</div>
<div class="form-group">
<label for="new-password">New Password</label>
<input type="password" id="new-password" required minlength="8" autocomplete="new-password">
<small>At least 8 characters</small>
</div>
<div class="form-group">
<label for="confirm-password">Confirm New Password</label>
<input type="password" id="confirm-password" required minlength="8" autocomplete="new-password">
</div>
<button type="submit" class="btn btn-primary" id="pw-submit"><i class="fas fa-save"></i> Update Password</button>
<div id="pw-status"></div>
</form>
</div>
</div>
</div>
<script src="/js/views/profile/profile.js" defer></script>
</body>
</html>