Add web UI and S3 upload endpoints
- Web UI: novice-friendly interface at / and /ui - Upload endpoint: /upload for file uploads - S3 upload: /upload/s3 for uploading to S3/MinIO - CLI: opus ui command to start web UI only - Full HTML/CSS/JS interface with drag-drop, tabs, etc.
This commit is contained in:
@@ -0,0 +1,675 @@
|
||||
"""Web UI for Opus Orchestrator.
|
||||
|
||||
A simple, novice-friendly web interface for generating manuscripts.
|
||||
"""
|
||||
|
||||
import os
|
||||
import asyncio
|
||||
from pathlib import Path
|
||||
from typing import Optional
|
||||
|
||||
from fastapi import FastAPI, Request, UploadFile, File, Form, HTTPException
|
||||
from fastapi.responses import HTMLResponse, JSONResponse
|
||||
from fastapi.staticfiles import StaticFiles
|
||||
from fastapi.templating import Jinja2Templates
|
||||
from dotenv import load_dotenv
|
||||
|
||||
load_dotenv("/home/solaria/.openclaw/workspace/opus-orchestrator-ai/.env")
|
||||
|
||||
|
||||
# HTML Template for the UI
|
||||
WEB_UI_TEMPLATE = """
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Opus Orchestrator - AI Book Generator</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
||||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
|
||||
min-height: 100vh;
|
||||
color: #e4e4e7;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
background: linear-gradient(90deg, #a855f7, #ec4899);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #9ca3af;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 16px;
|
||||
padding: 30px;
|
||||
margin-bottom: 24px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 20px;
|
||||
color: #a855f7;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
color: #d1d5db;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="number"],
|
||||
textarea,
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 8px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
color: #e4e4e7;
|
||||
font-size: 1rem;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
input:focus, textarea:focus, select:focus {
|
||||
outline: none;
|
||||
border-color: #a855f7;
|
||||
box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2);
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 120px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.col {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 14px 28px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(90deg, #a855f7, #ec4899);
|
||||
color: white;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(168, 85, 247, 0.4);
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 10px 20px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: #9ca3af;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
background: rgba(168, 85, 247, 0.2);
|
||||
border-color: #a855f7;
|
||||
color: #a855f7;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.source-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.source-input.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.output-section {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.output-section.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#manuscript {
|
||||
min-height: 300px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.7;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.progress {
|
||||
display: none;
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.progress.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 4px solid rgba(168, 85, 247, 0.2);
|
||||
border-top-color: #a855f7;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.status {
|
||||
color: #9ca3af;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.success-message {
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
border: 1px solid rgba(34, 197, 94, 0.3);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 20px;
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 20px;
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.file-drop {
|
||||
border: 2px dashed rgba(168, 85, 247, 0.4);
|
||||
border-radius: 12px;
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.file-drop:hover, .file-drop.dragover {
|
||||
border-color: #a855f7;
|
||||
background: rgba(168, 85, 247, 0.1);
|
||||
}
|
||||
|
||||
.file-drop input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.file-info {
|
||||
margin-top: 10px;
|
||||
color: #22c55e;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
color: #6b7280;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: #a855f7;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.features {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.feature {
|
||||
flex: 1;
|
||||
min-width: 150px;
|
||||
padding: 16px;
|
||||
background: rgba(168, 85, 247, 0.1);
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.feature-name {
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1>📚 Opus Orchestrator</h1>
|
||||
<p class="subtitle">AI-Powered Book Generation</p>
|
||||
<div class="features">
|
||||
<div class="feature">
|
||||
<div class="feature-icon">🎯</div>
|
||||
<div class="feature-name">7 Story Frameworks</div>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<div class="feature-icon">🤖</div>
|
||||
<div class="feature-name">AI Critique</div>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<div class="feature-icon">☁️</div>
|
||||
<div class="feature-name">Cloud Storage</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="card">
|
||||
<h2>Generate Your Manuscript</h2>
|
||||
|
||||
<form id="generateForm">
|
||||
<!-- Source Type Tabs -->
|
||||
<div class="tabs">
|
||||
<button type="button" class="tab active" data-source="concept">💡 Idea</button>
|
||||
<button type="button" class="tab" data-source="github">🐙 GitHub</button>
|
||||
<button type="button" class="tab" data-source="s3">🪣 S3</button>
|
||||
<button type="button" class="tab" data-source="upload">📁 Upload</button>
|
||||
</div>
|
||||
|
||||
<!-- Source Inputs -->
|
||||
<div class="source-input active" id="concept-input">
|
||||
<div class="form-group">
|
||||
<label>Your Story Concept</label>
|
||||
<textarea name="concept" placeholder="A robot dreams of electric sheep and discovers love in the last library on Earth..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="source-input" id="github-input">
|
||||
<div class="form-group">
|
||||
<label>GitHub Repository</label>
|
||||
<input type="text" name="repo" placeholder="owner/repository">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="source-input" id="s3-input">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="form-group">
|
||||
<label>S3 Bucket</label>
|
||||
<input type="text" name="s3_bucket" placeholder="my-bucket">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="form-group">
|
||||
<label>Path Prefix</label>
|
||||
<input type="text" name="s3_prefix" placeholder="notes/">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Endpoint (optional, for MinIO/DO Spaces)</label>
|
||||
<input type="text" name="s3_endpoint" placeholder="https://nyc3.digitaloceanspaces.com">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="source-input" id="upload-input">
|
||||
<div class="form-group">
|
||||
<label>Upload Files</label>
|
||||
<div class="file-drop" id="fileDrop">
|
||||
<input type="file" id="fileInput" name="files" multiple accept=".txt,.md,.markdown,.notes">
|
||||
<p>📂 Drag & drop files here<br>or click to browse</p>
|
||||
<div class="file-info" id="fileInfo"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Generation Options -->
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="form-group">
|
||||
<label>Framework</label>
|
||||
<select name="framework">
|
||||
<option value="snowflake">Snowflake Method</option>
|
||||
<option value="hero-journey">Hero's Journey</option>
|
||||
<option value="three-act">Three-Act Structure</option>
|
||||
<option value="save-the-cat">Save the Cat</option>
|
||||
<option value="story-circle">Story Circle</option>
|
||||
<option value="seven-point">7-Point Plot</option>
|
||||
<option value="fichtean">Fichtean Curve</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="form-group">
|
||||
<label>Genre</label>
|
||||
<select name="genre">
|
||||
<option value="fiction">Fiction</option>
|
||||
<option value="science-fiction">Science Fiction</option>
|
||||
<option value="fantasy">Fantasy</option>
|
||||
<option value="romance">Romance</option>
|
||||
<option value="mystery">Mystery</option>
|
||||
<option value="thriller">Thriller</option>
|
||||
<option value="literary">Literary Fiction</option>
|
||||
<option value="nonfiction">Nonfiction</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="form-group">
|
||||
<label>Target Words</label>
|
||||
<input type="number" name="words" value="5000" min="100" max="200000">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="form-group">
|
||||
<label>Chapters</label>
|
||||
<input type="number" name="chapters" value="3" min="1" max="50">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Output Options -->
|
||||
<div class="form-group">
|
||||
<label>Save Output To</label>
|
||||
<select name="output_dest">
|
||||
<option value="">Download (browser)</option>
|
||||
<option value="s3">S3 / MinIO</option>
|
||||
<option value="github">GitHub Repository</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="s3-output-options" style="display:none;">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<input type="text" name="output_s3_bucket" placeholder="Output bucket">
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" name="output_s3_path" placeholder="Path (e.g., manuscripts/)">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="github-output-options" style="display:none;">
|
||||
<input type="text" name="output_repo" placeholder="owner/repository" style="margin-bottom:10px;">
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary" id="generateBtn">
|
||||
✨ Generate Manuscript
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Progress -->
|
||||
<div class="card progress" id="progress">
|
||||
<div class="spinner"></div>
|
||||
<p class="status" id="statusText">Initializing...</p>
|
||||
</div>
|
||||
|
||||
<!-- Output -->
|
||||
<div class="card output-section" id="output">
|
||||
<h2>Your Manuscript</h2>
|
||||
<div id="successMessage"></div>
|
||||
<pre id="manuscript"></pre>
|
||||
<button class="btn btn-primary" id="downloadBtn" style="margin-top:20px;">
|
||||
📥 Download
|
||||
</button>
|
||||
<button class="btn" id="copyBtn" style="margin-top:20px;background:rgba(255,255,255,0.1);color:#e4e4e7;">
|
||||
📋 Copy
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p>Powered by <a href="https://github.com/mrhavens/opus-orchestrator-ai">Opus Orchestrator AI</a></p>
|
||||
<p>Built with LangGraph, CrewAI, AutoGen, and PydanticAI</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Tab switching
|
||||
document.querySelectorAll('.tab').forEach(tab => {
|
||||
tab.addEventListener('click', () => {
|
||||
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
||||
document.querySelectorAll('.source-input').forEach(i => i.classList.remove('active'));
|
||||
|
||||
tab.classList.add('active');
|
||||
document.getElementById(tab.dataset.source + '-input').classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
// Output destination switching
|
||||
document.querySelector('select[name="output_dest"]').addEventListener('change', (e) => {
|
||||
document.getElementById('s3-output-options').style.display = e.target.value === 's3' ? 'flex' : 'none';
|
||||
document.getElementById('github-output-options').style.display = e.target.value === 'github' ? 'block' : 'none';
|
||||
});
|
||||
|
||||
// File upload
|
||||
const fileInput = document.getElementById('fileInput');
|
||||
const fileDrop = document.getElementById('fileDrop');
|
||||
const fileInfo = document.getElementById('fileInfo');
|
||||
|
||||
fileDrop.addEventListener('click', () => fileInput.click());
|
||||
fileDrop.addEventListener('dragover', (e) => {
|
||||
e.preventDefault();
|
||||
fileDrop.classList.add('dragover');
|
||||
});
|
||||
fileDrop.addEventListener('dragleave', () => fileDrop.classList.remove('dragover'));
|
||||
fileDrop.addEventListener('drop', (e) => {
|
||||
e.preventDefault();
|
||||
fileDrop.classList.remove('dragover');
|
||||
handleFiles(e.dataTransfer.files);
|
||||
});
|
||||
fileInput.addEventListener('change', () => handleFiles(fileInput.files));
|
||||
|
||||
function handleFiles(files) {
|
||||
if (files.length > 0) {
|
||||
fileInfo.textContent = `✓ ${files.length} file(s) selected`;
|
||||
}
|
||||
}
|
||||
|
||||
// Form submission
|
||||
const form = document.getElementById('generateForm');
|
||||
const generateBtn = document.getElementById('generateBtn');
|
||||
const progress = document.getElementById('progress');
|
||||
const statusText = document.getElementById('statusText');
|
||||
const outputSection = document.getElementById('output');
|
||||
const manuscriptEl = document.getElementById('manuscript');
|
||||
const successMessage = document.getElementById('successMessage');
|
||||
|
||||
form.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
generateBtn.disabled = true;
|
||||
progress.classList.add('active');
|
||||
outputSection.classList.remove('active');
|
||||
successMessage.innerHTML = '';
|
||||
|
||||
const formData = new FormData(form);
|
||||
|
||||
// Determine source type
|
||||
const activeTab = document.querySelector('.tab.active').dataset.source;
|
||||
|
||||
const payload = {
|
||||
framework: formData.get('framework'),
|
||||
genre: formData.get('genre'),
|
||||
target_word_count: parseInt(formData.get('words')),
|
||||
chapters: parseInt(formData.get('chapters')),
|
||||
};
|
||||
|
||||
// Add source based on active tab
|
||||
if (activeTab === 'concept') {
|
||||
payload.concept = formData.get('concept');
|
||||
} else if (activeTab === 'github') {
|
||||
payload.repo = formData.get('repo');
|
||||
} else if (activeTab === 's3') {
|
||||
// For S3, we'd need additional API support
|
||||
statusText.textContent = 'S3 input not yet implemented in API';
|
||||
progress.classList.remove('active');
|
||||
generateBtn.disabled = false;
|
||||
return;
|
||||
} else if (activeTab === 'upload') {
|
||||
// Handle file upload
|
||||
statusText.textContent = 'Processing files...';
|
||||
const files = formData.getAll('files');
|
||||
if (files.length > 0) {
|
||||
// Read first file as concept for now
|
||||
const reader = new FileReader();
|
||||
reader.onload = async (e) => {
|
||||
payload.concept = e.target.result;
|
||||
await generateManuscript(payload);
|
||||
};
|
||||
reader.readAsText(files[0]);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
await generateManuscript(payload);
|
||||
});
|
||||
|
||||
async function generateManuscript(payload) {
|
||||
statusText.textContent = 'Generating manuscript...';
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/generate', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error((await response.json()).detail || 'Generation failed');
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
progress.classList.remove('active');
|
||||
outputSection.classList.add('active');
|
||||
manuscriptEl.textContent = result.manuscript;
|
||||
|
||||
successMessage.innerHTML = `<div class="success-message">
|
||||
✓ Generated ${result.word_count.toLocaleString()} words in ${result.chapters} chapters
|
||||
</div>`;
|
||||
|
||||
} catch (error) {
|
||||
progress.classList.remove('active');
|
||||
successMessage.innerHTML = `<div class="error-message">${error.message}</div>`;
|
||||
}
|
||||
|
||||
generateBtn.disabled = false;
|
||||
}
|
||||
|
||||
// Download
|
||||
document.getElementById('downloadBtn').addEventListener('click', () => {
|
||||
const content = manuscriptEl.textContent;
|
||||
const blob = new Blob([content], {type: 'text/markdown'});
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = 'opus-manuscript.md';
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
});
|
||||
|
||||
// Copy
|
||||
document.getElementById('copyBtn').addEventListener('click', () => {
|
||||
navigator.clipboard.writeText(manuscriptEl.textContent);
|
||||
document.getElementById('copyBtn').textContent = '✓ Copied!';
|
||||
setTimeout(() => {
|
||||
document.getElementById('copyBtn').textContent = '📋 Copy';
|
||||
}, 2000);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
"""
|
||||
|
||||
|
||||
def create_web_ui(app: FastAPI) -> None:
|
||||
"""Create and mount the web UI."""
|
||||
from fastapi.responses import HTMLResponse
|
||||
|
||||
@app.get("/", response_class=HTMLResponse)
|
||||
async def index():
|
||||
"""Serve the main UI page."""
|
||||
return WEB_UI_TEMPLATE
|
||||
|
||||
@app.get("/ui", response_class=HTMLResponse)
|
||||
async def ui():
|
||||
"""Alias for /"""
|
||||
return WEB_UI_TEMPLATE
|
||||
Reference in New Issue
Block a user