Sanitize/Validate name field (#20)

* escape name
* add email pydantic validation (API)
* format prettier
* don't allow slash on email also
* make regex const
* use string literals
* make get ticket a POST
* email regex


Co-authored-by: Vlad Stan <stan.v.vlad@gmail.com>
This commit is contained in:
Tiago Vasconcelos 2024-01-26 14:30:14 +00:00 committed by GitHub
parent 5e391a04bc
commit f468183631
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 252 additions and 82 deletions

View file

@ -1,5 +1,5 @@
from fastapi import Query
from pydantic import BaseModel
from pydantic import BaseModel, EmailStr
from typing import Optional
@ -17,7 +17,7 @@ class CreateEvent(BaseModel):
class CreateTicket(BaseModel):
name: str
email: str
email: EmailStr
class Event(BaseModel):

View file

@ -13,14 +13,33 @@
<q-card-section class="q-pa-none">
<h5 class="q-mt-none">Buy Ticket</h5>
<q-form @submit="Invoice()" class="q-gutter-md">
<q-input filled dense v-model.trim="formDialog.data.name" type="name" label="Your name "></q-input>
<q-input filled dense v-model.trim="formDialog.data.email" type="email" label="Your email "></q-input>
<q-input
filled
dense
v-model.trim="formDialog.data.name"
label="Your name "
:rules="[val => nameValidation(val)]"
></q-input>
<q-input
filled
dense
v-model.trim="formDialog.data.email"
type="email"
label="Your email "
:rules="[val => emailValidation(val)]"
></q-input>
<div class="row q-mt-lg">
<q-btn unelevated color="primary"
<q-btn
unelevated
color="primary"
:disable="formDialog.data.name == '' || formDialog.data.email == '' || Boolean(paymentReq)"
type="submit">Submit</q-btn>
<q-btn @click="resetForm" flat color="grey" class="q-ml-auto">Cancel</q-btn>
type="submit"
>Submit</q-btn
>
<q-btn @click="resetForm" flat color="grey" class="q-ml-auto"
>Cancel</q-btn
>
</div>
</q-form>
</q-card-section>
@ -28,8 +47,15 @@
<q-card v-show="ticketLink.show" class="q-pa-lg">
<div class="text-center q-mb-lg">
<q-btn unelevated size="xl" :href="ticketLink.data.link" target="_blank" color="primary" type="a">Link to your
ticket!</q-btn>
<q-btn
unelevated
size="xl"
:href="ticketLink.data.link"
target="_blank"
color="primary"
type="a"
>Link to your ticket!</q-btn
>
<br /><br />
<p>You'll be redirected in a few moments...</p>
</div>
@ -37,19 +63,27 @@
</div>
<q-dialog v-model="receive.show" position="top" @hide="closeReceiveDialog">
<q-card v-if="!receive.paymentReq" class="q-pa-lg q-pt-xl lnbits__dialog-card">
<q-card
v-if="!receive.paymentReq"
class="q-pa-lg q-pt-xl lnbits__dialog-card"
>
</q-card>
<q-card v-else class="q-pa-lg q-pt-xl lnbits__dialog-card">
<div class="text-center q-mb-lg">
<a class="text-secondary" :href="'lightning:' + receive.paymentReq">
<q-responsive :ratio="1" class="q-mx-xl">
<qrcode :value="'lightning:' + receive.paymentReq.toUpperCase()" :options="{width: 340}"
class="rounded-borders"></qrcode>
<qrcode
:value="'lightning:' + receive.paymentReq.toUpperCase()"
:options="{width: 340}"
class="rounded-borders"
></qrcode>
</q-responsive>
</a>
</div>
<div class="row q-mt-lg">
<q-btn outline color="grey" @click="copyText(receive.paymentReq)">Copy invoice</q-btn>
<q-btn outline color="grey" @click="copyText(receive.paymentReq)"
>Copy invoice</q-btn
>
<q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
</div>
</q-card>
@ -108,20 +142,27 @@
dismissMsg()
clearInterval(paymentChecker)
setTimeout(function () { }, 10000)
setTimeout(function () {}, 10000)
},
nameValidation(val) {
const regex = /[`!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/g
return (
!regex.test(val) ||
'Please enter valid name. No special character allowed.'
)
},
emailValidation(val) {
let regex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/g
return !regex.test(val) || 'Please enter valid email.'
},
Invoice: function () {
var self = this
axios
.get(
'/events/api/v1/tickets/' +
'{{ event_id }}' +
'/' +
self.formDialog.data.name +
'/' +
self.formDialog.data.email
)
.post(`/events/api/v1/tickets/{{ event_id }}`, {
name: self.formDialog.data.name,
email: self.formDialog.data.email
})
.then(function (response) {
self.paymentReq = response.data.payment_request
self.paymentCheck = response.data.payment_hash
@ -140,9 +181,7 @@
paymentChecker = setInterval(function () {
axios
.post(
'/events/api/v1/tickets/' +
'{{ event_id }}/' +
self.paymentCheck,
`/events/api/v1/tickets/{{ event_id }}/${self.paymentCheck}`,
{
event: '{{ event_id }}',
event_name: '{{ event_name }}',
@ -171,12 +210,11 @@
self.ticketLink = {
show: true,
data: {
link: '/events/ticket/' + res.data.ticket_id
link: `/events/ticket/${res.data.ticket_id}`
}
}
setTimeout(function () {
window.location.href =
'/events/ticket/' + res.data.ticket_id
window.location.href = `/events/ticket/${res.data.ticket_id}`
}, 5000)
}
})
@ -192,4 +230,4 @@
}
})
</script>
{% endblock %}
{% endblock %}

View file

@ -4,7 +4,9 @@
<div class="col-12 col-md-8 col-lg-7 q-gutter-y-md">
<q-card>
<q-card-section>
<q-btn unelevated color="primary" @click="formDialog.show = true">New Event</q-btn>
<q-btn unelevated color="primary" @click="formDialog.show = true"
>New Event</q-btn
>
</q-card-section>
</q-card>
@ -15,11 +17,19 @@
<h5 class="text-subtitle1 q-my-none">Events</h5>
</div>
<div class="col-auto">
<q-btn flat color="grey" @click="exporteventsCSV">Export to CSV</q-btn>
<q-btn flat color="grey" @click="exporteventsCSV"
>Export to CSV</q-btn
>
</div>
</div>
<q-table dense flat :data="events" row-key="id" :columns="eventsTable.columns"
:pagination.sync="eventsTable.pagination">
<q-table
dense
flat
:data="events"
row-key="id"
:columns="eventsTable.columns"
:pagination.sync="eventsTable.pagination"
>
{% raw %}
<template v-slot:header="props">
<q-tr :props="props">
@ -35,20 +45,49 @@
<template v-slot:body="props">
<q-tr :props="props">
<q-td auto-width>
<q-btn unelevated dense size="xs" icon="link" :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'" type="a"
:href="props.row.displayUrl" target="_blank"></q-btn>
<q-btn unelevated dense size="xs" icon="how_to_reg" :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
type="a" :href="'/events/register/' + props.row.id" target="_blank"></q-btn>
<q-btn
unelevated
dense
size="xs"
icon="link"
:color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
type="a"
:href="props.row.displayUrl"
target="_blank"
></q-btn>
<q-btn
unelevated
dense
size="xs"
icon="how_to_reg"
:color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
type="a"
:href="'/events/register/' + props.row.id"
target="_blank"
></q-btn>
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
{{ col.value }}
</q-td>
<q-td auto-width>
<q-btn flat dense size="xs" @click="updateformDialog(props.row.id)" icon="edit"
color="light-blue"></q-btn>
<q-btn
flat
dense
size="xs"
@click="updateformDialog(props.row.id)"
icon="edit"
color="light-blue"
></q-btn>
</q-td>
<q-td auto-width>
<q-btn flat dense size="xs" @click="deleteEvent(props.row.id)" icon="cancel" color="pink"></q-btn>
<q-btn
flat
dense
size="xs"
@click="deleteEvent(props.row.id)"
icon="cancel"
color="pink"
></q-btn>
</q-td>
</q-tr>
</template>
@ -64,11 +103,19 @@
<h5 class="text-subtitle1 q-my-none">Tickets</h5>
</div>
<div class="col-auto">
<q-btn flat color="grey" @click="exportticketsCSV">Export to CSV</q-btn>
<q-btn flat color="grey" @click="exportticketsCSV"
>Export to CSV</q-btn
>
</div>
</div>
<q-table dense flat :data="tickets" row-key="id" :columns="ticketsTable.columns"
:pagination.sync="ticketsTable.pagination">
<q-table
dense
flat
:data="tickets"
row-key="id"
:columns="ticketsTable.columns"
:pagination.sync="ticketsTable.pagination"
>
{% raw %}
<template v-slot:header="props">
<q-tr :props="props">
@ -81,9 +128,16 @@
<template v-slot:body="props">
<q-tr :props="props">
<q-td auto-width>
<q-btn unelevated dense size="xs" icon="local_activity"
:color="($q.dark.isActive) ? 'grey-7' : 'grey-5'" type="a" :href="'/events/ticket/' + props.row.id"
target="_blank"></q-btn>
<q-btn
unelevated
dense
size="xs"
icon="local_activity"
:color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
type="a"
:href="'/events/ticket/' + props.row.id"
target="_blank"
></q-btn>
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
@ -91,7 +145,14 @@
</q-td>
<q-td auto-width>
<q-btn flat dense size="xs" @click="deleteTicket(props.row.id)" icon="cancel" color="pink"></q-btn>
<q-btn
flat
dense
size="xs"
@click="deleteTicket(props.row.id)"
icon="cancel"
color="pink"
></q-btn>
</q-td>
</q-tr>
</template>
@ -119,61 +180,125 @@
<q-form @submit="sendEventData" class="q-gutter-md">
<div class="row">
<div class="col">
<q-input filled dense v-model.trim="formDialog.data.name" type="name" label="Title of event "></q-input>
<q-input
filled
dense
v-model.trim="formDialog.data.name"
type="name"
label="Title of event "
></q-input>
</div>
<div class="col q-pl-sm">
<q-select filled dense emit-value v-model="formDialog.data.wallet" :options="g.user.walletOptions"
label="Wallet *">
<q-select
filled
dense
emit-value
v-model="formDialog.data.wallet"
:options="g.user.walletOptions"
label="Wallet *"
>
</q-select>
</div>
</div>
<q-input filled dense v-model.trim="formDialog.data.info" type="textarea" label="Info about the event"
hint="Markdown supported"></q-input>
<q-input
filled
dense
v-model.trim="formDialog.data.info"
type="textarea"
label="Info about the event"
hint="Markdown supported"
></q-input>
<div class="row">
<div class="col-4">Ticket closing date</div>
<div class="col-8">
<q-input filled dense v-model.trim="formDialog.data.closing_date" type="date"></q-input>
<q-input
filled
dense
v-model.trim="formDialog.data.closing_date"
type="date"
></q-input>
</div>
</div>
<div class="row">
<div class="col-4">Event begins</div>
<div class="col-8">
<q-input filled dense v-model.trim="formDialog.data.event_start_date" type="date"></q-input>
<q-input
filled
dense
v-model.trim="formDialog.data.event_start_date"
type="date"
></q-input>
</div>
</div>
<div class="row">
<div class="col-4">Event ends</div>
<div class="col-8">
<q-input filled dense v-model.trim="formDialog.data.event_end_date" type="date"></q-input>
<q-input
filled
dense
v-model.trim="formDialog.data.event_end_date"
type="date"
></q-input>
</div>
</div>
<div class="row q-col-gutter-sm">
<div class="col">
<q-select filled dense v-model="formDialog.data.currency" type="text" label="Unit"
:options="currencies"></q-select>
<q-select
filled
dense
v-model="formDialog.data.currency"
type="text"
label="Unit"
:options="currencies"
></q-select>
</div>
<div class="col">
<q-input filled dense v-model.number="formDialog.data.amount_tickets" type="number"
label="Amount of tickets "></q-input>
<q-input
filled
dense
v-model.number="formDialog.data.amount_tickets"
type="number"
label="Amount of tickets "
></q-input>
</div>
<div class="col">
<q-input filled dense v-model.number="formDialog.data.price_per_ticket" type="number"
<q-input
filled
dense
v-model.number="formDialog.data.price_per_ticket"
type="number"
:label="'Price (' + formDialog.data.currency + ') *'"
:step="formDialog.data.currency != 'sat' ? '0.01' : '1'"
:mask="formDialog.data.currency != 'sat' ? '#.##' : '#'" fill-mask="0" reverse-fill-mask></q-input>
:mask="formDialog.data.currency != 'sat' ? '#.##' : '#'"
fill-mask="0"
reverse-fill-mask
></q-input>
</div>
</div>
<div class="row q-mt-lg">
<q-btn v-if="formDialog.data.id" unelevated color="primary" type="submit">Update Event</q-btn>
<q-btn v-else unelevated color="primary"
<q-btn
v-if="formDialog.data.id"
unelevated
color="primary"
type="submit"
>Update Event</q-btn
>
<q-btn
v-else
unelevated
color="primary"
:disable="formDialog.data.wallet == null || formDialog.data.name == null || formDialog.data.info == null || formDialog.data.closing_date == null || formDialog.data.event_start_date == null || formDialog.data.event_end_date == null || formDialog.data.amount_tickets == null || formDialog.data.price_per_ticket == null"
type="submit">Create Event</q-btn>
<q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
type="submit"
>Create Event</q-btn
>
<q-btn v-close-popup flat color="grey" class="q-ml-auto"
>Cancel</q-btn
>
</div>
</q-form>
</q-card>
@ -206,9 +331,9 @@
currencies: [],
eventsTable: {
columns: [
{ name: 'id', align: 'left', label: 'ID', field: 'id' },
{ name: 'name', align: 'left', label: 'Name', field: 'name' },
{ name: 'info', align: 'left', label: 'Info', field: 'info' },
{name: 'id', align: 'left', label: 'ID', field: 'id'},
{name: 'name', align: 'left', label: 'Name', field: 'name'},
{name: 'info', align: 'left', label: 'Info', field: 'info'},
{
name: 'event_start_date',
align: 'left',
@ -260,10 +385,10 @@
},
ticketsTable: {
columns: [
{ name: 'id', align: 'left', label: 'ID', field: 'id' },
{ name: 'event', align: 'left', label: 'Event', field: 'event' },
{ name: 'name', align: 'left', label: 'Name', field: 'name' },
{ name: 'email', align: 'left', label: 'Email', field: 'email' },
{name: 'id', align: 'left', label: 'ID', field: 'id'},
{name: 'event', align: 'left', label: 'Event', field: 'event'},
{name: 'name', align: 'left', label: 'Name', field: 'name'},
{name: 'email', align: 'left', label: 'Email', field: 'email'},
{
name: 'registered',
align: 'left',
@ -298,7 +423,7 @@
},
deleteTicket: function (ticketId) {
var self = this
var tickets = _.findWhere(this.tickets, { id: ticketId })
var tickets = _.findWhere(this.tickets, {id: ticketId})
LNbits.utils
.confirmDialog('Are you sure you want to delete this ticket')
@ -307,7 +432,7 @@
.request(
'DELETE',
'/events/api/v1/tickets/' + ticketId,
_.findWhere(self.g.user.wallets, { id: tickets.wallet }).inkey
_.findWhere(self.g.user.wallets, {id: tickets.wallet}).inkey
)
.then(function (response) {
self.tickets = _.reject(self.tickets, function (obj) {
@ -366,9 +491,9 @@
})
},
updateformDialog: function (formId) {
var link = _.findWhere(this.events, { id: formId })
var link = _.findWhere(this.events, {id: formId})
this.formDialog.data = { ...link }
this.formDialog.data = {...link}
this.formDialog.show = true
},
@ -396,7 +521,7 @@
},
deleteEvent: function (eventsId) {
var self = this
var events = _.findWhere(this.events, { id: eventsId })
var events = _.findWhere(this.events, {id: eventsId})
LNbits.utils
.confirmDialog('Are you sure you want to delete this form link?')
@ -405,7 +530,7 @@
.request(
'DELETE',
'/events/api/v1/events/' + eventsId,
_.findWhere(self.g.user.wallets, { id: events.wallet }).inkey
_.findWhere(self.g.user.wallets, {id: events.wallet}).inkey
)
.then(function (response) {
self.events = _.reject(self.events, function (obj) {
@ -422,7 +547,7 @@
},
async getCurrencies() {
try {
const { data } = await LNbits.api.request(
const {data} = await LNbits.api.request(
'GET',
'/events/api/v1/currencies',
this.inkey
@ -444,4 +569,4 @@
}
})
</script>
{% endblock %}
{% endblock %}

View file

@ -28,7 +28,7 @@ from .crud import (
set_ticket_paid,
update_event,
)
from .models import CreateEvent
from .models import CreateEvent, CreateTicket
# Events
@ -101,6 +101,13 @@ async def api_tickets(
return [ticket.dict() for ticket in await get_tickets(wallet_ids)]
@events_ext.post("/api/v1/tickets/{event_id}")
async def api_ticket_create(event_id: str, data: CreateTicket):
name = data.name
email = data.email
return await api_ticket_make_ticket(event_id, name, email)
@events_ext.get("/api/v1/tickets/{event_id}/{name}/{email}")
async def api_ticket_make_ticket(event_id, name, email):
event = await get_event(event_id)