Added account edit & model add/edit improvement

src/components/LayersEditor.vue

@@ -15,13 +15,13 @@
       <b-input :placeholder="'Layer ' + index + ' name'" v-model="layer.name"/>
 
       <p class="control">
-        <b-upload v-model="file" accept=".py">
+        <b-upload v-model="layer.file" accept=".py">
           <a class="button is-primary">
             <b-icon icon="upload"></b-icon>
             <span>Upload layer file</span>
           </a>
         </b-upload>
-        <span class="file-name" v-if="file">{{ file.name }}</span>
+        <span class="file-name" v-if="layer.file">{{ layer.file.name }}</span>
       </p>
 
     </b-field>

src/components/LoginForm.vue

@@ -5,6 +5,8 @@
         <p class="modal-card-title">Login</p>
       </header>
       <section class="modal-card-body">
+        <h2 class="subtitle has-text-danger">{{errorMessage}}</h2>
+
         <b-field label="Email">
           <b-input type="email" v-model="email" placeholder="email" required/>
         </b-field>
@@ -29,7 +31,8 @@ export default {
   data () {
     return {
       email: '',
-      password: ''
+      password: '',
+      errorMessage: null
     }
   },
   methods: {
@@ -40,7 +43,7 @@ export default {
         this.$parent.close()
         this.$router.go()
       } else {
-        this.$buefy.toast.open('Email ou mot de passe incorect')
+        this.errorMessage = 'Email or password incorect'
       }
     },
     async login (email, password) {

src/components/ModelUpload.vue

+<template>
+  <div class="modal-card">
+    <b-progress :value="progress" size="is-large" show-value :type="status">
+      {{message}}
+    </b-progress>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ModelUpload',
+  props: {
+    model: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    }
+  },
+  data () {
+    return {
+      message: '',
+      progress: 0,
+      status: 'is-primary',
+      stausMessage: '',
+      modelId: null
+    }
+  },
+  mounted () {
+    this.saveModel()
+  },
+  methods: {
+    setProgress (step) {
+      switch (step) {
+        case 0:
+          this.message = 'Sending description'
+          this.progress = 25
+          break
+        case 1:
+          this.message = 'Sending model file'
+          this.progress = 50
+          break
+        case 2:
+          this.message = 'Sending custom layers model'
+          this.progress = 75
+          break
+        case 3:
+          this.message = 'Upload completed !'
+          this.progress = 100
+          this.status = 'is-success'
+          break
+      }
+    },
+    setError (message) {
+      this.message = message
+      this.status = 'is-danger'
+    },
+    async saveModel () {
+      this.setProgress(0)
+      var response = await this.uploadModel()
+      if (response.error) {
+        this.setError(response.message)
+        return
+      } else {
+        this.modelId = response.id
+      }
+
+      if (this.model.file !== undefined) {
+        console.log('Upload model ' + this.model.file)
+        this.setProgress(1)
+        if (!await this.uploadModelFile()) {
+          this.setError('Model upload error')
+          return
+        }
+      }
+
+      if (this.model.customLayers !== undefined) {
+        console.log('Upload layers ' + this.model.customLayers)
+        this.setProgress(2)
+        if (!await this.uploadLayers()) {
+          this.setError('Custom layer upload error')
+          return
+        }
+      }
+
+      this.setProgress(3)
+    },
+    async uploadModel () {
+      const url = this.$serverurl + 'models'
+      const token = await localStorage.getItem('token')
+      try {
+        const response = await fetch(url, {
+          method: 'POST',
+          headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json',
+            Authorization: 'Bearer ' + token
+          },
+          body: JSON.stringify({
+            name: this.model.name,
+            shortDescription: this.model.shortDescription,
+            longDescription: this.model.longDescription,
+            performance: this.model.performance,
+            tags: this.model.tags,
+            customLayers: this.model.customLayers
+          })
+        })
+        return await response.json()
+      } catch (error) {
+        return null
+      }
+    },
+    async uploadModelFile () {
+      const data = new FormData()
+      const url = this.$serverurl + 'models?id=' + this.modelId + '/upload'
+      const token = await localStorage.getItem('token')
+
+      data.append('model', this.model.file)
+
+      try {
+        const response = await fetch(url, {
+          method: 'POST',
+          headers: {
+            Authorization: 'Bearer ' + token
+          },
+          body: data
+        })
+        return response !== 200
+      } catch (error) {
+        return null
+      }
+    },
+    async uploadLayers () {
+      const token = await localStorage.getItem('token')
+      for (var i = 0; i < this.model.customLayers.length; i++) {
+        const layer = this.model.customLayers[i]
+        const data = new FormData()
+        const url = this.$serverurl + 'models?id=' + this.modelId + '/layer?id=' + i
+
+        console.log('Upload layers ' + i + ' | ' + layer.file)
+        if (layer.file === undefined) continue
+
+        data.append('layer', layer.file)
+
+        try {
+          const response = await fetch(url, {
+            method: 'POST',
+            headers: {
+              Authorization: 'Bearer ' + token
+            },
+            body: data
+          })
+          if (response !== 200) return false
+        } catch (error) {
+          return false
+        }
+      }
+      return true
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

src/components/RegisterForm.vue

@@ -5,25 +5,26 @@
         <p class="modal-card-title">Sign up</p>
       </header>
       <section class="modal-card-body">
+        <h2 class="subtitle has-text-danger">{{errorMessage}}</h2>
         <b-field label="Email">
-          <b-input type="email" v-model="email" placeholder="email" required/>
+          <b-input type="email" v-model="email" placeholder="email" required maxlength="50"/>
         </b-field>
 
         <b-field label="Username">
-          <b-input v-model="username" placeholder="username" required/>
+          <b-input v-model="username" placeholder="username" required maxlength="30"/>
         </b-field>
 
         <b-field label="Password">
-          <b-input type="password" v-model="password" password-reveal placeholder="password" required/>
+          <b-input type="password" v-model="password" password-reveal placeholder="password" required maxlength="50"/>
         </b-field>
 
         <b-field label="Confirm password">
-          <b-input type="password" v-model="passwordConfirm" password-reveal placeholder="password" required/>
+          <b-input type="password" v-model="passwordConfirm" password-reveal placeholder="password" required maxlength="50"/>
         </b-field>
 
       </section>
       <footer class="modal-card-foot">
-        <button class="button is-primary">Make account</button>
+        <button class="button is-primary" @click="onRegister">Make account</button>
       </footer>
     </div>
   </form>
@@ -37,7 +38,46 @@ export default {
       email: '',
       username: '',
       password: '',
-      passwordConfirm: ''
+      passwordConfirm: '',
+      errorMessage: null
+    }
+  },
+  methods: {
+    async onRegister () {
+      if (this.password !== this.passwordConfirm) {
+        this.errorMessage = 'Passwords are different'
+        return
+      }
+      const response = await this.register(this.username, this.email, this.password)
+      if (response.error) {
+        this.errorMessage = response.message
+      } else {
+        await localStorage.setItem('token', response.token)
+        this.$parent.close()
+        this.$router.go()
+      }
+    },
+    async register (username, email, password) {
+      const url = this.$serverurl + 'user'
+      try {
+        const response = await fetch(
+          url, {
+            method: 'POST',
+            headers: {
+              Accept: 'application/json',
+              'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+              email: email,
+              username: username,
+              password: password
+            })
+          }
+        )
+        return await response.json()
+      } catch (error) {
+        return null
+      }
     }
   }
 }

