Add a form for users to report illegal content

src/backend/api.js

@@ -32,6 +32,14 @@
 
   return resp.data.success
 }
+export const complaint = async payload => {
+  const resp = await axios.post('/complaint/sendMessage', payload).catch(ex => {
+    const { errors = {} } = ex.response.data
+    throw errors
+  })
+
+  return resp.data.success
+}
 export const forgottenPassword = async email => axios.post('/user/forgotPassword', email)
 export const resetPassword = async payload => axios.post('/user/resetPassword', payload)
 export const sendVerifyEmail = async () => (await axios.post('/user/sendVerifyEmail')).data.message === 'Already verified!'
@@ -81,8 +89,8 @@
 export const wikiDiscovery = async ({ sort, direction, active, currentPage, resultsPerPage }) => {
   return (await axios.get('/wiki', {
     params: {
       sort: sort,
       direction: direction,
       is_active: active,
       page: currentPage,
       per_page: resultsPerPage

src/backend/mocks/default_handlers.js

@@ -8,7 +8,7 @@
 function makeUser (email = 'test@local') {
   return {
     id: 1,
     email: email,
     verified: true,
     created_at: '2020-01-01',
     updated_at: '2020-01-01'
@@ -69,7 +69,7 @@
 
   let wikis = [...Array(75).keys()].map((id) => {
     const wiki = {
       id: id,
       domain: id + '-wikibase.wbaas.localhost',
       sitename: id + ' - ' + names[id % names.length],
       wiki_site_stats: null,
@@ -162,6 +162,7 @@
   rest.post(/\/api\/user\/resetPassword$/, (_, res, ctx) => res(ctx.status(200))),
   rest.post(/\/api\/user\/sendVerifyEmail$/, (_, res, ctx) => res(ctx.json({ message: 'Already verified' }))),
   rest.post(/\/api\/user\/verifyEmail$/, (_, res, ctx) => res(ctx.status(200))),
+  rest.post(/\/api\/complaint\/sendMessage$/, (req, res, ctx) => res(ctx.status(200))),
   rest.post(/\/api\/contact\/sendMessage$/, (req, res, ctx) => {
     if (req.body.name === 'recaptchaError') {
       return res(ctx.status(401, 'Mocked recaptcha Error'))

src/components/Pages/Complaint.vue

@@ -0,0 +1,200 @@
+<template>
+  <v-main>
+    <v-responsive max-width="600px" min-width="250px" >
+      <p id="titleReportIllegalContent">Reporting illegal content</p>
+      <p id="pageContent">Please use this form to report any content that you consider to be illegal. After sending the email,
+      which is generated by clicking the ‘Report illegal content’ button, your report will be delivered to
+      us and handled in accordance with Regulation (EU) 2022/2065, Article 16 (‘Digital Services Act’).
+      If you supply an email, you will then automatically receive a confirmation of receipt and, as soon
+      as we have processed your report, we will inform you of any action taken. Please be aware that
+      no feedback will be provided on the action taken if the report is deemed abusive (e.g. spam or
+      unfounded report). In the event of repeated abusive use, we reserve the right to block you.</p>
+      <v-form ref="form" v-model="isvalid" v-on:submit.prevent>
+        <v-responsive max-width="519px">
+          <v-textarea
+              id="contentURL"
+              v-model="contenturl"
+              :rules="[() => !!contenturl || 'This field is required']"
+              label="URL(s) for the content in question"
+              required
+            />
+            <v-textarea
+              id="inputMessage"
+              counter="1000"
+              v-model="message"
+              :rules="[v => v.length <= 1000 || 'Message must be 1000 characters or less', () => !!message || 'This field is required']"
+              auto-grow
+              label="Reason why the information in question is illegal content"
+              required
+            />
+            <v-input
+              />
+
+            <v-text-field
+              id="contactname"
+              v-model="name"
+              :rules="[v => v.length <= 300 || 'Max 300 characters']"
+              label="Your name (optional)"
+            />
+            <v-text-field
+              id="contactemail"
+              v-model="email"
+              :rules="[v => v.length <= 300 || 'Max 300 characters']"
+              label="Email address (optional)"
+              persistent-hint
+              hint ="Receiving a confirmation receipt and updates requires an email"
+            />
+        </v-responsive>
+          <v-checkbox
+            label="I am convinced in good faith that the information and statements contained in
+                    the report are correct and complete."
+            v-model="accepted"
+            :rules="[() => !!accepted || '']"
+            required
+          />
+          <div align="right">
+            <v-btn color="primary" @click="send" class="mt-6">
+              Report illegal content
+            </v-btn>
+          </div>
+      </v-form>
+      <v-snackbar color="success" elevation="24" v-model="successMessage">
+        Report successfully submitted. Thanks!
+        <template v-slot:action>
+          <v-btn
+            text
+            variant="text"
+            @click="closeAlert"
+          >
+            Close
+          </v-btn>
+        </template>
+      </v-snackbar>
+      <v-snackbar color="error" elevation="24" v-model="errorMessage" multi-line>
+        Something went wrong with sending your message. Please try again.
+        <template v-slot:action>
+          <v-btn
+            text
+            variant="text"
+            @click="closeAlert"
+          >
+            Close
+          </v-btn>
+        </template>
+      </v-snackbar>
+    </v-responsive>
+  </v-main>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    contenturl: '',
+    message: '',
+    name: '',
+    email: '',
+    successMessage: false,
+    errorMessage: false
+  }),
+  methods: {
+    closeAlert () {
+      this.successMessage = false
+      this.errorMessage = false
+    },
+    send () {
+      const url = this.contenturl
+      const message = this.message
+      const name = this.name
+      const email = this.email
+      if (this.$refs.form.validate() === true) {
+      //  this.$emit('send')
+        this.$api.complaint(
+          {
+            name,
+            url,
+            email,
+            message
+          })
+          .then(success => this.createSuccessful())
+          .catch(errors => {
+            this.resetErrorState()
+            this.createError()
+            // If the api gave use details of the error, then use them
+            if (errors) {
+              if (errors.name) {
+                this.hasError = true
+                this.error.inputUrl = errors.url[0]
+              }
+              if (errors.subject) {
+                this.hasError = true
+                this.error.inputMessage = errors.Message[0]
+              }
+            }
+            // Otherwise show a general error state
+            if (!this.hasError) {
+              this.setGeneralErrorState()
+            }
+          })
+      }
+    },
+    createSuccessful () {
+      this.successMessage = true
+    },
+    createError () {
+      this.errorMessage = true
+    },
+    resetErrorState () {
+      this.hasError = false
+      this.error = []
+    },
+    setGeneralErrorState (error = 'Something went wrong.') {
+      this.resetErrorState()
+      this.hasError = true
+      this.error.inputName = error
+      this.error.inputSubject = error
+    }
+  }
+}
+</script>
+
+<style>
+.formfields{
+  color: var(--black-087, rgba(0, 0, 0, 0.87));
+
+  /* v-text/body-1 */
+  font-family: Roboto;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px; /* 150% */
+  letter-spacing: 0.5px;
+}
+#pageContent{
+  color: #000;
+  font-feature-settings: 'liga' off, 'clig' off;
+  font-family: Lato;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 24px; /* 171.429% */
+}
+#titleReportIllegalContent{
+  align-self: stretch;
+  color: #000;
+  font-feature-settings: 'liga' off, 'clig' off;
+  font-family: Lato;
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 40px; /* 125% */
+}
+#contentURL {
+  display: flex;
+  height: 120px;
+  padding: 8px 0px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  align-self: stretch;
+}
+</style>

src/router/index.js

@@ -18,6 +18,7 @@ import TermsOfUse from '@/components/Pages/TermsOfUse'
 import Privacy from '@/components/Pages/Privacy/Privacy'
 import User from '@/components/Pages/User'
 import Discovery from '@/components/Pages/Discovery/Discovery'
+import Complaint from '@/components/Pages/Complaint.vue'
 
 Vue.use(Router)
 
@@ -42,6 +43,11 @@ const router = new Router({
       name: 'Contact',
       component: Contact
     },
+    {
+      path: '/complaint',
+      name: 'Complaint',
+      component: Complaint
+    },
     {
       path: '/create-account',
       name: 'CreateAccount',