mirror of
https://git.meshkee.com/Meshkee/dashboards.git
synced 2026-08-11 22:30:58 +04:30
Improve portfolio title images, branding, and super-admin domains UI.
Add aspect-ratio crop presets for portfolio title images, fixed card image placeholders with contained centering, Meshkee favicon/logo fallbacks, login branding updates, category FAB alignment, and super-admin website/domain SSL tooling. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
co-authored by
Cursor
Cursor
parent
f566387c61
commit
db52a83f98
@@ -2,6 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
|
||||
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 9.3 KiB |
Regular → Executable
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 12 KiB |
Regular → Executable
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 12 KiB |
@@ -55,6 +55,12 @@
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.previewImgNatural {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.removeBtn {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
@@ -85,9 +91,15 @@
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 160px;
|
||||
max-height: 420px;
|
||||
background: #1e293b;
|
||||
}
|
||||
|
||||
.cropAreaPortrait {
|
||||
max-height: none;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.cropControls {
|
||||
padding: 14px 16px;
|
||||
display: flex;
|
||||
@@ -141,6 +153,11 @@
|
||||
background: var(--primary-dark);
|
||||
}
|
||||
|
||||
.applyBtn:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.changeBtn {
|
||||
display: inline-flex;
|
||||
align-self: flex-start;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useCallback, useState } from 'react'
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
import Cropper, { type Area } from 'react-easy-crop'
|
||||
import { ImagePlus, X } from 'lucide-react'
|
||||
import { getCroppedImage } from '../utils/cropImage'
|
||||
@@ -7,6 +7,7 @@ import styles from './ImageCropper.module.css'
|
||||
interface ImageCropperProps {
|
||||
value: string | null
|
||||
onChange: (value: string | null) => void
|
||||
/** Crop aspect ratio. Defaults to square (1). */
|
||||
aspect?: number
|
||||
outputFormat?: 'jpeg' | 'png'
|
||||
accept?: string
|
||||
@@ -30,6 +31,12 @@ export function ImageCropper({
|
||||
const [zoom, setZoom] = useState(1)
|
||||
const [croppedArea, setCroppedArea] = useState<Area | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
setCrop({ x: 0, y: 0 })
|
||||
setZoom(1)
|
||||
setCroppedArea(null)
|
||||
}, [aspect])
|
||||
|
||||
const onCropComplete = useCallback((_: Area, pixels: Area) => {
|
||||
setCroppedArea(pixels)
|
||||
}, [])
|
||||
@@ -38,7 +45,12 @@ export function ImageCropper({
|
||||
const file = e.target.files?.[0]
|
||||
if (!file) return
|
||||
const reader = new FileReader()
|
||||
reader.onload = () => setImageSrc(reader.result as string)
|
||||
reader.onload = () => {
|
||||
setImageSrc(reader.result as string)
|
||||
setCrop({ x: 0, y: 0 })
|
||||
setZoom(1)
|
||||
setCroppedArea(null)
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
e.target.value = ''
|
||||
}
|
||||
@@ -62,13 +74,26 @@ export function ImageCropper({
|
||||
onChange(null)
|
||||
}
|
||||
|
||||
const frameStyle = { aspectRatio: `${aspect}` as const }
|
||||
const isPortrait = aspect < 1
|
||||
const frameStyle: React.CSSProperties = isPortrait
|
||||
? {
|
||||
aspectRatio: `${aspect}`,
|
||||
height: 'min(480px, 65vh)',
|
||||
width: 'auto',
|
||||
maxWidth: '100%',
|
||||
marginInline: 'auto',
|
||||
}
|
||||
: {
|
||||
aspectRatio: `${aspect}`,
|
||||
width: '100%',
|
||||
maxHeight: 'min(420px, 55vh)',
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.wrapper}>
|
||||
{value && !imageSrc && (
|
||||
<div className={styles.preview} style={frameStyle}>
|
||||
<img src={value} alt="Thumbnail preview" className={styles.previewImg} />
|
||||
<div className={styles.preview}>
|
||||
<img src={value} alt="Thumbnail preview" className={styles.previewImgNatural} />
|
||||
<button type="button" className={styles.removeBtn} onClick={removeThumbnail} aria-label="Remove thumbnail">
|
||||
<X size={16} />
|
||||
</button>
|
||||
@@ -86,8 +111,9 @@ export function ImageCropper({
|
||||
|
||||
{imageSrc && (
|
||||
<div className={styles.cropPanel}>
|
||||
<div className={styles.cropArea} style={frameStyle}>
|
||||
<div className={`${styles.cropArea} ${isPortrait ? styles.cropAreaPortrait : ''}`} style={frameStyle}>
|
||||
<Cropper
|
||||
key={String(aspect)}
|
||||
image={imageSrc}
|
||||
crop={crop}
|
||||
zoom={zoom}
|
||||
@@ -113,7 +139,12 @@ export function ImageCropper({
|
||||
<button type="button" className={styles.cancelBtn} onClick={cancelCrop}>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="button" className={styles.applyBtn} onClick={applyCrop}>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.applyBtn}
|
||||
onClick={() => void applyCrop()}
|
||||
disabled={!croppedArea}
|
||||
>
|
||||
Apply Crop
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -34,14 +34,17 @@
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
overflow: hidden;
|
||||
background: rgba(148, 163, 184, 0.08);
|
||||
background: transparent;
|
||||
border-bottom: 1px solid rgba(148, 163, 184, 0.12);
|
||||
}
|
||||
|
||||
.image {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.imagePlaceholder {
|
||||
|
||||
@@ -16,6 +16,7 @@ import { resolveTenantByDomain } from '../services/tenantService'
|
||||
|
||||
interface TenantBrandingContextValue {
|
||||
businessName: string
|
||||
logoUrl: string | null
|
||||
faviconUrl: string | null
|
||||
refreshBranding: () => void
|
||||
}
|
||||
@@ -34,6 +35,7 @@ function pickBusinessName(
|
||||
|
||||
export function TenantBrandingProvider({ children }: { children: ReactNode }) {
|
||||
const [businessName, setBusinessName] = useState('')
|
||||
const [logoUrl, setLogoUrl] = useState<string | null>(null)
|
||||
const [faviconUrl, setFaviconUrl] = useState<string | null>(null)
|
||||
const [refreshToken, setRefreshToken] = useState(0)
|
||||
|
||||
@@ -51,6 +53,7 @@ export function TenantBrandingProvider({ children }: { children: ReactNode }) {
|
||||
if (controller.signal.aborted) return
|
||||
|
||||
let name = pickBusinessName(tenant.name, tenant.nameFa, domain)
|
||||
let nextLogo = tenant.logoUrl?.trim() || null
|
||||
let nextFavicon =
|
||||
tenant.faviconUrl?.trim() || tenant.logoUrl?.trim() || null
|
||||
|
||||
@@ -63,6 +66,7 @@ export function TenantBrandingProvider({ children }: { children: ReactNode }) {
|
||||
name,
|
||||
domain,
|
||||
)
|
||||
nextLogo = profile.profile.logoUrl?.trim() || nextLogo
|
||||
nextFavicon =
|
||||
profile.profile.faviconUrl?.trim() ||
|
||||
profile.profile.logoUrl?.trim() ||
|
||||
@@ -76,12 +80,14 @@ export function TenantBrandingProvider({ children }: { children: ReactNode }) {
|
||||
|
||||
if (!controller.signal.aborted) {
|
||||
setBusinessName(name || domain)
|
||||
setLogoUrl(nextLogo)
|
||||
setFaviconUrl(nextFavicon)
|
||||
applyDocumentFavicon(nextFavicon)
|
||||
}
|
||||
} catch (err) {
|
||||
if (isAbortError(err) || controller.signal.aborted) return
|
||||
setBusinessName(domain)
|
||||
setLogoUrl(null)
|
||||
setFaviconUrl(null)
|
||||
applyDocumentFavicon(null)
|
||||
}
|
||||
@@ -101,8 +107,8 @@ export function TenantBrandingProvider({ children }: { children: ReactNode }) {
|
||||
}, [refreshToken, refreshBranding])
|
||||
|
||||
const value = useMemo(
|
||||
() => ({ businessName, faviconUrl, refreshBranding }),
|
||||
[businessName, faviconUrl, refreshBranding],
|
||||
() => ({ businessName, logoUrl, faviconUrl, refreshBranding }),
|
||||
[businessName, logoUrl, faviconUrl, refreshBranding],
|
||||
)
|
||||
|
||||
return (
|
||||
|
||||
@@ -28,6 +28,19 @@ import { flattenCategories } from '../utils/categories'
|
||||
import pageStyles from '../components/PageContent.module.css'
|
||||
import styles from './AddNewProductPage.module.css'
|
||||
|
||||
type TitleImageAspectId = 'square' | '3:2' | '16:9' | '9:16'
|
||||
|
||||
const TITLE_IMAGE_ASPECTS: {
|
||||
id: TitleImageAspectId
|
||||
label: string
|
||||
aspect: number
|
||||
}[] = [
|
||||
{ id: 'square', label: 'Square', aspect: 1 },
|
||||
{ id: '3:2', label: '3:2', aspect: 3 / 2 },
|
||||
{ id: '16:9', label: '16:9', aspect: 16 / 9 },
|
||||
{ id: '9:16', label: '9:16 (Reel)', aspect: 9 / 16 },
|
||||
]
|
||||
|
||||
export function AddNewPortfolioPage() {
|
||||
const { id } = useParams()
|
||||
const navigate = useNavigate()
|
||||
@@ -40,6 +53,7 @@ export function AddNewPortfolioPage() {
|
||||
const [abstract, setAbstract] = useState('')
|
||||
const [mainTextHtml, setMainTextHtml] = useState('')
|
||||
const [titleImage, setTitleImage] = useState<string | null>(null)
|
||||
const [titleImageAspect, setTitleImageAspect] = useState<TitleImageAspectId>('3:2')
|
||||
const [images, setImages] = useState<string[]>([])
|
||||
const [tags, setTags] = useState<string[]>([])
|
||||
const [featuredMediaId, setFeaturedMediaId] = useState<string | null>(null)
|
||||
@@ -49,6 +63,8 @@ export function AddNewPortfolioPage() {
|
||||
const [error, setError] = useState('')
|
||||
|
||||
const categoryOptions = flattenCategories(categories)
|
||||
const selectedAspect =
|
||||
TITLE_IMAGE_ASPECTS.find((option) => option.id === titleImageAspect)?.aspect ?? 3 / 2
|
||||
|
||||
useEffect(() => {
|
||||
const controller = new AbortController()
|
||||
@@ -199,65 +215,96 @@ export function AddNewPortfolioPage() {
|
||||
|
||||
<form className={styles.form} onSubmit={handleSubmit}>
|
||||
<div className={styles.formGrid}>
|
||||
<div className={`${styles.field} ${styles.col3} ${styles.rowSpan3}`}>
|
||||
<div className={`${styles.field} ${styles.col3} ${styles.thumbnailField}`}>
|
||||
<label>Title Image</label>
|
||||
<div
|
||||
className={styles.aspectOptions}
|
||||
role="radiogroup"
|
||||
aria-label="Title image aspect ratio"
|
||||
>
|
||||
{TITLE_IMAGE_ASPECTS.map((option) => (
|
||||
<button
|
||||
key={option.id}
|
||||
type="button"
|
||||
role="radio"
|
||||
aria-checked={titleImageAspect === option.id}
|
||||
className={`${styles.aspectChip} ${
|
||||
titleImageAspect === option.id ? styles.aspectChipSelected : ''
|
||||
}`}
|
||||
onClick={() => {
|
||||
if (option.id === titleImageAspect) return
|
||||
setTitleImageAspect(option.id)
|
||||
// Aspect only applies during crop — clear so the user re-crops
|
||||
if (titleImage) {
|
||||
setTitleImage(null)
|
||||
setFeaturedMediaId(null)
|
||||
}
|
||||
}}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<ImageCropper
|
||||
value={titleImage}
|
||||
onChange={setTitleImage}
|
||||
aspect={3 / 2}
|
||||
aspect={selectedAspect}
|
||||
uploadLabel="Upload title image"
|
||||
hint="Click to select, then crop"
|
||||
changeLabel="Change title image"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={`${styles.field} ${styles.col6Span}`}>
|
||||
<label>Category</label>
|
||||
<SearchableSelect
|
||||
options={categoryOptions}
|
||||
value={categoryId}
|
||||
onChange={setCategoryId}
|
||||
placeholder="Search and select category..."
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.formColumn}>
|
||||
<div className={styles.field}>
|
||||
<label>Category</label>
|
||||
<SearchableSelect
|
||||
options={categoryOptions}
|
||||
value={categoryId}
|
||||
onChange={setCategoryId}
|
||||
placeholder="Search and select category..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={`${styles.field} ${styles.col9}`}>
|
||||
<label htmlFor="portfolio-title">Title</label>
|
||||
<input
|
||||
id="portfolio-title"
|
||||
name="title"
|
||||
type="text"
|
||||
placeholder="Portfolio title"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
required
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.field}>
|
||||
<label htmlFor="portfolio-title">Title</label>
|
||||
<input
|
||||
id="portfolio-title"
|
||||
name="title"
|
||||
type="text"
|
||||
placeholder="Portfolio title"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
required
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={`${styles.field} ${styles.col9}`}>
|
||||
<label htmlFor="portfolio-abstract">Abstract</label>
|
||||
<textarea
|
||||
id="portfolio-abstract"
|
||||
name="abstract"
|
||||
rows={4}
|
||||
placeholder="Short summary shown in portfolio listings"
|
||||
value={abstract}
|
||||
onChange={(e) => setAbstract(e.target.value)}
|
||||
required
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.field}>
|
||||
<label htmlFor="portfolio-abstract">Abstract</label>
|
||||
<textarea
|
||||
id="portfolio-abstract"
|
||||
name="abstract"
|
||||
rows={4}
|
||||
placeholder="Short summary shown in portfolio listings"
|
||||
value={abstract}
|
||||
onChange={(e) => setAbstract(e.target.value)}
|
||||
required
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={`${styles.field} ${styles.col12}`}>
|
||||
<label>Main Text</label>
|
||||
<RichTextEditor
|
||||
value={mainTextHtml}
|
||||
onChange={setMainTextHtml}
|
||||
placeholder="Full portfolio content with formatting and images..."
|
||||
allowImages
|
||||
editorMinHeight={320}
|
||||
/>
|
||||
<div className={styles.field}>
|
||||
<label>Main Text</label>
|
||||
<RichTextEditor
|
||||
value={mainTextHtml}
|
||||
onChange={setMainTextHtml}
|
||||
placeholder="Full portfolio content with formatting and images..."
|
||||
allowImages
|
||||
editorMinHeight={280}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`${styles.field} ${styles.col12}`}>
|
||||
|
||||
@@ -26,6 +26,14 @@
|
||||
.col9 { grid-column: span 9; }
|
||||
.col12 { grid-column: span 12; }
|
||||
|
||||
.formColumn {
|
||||
grid-column: span 9;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.thumbnailField {
|
||||
align-self: start;
|
||||
}
|
||||
@@ -176,6 +184,41 @@
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.aspectOptions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.aspectChip {
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
color: var(--text-secondary);
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
border: 1px solid rgba(148, 163, 184, 0.35);
|
||||
border-radius: 50px;
|
||||
transition: border-color 0.15s, color 0.15s, background 0.15s;
|
||||
}
|
||||
|
||||
.aspectChip:hover:not(:disabled) {
|
||||
border-color: var(--primary);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.aspectChip:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.aspectChipSelected {
|
||||
background: rgba(var(--primary-rgb) / 0.12);
|
||||
border-color: var(--primary);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.form {
|
||||
padding: 20px 16px;
|
||||
@@ -192,7 +235,8 @@
|
||||
.col10,
|
||||
.col4Start,
|
||||
.col9,
|
||||
.col12 {
|
||||
.col12,
|
||||
.formColumn {
|
||||
grid-column: span 12;
|
||||
}
|
||||
|
||||
|
||||
@@ -155,14 +155,6 @@ export function BlogCategoriesPage() {
|
||||
Organize your blog posts into categories and subcategories.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className={styles.addBtn}
|
||||
onClick={() => openCreateModal()}
|
||||
aria-label="Add category"
|
||||
>
|
||||
<Plus size={22} strokeWidth={2.5} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
@@ -217,6 +209,17 @@ export function BlogCategoriesPage() {
|
||||
onConfirm={confirmDelete}
|
||||
onCancel={() => !isSubmitting && setDeleteTarget(null)}
|
||||
/>
|
||||
|
||||
<div className={styles.fabDock}>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.addFab}
|
||||
onClick={() => openCreateModal()}
|
||||
aria-label="Add category"
|
||||
>
|
||||
<Plus size={24} />
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -24,3 +24,45 @@
|
||||
border: 1px solid rgba(239, 68, 68, 0.25);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.fabDock {
|
||||
position: fixed;
|
||||
right: 32px;
|
||||
bottom: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.addFab {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
color: white;
|
||||
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
|
||||
box-shadow: 0 8px 24px rgba(var(--primary-rgb) / 0.4);
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.addFab:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 28px rgba(var(--primary-rgb) / 0.45);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.fabDock {
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.addFab {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -33,7 +33,6 @@ import {
|
||||
updateProductCategory,
|
||||
} from '../services/productCategoryService'
|
||||
import pageStyles from '../components/PageContent.module.css'
|
||||
import fabStyles from './MyProductsPage.module.css'
|
||||
import aiStyles from '../styles/ai.module.css'
|
||||
import styles from './CategoriesPage.module.css'
|
||||
|
||||
@@ -534,7 +533,7 @@ export function CategoriesPage() {
|
||||
isRunning={aiGenerating}
|
||||
/>
|
||||
|
||||
<div className={fabStyles.fabDock}>
|
||||
<div className={styles.fabDock}>
|
||||
<button
|
||||
type="button"
|
||||
className={aiStyles.aiFabStrip}
|
||||
@@ -545,7 +544,7 @@ export function CategoriesPage() {
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={fabStyles.addFab}
|
||||
className={styles.addFab}
|
||||
onClick={() => openCreateModal()}
|
||||
aria-label="Add category"
|
||||
>
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.domain {
|
||||
.businessName {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
@@ -275,13 +275,6 @@
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.domainHint {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
margin: -12px 0 20px;
|
||||
}
|
||||
|
||||
.fieldRow {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
|
||||
@@ -2,6 +2,7 @@ import { useState } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { Eye, EyeOff, Smartphone, Lock, KeyRound, ArrowLeft, User } from 'lucide-react'
|
||||
import { useAuth, BUSINESS_ACCESS_MESSAGE } from '../context/AuthContext'
|
||||
import { useTenantBranding } from '../context/TenantBrandingContext'
|
||||
import { ApiError } from '../lib/api'
|
||||
import { toE164CellNumber } from '../lib/cellNumber'
|
||||
import { getBusinessDomain } from '../lib/config'
|
||||
@@ -21,6 +22,7 @@ type SmsStep = 'phone' | 'code'
|
||||
export function LoginPage() {
|
||||
const navigate = useNavigate()
|
||||
const { login } = useAuth()
|
||||
const { businessName, logoUrl } = useTenantBranding()
|
||||
const businessDomain = getBusinessDomain()
|
||||
|
||||
const [view, setView] = useState<AuthView>('login')
|
||||
@@ -217,15 +219,13 @@ export function LoginPage() {
|
||||
<div className={styles.page}>
|
||||
<div className={styles.card}>
|
||||
<div className={styles.brand}>
|
||||
<img src={meshkeeLogo} alt="Meshkee" className={styles.logo} />
|
||||
<img src={logoUrl || meshkeeLogo} alt="" className={styles.logo} />
|
||||
<div className={styles.brandText}>
|
||||
<span className={styles.domain}>Sanihome.ir</span>
|
||||
<span className={styles.appName}>Meshkee.app</span>
|
||||
<span className={styles.businessName}>{businessName || businessDomain}</span>
|
||||
<span className={styles.appName}>powered by Meshkee.app</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className={styles.domainHint}>Business domain: {businessDomain}</p>
|
||||
|
||||
{view === 'login' && (
|
||||
<>
|
||||
<h1 className={styles.title}>Welcome back</h1>
|
||||
|
||||
@@ -155,14 +155,6 @@ export function PortfolioCategoriesPage() {
|
||||
Organize your portfolio items into categories and subcategories.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className={styles.addBtn}
|
||||
onClick={() => openCreateModal()}
|
||||
aria-label="Add category"
|
||||
>
|
||||
<Plus size={22} strokeWidth={2.5} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
@@ -217,6 +209,17 @@ export function PortfolioCategoriesPage() {
|
||||
onConfirm={confirmDelete}
|
||||
onCancel={() => !isSubmitting && setDeleteTarget(null)}
|
||||
/>
|
||||
|
||||
<div className={styles.fabDock}>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.addFab}
|
||||
onClick={() => openCreateModal()}
|
||||
aria-label="Add category"
|
||||
>
|
||||
<Plus size={24} />
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -7,23 +7,26 @@
|
||||
width: 100%;
|
||||
max-width: 640px;
|
||||
margin: 0 auto 20px;
|
||||
aspect-ratio: 3 / 2;
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius);
|
||||
background: rgba(148, 163, 184, 0.08);
|
||||
border: 1px solid rgba(148, 163, 184, 0.12);
|
||||
}
|
||||
|
||||
.heroImageWrapEmpty {
|
||||
aspect-ratio: 3 / 2;
|
||||
}
|
||||
|
||||
.heroImage {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.heroPlaceholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 180px;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(148, 163, 184, 0.12) 0%,
|
||||
|
||||
@@ -100,7 +100,11 @@ export function PortfolioDetailsPage() {
|
||||
</div>
|
||||
|
||||
<article className={styles.portfolioDetail}>
|
||||
<div className={styles.heroImageWrap}>
|
||||
<div
|
||||
className={`${styles.heroImageWrap} ${
|
||||
portfolio.titleImageUrl ? '' : styles.heroImageWrapEmpty
|
||||
}`}
|
||||
>
|
||||
{portfolio.titleImageUrl ? (
|
||||
<img
|
||||
src={portfolio.titleImageUrl}
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
|
||||
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 9.3 KiB |
Regular → Executable
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 12 KiB |
@@ -5,6 +5,7 @@ import { useAuth } from '../context/AuthContext'
|
||||
import { getActiveBusinessDomain } from '../lib/businessContext'
|
||||
import { isAbortError } from '../lib/api'
|
||||
import { getWebsiteBusinessInfo } from '../services/websiteService'
|
||||
import meshkeeLogo from '../assets/meshkee-logo.png'
|
||||
import styles from './Sidebar.module.css'
|
||||
|
||||
const navItems = [
|
||||
@@ -25,7 +26,6 @@ export function Sidebar() {
|
||||
const businessDomain = getActiveBusinessDomain()
|
||||
const fallbackBusinessName = user?.customerBusinesses[0]?.name ?? 'Store'
|
||||
const displayName = brandName || fallbackBusinessName
|
||||
const initial = displayName.trim().charAt(0) || businessDomain.charAt(0) || 'S'
|
||||
|
||||
useEffect(() => {
|
||||
const controller = new AbortController()
|
||||
@@ -35,7 +35,7 @@ export function Sidebar() {
|
||||
const info = await getWebsiteBusinessInfo(businessDomain, controller.signal)
|
||||
if (controller.signal.aborted) return
|
||||
setBrandName(info.nameFa?.trim() || info.name.trim() || fallbackBusinessName)
|
||||
setLogoUrl(info.logoUrl)
|
||||
setLogoUrl(info.logoUrl?.trim() || null)
|
||||
} catch (err) {
|
||||
if (isAbortError(err)) return
|
||||
setBrandName(fallbackBusinessName)
|
||||
@@ -53,17 +53,11 @@ export function Sidebar() {
|
||||
return (
|
||||
<aside className={styles.sidebar}>
|
||||
<div className={styles.brand}>
|
||||
{logoUrl ? (
|
||||
<img
|
||||
src={logoUrl}
|
||||
alt={displayName}
|
||||
className={styles.brandLogo}
|
||||
/>
|
||||
) : (
|
||||
<span className={styles.brandFallback} aria-hidden>
|
||||
{initial.toUpperCase()}
|
||||
</span>
|
||||
)}
|
||||
<img
|
||||
src={logoUrl || meshkeeLogo}
|
||||
alt={displayName}
|
||||
className={styles.brandLogo}
|
||||
/>
|
||||
<div className={styles.brandText}>
|
||||
<span className={styles.brandDomain}>{businessDomain}</span>
|
||||
<span className={styles.brandName}>{displayName}</span>
|
||||
|
||||
@@ -4,6 +4,7 @@ import { isAbortError } from '../../lib/api'
|
||||
import { getTenantDomain } from '../../lib/config'
|
||||
import { CheckoutProvider } from '../../context/CheckoutContext'
|
||||
import { getWebsiteBusinessInfo, getWebsiteUrl } from '../../services/websiteService'
|
||||
import meshkeeLogo from '../../assets/meshkee-logo.png'
|
||||
import styles from './CheckoutLayout.module.css'
|
||||
|
||||
export function CheckoutLayout() {
|
||||
@@ -20,7 +21,7 @@ export function CheckoutLayout() {
|
||||
const info = await getWebsiteBusinessInfo(tenantDomain, controller.signal)
|
||||
if (controller.signal.aborted) return
|
||||
setBrandName(info.nameFa?.trim() || info.name.trim() || tenantDomain)
|
||||
setLogoUrl(info.logoUrl)
|
||||
setLogoUrl(info.logoUrl?.trim() || null)
|
||||
} catch (err) {
|
||||
if (isAbortError(err)) return
|
||||
setBrandName(tenantDomain)
|
||||
@@ -33,24 +34,17 @@ export function CheckoutLayout() {
|
||||
}, [tenantDomain])
|
||||
|
||||
const displayName = brandName || tenantDomain
|
||||
const initial = displayName.trim().charAt(0) || 'S'
|
||||
|
||||
return (
|
||||
<CheckoutProvider>
|
||||
<div className={styles.checkoutPage} lang="fa" dir="rtl">
|
||||
<header className={styles.header}>
|
||||
<a href={websiteUrl} className={styles.brandLink}>
|
||||
{logoUrl ? (
|
||||
<img
|
||||
src={logoUrl}
|
||||
alt={displayName}
|
||||
className={styles.logo}
|
||||
/>
|
||||
) : (
|
||||
<span className={styles.logoFallback} aria-hidden>
|
||||
{initial.toUpperCase()}
|
||||
</span>
|
||||
)}
|
||||
<img
|
||||
src={logoUrl || meshkeeLogo}
|
||||
alt={displayName}
|
||||
className={styles.logo}
|
||||
/>
|
||||
<div className={styles.brandText}>
|
||||
<span className={styles.brandTitle}>{displayName}</span>
|
||||
<span className={styles.subtitle}>سبد خرید</span>
|
||||
|
||||
@@ -14,6 +14,7 @@ import { resolveTenantByDomain } from '../services/tenantService'
|
||||
|
||||
interface TenantBrandingContextValue {
|
||||
businessName: string
|
||||
logoUrl: string | null
|
||||
faviconUrl: string | null
|
||||
}
|
||||
|
||||
@@ -31,6 +32,7 @@ function pickBusinessName(
|
||||
|
||||
export function TenantBrandingProvider({ children }: { children: ReactNode }) {
|
||||
const [businessName, setBusinessName] = useState('')
|
||||
const [logoUrl, setLogoUrl] = useState<string | null>(null)
|
||||
const [faviconUrl, setFaviconUrl] = useState<string | null>(null)
|
||||
const domain = getTenantDomain()
|
||||
|
||||
@@ -54,19 +56,22 @@ export function TenantBrandingProvider({ children }: { children: ReactNode }) {
|
||||
domain,
|
||||
)
|
||||
|
||||
const nextLogo =
|
||||
info?.logoUrl?.trim() || tenant.logoUrl?.trim() || null
|
||||
const nextFavicon =
|
||||
info?.faviconUrl?.trim() ||
|
||||
tenant.faviconUrl?.trim() ||
|
||||
info?.logoUrl?.trim() ||
|
||||
tenant.logoUrl?.trim() ||
|
||||
nextLogo ||
|
||||
null
|
||||
|
||||
setBusinessName(name || domain)
|
||||
setLogoUrl(nextLogo)
|
||||
setFaviconUrl(nextFavicon)
|
||||
applyDocumentFavicon(nextFavicon)
|
||||
} catch (err) {
|
||||
if (isAbortError(err) || controller.signal.aborted) return
|
||||
setBusinessName(domain)
|
||||
setLogoUrl(null)
|
||||
setFaviconUrl(null)
|
||||
applyDocumentFavicon(null)
|
||||
}
|
||||
@@ -80,8 +85,8 @@ export function TenantBrandingProvider({ children }: { children: ReactNode }) {
|
||||
}, [domain])
|
||||
|
||||
const value = useMemo(
|
||||
() => ({ businessName, faviconUrl }),
|
||||
[businessName, faviconUrl],
|
||||
() => ({ businessName, logoUrl, faviconUrl }),
|
||||
[businessName, logoUrl, faviconUrl],
|
||||
)
|
||||
|
||||
return (
|
||||
|
||||
@@ -6,6 +6,7 @@ import {
|
||||
CUSTOMER_ACCESS_MESSAGE,
|
||||
VERIFICATION_REQUIRED_MESSAGE,
|
||||
} from '../context/AuthContext'
|
||||
import { useTenantBranding } from '../context/TenantBrandingContext'
|
||||
import { ApiError } from '../lib/api'
|
||||
import { toE164CellNumber } from '../lib/cellNumber'
|
||||
import { getTenantDomain } from '../lib/config'
|
||||
@@ -33,6 +34,7 @@ export function LoginPage() {
|
||||
const [searchParams] = useSearchParams()
|
||||
const redirectTo = safeRedirectPath(searchParams.get('redirect'))
|
||||
const { login } = useAuth()
|
||||
const { businessName, logoUrl } = useTenantBranding()
|
||||
const tenantDomain = getTenantDomain()
|
||||
|
||||
const [view, setView] = useState<AuthView>('login')
|
||||
@@ -236,15 +238,13 @@ export function LoginPage() {
|
||||
<div className={styles.page}>
|
||||
<div className={styles.card}>
|
||||
<div className={styles.brand}>
|
||||
<img src={meshkeeLogo} alt="Meshkee" className={styles.logo} />
|
||||
<img src={logoUrl || meshkeeLogo} alt="" className={styles.logo} />
|
||||
<div className={styles.brandText}>
|
||||
<span className={styles.domain}>{tenantDomain}</span>
|
||||
<span className={styles.appName}>Customer Dashboard</span>
|
||||
<span className={styles.domain}>{businessName || tenantDomain}</span>
|
||||
<span className={styles.appName}>powered by Meshkee.app</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className={styles.domainHint}>Store domain: {tenantDomain}</p>
|
||||
|
||||
{view === 'login' && (
|
||||
<>
|
||||
<h1 className={styles.title}>Welcome back</h1>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
|
||||
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 9.3 KiB |
Regular → Executable
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 12 KiB |
@@ -287,6 +287,14 @@
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.sslIcon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 0;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.sslOk {
|
||||
color: #16a34a;
|
||||
flex-shrink: 0;
|
||||
@@ -319,12 +327,18 @@
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.controlBtn:hover {
|
||||
.controlBtn:hover:not(:disabled) {
|
||||
background: rgba(var(--primary-rgb) / 0.1);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.controlBtnDanger:hover {
|
||||
.controlBtn:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.controlBtnDanger:hover:not(:disabled) {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
@@ -601,13 +601,25 @@ export function BusinessesPage() {
|
||||
<div className={styles.domainCell}>
|
||||
<span>{b.domain}</span>
|
||||
{b.sslEnabled ? (
|
||||
<Lock size={16} className={styles.sslOk} aria-label="SSL enabled" />
|
||||
<span
|
||||
className={styles.sslIcon}
|
||||
title="SSL enabled"
|
||||
aria-label="SSL enabled"
|
||||
>
|
||||
<Lock size={16} className={styles.sslOk} aria-hidden="true" />
|
||||
</span>
|
||||
) : (
|
||||
<AlertTriangle
|
||||
size={16}
|
||||
className={styles.sslWarn}
|
||||
<span
|
||||
className={styles.sslIcon}
|
||||
title="SSL not enabled"
|
||||
aria-label="SSL not enabled"
|
||||
/>
|
||||
>
|
||||
<AlertTriangle
|
||||
size={16}
|
||||
className={styles.sslWarn}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
|
||||
@@ -16,3 +16,41 @@
|
||||
.inactiveRow {
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.spin {
|
||||
display: block;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.deployBusy {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.deployCell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-width: 9rem;
|
||||
}
|
||||
|
||||
.deployStatus {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.deployOk {
|
||||
color: #15803d;
|
||||
}
|
||||
|
||||
.deployFail {
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,16 @@
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { AlertTriangle, Lock, Pencil, RotateCcw, Search, Trash2, Unlock } from 'lucide-react'
|
||||
import { flushSync } from 'react-dom'
|
||||
import {
|
||||
AlertTriangle,
|
||||
Loader2,
|
||||
Lock,
|
||||
Pencil,
|
||||
Rocket,
|
||||
RotateCcw,
|
||||
Search,
|
||||
Trash2,
|
||||
Unlock,
|
||||
} from 'lucide-react'
|
||||
import { ConfirmDeleteModal } from '../components/ConfirmDeleteModal'
|
||||
import { Modal } from '../components/Modal'
|
||||
import { ToggleSwitch } from '../components/ToggleSwitch'
|
||||
@@ -7,6 +18,7 @@ import type { DomainListItem, DomainsListResponse } from '../types/domain'
|
||||
import type { ListDomainsParams } from '../services/domainService'
|
||||
import { ApiError, isAbortError } from '../lib/api'
|
||||
import {
|
||||
deployDomain,
|
||||
listDomains,
|
||||
removeDomain,
|
||||
setDomainActive,
|
||||
@@ -51,6 +63,31 @@ function daysLeftClass(expiresAt: string | null) {
|
||||
return styles.daysOk
|
||||
}
|
||||
|
||||
function formatDeployAt(iso: string | null) {
|
||||
if (!iso) return '—'
|
||||
const d = new Date(iso)
|
||||
if (Number.isNaN(d.getTime())) return '—'
|
||||
return d.toLocaleString(undefined, {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})
|
||||
}
|
||||
|
||||
function deployStatusLabel(status: DomainListItem['lastDeployStatus']) {
|
||||
if (status === 'started') return 'Started'
|
||||
if (status === 'failed') return 'Failed'
|
||||
return null
|
||||
}
|
||||
|
||||
function deployStatusClass(status: DomainListItem['lastDeployStatus']) {
|
||||
if (status === 'started') return styles.deployOk
|
||||
if (status === 'failed') return styles.deployFail
|
||||
return undefined
|
||||
}
|
||||
|
||||
export function WebsitesPage() {
|
||||
const { showToast } = useToast()
|
||||
const [data, setData] = useState<DomainsListResponse | null>(null)
|
||||
@@ -70,6 +107,7 @@ export function WebsitesPage() {
|
||||
const [removeTarget, setRemoveTarget] = useState<DomainListItem | null>(null)
|
||||
const [togglingActiveId, setTogglingActiveId] = useState<number | null>(null)
|
||||
const [togglingSslId, setTogglingSslId] = useState<number | null>(null)
|
||||
const [deployingId, setDeployingId] = useState<DomainListItem['id'] | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const controller = new AbortController()
|
||||
@@ -229,6 +267,59 @@ export function WebsitesPage() {
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDeploy(domain: DomainListItem) {
|
||||
if (!domain.deploySlug) return
|
||||
if (deployingId != null) return
|
||||
|
||||
// Paint spinner + disabled state before the network call starts
|
||||
flushSync(() => {
|
||||
setDeployingId(domain.id)
|
||||
})
|
||||
setError('')
|
||||
showToast(`Deploying "${domain.host}"…`, 'info')
|
||||
|
||||
try {
|
||||
const result = await deployDomain(domain.id)
|
||||
setData((prev) => {
|
||||
if (!prev) return prev
|
||||
return {
|
||||
...prev,
|
||||
items: prev.items.map((item) =>
|
||||
item.id === domain.id
|
||||
? {
|
||||
...item,
|
||||
lastDeployedAt: result.lastDeployedAt,
|
||||
lastDeployStatus: result.lastDeployStatus,
|
||||
}
|
||||
: item,
|
||||
),
|
||||
}
|
||||
})
|
||||
showToast(`Deploy started for "${result.host}".`, 'success')
|
||||
} catch (err) {
|
||||
const message = err instanceof ApiError ? err.message : 'Deploy failed to start.'
|
||||
setError(message)
|
||||
setData((prev) => {
|
||||
if (!prev) return prev
|
||||
return {
|
||||
...prev,
|
||||
items: prev.items.map((item) =>
|
||||
item.id === domain.id
|
||||
? {
|
||||
...item,
|
||||
lastDeployedAt: new Date().toISOString(),
|
||||
lastDeployStatus: 'failed',
|
||||
}
|
||||
: item,
|
||||
),
|
||||
}
|
||||
})
|
||||
showToast(message, 'error')
|
||||
} finally {
|
||||
setDeployingId(null)
|
||||
}
|
||||
}
|
||||
|
||||
async function confirmRemove() {
|
||||
if (!removeTarget) return
|
||||
setError('')
|
||||
@@ -330,13 +421,14 @@ export function WebsitesPage() {
|
||||
<th className={tableStyles.th}>Owner business</th>
|
||||
<th className={tableStyles.th}>Days to expire</th>
|
||||
<th className={tableStyles.th}>SSL</th>
|
||||
<th className={tableStyles.th}>Latest deploy</th>
|
||||
<th className={`${tableStyles.th} ${tableStyles.thActions}`}>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{loading && (
|
||||
<tr>
|
||||
<td className={tableStyles.td} colSpan={5}>
|
||||
<td className={tableStyles.td} colSpan={6}>
|
||||
Loading...
|
||||
</td>
|
||||
</tr>
|
||||
@@ -344,7 +436,7 @@ export function WebsitesPage() {
|
||||
|
||||
{!loading && data?.items?.length === 0 && (
|
||||
<tr>
|
||||
<td className={tableStyles.td} colSpan={5}>
|
||||
<td className={tableStyles.td} colSpan={6}>
|
||||
No results found.
|
||||
</td>
|
||||
</tr>
|
||||
@@ -366,19 +458,49 @@ export function WebsitesPage() {
|
||||
<td className={tableStyles.td}>
|
||||
<div className={tableStyles.domainCell}>
|
||||
{domain.sslEnabled ? (
|
||||
<Lock size={16} className={tableStyles.sslOk} aria-label="SSL enabled" />
|
||||
<span
|
||||
className={tableStyles.sslIcon}
|
||||
title="SSL enabled"
|
||||
aria-label="SSL enabled"
|
||||
>
|
||||
<Lock size={16} className={tableStyles.sslOk} aria-hidden="true" />
|
||||
</span>
|
||||
) : (
|
||||
<AlertTriangle
|
||||
size={16}
|
||||
className={tableStyles.sslWarn}
|
||||
<span
|
||||
className={tableStyles.sslIcon}
|
||||
title="SSL not enabled"
|
||||
aria-label="SSL not enabled"
|
||||
/>
|
||||
>
|
||||
<AlertTriangle
|
||||
size={16}
|
||||
className={tableStyles.sslWarn}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
)}
|
||||
<span className={tableStyles.subText}>
|
||||
{domain.sslEnabled ? 'Enabled' : 'Disabled'}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className={tableStyles.td}>
|
||||
{domain.lastDeployedAt ? (
|
||||
<div className={styles.deployCell}>
|
||||
<span className={tableStyles.subText}>
|
||||
{formatDeployAt(domain.lastDeployedAt)}
|
||||
</span>
|
||||
{deployStatusLabel(domain.lastDeployStatus) ? (
|
||||
<span
|
||||
className={`${styles.deployStatus} ${deployStatusClass(domain.lastDeployStatus) ?? ''}`}
|
||||
>
|
||||
{deployStatusLabel(domain.lastDeployStatus)}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
) : (
|
||||
<span className={tableStyles.subText}>—</span>
|
||||
)}
|
||||
</td>
|
||||
<td className={`${tableStyles.td} ${tableStyles.tdActions}`}>
|
||||
<div className={tableStyles.rowActions}>
|
||||
<span className={tableStyles.toggleInActions}>
|
||||
@@ -389,6 +511,32 @@ export function WebsitesPage() {
|
||||
onChange={(isActive) => void handleToggleActive(domain, isActive)}
|
||||
/>
|
||||
</span>
|
||||
{domain.deploySlug ? (
|
||||
<button
|
||||
type="button"
|
||||
className={`${tableStyles.controlBtn} ${
|
||||
deployingId === domain.id ? styles.deployBusy : ''
|
||||
}`}
|
||||
onClick={() => {
|
||||
if (deployingId != null) return
|
||||
void handleDeploy(domain)
|
||||
}}
|
||||
disabled={deployingId === domain.id}
|
||||
title={
|
||||
deployingId === domain.id ? 'Deploying…' : 'Deploy website'
|
||||
}
|
||||
aria-label={
|
||||
deployingId === domain.id ? 'Deploying' : 'Deploy website'
|
||||
}
|
||||
aria-busy={deployingId === domain.id}
|
||||
>
|
||||
{deployingId === domain.id ? (
|
||||
<Loader2 size={16} className={styles.spin} aria-hidden />
|
||||
) : (
|
||||
<Rocket size={16} />
|
||||
)}
|
||||
</button>
|
||||
) : null}
|
||||
<button
|
||||
type="button"
|
||||
className={tableStyles.controlBtn}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { apiRequest } from '../lib/api'
|
||||
import type { DomainsListResponse } from '../types/domain'
|
||||
import type { DeployDomainResponse, DomainsListResponse } from '../types/domain'
|
||||
|
||||
export interface ListDomainsParams {
|
||||
page?: number
|
||||
@@ -53,3 +53,10 @@ export async function removeDomain(domainId: number | string) {
|
||||
auth: true,
|
||||
})
|
||||
}
|
||||
|
||||
export async function deployDomain(domainId: number | string) {
|
||||
return apiRequest<DeployDomainResponse>(`/domains/${domainId}/deploy`, {
|
||||
method: 'POST',
|
||||
auth: true,
|
||||
})
|
||||
}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
export type DomainDeployStatus = 'started' | 'failed'
|
||||
|
||||
export interface DomainListItem {
|
||||
id: number
|
||||
host: string
|
||||
@@ -7,6 +9,10 @@ export interface DomainListItem {
|
||||
isActive: boolean
|
||||
expiresAt: string | null
|
||||
createdAt: string
|
||||
/** Present when this apex has a storefront on the websites VM */
|
||||
deploySlug: string | null
|
||||
lastDeployedAt: string | null
|
||||
lastDeployStatus: DomainDeployStatus | null
|
||||
}
|
||||
|
||||
export interface DomainsListResponse {
|
||||
@@ -15,3 +21,12 @@ export interface DomainsListResponse {
|
||||
page: number
|
||||
pageSize: number
|
||||
}
|
||||
|
||||
export interface DeployDomainResponse {
|
||||
status: 'accepted'
|
||||
slug: string
|
||||
host: string
|
||||
message: string
|
||||
lastDeployedAt: string | null
|
||||
lastDeployStatus: DomainDeployStatus | null
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user