user settings page

Signed-off-by: Arnav Gupta <[email protected]>

Author: championswimmer

src/components/AppNavbar.vue

@@ -8,14 +8,14 @@
           <a class="nav-link active" href="">Home</a>
         </li>
         <li v-if="username" class="nav-item">
-          <a class="nav-link" href="">
-            <i class="ion-compose"></i>&nbsp;New Post
-          </a>
+          <router-link class="nav-link" to="/editor">
+            <i class="ion-compose"></i>&nbsp;New Article
+          </router-link>
         </li>
         <li v-if="username" class="nav-item">
-          <a class="nav-link" href="">
+          <router-link class="nav-link" to="/settings">
             <i class="ion-gear-a"></i>&nbsp;Settings
-          </a>
+          </router-link>
         </li>
         <li v-if="username" class="nav-item">
           <router-link class="nav-link" :to="'/@' + username">

src/router.ts

@@ -26,6 +26,11 @@ export default new Router({
       name: 'settings',
       component: () => import('@/views/Settings.vue'),
     },
+    {
+      path: '/editor',
+      name: 'editor',
+      component: () => import('@/views/Editor.vue'),
+    },
     {
       path: '/@:username',
       name: 'profile',

src/store/api.ts

@@ -6,6 +6,7 @@ import {
   ArticlesResponse,
   Profile,
   ProfileResponse,
+  UserForUpdate,
 } from './models';
 
 export const conduitApi = axios.create({
@@ -32,7 +33,18 @@ export async function fetchProfile(username: string): Promise<Profile> {
   return (response.data as ProfileResponse).profile;
 }
 
+export async function fetchUser(): Promise<User> {
+  const response = await conduitApi.get('/user')
+  return (response.data as UserResponse).user
+}
+
 export async function getGlobalFeed() {
   const response = await conduitApi.get('/articles');
   return response.data as ArticlesResponse;
 }
+
+
+export async function updateUser(user: UserForUpdate): Promise<User> {
+  const response = await conduitApi.put('/user', user)
+  return (response.data as UserResponse).user
+}

src/store/models.d.ts

@@ -13,6 +13,14 @@ export interface User {
   image?: string;
 }
 
+export interface UserForUpdate {
+  email?: string
+  username?: string
+  bio?: string
+  password?: string
+  image?: string
+}
+
 export interface Article {
   slug: string;
   title: string;

src/store/modules/articles.ts

@@ -3,12 +3,13 @@ import {
   VuexModule,
   getModule,
   Mutation,
-  Action, MutationAction,
+  Action,
+  MutationAction,
 } from 'vuex-module-decorators';
 import store from '@/store';
 import { Article } from '../models';
 import * as api from '@/store/api';
-type FeedType = 'global' | 'user'
+type FeedType = 'global' | 'user';
 
 @Module({
   dynamic: true,
@@ -23,7 +24,7 @@ class ArticlesModule extends VuexModule {
   async refreshFeed(feedType: FeedType) {
     const globalFeed = await api.getGlobalFeed();
     return {
-      feed: globalFeed.articles
+      feed: globalFeed.articles,
     };
   }
 }

src/store/modules/users.ts

@@ -1,7 +1,12 @@
-import { getModule, Module, MutationAction, VuexModule } from 'vuex-module-decorators';
+import {
+  getModule,
+  Module,
+  MutationAction,
+  VuexModule,
+} from 'vuex-module-decorators';
 import store from '@/store';
-import { Profile, User, UserSubmit } from '../models';
-import { fetchProfile, loginUser } from '../api';
+import { Profile, User, UserSubmit, UserForUpdate } from '../models';
+import { fetchProfile, fetchUser, loginUser, updateUser, setJWT } from '../api';
 
 @Module({
   namespaced: true,
@@ -13,14 +18,14 @@ class UsersModule extends VuexModule {
   user: User | null = null;
   profile: Profile | null = null;
 
-
   get username() {
     return (this.user && this.user.username) || null;
   }
 
   @MutationAction
   async login(userSubmit: UserSubmit) {
     const user = await loginUser(userSubmit);
+    setJWT(user.token)
     return { user };
   }
 
@@ -29,6 +34,18 @@ class UsersModule extends VuexModule {
     const profile = await fetchProfile(username);
     return { profile };
   }
+
+  @MutationAction
+  async loadUser() {
+    const user = await fetchUser()
+    return { user }
+  }
+
+  @MutationAction
+  async updateSelfProfile(userUpdateFields: UserForUpdate) {
+    const user = await updateUser(userUpdateFields)
+    return { user }
+  }
 }
 
 export default getModule(UsersModule);

src/views/Home.vue

@@ -59,11 +59,13 @@ import articles from '@/store/modules/articles';
     ArticlePreview,
   },
 })
-export default class extends Vue {
-  get feed() { return articles.feed }
+export default class Home extends Vue {
+  get feed() {
+    return articles.feed;
+  }
 
   async created() {
-    await articles.refreshFeed('global')
+    await articles.refreshFeed('global');
   }
 }
 </script>

src/views/Settings.vue

@@ -9,27 +9,31 @@
             <fieldset>
               <fieldset class="form-group">
                 <input
+                  v-model="user.image"
                   class="form-control"
                   type="text"
                   placeholder="URL of profile picture"
                 />
               </fieldset>
               <fieldset class="form-group">
                 <input
+                v-model="user.username"
                   class="form-control form-control-lg"
                   type="text"
                   placeholder="Your Name"
                 />
               </fieldset>
               <fieldset class="form-group">
                 <textarea
+                  v-model="user.bio"
                   class="form-control form-control-lg"
                   rows="8"
                   placeholder="Short bio about you"
                 ></textarea>
               </fieldset>
               <fieldset class="form-group">
                 <input
+                  v-model="user.email"
                   class="form-control form-control-lg"
                   type="text"
                   placeholder="Email"
@@ -42,7 +46,7 @@
                   placeholder="Password"
                 />
               </fieldset>
-              <button class="btn btn-lg btn-primary pull-xs-right">
+              <button @click="updateProfile()" class="btn btn-lg btn-primary pull-xs-right">
                 Update Settings
               </button>
             </fieldset>
@@ -52,3 +56,28 @@
     </div>
   </div>
 </template>
+
+<script lang="ts">
+import { Vue, Component } from 'vue-property-decorator';
+import { User } from '@/store/models'
+import users from '@/store/modules/users';
+
+@Component
+export default class Settings extends Vue {
+  user: Partial<User> = {}
+
+  async created() {
+    await users.loadUser()
+    this.user = users.user || {}
+  }
+
+
+  async updateProfile() {
+    await users.updateSelfProfile({
+      email: this.user.email,
+      bio: this.user.bio
+    })
+    this.user = users.user || {}
+  }
+}
+</script>