From 46e8c9376feb4f79838445dc566096f50d7cc680 Mon Sep 17 00:00:00 2001
From: Dan Elbert <dan.elbert@gmail.com>
Date: Sat, 9 Jun 2018 12:36:46 -0500
Subject: [PATCH] UI fixes

---
 app/controllers/users_controller.rb           | 32 ++++----
 app/javascript/components/App.vue             |  8 +-
 app/javascript/components/AppNavbar.vue       | 13 ++--
 .../components/AppValidationErrors.vue        | 21 +++++
 app/javascript/components/IngredientEdit.vue  |  7 ++
 app/javascript/components/LogEdit.vue         |  9 ++-
 .../components/TheAdminUserEditor.vue         | 15 ++++
 .../components/TheAdminUserList.vue           | 55 +++++++++++++
 .../components/TheIngredientCreator.vue       |  5 +-
 .../components/TheIngredientEditor.vue        |  5 +-
 app/javascript/components/TheLogCreator.vue   |  7 +-
 app/javascript/components/TheLogEditor.vue    |  5 +-
 .../components/TheRecipeCreator.vue           |  5 +-
 app/javascript/components/TheRecipeEditor.vue |  6 +-
 app/javascript/components/TheUserCreator.vue  | 57 ++++++++++++++
 app/javascript/components/TheUserEditor.vue   | 77 +++++++++++++++++++
 app/javascript/components/UserEdit.vue        | 26 +++++++
 app/javascript/lib/Api.js                     | 32 ++++++++
 app/javascript/lib/Errors.js                  |  6 +-
 app/javascript/lib/GlobalMixins.js            |  8 +-
 app/javascript/packs/application.js           |  2 +
 app/javascript/router.js                      | 30 ++++++++
 app/views/admin/users/index.json.jbuilder     |  5 ++
 app/views/users/show.json.jbuilder            |  8 +-
 24 files changed, 401 insertions(+), 43 deletions(-)
 create mode 100644 app/javascript/components/AppValidationErrors.vue
 create mode 100644 app/javascript/components/TheAdminUserEditor.vue
 create mode 100644 app/javascript/components/TheAdminUserList.vue
 create mode 100644 app/javascript/components/TheUserCreator.vue
 create mode 100644 app/javascript/components/TheUserEditor.vue
 create mode 100644 app/javascript/components/UserEdit.vue
 create mode 100644 app/views/admin/users/index.json.jbuilder

diff --git a/app/controllers/users_controller.rb b/app/controllers/users_controller.rb
index d2c7289..8a090fc 100644
--- a/app/controllers/users_controller.rb
+++ b/app/controllers/users_controller.rb
@@ -6,11 +6,6 @@ class UsersController < ApplicationController
   skip_before_action :verify_authenticity_token, only: [:verify_login]
 
   def show
-    if current_user
-      render json: { id: current_user.id, name: current_user.display_name, admin: current_user.admin? }
-    else
-      render json: nil
-    end
   end
 
   def login
@@ -48,11 +43,15 @@ class UsersController < ApplicationController
   def create
     @user = User.new(user_params)
 
-    if @user.save
-      set_current_user(@user)
-      redirect_to root_path, notice: 'User was successfully created.'
-    else
-      render action: :new
+    respond_to do |format|
+      if @user.save
+        set_current_user(@user)
+        format.html { redirect_to root_path, notice: 'User created.' }
+        format.json { render :show, status: :created, location: @user }
+      else
+        format.html { render :new }
+        format.json { render json: @user.errors, status: :unprocessable_entity }
+      end
     end
   end
 
@@ -62,10 +61,15 @@ class UsersController < ApplicationController
 
   def update
     @user = current_user
