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>

models.py

@@ -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):

templates/events/display.html

@@ -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
-          <q-input filled dense v-model.trim="formDialog.data.email" type="email" label="Your email "></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>
+              type="submit"
-            <q-btn @click="resetForm" flat color="grey" class="q-ml-auto">Cancel</q-btn>
+              >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
+        <q-btn
-          ticket!</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}"
+            <qrcode
-              class="rounded-borders"></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
-
+          .post(`/events/api/v1/tickets/{{ event_id }}`, {
-          .get(
+            name: self.formDialog.data.name,
-            '/events/api/v1/tickets/' +
+            email: self.formDialog.data.email
-            '{{ event_id }}' +
+          })
-            '/' +
-            self.formDialog.data.name +
-            '/' +
-            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/' +
+                  `/events/api/v1/tickets/{{ event_id }}/${self.paymentCheck}`,
-                  '{{ 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 =
+                      window.location.href = `/events/ticket/${res.data.ticket_id}`
-                        '/events/ticket/' + res.data.ticket_id
                     }, 5000)
                   }
                 })
@@ -192,4 +230,4 @@
     }
   })
 </script>
-{% endblock %}
+{% endblock %}

templates/events/index.html

@@ -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"
+        <q-table
-          :pagination.sync="eventsTable.pagination">
+          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"
+                <q-btn
-                  :href="props.row.displayUrl" target="_blank"></q-btn>
+                  unelevated
-                <q-btn unelevated dense size="xs" icon="how_to_reg" :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
+                  dense
-                  type="a" :href="'/events/register/' + props.row.id" target="_blank"></q-btn>
+                  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"
+                <q-btn
-                  color="light-blue"></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"
+        <q-table
-          :pagination.sync="ticketsTable.pagination">
+          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"
+                <q-btn
-                  :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'" type="a" :href="'/events/ticket/' + props.row.id"
+                  unelevated
-                  target="_blank"></q-btn>
+                  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"
+            <q-select
-              label="Wallet *">
+              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"
+        <q-input
-          hint="Markdown supported"></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"
+            <q-select
-              :options="currencies"></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"
+            <q-input
-              label="Amount of tickets "></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
-          <q-btn v-else unelevated color="primary"
+            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>
+            type="submit"
-          <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
+            >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: 'id', align: 'left', label: 'ID', field: 'id'},
-            { name: 'name', align: 'left', label: 'Name', field: 'name' },
+            {name: 'name', align: 'left', label: 'Name', field: 'name'},
-            { name: 'info', align: 'left', label: 'Info', field: 'info' },
+            {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: 'id', align: 'left', label: 'ID', field: 'id'},
-            { name: 'event', align: 'left', label: 'Event', field: 'event' },
+            {name: 'event', align: 'left', label: 'Event', field: 'event'},
-            { name: 'name', align: 'left', label: 'Name', field: 'name' },
+            {name: 'name', align: 'left', label: 'Name', field: 'name'},
-            { name: 'email', align: 'left', label: 'Email', field: 'email' },
+            {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 %}

views_api.py

@@ -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)