src/router/index.js

@@ -25,6 +25,11 @@ const routes = [
     name: 'Search',
     component: () => import('../views/Search.vue')
   },
+  {
+    path: '/useredit',
+    name: 'UserEdit',
+    component: () => import('../views/UserEdit.vue')
+  },
   {
     path: '/model',
     name: 'Model',

src/views/About.vue

 <template>
-  <div class="about">
+  <div class="about container">
     <h1>About page</h1>
   </div>
 </template>

src/views/Account.vue

@@ -3,8 +3,22 @@
     <div class="box">
       <h1 class="title">Welcome {{account.username}}</h1>
       <div class="buttons">
-        <b-button tag="router-link" :to="{ name: 'ModelAdd' }">Add new model</b-button>
-        <b-button>Change account details</b-button>
+        <b-button
+         icon-left="plus"
+         type="is-info"
+         tag="router-link"
+         :to="{ name: 'ModelAdd' }"
+        >
+        Add new model
+        </b-button>
+        <b-button
+         icon-left="pencil"
+         type="is-info"
+         tag="router-link"
+         :to="{ name: 'UserEdit' }"
+        >
+        Change account details
+        </b-button>
       </div>
     </div>
     <div class="box">
@@ -46,5 +60,7 @@ export default {
 </script>
 
 <style scoped>
-
+.account{
+  margin-top: 20px;
+}
 </style>

src/views/Docs.vue

 <template>
-  <div class="docs">
+  <div class="docs container">
     <h1>Documentation page</h1>
   </div>
 </template>

src/views/Model.vue

@@ -38,7 +38,14 @@
         </div>
       </div>
       <div class="box">
+        <b-tabs>
+          <b-tab-item label="Read me">
             <div class="content" v-html="compiledLongDescription"></div>
+          </b-tab-item>
+
+          <b-tab-item label="Layers">
+          </b-tab-item>
+        </b-tabs>
       </div>
       <div class="box">
         <Comments v-bind:comments="model.comments"/>

src/views/ModelAdd.vue

@@ -3,25 +3,25 @@
     <b-steps v-model="activeStep">
       <b-step-item step="1" label="Description" clickable>
         <b-field label="Model name">
-          <b-input maxlength="30" size="is-large"/>
+          <b-input maxlength="30" size="is-large" v-model="model.name"/>
         </b-field>
 
         <b-field label="Short description">
-          <b-input maxlength="200" type="textarea"/>
+          <b-input maxlength="200" type="textarea" v-model="model.shortDescription"/>
         </b-field>
 
         <b-field label="Long description">
-          <markdownEditor/>
+          <markdownEditor v-bind:input="model.longDescription"/>
         </b-field>
       </b-step-item>
 
       <b-step-item step="2" label="Tags" clickable>
-        <tagEditor/>
+        <tagEditor v-bind:tags="model.tags"/>
       </b-step-item>
 
       <b-step-item step="3" label="Files" clickable>
         <b-field label="Model">
-          <b-upload v-model="dropFiles" drag-drop expanded>
+          <b-upload v-model="model.file" drag-drop expanded>
             <section class="section">
               <div class="content has-text-centered">
                 <p>
@@ -35,14 +35,18 @@
       </b-step-item>
 
       <b-step-item step="4" label="Custom layers" clickable>
-        <layersEditor/>
+        <layersEditor v-bind:layers="model.customLayers"/>
       </b-step-item>
 
       <b-step-item step="5" label="Finish" clickable>
-        <b-button expanded size="is-large" type="is-success">Confirm and upload</b-button>
+        <b-button expanded size="is-large" type="is-success" @click="openUploadModal">Confirm and upload</b-button>
       </b-step-item>
 
     </b-steps>
+
+    <b-modal :active.sync="isUploadModalActive" has-modal-card trap-focus aria-role="dialog" aria-modal>
+      <ModelUpload v-bind:model="model"/>
+    </b-modal>
   </div>
 </template>
 
@@ -50,17 +54,26 @@
 import markdownEditor from '@/components/MarkdownEditor.vue'
 import tagEditor from '@/components/TagEditor.vue'
 import layersEditor from '@/components/LayersEditor.vue'
+import ModelUpload from '@/components/ModelUpload.vue'
 
 export default {
   name: 'ModelAdd',
   components: {
     markdownEditor,
     tagEditor,
-    layersEditor
+    layersEditor,
+    ModelUpload
   },
   data () {
     return {
-      activeStep: 0
+      model: {},
+      activeStep: 0,
+      isUploadModalActive: false
+    }
+  },
+  methods: {
+    openUploadModal () {
+      this.isUploadModalActive = true
     }
   }
 }

src/views/ModelEdit.vue

@@ -25,7 +25,7 @@
       <div class="columns">
         <div class="column">
           <b-field label="Model">
-            <b-upload v-model="dropFiles" drag-drop expanded>
+            <b-upload v-model="model.file" drag-drop expanded>
               <section class="section">
                 <div class="content has-text-centered">
                   <p>
@@ -45,9 +45,13 @@
 
     </div>
     <div class="box">
-      <b-button >Cancel</b-button>
-      <b-button type="is-success">Save</b-button>
+      <b-button tag="router-link" :to="{ name: 'Account' }">Cancel</b-button>
+      <b-button type="is-success" @click="openUploadModal">Save</b-button>
     </div>
+
+    <b-modal :active.sync="isUploadModalActive" has-modal-card trap-focus aria-role="dialog" aria-modal>
+      <ModelUpload v-bind:model="model"/>
+    </b-modal>
   </div>
 </template>
 
@@ -55,13 +59,15 @@
 import markdownEditor from '@/components/MarkdownEditor.vue'
 import tagEditor from '@/components/TagEditor.vue'
 import layersEditor from '@/components/LayersEditor.vue'
+import ModelUpload from '@/components/ModelUpload.vue'
 
 export default {
   name: 'ModelEdit',
   components: {
     markdownEditor,
     tagEditor,
-    layersEditor
+    layersEditor,
+    ModelUpload
   },
   props: {
     model: {
@@ -71,15 +77,23 @@ export default {
       }
     }
   },
+  data () {
+    return {
+      isUploadModalActive: false
+    }
+  },
   methods: {
-    async saveModel () {
-
+    openUploadModal () {
+      this.isUploadModalActive = true
     }
   }
 }
 </script>
 
 <style scoped>
+.modelEdit{
+  margin-top: 20px;
+}
 .rightColumn {
   border-left: 2px solid whitesmoke;
 }

src/views/UserEdit.vue

+<template>
+  <div class="userEdit container">
+    <h1 class="title">Account details</h1>
+
+    <b-field label="Email">
+      <b-input v-model="user.email" type="email"  maxlength="50"/>
+    </b-field>
+
+    <b-field label="Username">
+      <b-input v-model="user.username" maxlength="30"/>
+    </b-field>
+
+    <b-field label="Password">
+      <b-input type="password" v-model="user.password" password-reveal maxlength="50"/>
+    </b-field>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UserEdit',
+  props: {
+    user: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    }
+  },
+  methods: {
+    saveUser () {
+
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>