-    if @user.update(user_params)
-      redirect_to root_path, notice: 'User account updated'
-    else
-      render action: 'edit'
+
+    respond_to do |format|
+      if @user.update(user_params)
+        format.html { redirect_to root_path, notice: 'User updated.' }
+        format.json { render :show, status: :created, location: @user }
+      else
+        format.html { render :edit }
+        format.json { render json: @user.errors, status: :unprocessable_entity }
+      end
     end
   end
 
diff --git a/app/javascript/components/App.vue b/app/javascript/components/App.vue
index 6a5c8e0..3df7376 100644
--- a/app/javascript/components/App.vue
+++ b/app/javascript/components/App.vue
@@ -33,12 +33,6 @@
       })
     },
 
-    methods: {
-      ...mapMutations([
-        'setUser'
-      ])
-    },
-
     watch: {
       isLoading(val) {
         if (val) {
@@ -51,7 +45,7 @@
 
     created() {
       if (this.user === null && this.authChecked === false) {
-        this.loadResource(api.getCurrentUser().then(user => this.setUser(user)));
+        this.checkAuthentication();
       }
 
       // Hard coded values taken directly from Bulma css
diff --git a/app/javascript/components/AppNavbar.vue b/app/javascript/components/AppNavbar.vue
index 8c076db..4125205 100644
--- a/app/javascript/components/AppNavbar.vue
+++ b/app/javascript/components/AppNavbar.vue
@@ -13,14 +13,14 @@
       </div>
       <div class="navbar-menu" :class="{ 'is-active': menuActive}">
         <div class="navbar-start">
-          <a v-if="updateAvailable" href="#" @click.prevent="updateApp">UPDATE AVAILABLE!</a>
+          <a class="navbar-item" v-if="updateAvailable" href="#" @click.prevent="updateApp">UPDATE AVAILABLE!</a>
           <router-link to="/" class="navbar-item">Recipes</router-link>
           <router-link to="/ingredients" class="navbar-item">Ingredients</router-link>
           <router-link to="/calculator" class="navbar-item">Calculator</router-link>
           <router-link v-if="isLoggedIn" to="/logs" class="navbar-item">Log</router-link>
           <router-link v-if="isLoggedIn" to="/notes" class="navbar-item">Notes</router-link>
           <router-link to="/about" class="navbar-item">About</router-link>
-          <a v-if="isAdmin" class="navbar-item" href="/admin/users">Admin</a>
+          <router-link v-if="isAdmin" to="/admin/users" class="navbar-item">Admin</router-link>
 
         </div>
         <div class="navbar-end">
@@ -30,14 +30,17 @@
                 {{ user.name }}
               </a>
               <div class="navbar-dropdown is-boxed">
-                <a class="navbar-item" href="#">
+                <router-link to="/user/edit" class="navbar-item">
                   Profile
-                </a>
+                </router-link>
                 <router-link to="/logout" class="navbar-item">Logout</router-link>
               </div>
             </div>
             <div v-else>
-              <user-login></user-login>
+              <user-login class="navbar-link"></user-login>
+              <div class="navbar-dropdown is-boxed">
+                <router-link to="/user/new" class="navbar-item">Create Account</router-link>
+              </div>
             </div>
 
           </div>
diff --git a/app/javascript/components/AppValidationErrors.vue b/app/javascript/components/AppValidationErrors.vue
new file mode 100644
index 0000000..661bbfb
--- /dev/null
+++ b/app/javascript/components/AppValidationErrors.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <div class="notification is-danger" v-if="errors !== null" v-for="(errs, prop) in errors">
+      {{ prop }}: {{ errs.join(", ") }}
+    </div>
+  </div>
+</template>
+
+<script>
+
+  export default {
+    props: {
+      errors: {
+        required: false,
+        type: Object,
+        default: {}
+      }
+    }
+  }
+
+</script>
\ No newline at end of file
diff --git a/app/javascript/components/IngredientEdit.vue b/app/javascript/components/IngredientEdit.vue
index 4fd70ba..28c09ee 100644
--- a/app/javascript/components/IngredientEdit.vue
+++ b/app/javascript/components/IngredientEdit.vue
@@ -2,6 +2,8 @@
   <div>
     <h1 class="title">{{action}} {{ingredient.name || "[Unnamed Ingredient]"}}</h1>
 
+    <app-validation-errors :errors="validationErrors"></app-validation-errors>
+
     <div class="field">
       <label class="label is-small-mobile">Name</label>
       <div class="control">
@@ -143,6 +145,11 @@
         required: true,
         type: Object
       },
+      validationErrors: {
+        required: false,
+        type: Object,
+        default: {}
+      },
       action: {
         required: false,
         type: String,
diff --git a/app/javascript/components/LogEdit.vue b/app/javascript/components/LogEdit.vue
index dc89660..4536b10 100644
--- a/app/javascript/components/LogEdit.vue
+++ b/app/javascript/components/LogEdit.vue
@@ -4,6 +4,8 @@
 
     <h1 class="title">Creating Log for {{ log.recipe.name }}</h1>
 
+    <app-validation-errors :errors="validationErrors"></app-validation-errors>
+
     <div class="columns">
       <div class="column">
         <app-date-picker v-model="log.date" label="Date"></app-date-picker>
@@ -38,7 +40,12 @@
       log: {
         required: true,
         type: Object
-      }
+      },
+      validationErrors: {
+        required: false,
+        type: Object,
+        default: {}
+      },
     },
 
     components: {
diff --git a/app/javascript/components/TheAdminUserEditor.vue b/app/javascript/components/TheAdminUserEditor.vue
new file mode 100644
index 0000000..12d0159
--- /dev/null
+++ b/app/javascript/components/TheAdminUserEditor.vue
@@ -0,0 +1,15 @@
+<template>
+
+</template>
+
+<script>
+
+  export default {
+
+  }
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/app/javascript/components/TheAdminUserList.vue b/app/javascript/components/TheAdminUserList.vue
new file mode 100644
index 0000000..c5c3715
--- /dev/null
+++ b/app/javascript/components/TheAdminUserList.vue
@@ -0,0 +1,55 @@
+<template>
+
+  <div>
+
+    <h1 class="title">User List</h1>
+
+    <table class="table">
+      <thead>
+      <tr>
+        <th>Name</th>
+        <th>Email</th>
+        <th>Admin?</th>
+        <th></th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr v-for="u in userList" :key="u.id">
+        <td>{{u.name}}</td>
+        <td>{{u.email}}</td>
+        <td>{{u.admin}}</td>
+        <td>
+          <button type="button" class="button is-danger">X</button>
+        </td>
+      </tr>
+      </tbody>
+    </table>
+
+  </div>
+
+</template>
+
+<script>
+
+  import api from "../lib/Api";
+
+  export default {
+    data() {
+      return {
+        userList: []
+      };
+    },
+
+    created() {
+      this.loadResource(
+        api.getAdminUserList()
+          .then(list => this.userList = list)
+      );
+    }
+  }
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/app/javascript/components/TheIngredientCreator.vue b/app/javascript/components/TheIngredientCreator.vue
index 435f600..24c7afa 100644
--- a/app/javascript/components/TheIngredientCreator.vue
+++ b/app/javascript/components/TheIngredientCreator.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
 
-    <ingredient-edit :ingredient="ingredient" action="Creating"></ingredient-edit>
+    <ingredient-edit :ingredient="ingredient" :validation-errors="validationErrors" action="Creating"></ingredient-edit>
 
     <button type="button" class="button is-primary" @click="save">Save</button>
     <router-link class="button is-secondary" to="/ingredients">Cancel</router-link>
@@ -51,12 +51,13 @@
           lipids: null,
           ingredient_units: []
         },
-        validationErrors: null
+        validationErrors: {}
       }
     },
 
     methods: {
       save() {
+        this.validationErrors = {}
         this.loadResource(
           api.postIngredient(this.ingredient)
             .then(() => this.$router.push('/ingredients'))
diff --git a/app/javascript/components/TheIngredientEditor.vue b/app/javascript/components/TheIngredientEditor.vue
index 150caba..25b7035 100644
--- a/app/javascript/components/TheIngredientEditor.vue
+++ b/app/javascript/components/TheIngredientEditor.vue
@@ -5,7 +5,7 @@
       Loading...
     </div>
     <div v-else>
-      <ingredient-edit :ingredient="ingredient"></ingredient-edit>
+      <ingredient-edit :ingredient="ingredient" :validation-errors="validationErrors"></ingredient-edit>
     </div>
 
     <button type="button" class="button is-primary" @click="save">Save</button>
@@ -25,7 +25,7 @@
     data: function () {
       return {
         ingredient: null,
-        validationErrors: null
+        validationErrors: {}
       };
     },
 
@@ -37,6 +37,7 @@
 
     methods: {
       save() {
+        this.validationErrors = {};
         this.loadResource(
           api.patchIngredient(this.ingredient)
             .then(() => this.$router.push({name: 'ingredient', params: {id: this.ingredientId }}))
diff --git a/app/javascript/components/TheLogCreator.vue b/app/javascript/components/TheLogCreator.vue
index d657620..3d8db85 100644
--- a/app/javascript/components/TheLogCreator.vue
+++ b/app/javascript/components/TheLogCreator.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
 
-    <log-edit v-if="log.recipe !== null" :log="log">
+    <log-edit v-if="log.recipe !== null" :log="log" :validation-errors="validationErrors">
       <div class="buttons">
         <button type="button" class="button is-primary" @click="save">Save Log</button>
         <router-link class="button is-secondary" to="/">Cancel</router-link>
@@ -26,7 +26,7 @@
   export default {
     data() {
       return {
-        validationErrors: [],
+        validationErrors: {},
         log: {
           date: null,
           rating: null,
@@ -45,6 +45,7 @@
     methods: {
       save() {
         this.log.original_recipe_id = this.recipeId;
+        this.validationErrors = {};
 
         this.loadResource(
           api.postLog(this.log)
@@ -56,7 +57,7 @@
 
     created() {
       this.loadResource(
-        api.getRecipe(this.recipeId, data => this.log.recipe = data)
+        api.getRecipe(this.recipeId, null, null, null, data => this.log.recipe = data)
       );
     },
 
diff --git a/app/javascript/components/TheLogEditor.vue b/app/javascript/components/TheLogEditor.vue
index dc084fb..8f40f14 100644
--- a/app/javascript/components/TheLogEditor.vue
+++ b/app/javascript/components/TheLogEditor.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
 
-    <log-edit v-if="log !== null" :log="log">
+    <log-edit v-if="log !== null" :log="log" :validation-errors="validationErrors">
       <div class="buttons">
         <button type="button" class="button is-primary" @click="save">Save Log</button>
         <router-link class="button is-secondary" to="/">Cancel</router-link>
@@ -26,7 +26,7 @@
   export default {
     data() {
       return {
-        validationErrors: [],
+        validationErrors: {},
         log: null
       }
     },
@@ -39,6 +39,7 @@
 
     methods: {
       save() {
+        this.validationErrors = {};
         this.loadResource(
           api.patchLog(this.log)
             .then(() => this.$router.push('/'))
diff --git a/app/javascript/components/TheRecipeCreator.vue b/app/javascript/components/TheRecipeCreator.vue
index a90412c..b492600 100644
--- a/app/javascript/components/TheRecipeCreator.vue
+++ b/app/javascript/components/TheRecipeCreator.vue
@@ -3,6 +3,8 @@
 
     <h1 class="title">Creating {{ recipe.name || "[Unamed Recipe]" }}</h1>
 
+    <app-validation-errors :errors="validationErrors"></app-validation-errors>
+
     <recipe-edit :recipe="recipe" action="Creating"></recipe-edit>
 
     <button type="button" class="button is-primary" @click="save">Save</button>
@@ -20,7 +22,7 @@
   export default {
     data() {
       return {
-        validationErrors: [],
+        validationErrors: {},
         recipe: {
           name: null,
           source: null,
@@ -37,6 +39,7 @@
 
     methods: {
       save() {
+        this.validationErrors = {};
         this.loadResource(
           api.postRecipe(this.recipe)
             .then(() => this.$router.push('/'))
diff --git a/app/javascript/components/TheRecipeEditor.vue b/app/javascript/components/TheRecipeEditor.vue
index af4a9ff..a768680 100644
--- a/app/javascript/components/TheRecipeEditor.vue
+++ b/app/javascript/components/TheRecipeEditor.vue
@@ -6,6 +6,9 @@
     </div>
     <div v-else>
       <h1 class="title">Editing {{ recipe.name || "[Unamed Recipe]" }}</h1>
+
+      <app-validation-errors :errors="validationErrors"></app-validation-errors>
+
       <recipe-edit :recipe="recipe"></recipe-edit>
     </div>
 
@@ -26,7 +29,7 @@
     data: function () {
       return {
         recipe: null,
-        validationErrors: []
+        validationErrors: {}
       }
     },
 
@@ -38,6 +41,7 @@
 
     methods: {
       save() {
+        this.validationErrors = {};
         this.loadResource(
           api.patchRecipe(this.recipe)
             .then(() => this.$router.push({name: 'recipe', params: {id: this.recipeId }}))
diff --git a/app/javascript/components/TheUserCreator.vue b/app/javascript/components/TheUserCreator.vue
new file mode 100644
index 0000000..8cdd367
--- /dev/null
+++ b/app/javascript/components/TheUserCreator.vue
@@ -0,0 +1,57 @@
+<template>
+  <div>
+
+    <h1 class="title">Create New User</h1>
+
+    <app-validation-errors :errors="validationErrors"></app-validation-errors>
+
+    <user-edit :user-obj="userObj" action="Creating"></user-edit>
+
+    <button type="button" class="button is-primary" @click="save">Save</button>
+    <router-link class="button is-secondary" to="/">Cancel</router-link>
+
+  </div>
+</template>
+
+<script>
+
+  import UserEdit from "./UserEdit";
+  import api from "../lib/Api";
+  import * as Errors from '../lib/Errors';
+
+  export default {
+    data() {
+      return {
+        validationErrors: {},
+        userObj: {
+          username: '',
+          full_name: '',
+          email: '',
+          password: '',
+          password_confirmation: ''
+        }
+      }
+    },
+
+    methods: {
+      save() {
+        this.validationErrors = {};
+        this.loadResource(
+          api.postUser(this.userObj)
+            .then(() => this.checkAuthentication())
+            .then(() => this.$router.push('/'))
+            .catch(Errors.onlyFor(Errors.ApiValidationError, err => this.validationErrors = err.validationErrors()))
+        );
+      }
+    },
+
+    components: {
+      UserEdit
+    }
+  }
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/app/javascript/components/TheUserEditor.vue b/app/javascript/components/TheUserEditor.vue
new file mode 100644
index 0000000..d5da994
--- /dev/null
+++ b/app/javascript/components/TheUserEditor.vue
@@ -0,0 +1,77 @@
+<template>
+  <div>
+
+    <h1 class="title">Edit User</h1>
+
+    <app-validation-errors :errors="validationErrors"></app-validation-errors>
+
+    <user-edit v-if="userObj != null" :user-obj="userObj" action="Creating"></user-edit>
+
+    <button type="button" class="button is-primary" @click="save">Save</button>
+    <router-link class="button is-secondary" to="/">Cancel</router-link>
+
+  </div>
+</template>
+
+<script>
+
+  import UserEdit from "./UserEdit";
+  import api from "../lib/Api";
+  import * as Errors from '../lib/Errors';
+
+  export default {
+    data() {
+      return {
+        validationErrors: {},
+        userObj: null
+      }
+    },
+
+    created() {
+      this.refreshUser();
+    },
+
+    watch: {
+      user() {
+        this.refreshUser();
+      }
+    },
+
+    methods: {
+      refreshUser() {
+        if (this.user) {
+          this.userObj = {
+            username: this.user.username,
+            full_name: this.user.full_name,
+            email: this.user.email,
+            password: '',
+            password_confirmation: ''
+          };
+        } else {
+          this.userObj = null;
+        }
+      },
+
+      save() {
+        this.validationErrors = {};
+        this.loadResource(
+          api.patchUser(this.userObj)
+            .then(() => this.checkAuthentication())
+            .then(() => {
+              this.$router.push('/');
+            })
+            .catch(Errors.onlyFor(Errors.ApiValidationError, err => this.validationErrors = err.validationErrors()))
+        );
+      }
+    },
+
+    components: {
+      UserEdit
+    }
+  }
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/app/javascript/components/UserEdit.vue b/app/javascript/components/UserEdit.vue
new file mode 100644
index 0000000..8009594
--- /dev/null
+++ b/app/javascript/components/UserEdit.vue
@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <app-text-field label="Username" v-model="userObj.username"></app-text-field>
+    <app-text-field label="Name" v-model="userObj.full_name"></app-text-field>
+    <app-text-field label="Email" v-model="userObj.email"></app-text-field>
+    <app-text-field label="Password" v-model="userObj.password"></app-text-field>
+    <app-text-field label="Password Confirmation" v-model="userObj.password_confirmation"></app-text-field>
+  </div>
+</template>
+
+<script>
+
+  export default {
+    props: {
+      userObj: {
+        required: true,
+        type: Object
+      }
+    }
+  }
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/app/javascript/lib/Api.js b/app/javascript/lib/Api.js
index dba6f46..bef827a 100644
--- a/app/javascript/lib/Api.js
+++ b/app/javascript/lib/Api.js
@@ -357,6 +357,38 @@ class Api {
     return this.patch("/logs/" + log.id, this.buildLogParams(log));
   }
 
+  getAdminUserList() {
+    return this.get("/admin/users");
+  }
+
+  postUser(userObj) {
+    const params = {
+      user: {
+        username: userObj.username,
+        full_name: userObj.full_name,
+        email: userObj.email,
+        password: userObj.password,
+        password_confirmation: userObj.password_confirmation
+      }
+    };
+
+    return this.post("/user/", params);
+  }
+
+  patchUser(userObj) {
+    const params = {
+      user: {
+        username: userObj.username,
+        full_name: userObj.full_name,
+        email: userObj.email,
+        password: userObj.password,
+        password_confirmation: userObj.password_confirmation
+      }
+    };
+
+    return this.patch("/user/", params);
+  }
+
   postLogin(username, password) {
     const params = {
       username: username,
diff --git a/app/javascript/lib/Errors.js b/app/javascript/lib/Errors.js
index 1a64519..057424f 100644
--- a/app/javascript/lib/Errors.js
+++ b/app/javascript/lib/Errors.js
@@ -42,13 +42,13 @@ ApiValidationError.prototype = Object.assign(new ApiError(), {
   name: "ApiValidationError",
 
   validationErrors: function() {
-    const errors = new Map();
+    const errors = {};
     if (this.json) {
       for (let key in this.json) {
-        errors.set(key, this.json[key]);
+        errors[key] = this.json[key];
       }
     } else {
-      errors.set("base", ["unknown error"]);
+      errors["base"] = ["unknown error"];
     }
     return errors;
   },
diff --git a/app/javascript/lib/GlobalMixins.js b/app/javascript/lib/GlobalMixins.js
index 699be15..61fbc83 100644
--- a/app/javascript/lib/GlobalMixins.js
+++ b/app/javascript/lib/GlobalMixins.js
@@ -1,6 +1,7 @@
 
 import Vue from 'vue';
 import { mapGetters, mapMutations, mapState } from 'vuex';
+import api from "../lib/Api";
 
 Vue.mixin({
   computed: {
@@ -16,7 +17,8 @@ Vue.mixin({
   methods: {
     ...mapMutations([
       'setError',
-      'setLoading'
+      'setLoading',
+      'setUser'
     ]),
 
     loadResource(promise) {
@@ -25,6 +27,10 @@ Vue.mixin({
       return promise
         .catch(err => this.setError(err))
         .then(() => this.setLoading(false));
+    },
+
+    checkAuthentication() {
+      return this.loadResource(api.getCurrentUser().then(user => this.setUser(user)));
     }
   }
 });
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index ea5db56..108d278 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -21,6 +21,7 @@ import AppPager from "../components/AppPager";
 import AppRating from "../components/AppRating";
 import AppTagEditor from "../components/AppTagEditor";
 import AppTextField from "../components/AppTextField";
+import AppValidationErrors from "../components/AppValidationErrors";
 
 Vue.component("AppAutocomplete", AppAutocomplete);
 Vue.component("AppConfirm", AppConfirm);
@@ -33,6 +34,7 @@ Vue.component("AppPager", AppPager);
 Vue.component("AppRating", AppRating);
 Vue.component("AppTagEditor", AppTagEditor);
 Vue.component("AppTextField", AppTextField);
+Vue.component("AppValidationErrors", AppValidationErrors);
 
 
 Vue.use(VueProgressBar, {
diff --git a/app/javascript/router.js b/app/javascript/router.js
index 7e97a41..20ad8ef 100644
--- a/app/javascript/router.js
+++ b/app/javascript/router.js
@@ -20,6 +20,12 @@ import TheRecipeEditor from './components/TheRecipeEditor';
 import TheRecipeCreator from './components/TheRecipeCreator';
 import TheRecipeList from './components/TheRecipeList';
 
+import TheUserCreator from './components/TheUserCreator';
+import TheUserEditor from './components/TheUserEditor';
+
+import TheAdminUserList from './components/TheAdminUserList';
+import TheAdminUserEditor from './components/TheAdminUserEditor';
+
 Vue.use(Router);
 
 const router = new Router({
@@ -116,6 +122,30 @@ router.addRoutes(
           .then(() => next("/"));
       }
     },
+
+    {
+      path: "/user/new",
+      name: "new_user",
+      component: TheUserCreator
+    },
+    {
+      path: "/user/edit",
+      name: "edit_user",
+      component: TheUserEditor
+    },
+
+    {
+      path: "/admin/users",
+      name: "admin_users",
+      component: TheAdminUserList
+    },
+
+    {
+      path: "/admin/users/:id/edit",
+      name: "admin_edit_user",
+      component: TheAdminUserEditor
+    },
+
     {
       path: '*',
       component: The404Page
diff --git a/app/views/admin/users/index.json.jbuilder b/app/views/admin/users/index.json.jbuilder
new file mode 100644
index 0000000..5191d0b
--- /dev/null
+++ b/app/views/admin/users/index.json.jbuilder
@@ -0,0 +1,5 @@
+
+json.array! @users do |u|
+  json.extract! u, :id, :username, :full_name, :email, :admin
+  json.name u.display_name
+end
\ No newline at end of file
diff --git a/app/views/users/show.json.jbuilder b/app/views/users/show.json.jbuilder
index d83ea4f..80a357b 100644
--- a/app/views/users/show.json.jbuilder
+++ b/app/views/users/show.json.jbuilder
@@ -1,2 +1,8 @@
 
-json.ex
\ No newline at end of file
+if current_user
+  json.extract! current_user, :id, :username, :email, :full_name, :admin
+
+  json.name current_user.display_name
+else
+  json.nil!
+end