chore: finish profile
This commit is contained in:
Nuxgrid
@@ -7,13 +7,11 @@ import { Login } from './pages/Login'
|
||||
import { Register } from './pages/Register'
|
||||
import { Leads } from './pages/backoffice/Leads'
|
||||
import { Demos } from './pages/backoffice/Demos'
|
||||
import { Messages } from './pages/backoffice/Contact'
|
||||
import { Codes } from './pages/backoffice/Codes'
|
||||
import { Subscription } from './pages/backoffice/Subscription'
|
||||
import { Profile } from './pages/backoffice/Profile'
|
||||
import { PublicLayout } from './components/PublicLayout'
|
||||
import { BackofficeLayout } from './components/BackofficeLayout'
|
||||
import { Contact } from './pages/Contact'
|
||||
import { useAuth } from './lib/auth'
|
||||
import type { JSX } from 'react'
|
||||
|
||||
@@ -64,7 +62,6 @@ export function App() {
|
||||
<Route path="/" element={<Landing />} />
|
||||
<Route path="/tarifs" element={<Pricing />} />
|
||||
<Route path="/demo" element={<RequestDemo />} />
|
||||
<Route path="/contact" element={<Contact />} />
|
||||
</Route>
|
||||
<Route path="/login" element={<Login />} />
|
||||
<Route path="/register" element={<Register />} />
|
||||
@@ -106,14 +103,6 @@ export function App() {
|
||||
</RequireAdmin>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="messages"
|
||||
element={
|
||||
<RequireAdmin>
|
||||
<Messages />
|
||||
</RequireAdmin>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="profile"
|
||||
element={
|
||||
|
||||
@@ -51,7 +51,6 @@ export function BackofficeLayout() {
|
||||
{(isAdmin || (isClient && !isPremium)) && <NavItem to="/app/leads">Leads</NavItem>}
|
||||
{isClient && <NavItem to="/app/subscription">Abonnement</NavItem>}
|
||||
{isAdmin || isClient && <NavItem to="/app/profile">Profile</NavItem>}
|
||||
{isAdmin && <NavItem to="/app/messages">Messages</NavItem>}
|
||||
{isAdmin && <NavItem to="/app/demos">Démos</NavItem>}
|
||||
{isAdmin && <NavItem to="/app/codes">Codes</NavItem>}
|
||||
</HStack>
|
||||
@@ -96,11 +95,6 @@ export function BackofficeLayout() {
|
||||
Abonnement
|
||||
</NavItem>
|
||||
)}
|
||||
{isAdmin && (
|
||||
<NavItem to="/app/messages" onClick={onClose} mobile>
|
||||
Messages
|
||||
</NavItem>
|
||||
)}
|
||||
{isAdmin && (
|
||||
<NavItem to="/app/demos" onClick={onClose} mobile>
|
||||
Démos
|
||||
|
||||
+10
-2
@@ -107,6 +107,11 @@ export interface UpdateUsername {
|
||||
export interface UpdatePassword {
|
||||
password: string
|
||||
}
|
||||
|
||||
export interface TelegramInfo {
|
||||
telegram: string
|
||||
}
|
||||
|
||||
// --- Endpoints ---
|
||||
|
||||
export const api = {
|
||||
@@ -157,6 +162,9 @@ export const api = {
|
||||
request<DemoDetails>('POST', '/demos/details', { username }),
|
||||
updateUsername: (username: string) =>
|
||||
request<UpdateUsername>('POST', '/profile/username', { username }),
|
||||
updatePassword: (password: string) =>
|
||||
request<UpdatePassword>('POST', '/profile/password', { password })
|
||||
updatePassword: (password: string) =>
|
||||
request<UpdatePassword>('POST', '/profile/password', { password }),
|
||||
getTelegram: () => request<TelegramInfo>('GET', '/profile/telegram'),
|
||||
setTelegram: (telegram: string) =>
|
||||
request<TelegramInfo>('POST', '/profile/telegram', { telegram }),
|
||||
}
|
||||
|
||||
@@ -1,211 +0,0 @@
|
||||
import { useState, type FormEvent } from 'react'
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Container,
|
||||
Divider,
|
||||
Flex,
|
||||
FormControl,
|
||||
FormLabel,
|
||||
FormErrorMessage,
|
||||
Heading,
|
||||
Input,
|
||||
Link,
|
||||
Stack,
|
||||
Text,
|
||||
Textarea,
|
||||
SimpleGrid,
|
||||
useToast,
|
||||
} from '@chakra-ui/react'
|
||||
import { api, ApiError } from '../lib/api'
|
||||
|
||||
interface ContactForm {
|
||||
name: string
|
||||
telegram: string
|
||||
subject: string
|
||||
message: string
|
||||
}
|
||||
|
||||
const initialForm: ContactForm = {
|
||||
name: '',
|
||||
telegram: '',
|
||||
subject: '',
|
||||
message: '',
|
||||
}
|
||||
|
||||
// Remplace par le vrai handle / lien de contact Telegram d'Omnex.
|
||||
const TELEGRAM_CONTACT_URL = 'https://t.me/OMNEX_CORP'
|
||||
|
||||
const TelegramIcon = () => (
|
||||
<Box as="svg" w="20px" h="20px" viewBox="0 0 24 24" fill="currentColor">
|
||||
<Box
|
||||
as="path"
|
||||
d="M21.05 3.79a1.5 1.5 0 0 0-1.53-.25L2.6 10.1a1.5 1.5 0 0 0 .07 2.8l4.44 1.48 1.7 5.46a1.5 1.5 0 0 0 2.5.6l2.4-2.32 4.36 3.2a1.5 1.5 0 0 0 2.38-.86l3.1-14.9a1.5 1.5 0 0 0-.5-1.77ZM8.9 13.6l8.9-6.2-7.2 7.4-.3 3.2-1.4-4.4Z"
|
||||
/>
|
||||
</Box>
|
||||
)
|
||||
|
||||
export function Contact() {
|
||||
const toast = useToast()
|
||||
const [form, setForm] = useState<ContactForm>(initialForm)
|
||||
const [errors, setErrors] = useState<Partial<Record<keyof ContactForm, string>>>({})
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
|
||||
const handleChange =
|
||||
(field: keyof ContactForm) =>
|
||||
(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||
setForm((prev) => ({ ...prev, [field]: e.target.value }))
|
||||
}
|
||||
|
||||
const validate = (): boolean => {
|
||||
const nextErrors: Partial<Record<keyof ContactForm, string>> = {}
|
||||
if (!form.name.trim()) nextErrors.name = 'Le nom est requis.'
|
||||
if (!form.telegram.trim()) {
|
||||
nextErrors.telegram = "L'email est requis."
|
||||
}
|
||||
if (!form.subject.trim()) nextErrors.subject = 'Le sujet est requis.'
|
||||
if (!form.message.trim()) nextErrors.message = 'Le message est requis.'
|
||||
setErrors(nextErrors)
|
||||
return Object.keys(nextErrors).length === 0
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (!validate()) return
|
||||
|
||||
setSubmitting(true)
|
||||
try {
|
||||
await api.sendMessage(form.name, form.telegram, form.subject, form.message)
|
||||
toast({
|
||||
title: 'Message envoyé',
|
||||
description: 'Nous vous répondrons dans les plus brefs délais.',
|
||||
status: 'success',
|
||||
duration: 5000,
|
||||
isClosable: true,
|
||||
})
|
||||
setForm(initialForm)
|
||||
setErrors({})
|
||||
} catch (err) {
|
||||
const description =
|
||||
err instanceof ApiError ? err.message : 'Merci de réessayer dans quelques instants.'
|
||||
toast({
|
||||
title: "Erreur lors de l'envoi",
|
||||
description,
|
||||
status: 'error',
|
||||
duration: 5000,
|
||||
isClosable: true,
|
||||
})
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Box bg="chakra-subtle-bg" py={{ base: 12, md: 20 }}>
|
||||
<Container maxW="container.md">
|
||||
<Stack spacing={3} mb={10} textAlign="center">
|
||||
<Heading size="xl">Contactez-nous</Heading>
|
||||
<Text color="gray.400" fontSize="lg">
|
||||
Une question, une démo à planifier, un projet ? Écrivez-nous.
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
<Flex justify="center" mb={10}>
|
||||
<Button
|
||||
as={Link}
|
||||
href={TELEGRAM_CONTACT_URL}
|
||||
isExternal
|
||||
leftIcon={<TelegramIcon />}
|
||||
colorScheme="telegram"
|
||||
size="lg"
|
||||
w={{ base: 'full', sm: 'auto' }}
|
||||
whiteSpace="normal"
|
||||
_hover={{ textDecoration: 'none' }}
|
||||
>
|
||||
Nous contacter sur Telegram
|
||||
</Button>
|
||||
</Flex>
|
||||
|
||||
<Flex align="center" mb={10} gap={4}>
|
||||
<Divider />
|
||||
<Text fontSize="sm" color="gray.500" whiteSpace="nowrap">
|
||||
ou par formulaire
|
||||
</Text>
|
||||
<Divider />
|
||||
</Flex>
|
||||
|
||||
<Box
|
||||
as="form"
|
||||
onSubmit={handleSubmit}
|
||||
bg="bg-surface"
|
||||
borderWidth="1px"
|
||||
borderColor="chakra-border-color"
|
||||
borderRadius="xl"
|
||||
p={{ base: 6, md: 10 }}
|
||||
boxShadow="lg"
|
||||
>
|
||||
<Stack spacing={6}>
|
||||
<SimpleGrid columns={{ base: 1, md: 2 }} spacing={5}>
|
||||
<FormControl isInvalid={!!errors.name}>
|
||||
<FormLabel>Nom</FormLabel>
|
||||
<Input
|
||||
value={form.name}
|
||||
onChange={handleChange('name')}
|
||||
placeholder="Votre nom"
|
||||
size="lg"
|
||||
/>
|
||||
<FormErrorMessage>{errors.name}</FormErrorMessage>
|
||||
</FormControl>
|
||||
|
||||
<FormControl isInvalid={!!errors.telegram}>
|
||||
<FormLabel>Telegram</FormLabel>
|
||||
<Input
|
||||
type="email"
|
||||
value={form.telegram}
|
||||
onChange={handleChange('telegram')}
|
||||
placeholder="vous@entreprise.com"
|
||||
size="lg"
|
||||
/>
|
||||
<FormErrorMessage>{errors.telegram}</FormErrorMessage>
|
||||
</FormControl>
|
||||
</SimpleGrid>
|
||||
|
||||
<FormControl isInvalid={!!errors.subject}>
|
||||
<FormLabel>Sujet</FormLabel>
|
||||
<Input
|
||||
value={form.subject}
|
||||
onChange={handleChange('subject')}
|
||||
placeholder="Demande de démo, question tarifaire..."
|
||||
size="lg"
|
||||
/>
|
||||
<FormErrorMessage>{errors.subject}</FormErrorMessage>
|
||||
</FormControl>
|
||||
|
||||
<FormControl isInvalid={!!errors.message}>
|
||||
<FormLabel>Message</FormLabel>
|
||||
<Textarea
|
||||
value={form.message}
|
||||
onChange={handleChange('message')}
|
||||
placeholder="Décrivez votre besoin..."
|
||||
rows={6}
|
||||
resize="vertical"
|
||||
/>
|
||||
<FormErrorMessage>{errors.message}</FormErrorMessage>
|
||||
</FormControl>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
colorScheme="primary"
|
||||
size="lg"
|
||||
alignSelf={{ base: 'stretch', md: 'flex-start' }}
|
||||
isLoading={submitting}
|
||||
loadingText="Envoi..."
|
||||
>
|
||||
Envoyer le message
|
||||
</Button>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
@@ -1,113 +0,0 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import {
|
||||
Badge,
|
||||
Box,
|
||||
Heading,
|
||||
Spinner,
|
||||
Stack,
|
||||
Table,
|
||||
Tbody,
|
||||
Td,
|
||||
Text,
|
||||
Th,
|
||||
Thead,
|
||||
Tr,
|
||||
Alert,
|
||||
AlertIcon,
|
||||
} from '@chakra-ui/react'
|
||||
import { api, ApiError, type Contact } from '../../lib/api'
|
||||
|
||||
export function Messages() {
|
||||
const [messages, setMessages] = useState<Contact[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
let active = true
|
||||
api
|
||||
.getMessage()
|
||||
.then((res) => {
|
||||
if (active) setMessages(res.messages)
|
||||
})
|
||||
.catch((err) => {
|
||||
if (active) {
|
||||
setError(err instanceof ApiError ? err.message : 'Erreur lors du chargement des messages.')
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
if (active) setLoading(false)
|
||||
})
|
||||
return () => {
|
||||
active = false
|
||||
}
|
||||
}, [])
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Stack align="center" py={20}>
|
||||
<Spinner />
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Alert status="error" borderRadius="md">
|
||||
<AlertIcon />
|
||||
{error}
|
||||
</Alert>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Stack spacing={6}>
|
||||
<Stack spacing={1}>
|
||||
<Heading size="lg">Messages de contact</Heading>
|
||||
<Text color="gray.400">{messages.length} message(s) reçu(s)</Text>
|
||||
</Stack>
|
||||
|
||||
{messages.length === 0 ? (
|
||||
<Box bg="bg-surface" borderWidth="1px" borderColor="chakra-border-color" borderRadius="lg" p={8}>
|
||||
<Text color="gray.400">Aucun message pour le moment.</Text>
|
||||
</Box>
|
||||
) : (
|
||||
<Box
|
||||
bg="bg-surface"
|
||||
borderWidth="1px"
|
||||
borderColor="chakra-border-color"
|
||||
borderRadius="lg"
|
||||
overflowX="auto"
|
||||
>
|
||||
<Table variant="simple" size="sm">
|
||||
<Thead>
|
||||
<Tr>
|
||||
<Th>Nom</Th>
|
||||
<Th>Telegram</Th>
|
||||
<Th>Sujet</Th>
|
||||
<Th>Message</Th>
|
||||
<Th>Reçu le</Th>
|
||||
</Tr>
|
||||
</Thead>
|
||||
<Tbody>
|
||||
{messages.map((m) => (
|
||||
<Tr key={m.id}>
|
||||
<Td fontWeight="medium">{m.username}</Td>
|
||||
<Td>
|
||||
<Badge colorScheme="blue">{m.telegram}</Badge>
|
||||
</Td>
|
||||
<Td>{m.sujet}</Td>
|
||||
<Td maxW="320px" whiteSpace="normal">
|
||||
{m.message}
|
||||
</Td>
|
||||
<Td whiteSpace="nowrap">
|
||||
{new Date(m.created_at).toLocaleString('fr-FR')}
|
||||
</Td>
|
||||
</Tr>
|
||||
))}
|
||||
</Tbody>
|
||||
</Table>
|
||||
</Box>
|
||||
)}
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
@@ -74,6 +74,7 @@ export function Leads() {
|
||||
<Tr>
|
||||
<Th>Telegram</Th>
|
||||
<Th>Statut</Th>
|
||||
<Th>Message</Th>
|
||||
<Th>Reçu le</Th>
|
||||
<Th></Th>
|
||||
</Tr>
|
||||
@@ -85,6 +86,7 @@ export function Leads() {
|
||||
<Td>
|
||||
<Badge>{l.status}</Badge>
|
||||
</Td>
|
||||
<Td fontWeight="medium">{l.message}</Td>
|
||||
<Td>{formatDate(l.created_at)}</Td>
|
||||
<Td textAlign="right">
|
||||
{isAdmin && (
|
||||
|
||||
@@ -101,12 +101,19 @@ export function Profile() {
|
||||
const [updatingUsername, setUpdatingUsername] = useState(false)
|
||||
const [updatingPassword, setUpdatingPassword] = useState(false)
|
||||
const [passwordVersion, setPasswordVersion] = useState(0)
|
||||
const [telegram, setTelegramState] = useState('')
|
||||
const [updatingTelegram, setUpdatingTelegram] = useState(false)
|
||||
const [addingTelegram, setAddingTelegram] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false
|
||||
;(async () => {
|
||||
try {
|
||||
const res = await api.me()
|
||||
if (!cancelled) setMe(res)
|
||||
const [meRes, tgRes] = await Promise.all([api.me(), api.getTelegram()])
|
||||
if (!cancelled) {
|
||||
setMe(meRes)
|
||||
setTelegramState(tgRes.telegram ?? '')
|
||||
}
|
||||
} catch (err) {
|
||||
if (err instanceof ApiError && err.status === 401) {
|
||||
navigate('/login')
|
||||
@@ -117,9 +124,7 @@ export function Profile() {
|
||||
if (!cancelled) setLoading(false)
|
||||
}
|
||||
})()
|
||||
return () => {
|
||||
cancelled = true
|
||||
}
|
||||
return () => { cancelled = true }
|
||||
}, [navigate, toast])
|
||||
|
||||
const handleUpdateUsername = async (newUsername: string) => {
|
||||
@@ -175,7 +180,32 @@ export function Profile() {
|
||||
setPasswordVersion(v => v + 1) // vide le champ après tentative
|
||||
}
|
||||
}
|
||||
|
||||
const handleUpdateTelegram = async (newTelegram: string) => {
|
||||
const trimmed = newTelegram.trim()
|
||||
if (!trimmed) {
|
||||
setAddingTelegram(false)
|
||||
return
|
||||
}
|
||||
setUpdatingTelegram(true)
|
||||
try {
|
||||
const res = await api.setTelegram(trimmed)
|
||||
setTelegramState(res.telegram)
|
||||
setAddingTelegram(false)
|
||||
toast({ status: 'success', title: 'Telegram enregistré' })
|
||||
} catch (err) {
|
||||
if (err instanceof ApiError && err.status === 401) {
|
||||
navigate('/login')
|
||||
return
|
||||
}
|
||||
toast({
|
||||
status: 'error',
|
||||
title: "Impossible d'enregistrer le Telegram",
|
||||
description: err instanceof ApiError ? err.message : undefined,
|
||||
})
|
||||
} finally {
|
||||
setUpdatingTelegram(false)
|
||||
}
|
||||
}
|
||||
const handleLogout = async () => {
|
||||
setLoggingOut(true)
|
||||
try {
|
||||
@@ -285,7 +315,44 @@ export function Profile() {
|
||||
</HStack>
|
||||
</Editable>
|
||||
</Stat>
|
||||
|
||||
<Stat>
|
||||
<StatLabel>Telegram</StatLabel>
|
||||
{telegram ? (
|
||||
<Editable
|
||||
key={telegram}
|
||||
defaultValue={telegram}
|
||||
onSubmit={handleUpdateTelegram}
|
||||
isDisabled={updatingTelegram}
|
||||
submitOnBlur={false}
|
||||
>
|
||||
<HStack spacing={2}>
|
||||
<EditablePreview as={StatNumber} fontSize="md" fontFamily="mono" />
|
||||
<EditableInput fontSize="md" fontFamily="mono" />
|
||||
<EditableUsernameControls />
|
||||
</HStack>
|
||||
</Editable>
|
||||
) : addingTelegram ? (
|
||||
<Editable
|
||||
defaultValue=""
|
||||
placeholder="@monpseudo"
|
||||
startWithEditView
|
||||
onSubmit={handleUpdateTelegram}
|
||||
onCancel={() => setAddingTelegram(false)}
|
||||
isDisabled={updatingTelegram}
|
||||
submitOnBlur={false}
|
||||
>
|
||||
<HStack spacing={2}>
|
||||
<EditablePreview as={StatNumber} fontSize="md" fontFamily="mono" />
|
||||
<EditableInput fontSize="md" fontFamily="mono" />
|
||||
<EditableUsernameControls />
|
||||
</HStack>
|
||||
</Editable>
|
||||
) : (
|
||||
<Button size="sm" variant="outline" onClick={() => setAddingTelegram(true)}>
|
||||
Ajouter mon Telegram
|
||||
</Button>
|
||||
)}
|
||||
</Stat>
|
||||
<Stat>
|
||||
<StatLabel>Expire le</StatLabel>
|
||||
<StatNumber fontSize="md">{formatDate(me.expired_at)}</StatNumber>
|
||||
|
||||
Reference in New Issue
Block a user