Prettier success messages

api.go

@@ -72,7 +72,7 @@ func serveAPI(c *requestContext, w http.ResponseWriter, r *http.Request) (int, e
 	case "resource":
 		return resourceHandler(c, w, r)
 	case "users":
-		if !c.us.Admin && !(r.URL.Path == "/self" && r.Method == http.MethodPut) {
+		if !c.us.Admin && !((r.URL.Path == "/change-password" || r.URL.Path == "/change-css") && r.Method == http.MethodPut) {
 			return http.StatusForbidden, nil
 		}
 
@@ -503,7 +503,7 @@ func usersPutHandler(c *requestContext, w http.ResponseWriter, r *http.Request)
 	sid = strings.TrimSuffix(sid, "/")
 
 	id, err := strconv.Atoi(sid)
-	if err != nil && sid != "self" {
+	if err != nil && sid != "change-password" && sid != "change-css" {
 		return http.StatusNotFound, err
 	}
 
@@ -520,8 +520,11 @@ func usersPutHandler(c *requestContext, w http.ResponseWriter, r *http.Request)
 		return http.StatusBadRequest, errors.New("Invalid JSON")
 	}
 
-	if sid == "self" {
-		if u.Password != "" {
+	if sid == "change-password" {
+		if u.Password == "" {
+			return http.StatusBadRequest, errors.New("Password cannot be empty")
+		}
+
 		pw, err := hashPassword(u.Password)
 		if err != nil {
 			return http.StatusInternalServerError, err
@@ -536,7 +539,7 @@ func usersPutHandler(c *requestContext, w http.ResponseWriter, r *http.Request)
 		return http.StatusOK, nil
 	}
 
-		if u.CSS != "" {
+	if sid == "change-css" {
 		c.us.CSS = u.CSS
 		err = c.fm.db.UpdateField(&User{ID: c.us.ID}, "CSS", u.CSS)
 		if err != nil {
@@ -546,9 +549,6 @@ func usersPutHandler(c *requestContext, w http.ResponseWriter, r *http.Request)
 		return http.StatusOK, nil
 	}
 
-		return http.StatusBadRequest, errors.New("Password or CSS is missing")
-	}
-
 	// The username and the filesystem cannot be empty.
 	if u.Username == "" || u.FileSystem == "" {
 		return http.StatusBadRequest, errors.New("Username, password or scope are empty")

assets/src/components/Files.vue

@@ -66,10 +66,6 @@ export default {
   watch: {
     '$route': 'fetchData',
     'reload': function () {
-      this.$store.commit('setReload', false)
-      this.$store.commit('resetSelected')
-      this.$store.commit('multiple', false)
-      this.$store.commit('closeHovers')
       this.fetchData()
     }
   },
@@ -82,6 +78,12 @@ export default {
   methods: {
     ...mapMutations([ 'setLoading' ]),
     fetchData () {
+      // Reset view information.
+      this.$store.commit('setReload', false)
+      this.$store.commit('resetSelected')
+      this.$store.commit('multiple', false)
+      this.$store.commit('closeHovers')
+
       // Set loading to true and reset the error.
       this.setLoading(true)
       this.error = null

assets/src/components/Main.vue

@@ -3,7 +3,7 @@
     <site-header></site-header>
     <sidebar></sidebar>
     <main>
-      <router-view></router-view>
+      <router-view v-on:css-updated="updateCSS"></router-view>
     </main>
     <prompts></prompts>
   </div>
@@ -23,12 +23,23 @@ export default {
     SiteHeader,
     Prompts
   },
-  watch: {
-    '$route': function () {
-      // Reset selected items and multiple selection.
-      this.$store.commit('resetSelected')
-      this.$store.commit('multiple', false)
-      this.$store.commit('closeHovers')
+  mounted () {
+    this.updateCSS()
+  },
+  methods: {
+    updateCSS () {
+      let css = this.$store.state.user.css
+
+      let style = document.querySelector('style[title="user-css"]')
+      if (style !== undefined && style !== null) {
+        style.parentElement.removeChild(style)
+      }
+
+      style = document.createElement('style')
+      style.title = 'user-css'
+      style.type = 'text/css'
+      style.appendChild(document.createTextNode(css))
+      document.head.appendChild(style)
     }
   }
 }

assets/src/components/Settings.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState, mapMutations } from 'vuex'
 import api from '@/utils/api'
 
 export default {
@@ -50,6 +50,7 @@ export default {
     this.css = this.user.css
   },
   methods: {
+    ...mapMutations([ 'showSuccess' ]),
     changePassword (event) {
       event.preventDefault()
 
@@ -58,8 +59,7 @@ export default {
       }
 
       api.updatePassword(this.password).then(() => {
-        console.log('Success')
-        // TODO: show success
+        this.showSuccess('Password updated!')
       }).catch(e => {
         this.$store.commit('showError', e)
       })
@@ -68,8 +68,9 @@ export default {
       event.preventDefault()
 
       api.updateCSS(this.css).then(() => {
-        console.log('Success')
-        // TODO: show success
+        this.$store.commit('setUserCSS', this.css)
+        this.$emit('css-updated')
+        this.showSuccess('Styles updated!')
       }).catch(e => {
         this.$store.commit('showError', e)
       })

assets/src/components/User.vue

@@ -90,7 +90,10 @@ export default {
   },
   methods: {
     fetchData () {
-      if (this.$route.path === '/users/new') return
+      if (this.$route.path === '/users/new') {
+        this.reset()
+        return
+      }
 
       api.getUser(this.$route.params[0]).then(user => {
         this.id = user.ID
@@ -125,6 +128,19 @@ export default {
         this.$router.push({ path: '/users/new' })
       })
     },
+    reset () {
+      this.id = 0
+      this.admin = false
+      this.allowNew = false
+      this.allowEdit = false
+      this.allowCommands = false
+      this.password = ''
+      this.username = ''
+      this.filesystem = ''
+      this.rules = ''
+      this.css = ''
+      this.commands = ''
+    },
     save (event) {
       event.preventDefault()
       let user = this.parseForm()
@@ -132,6 +148,7 @@ export default {
       if (this.$route.path === '/users/new') {
         api.newUser(user).then(location => {
           this.$router.push({ path: location })
+          this.$store.commit('showSuccess', 'User created!')
         }).catch(e => {
           this.$store.commit('showError', e)
         })
@@ -140,7 +157,7 @@ export default {
       }
 
       api.updateUser(user).then(location => {
-        this.$router.push({ path: location })
+        this.$store.commit('showSuccess', 'User updated!')
       }).catch(e => {
         this.$store.commit('showError', e)
       })

assets/src/components/prompts/Prompts.vue

@@ -9,6 +9,7 @@
     <info v-else-if="showInfo"></info>
     <move v-else-if="showMove"></move>
     <error v-else-if="showError"></error>
+    <success v-else-if="showSuccess"></success>
 
     <div v-show="showOverlay" @click="resetPrompts" class="overlay"></div>
   </div>
@@ -22,6 +23,7 @@ import Rename from './Rename'
 import Download from './Download'
 import Move from './Move'
 import Error from './Error'
+import Success from './Success'
 import NewFile from './NewFile'
 import NewDir from './NewDir'
 import { mapState } from 'vuex'
@@ -34,6 +36,7 @@ export default {
     Rename,
     Error,
     Download,
+    Success,
     Move,
     NewFile,
     NewDir,
@@ -42,6 +45,7 @@ export default {
   computed: {
     ...mapState(['show']),
     showError: function () { return this.show === 'error' },
+    showSuccess: function () { return this.show === 'success' },
     showInfo: function () { return this.show === 'info' },
     showHelp: function () { return this.show === 'help' },
     showDelete: function () { return this.show === 'delete' },

assets/src/components/prompts/Success.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="prompt success">
+    <i class="material-icons">done</i>
+    <h3>{{ $store.state.showMessage }}</h3>
+    <div>
+      <button @click="close" autofocus>OK</button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'success',
+  methods: {
+    close () {
+      this.$store.commit('closeHovers')
+    }
+  }
+}
+</script>

assets/src/css/prompts.css

@@ -64,6 +64,7 @@
   background-color: #e9eaeb;
 }
 
+.prompt.success i,
 .prompt.error i {
   color: #F44336;
   display: block;
@@ -72,6 +73,7 @@
   font-size: 5em;
 }
 
+.prompt.success h3,
 .prompt.error h3 {
   text-align: center;
 }
@@ -80,6 +82,14 @@
   background-color: #F44336
 }
 
+.prompt.success i {
+  color: #8BC34A;
+}
+
+.prompt.success button {
+  background-color: #8BC34A;
+}
+
 
 /* * * * * * * * * * * * * * * *
  *        PROMPT - MOVE        *

assets/src/store/mutations.js

@@ -14,17 +14,16 @@ const mutations = {
   },
   showError: (state, value) => {
     state.show = 'error'
-
-    if (typeof value !== 'object') {
     state.showMessage = value
-      return
-    }
-
-    state.showMessage = value.message
+  },
+  showSuccess: (state, value) => {
+    state.show = 'success'
+    state.showMessage = value
   },
   setLoading: (state, value) => { state.loading = value },
   setReload: (state, value) => { state.reload = value },
   setUser: (state, value) => (state.user = value),
+  setUserCSS: (state, value) => (state.user.css = value),
   setJWT: (state, value) => (state.jwt = value),
   multiple: (state, value) => (state.multiple = value),
   addSelected: (state, value) => (state.selected.push(value)),

assets/src/utils/api.js

@@ -277,7 +277,7 @@ function updateUser (user) {
 function updatePassword (password) {
   return new Promise((resolve, reject) => {
     let request = new window.XMLHttpRequest()
-    request.open('PUT', `${store.state.baseURL}/api/users/self`, true)
+    request.open('PUT', `${store.state.baseURL}/api/users/change-password`, true)
     request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
 
     request.onload = () => {
@@ -298,7 +298,7 @@ function updatePassword (password) {
 function updateCSS (css) {
   return new Promise((resolve, reject) => {
     let request = new window.XMLHttpRequest()
-    request.open('PUT', `${store.state.baseURL}/api/users/self`, true)
+    request.open('PUT', `${store.state.baseURL}/api/users/change-css`, true)
     request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
 
     request.onload = () => {