navbar state and user login api

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

Author: championswimmer

package.json

@@ -10,6 +10,7 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
+    "axios": "^0.18.0",
     "vue": "^2.5.17",
     "vue-class-component": "^6.0.0",
     "vue-property-decorator": "^7.2.0",

src/components/AppNavbar.vue

@@ -7,25 +7,39 @@
           <!-- Add "active" class when you're on that page" -->
           <a class="nav-link active" href="">Home</a>
         </li>
-        <li class="nav-item">
+        <li v-if="username" class="nav-item">
           <a class="nav-link" href="">
             <i class="ion-compose"></i>&nbsp;New Post
           </a>
         </li>
-        <li class="nav-item">
+        <li v-if="username" class="nav-item">
           <a class="nav-link" href="">
             <i class="ion-gear-a"></i>&nbsp;Settings
           </a>
         </li>
-        <li class="nav-item"><a class="nav-link" href="">Sign up</a></li>
+        <li v-if="!username" class="nav-item">
+          <router-link class="nav-link" to="/register">
+            Sign up
+          </router-link>
+        </li>
+        <li v-if="!username" class="nav-item">
+          <router-link class="nav-link" to="/login">
+            Sign in
+          </router-link>
+        </li>
       </ul>
     </div>
   </nav>
 </template>
 
 <script>
 import { Vue, Component } from 'vue-property-decorator';
+import users from '@/store/modules/users'
 
 @Component
-export default class AppNavbar extends Vue {}
+export default class AppNavbar extends Vue {
+  get username() {
+    return users.username
+  }
+}
 </script>

src/store/api.ts

@@ -0,0 +1,21 @@
+import axios from 'axios';
+import { UserSubmit, UserResponse, User } from './models';
+
+export const conduitApi = axios.create({
+  baseURL: 'https://conduit.productionready.io/api',
+});
+
+export function setJWT(jwt: string) {
+  conduitApi.defaults.headers.common['Authorization'] = `Token ${jwt}`;
+}
+
+export function clearJWT() {
+  delete conduitApi.defaults.headers.common['Authorization'];
+}
+
+export async function loginUser(user: UserSubmit): Promise<User> {
+  const response = await conduitApi.post('/users/login', {
+    user,
+  });
+  return (response.data as UserResponse).user;
+}

src/store/models.d.ts

@@ -0,0 +1,24 @@
+
+export interface Profile {
+  username: string;
+  bio?: string;
+  image?: string;
+  following: boolean;
+}
+
+export interface User {
+  email: string;
+  token: string;
+  username: string;
+  bio?: string;
+  image?: string;
+}
+
+export interface UserSubmit {
+  email: string;
+  password: string;
+}
+
+export interface UserResponse {
+  user: User
+}

src/store/modules/articles.ts

@@ -0,0 +1,30 @@
+import { VuexModule, Module, getModule, MutationAction, Mutation, Action } from 'vuex-module-decorators'
+import store from '@/store'
+import { User, Profile, UserSubmit } from '../models';
+import { loginUser } from '../api';
+
+@Module({
+  namespaced: true,
+  name: 'users',
+  store,
+  dynamic: true
+})
+class UsersModule extends VuexModule {
+  user: User | null = null
+  profile: Profile | null = null
+
+  @Mutation
+  setUser(user: User) { this.user = user }
+
+  get username() {
+    return this.user && this.user.username || null
+  }
+
+  @Action({commit: 'setUser'})
+  async login(userSubmit: UserSubmit) {
+    const user = await loginUser(userSubmit)
+    return user
+  }
+}
+
+export default getModule(UsersModule);

src/store/modules/users.ts

@@ -3,41 +3,58 @@
     <div class="container page">
       <div class="row">
         <div class="col-md-6 offset-md-3 col-xs-12">
-          <h1 class="text-xs-center">Sign up</h1>
-          <p class="text-xs-center"><a href="">Have an account?</a></p>
+          <h1 class="text-xs-center">Sign in</h1>
+          <p class="text-xs-center">
+            <router-link to="/register">
+              Need an account?
+            </router-link>
+            </p>
 
-          <ul class="error-messages">
+          <!-- <ul class="error-messages">
             <li>That email is already taken</li>
-          </ul>
+          </ul> -->
 
           <form>
             <fieldset class="form-group">
               <input
                 class="form-control form-control-lg"
                 type="text"
-                placeholder="Your Name"
-              />
-            </fieldset>
-            <fieldset class="form-group">
-              <input
-                class="form-control form-control-lg"
-                type="text"
+                v-model="email"
                 placeholder="Email"
               />
             </fieldset>
             <fieldset class="form-group">
               <input
                 class="form-control form-control-lg"
                 type="password"
+                v-model="password"
                 placeholder="Password"
               />
             </fieldset>
-            <button class="btn btn-lg btn-primary pull-xs-right">
-              Sign up
+            <button @click="login()" class="btn btn-lg btn-primary pull-xs-right">
+              Sign in
             </button>
           </form>
         </div>
       </div>
     </div>
   </div>
 </template>
+
+<script>
+import { Vue, Component } from 'vue-property-decorator';
+import users from '@/store/modules/users'
+
+@Component
+export default class Login extends Vue {
+  email = ''
+  password = ''
+
+  login() {
+    users.login({
+      email: this.email,
+      password: this.password
+    })
+  }
+}
+</script>

src/views/Login.vue

@@ -0,0 +1,3 @@
+module.exports = {
+  transpileDependencies: ['vuex-module-decorators'],
+};

vue.config.js

@@ -1527,6 +1527,14 @@ aws4@^1.6.0, aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
   integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==
 
+axios@^0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.18.0.tgz#32d53e4851efdc0a11993b6cd000789d70c05102"
+  integrity sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=
+  dependencies:
+    follow-redirects "^1.3.0"
+    is-buffer "^1.1.5"
+
 babel-code-frame@^6.22.0, babel-code-frame@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
@@ -4199,7 +4207,7 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.1"
     readable-stream "^2.0.4"
 
-follow-redirects@^1.0.0:
+follow-redirects@^1.0.0, follow-redirects@^1.3.0:
   version "1.5.10"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
   integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==