only let uploader edit image

src/common/Types.ts

@@ -155,6 +155,7 @@ export interface PieceChange {
 export interface ImageInfo
 {
   id: number
+  uploaderUserId: number|null
   filename: string
   url: string
   title: string

src/dbpatches/03_users.sqlite

@@ -0,0 +1,45 @@
+CREATE TABLE users (
+  id INTEGER PRIMARY KEY AUTOINCREMENT,
+
+  created TIMESTAMP NOT NULL,
+
+  client_id TEXT NOT NULL,
+  client_secret TEXT NOT NULL
+);
+
+CREATE TABLE images_new (
+  id INTEGER PRIMARY KEY AUTOINCREMENT,
+  uploader_user_id INTEGER,
+
+  created TIMESTAMP NOT NULL,
+
+  filename TEXT NOT NULL UNIQUE,
+  filename_original TEXT NOT NULL,
+  title TEXT NOT NULL,
+
+  width INTEGER NOT NULL,
+  height INTEGER NOT NULL
+);
+
+CREATE TABLE image_x_category_new (
+  image_id INTEGER NOT NULL,
+  category_id INTEGER NOT NULL
+);
+
+INSERT INTO images_new
+SELECT id, NULL, created, filename, filename_original, title, width, height
+FROM images;
+
+INSERT INTO image_x_category_new
+SELECT image_id, category_id
+FROM image_x_category;
+
+PRAGMA foreign_keys = OFF;
+
+DROP TABLE images;
+DROP TABLE image_x_category;
+
+ALTER TABLE images_new RENAME TO images;
+ALTER TABLE image_x_category_new RENAME TO image_x_category;
+
+PRAGMA foreign_keys = ON;

src/frontend/components/ImageTeaser.vue

@@ -3,7 +3,7 @@
     class="imageteaser"
     :style="style"
     @click="onClick">
-    <div class="btn edit" @click.stop="onEditClick">✏️</div>
+    <div class="btn edit" v-if="canEdit" @click.stop="onEditClick">✏️</div>
   </div>
 </template>
 <script lang="ts">
@@ -18,12 +18,18 @@ export default defineComponent({
     },
   },
   computed: {
-    style (): object {
+    style(): object {
       const url = this.image.url.replace('uploads/', 'uploads/r/') + '-150x100.webp'
       return {
         'backgroundImage': `url("${url}")`,
       }
     },
+    canEdit(): boolean {
+      if (!this.$me.id) {
+        return false
+      }
+      return this.$me.id === this.image.uploaderUserId
+    },
   },
   emits: {
     click: null,

src/frontend/main.ts

@@ -32,8 +32,11 @@ import xhr from './xhr'
   xhr.setClientId(clientId)
   xhr.setClientSecret(clientSecret)
 
-  const res = await xhr.get(`/api/conf`, {})
-  const conf = await res.json()
+  const meRes = await xhr.get(`/api/me`, {})
+  const me = await meRes.json()
+
+  const confRes = await xhr.get(`/api/conf`, {})
+  const conf = await confRes.json()
 
   const router = VueRouter.createRouter({
     history: VueRouter.createWebHashHistory(),
@@ -53,6 +56,7 @@ import xhr from './xhr'
   })
 
   const app = Vue.createApp(App)
+  app.config.globalProperties.$me = me
   app.config.globalProperties.$config = conf
   app.config.globalProperties.$clientId = clientId
   app.use(router)

src/frontend/views/NewGame.vue

@@ -179,9 +179,13 @@ export default defineComponent({
       return await res.json()
     },
     async onSaveImageClick(data: any) {
-      await this.saveImage(data)
-      this.dialog = ''
-      await this.loadImages()
+      const res = await this.saveImage(data)
+      if (res.ok) {
+        this.dialog = ''
+        await this.loadImages()
+      } else {
+        alert(res.error)
+      }
     },
     async postToGalleryClick(data: any) {
       this.uploading = 'postToGallery'

src/server/Images.ts

@@ -85,6 +85,7 @@ const imageFromDb = (db: Db, imageId: number): ImageInfo => {
   const i = db.get('images', { id: imageId })
   return {
     id: i.id,
+    uploaderUserId: i.uploader_user_id,
     filename: i.filename,
     url: `${UPLOAD_URL}/${encodeURIComponent(i.filename)}`,
     title: i.title,
@@ -130,6 +131,7 @@ inner join images i on i.id = ixc.image_id ${where.sql};
 
   return images.map(i => ({
     id: i.id as number,
+    uploaderUserId: i.uploader_user_id,
     filename: i.filename,
     url: `${UPLOAD_URL}/${encodeURIComponent(i.filename)}`,
     title: i.title,
@@ -151,6 +153,7 @@ const allImagesFromDisk = (
     .filter(f => f.toLowerCase().match(/\.(jpe?g|webp|png)$/))
     .map(f => ({
       id: 0,
+      uploaderUserId: null,
       filename: f,
       url: `${UPLOAD_URL}/${encodeURIComponent(f)}`,
       title: f.replace(/\.[a-z]+$/, ''),

src/server/main.ts

@@ -57,6 +57,17 @@ const storage = multer.diskStorage({
 })
 const upload = multer({storage}).single('file');
 
+app.get('/api/me', (req, res): void => {
+  let user = db.get('users', {
+    'client_id': req.headers['client-id'],
+    'client_secret': req.headers['client-secret'],
+  })
+  res.send({
+    id: user ? user.id : null,
+    created: user ? user.created : null,
+  })
+})
+
 app.get('/api/conf', (req, res): void => {
   res.send({
     WS_ADDRESS: config.ws.connectstring,
@@ -147,7 +158,25 @@ const setImageTags = (db: Db, imageId: number, tags: string[]): void => {
 }
 
 app.post('/api/save-image', express.json(), (req, res): void => {
+  let user = db.get('users', {
+    'client_id': req.headers['client-id'],
+    'client_secret': req.headers['client-secret'],
+  })
+  let userId: number|null = null
+  if (user) {
+    userId = parseInt(user.id, 10)
+  } else {
+    res.status(403).send({ ok: false, error: 'forbidden' })
+    return
+  }
+
   const data = req.body as SaveImageRequestData
+  let image = db.get('images', {id: data.id})
+  if (parseInt(image.uploader_user_id, 10) !== userId) {
+    res.status(403).send({ ok: false, error: 'forbidden' })
+    return
+  }
+
   db.update('images', {
     title: data.title,
   }, {
@@ -176,10 +205,26 @@ app.post('/api/upload', (req, res): void => {
       res.status(400).send("Something went wrong!");
     }
 
+    let user = db.get('users', {
+      'client_id': req.headers['client-id'],
+      'client_secret': req.headers['client-secret'],
+    })
+    let userId: number|null = null
+    if (user) {
+      userId = user.id
+    } else {
+      userId = db.insert('users', {
+        'client_id': req.headers['client-id'],
+        'client_secret': req.headers['client-secret'],
+        'created': Time.timestamp(),
+      }) as number
+    }
+
     const dim = await Images.getDimensions(
       `${UPLOAD_DIR}/${req.file.filename}`
     )
     const imageId = db.insert('images', {
+      uploader_user_id: userId,
       filename: req.file.filename,
       filename_original: req.file.originalname,
       title: req.body.title || '',