add proper input demo page
This commit is contained in:
Juergen Kunz
1
.gitignore
vendored
1
.gitignore
vendored
@ -3,7 +3,6 @@
|
||||
# artifacts
|
||||
coverage/
|
||||
public/
|
||||
pages/
|
||||
|
||||
# installs
|
||||
node_modules/
|
||||
|
||||
2
ts_web/pages/index.ts
Normal file
2
ts_web/pages/index.ts
Normal file
@ -0,0 +1,2 @@
|
||||
export * from './mainpage.js';
|
||||
export * from './input-showcase.js';
|
||||
593
ts_web/pages/input-showcase.ts
Normal file
593
ts_web/pages/input-showcase.ts
Normal file
@ -0,0 +1,593 @@
|
||||
import { html, css, cssManager } from '@design.estate/dees-element';
|
||||
import '../elements/index.js';
|
||||
|
||||
export const inputShowcase = () => html`
|
||||
<div class="page-wrapper">
|
||||
<style>
|
||||
${css`
|
||||
.page-wrapper {
|
||||
display: block;
|
||||
background: ${cssManager.bdTheme('#f5f5f5', '#0a0a0a')};
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.showcase-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 48px 24px;
|
||||
}
|
||||
|
||||
|
||||
.showcase-header {
|
||||
text-align: center;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.showcase-title {
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 16px 0;
|
||||
color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
|
||||
}
|
||||
|
||||
.showcase-subtitle {
|
||||
font-size: 20px;
|
||||
color: ${cssManager.bdTheme('#666', '#999')};
|
||||
margin: 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.showcase-section {
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.showcase-section:last-child {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 48px;
|
||||
}
|
||||
|
||||
/* Ensure all headings are theme-aware */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
color: ${cssManager.bdTheme('#666', '#999')};
|
||||
}
|
||||
|
||||
strong {
|
||||
color: ${cssManager.bdTheme('#333', '#e0e0e0')};
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.section-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
background: ${cssManager.bdTheme('#e3f2fd', '#1e3a5f')};
|
||||
}
|
||||
|
||||
.section-icon.text { background: ${cssManager.bdTheme('#e3f2fd', '#1e3a5f')}; }
|
||||
.section-icon.selection { background: ${cssManager.bdTheme('#f3e5f5', '#4a148c')}; }
|
||||
.section-icon.numeric { background: ${cssManager.bdTheme('#e8f5e9', '#1b5e20')}; }
|
||||
.section-icon.special { background: ${cssManager.bdTheme('#fff3e0', '#e65100')}; }
|
||||
.section-icon.rich { background: ${cssManager.bdTheme('#fce4ec', '#880e4f')}; }
|
||||
.section-icon.form { background: ${cssManager.bdTheme('#e0f2f1', '#004d40')}; }
|
||||
|
||||
.section-title {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
|
||||
}
|
||||
|
||||
.section-description {
|
||||
color: ${cssManager.bdTheme('#666', '#999')};
|
||||
margin: 0 0 32px 64px;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.demo-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.demo-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
position: sticky;
|
||||
top: 24px;
|
||||
float: right;
|
||||
margin-left: 24px;
|
||||
margin-bottom: 24px;
|
||||
background: ${cssManager.bdTheme('white', '#1a1a1a')};
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 4px 12px ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.5)')};
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.nav-menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: block;
|
||||
padding: 8px 12px;
|
||||
color: ${cssManager.bdTheme('#666', '#999')};
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background: ${cssManager.bdTheme('#f0f0f0', '#2a2a2a')};
|
||||
color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
|
||||
}
|
||||
|
||||
dees-form {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
dees-panel {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
dees-panel:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.code-example {
|
||||
background: ${cssManager.bdTheme('#f5f5f5', '#1a1a1a')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-top: 16px;
|
||||
font-family: 'Fira Code', monospace;
|
||||
font-size: 14px;
|
||||
overflow-x: auto;
|
||||
color: ${cssManager.bdTheme('#333', '#e0e0e0')};
|
||||
}
|
||||
|
||||
.feature-badge {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
background: ${cssManager.bdTheme('#e3f2fd', '#1e3a5f')};
|
||||
color: ${cssManager.bdTheme('#1976d2', '#64b5f6')};
|
||||
border-radius: 16px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
/* Form section specific styles */
|
||||
.feature-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 16px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
margin: 8px 0 0 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
`}
|
||||
</style>
|
||||
|
||||
<div class="showcase-container">
|
||||
<!-- Navigation Menu -->
|
||||
<nav class="nav-menu">
|
||||
<a href="#text-inputs" class="nav-item">📝 Text Inputs</a>
|
||||
<a href="#selection-inputs" class="nav-item">☑️ Selection Inputs</a>
|
||||
<a href="#numeric-inputs" class="nav-item">🔢 Numeric Inputs</a>
|
||||
<a href="#special-inputs" class="nav-item">✨ Special Inputs</a>
|
||||
<a href="#rich-editors" class="nav-item">📄 Rich Editors</a>
|
||||
<a href="#form-integration" class="nav-item">📋 Form Integration</a>
|
||||
</nav>
|
||||
|
||||
<div class="showcase-header">
|
||||
<h1 class="showcase-title">Input Components Showcase</h1>
|
||||
<p class="showcase-subtitle">
|
||||
A comprehensive collection of input components for building modern web forms and interfaces.
|
||||
<br>All components support dark mode, validation, and integrate seamlessly with dees-form.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Text Inputs Section -->
|
||||
<section id="text-inputs" class="showcase-section">
|
||||
<div class="section-header">
|
||||
<div class="section-icon text">📝</div>
|
||||
<h2 class="section-title">Text Inputs</h2>
|
||||
</div>
|
||||
<p class="section-description">
|
||||
Standard text input components for collecting various types of textual data.
|
||||
Includes password fields, validation, and specialized formatting.
|
||||
</p>
|
||||
|
||||
<dees-panel .title=${'Basic Text Inputs'}>
|
||||
<div class="demo-grid">
|
||||
<dees-input-text
|
||||
.label=${'Username'}
|
||||
.placeholder=${'Enter your username'}
|
||||
.description=${'Choose a unique username'}
|
||||
.required=${true}
|
||||
></dees-input-text>
|
||||
|
||||
<dees-input-text
|
||||
.label=${'Email Address'}
|
||||
.inputType=${'email'}
|
||||
.placeholder=${'user@example.com'}
|
||||
.validationText=${'Please enter a valid email'}
|
||||
.required=${true}
|
||||
></dees-input-text>
|
||||
|
||||
<dees-input-text
|
||||
.label=${'Password'}
|
||||
.isPasswordBool=${true}
|
||||
.placeholder=${'Enter secure password'}
|
||||
.description=${'Must be at least 8 characters'}
|
||||
></dees-input-text>
|
||||
|
||||
<dees-input-text
|
||||
.label=${'Website URL'}
|
||||
.inputType=${'url'}
|
||||
.placeholder=${'https://example.com'}
|
||||
.value=${'https://design.estate'}
|
||||
></dees-input-text>
|
||||
</div>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'Search Bar'} .subtitle=${'Advanced search with suggestions'}>
|
||||
<dees-searchbar
|
||||
.placeholder=${'Search for anything...'}
|
||||
></dees-searchbar>
|
||||
|
||||
<div class="code-example">
|
||||
// Search with custom suggestions
|
||||
<dees-searchbar
|
||||
.placeholder="Search products..."
|
||||
.suggestions=${['Laptop', 'Phone', 'Tablet']}
|
||||
></dees-searchbar>
|
||||
</div>
|
||||
</dees-panel>
|
||||
</section>
|
||||
|
||||
<!-- Selection Inputs Section -->
|
||||
<section id="selection-inputs" class="showcase-section">
|
||||
<div class="section-header">
|
||||
<div class="section-icon selection">☑️</div>
|
||||
<h2 class="section-title">Selection Inputs</h2>
|
||||
</div>
|
||||
<p class="section-description">
|
||||
Components for selecting from predefined options. Includes checkboxes, radio buttons,
|
||||
dropdowns, and multi-select controls.
|
||||
</p>
|
||||
|
||||
<dees-panel .title=${'Checkboxes and Radio Buttons'}>
|
||||
<div class="demo-grid">
|
||||
<div>
|
||||
<dees-input-checkbox
|
||||
.label=${'Accept Terms & Conditions'}
|
||||
.description=${'You must accept to continue'}
|
||||
.required=${true}
|
||||
></dees-input-checkbox>
|
||||
|
||||
<dees-input-checkbox
|
||||
.label=${'Subscribe to Newsletter'}
|
||||
.value=${true}
|
||||
></dees-input-checkbox>
|
||||
|
||||
<dees-input-checkbox
|
||||
.label=${'Enable Notifications'}
|
||||
.disabled=${true}
|
||||
></dees-input-checkbox>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<dees-input-radio
|
||||
.label=${'Select Plan'}
|
||||
.options=${['Free', 'Pro', 'Enterprise']}
|
||||
.selectedOption=${'Pro'}
|
||||
.required=${true}
|
||||
></dees-input-radio>
|
||||
</div>
|
||||
</div>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'Dropdown Selection'}>
|
||||
<div class="demo-grid">
|
||||
<dees-input-dropdown
|
||||
.label=${'Country'}
|
||||
.options=${[
|
||||
{option: 'United States', key: 'us', payload: 'US'},
|
||||
{option: 'Canada', key: 'ca', payload: 'CA'},
|
||||
{option: 'United Kingdom', key: 'uk', payload: 'UK'},
|
||||
{option: 'Germany', key: 'de', payload: 'DE'},
|
||||
{option: 'France', key: 'fr', payload: 'FR'},
|
||||
{option: 'Japan', key: 'jp', payload: 'JP'}
|
||||
]}
|
||||
.placeholder=${'Select your country'}
|
||||
.required=${true}
|
||||
></dees-input-dropdown>
|
||||
|
||||
<dees-input-dropdown
|
||||
.label=${'Preferred Language'}
|
||||
.options=${[
|
||||
{option: 'English', key: 'en', payload: 'EN'},
|
||||
{option: 'Spanish', key: 'es', payload: 'ES'},
|
||||
{option: 'French', key: 'fr', payload: 'FR'},
|
||||
{option: 'German', key: 'de', payload: 'DE'},
|
||||
{option: 'Japanese', key: 'ja', payload: 'JA'}
|
||||
]}
|
||||
.value=${{option: 'English', key: 'en', payload: 'EN'}}
|
||||
></dees-input-dropdown>
|
||||
</div>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'Multi Toggle'} .subtitle=${'Toggle between multiple options'}>
|
||||
<dees-input-multitoggle
|
||||
.label=${'Theme Preference'}
|
||||
.options=${['Light', 'Dark', 'Auto']}
|
||||
.value=${'Auto'}
|
||||
></dees-input-multitoggle>
|
||||
|
||||
<dees-input-multitoggle
|
||||
.label=${'View Mode'}
|
||||
.options=${['Grid', 'List', 'Cards']}
|
||||
.value=${'Grid'}
|
||||
.description=${'Choose how to display items'}
|
||||
></dees-input-multitoggle>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'Type List'} .subtitle=${'Dynamic list of typed items'}>
|
||||
<dees-input-typelist
|
||||
.label=${'Skills'}
|
||||
.description=${'Add your technical skills'}
|
||||
.placeholder=${'Type and press Enter'}
|
||||
></dees-input-typelist>
|
||||
</dees-panel>
|
||||
</section>
|
||||
|
||||
<!-- Numeric Inputs Section -->
|
||||
<section id="numeric-inputs" class="showcase-section">
|
||||
<div class="section-header">
|
||||
<div class="section-icon numeric">🔢</div>
|
||||
<h2 class="section-title">Numeric Inputs</h2>
|
||||
</div>
|
||||
<p class="section-description">
|
||||
Specialized inputs for numeric values, including quantity selectors and formatted inputs.
|
||||
</p>
|
||||
|
||||
<dees-panel .title=${'Quantity Selector'}>
|
||||
<div class="demo-grid">
|
||||
<dees-input-quantityselector
|
||||
.label=${'Product Quantity'}
|
||||
.value=${1}
|
||||
.min=${1}
|
||||
.max=${100}
|
||||
.description=${'Select quantity (1-100)'}
|
||||
></dees-input-quantityselector>
|
||||
|
||||
<dees-input-quantityselector
|
||||
.label=${'Team Size'}
|
||||
.value=${5}
|
||||
.min=${1}
|
||||
.max=${50}
|
||||
.step=${5}
|
||||
></dees-input-quantityselector>
|
||||
</div>
|
||||
</dees-panel>
|
||||
</section>
|
||||
|
||||
<!-- Special Inputs Section -->
|
||||
<section id="special-inputs" class="showcase-section">
|
||||
<div class="section-header">
|
||||
<div class="section-icon special">✨</div>
|
||||
<h2 class="section-title">Special Inputs</h2>
|
||||
</div>
|
||||
<p class="section-description">
|
||||
Specialized input components for specific data types like phone numbers, IBAN, and file uploads.
|
||||
</p>
|
||||
|
||||
<dees-panel .title=${'Phone & IBAN'}>
|
||||
<div class="demo-grid">
|
||||
<dees-input-phone
|
||||
.label=${'Phone Number'}
|
||||
.placeholder=${'+1 (555) 123-4567'}
|
||||
.required=${true}
|
||||
.description=${'International format supported'}
|
||||
></dees-input-phone>
|
||||
|
||||
<dees-input-iban
|
||||
.label=${'Bank Account (IBAN)'}
|
||||
.placeholder=${'DE89 3704 0044 0532 0130 00'}
|
||||
.description=${'European IBAN format'}
|
||||
></dees-input-iban>
|
||||
</div>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'File Upload'} .subtitle=${'Drag & drop or click to upload'}>
|
||||
<dees-input-fileupload
|
||||
.label=${'Upload Documents'}
|
||||
.description=${'PDF, DOC, DOCX up to 10MB'}
|
||||
.accept=${'.pdf,.doc,.docx'}
|
||||
.multiple=${true}
|
||||
></dees-input-fileupload>
|
||||
|
||||
<dees-input-fileupload
|
||||
.label=${'Profile Picture'}
|
||||
.description=${'JPG, PNG up to 5MB'}
|
||||
.accept=${'image/*'}
|
||||
></dees-input-fileupload>
|
||||
</dees-panel>
|
||||
</section>
|
||||
|
||||
<!-- Rich Editors Section -->
|
||||
<section id="rich-editors" class="showcase-section">
|
||||
<div class="section-header">
|
||||
<div class="section-icon rich">📄</div>
|
||||
<h2 class="section-title">Rich Text Editors</h2>
|
||||
<span class="feature-badge">New!</span>
|
||||
</div>
|
||||
<p class="section-description">
|
||||
Advanced text editors for creating rich content with formatting, images, and structured blocks.
|
||||
</p>
|
||||
|
||||
<dees-panel .title=${'Rich Text Editor'} .subtitle=${'TipTap-based rich text editing'}>
|
||||
<dees-input-richtext
|
||||
.label=${'Article Content'}
|
||||
.placeholder=${'Start writing...'}
|
||||
.description=${'Full formatting toolbar with markdown shortcuts'}
|
||||
.minHeight=${300}
|
||||
.showWordCount=${true}
|
||||
></dees-input-richtext>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'WYSIWYG Block Editor'} .subtitle=${'Block-based editor with slash commands'}>
|
||||
<dees-input-wysiwyg
|
||||
.label=${'Page Content'}
|
||||
.description=${'Type "/" for commands or use markdown shortcuts'}
|
||||
.outputFormat=${'html'}
|
||||
></dees-input-wysiwyg>
|
||||
</dees-panel>
|
||||
</section>
|
||||
|
||||
<!-- Form Integration Section -->
|
||||
<section id="form-integration" class="showcase-section">
|
||||
<div class="section-header">
|
||||
<div class="section-icon form">📋</div>
|
||||
<h2 class="section-title">Form Integration</h2>
|
||||
</div>
|
||||
<p class="section-description">
|
||||
All input components integrate seamlessly with dees-form for validation,
|
||||
submission handling, and data management.
|
||||
</p>
|
||||
|
||||
<dees-panel .title=${'Complete Form Example'} .subtitle=${'All inputs working together'}>
|
||||
<dees-form>
|
||||
<h3>User Registration</h3>
|
||||
|
||||
<div class="demo-grid">
|
||||
<dees-input-text
|
||||
.label=${'First Name'}
|
||||
.required=${true}
|
||||
.key=${'firstName'}
|
||||
></dees-input-text>
|
||||
|
||||
<dees-input-text
|
||||
.label=${'Last Name'}
|
||||
.required=${true}
|
||||
.key=${'lastName'}
|
||||
></dees-input-text>
|
||||
</div>
|
||||
|
||||
<dees-input-text
|
||||
.label=${'Email'}
|
||||
.inputType=${'email'}
|
||||
.required=${true}
|
||||
.key=${'email'}
|
||||
></dees-input-text>
|
||||
|
||||
<dees-input-phone
|
||||
.label=${'Phone Number'}
|
||||
.required=${true}
|
||||
.key=${'phone'}
|
||||
></dees-input-phone>
|
||||
|
||||
<dees-input-dropdown
|
||||
.label=${'Country'}
|
||||
.options=${[
|
||||
{option: 'United States', key: 'us', payload: 'US'},
|
||||
{option: 'Canada', key: 'ca', payload: 'CA'},
|
||||
{option: 'United Kingdom', key: 'uk', payload: 'UK'},
|
||||
{option: 'Germany', key: 'de', payload: 'DE'},
|
||||
{option: 'France', key: 'fr', payload: 'FR'}
|
||||
]}
|
||||
.required=${true}
|
||||
.key=${'country'}
|
||||
></dees-input-dropdown>
|
||||
|
||||
<dees-input-radio
|
||||
.label=${'Account Type'}
|
||||
.options=${['Personal', 'Business']}
|
||||
.required=${true}
|
||||
.key=${'accountType'}
|
||||
></dees-input-radio>
|
||||
|
||||
<dees-input-richtext
|
||||
.label=${'Bio'}
|
||||
.placeholder=${'Tell us about yourself...'}
|
||||
.minHeight=${150}
|
||||
.key=${'bio'}
|
||||
></dees-input-richtext>
|
||||
|
||||
<dees-input-checkbox
|
||||
.label=${'I agree to the Terms of Service'}
|
||||
.required=${true}
|
||||
.key=${'terms'}
|
||||
></dees-input-checkbox>
|
||||
|
||||
<dees-input-checkbox
|
||||
.label=${'Subscribe to newsletter'}
|
||||
.key=${'newsletter'}
|
||||
></dees-input-checkbox>
|
||||
|
||||
<dees-form-submit .text=${'Create Account'}></dees-form-submit>
|
||||
</dees-form>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'Form Features'}>
|
||||
<div class="feature-grid">
|
||||
<div class="feature-card" style="background: rgba(0, 150, 136, 0.1);">
|
||||
<strong>✅ Validation</strong>
|
||||
<p>Built-in validation for all input types</p>
|
||||
</div>
|
||||
<div class="feature-card" style="background: rgba(33, 150, 243, 0.1);">
|
||||
<strong>🔄 Two-way Binding</strong>
|
||||
<p>Automatic data synchronization</p>
|
||||
</div>
|
||||
<div class="feature-card" style="background: rgba(156, 39, 176, 0.1);">
|
||||
<strong>📊 Data Collection</strong>
|
||||
<p>Easy form data extraction</p>
|
||||
</div>
|
||||
<div class="feature-card" style="background: rgba(255, 152, 0, 0.1);">
|
||||
<strong>🎨 Theming</strong>
|
||||
<p>Consistent styling across all inputs</p>
|
||||
</div>
|
||||
</div>
|
||||
</dees-panel>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
6
ts_web/pages/mainpage.ts
Normal file
6
ts_web/pages/mainpage.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import { html } from '@design.estate/dees-element';
|
||||
|
||||
export const mainPage = () => html`
|
||||
<dees-input-text label="my-test-label"></dees-input-text>
|
||||
<dees-input-text label="my-test-label"></dees-input-text>
|
||||
`;
|
||||
Reference in New Issue
Block a user