Implement login. Fix #6

nuxt.config.js

@@ -60,25 +60,39 @@ export default {
   },
 
   axios: {
-    baseURL: 'http://127.0.0.1:3001/'
+    // baseURL: 'http://localhost:3001/'
+    proxy: true
+  },
+
+  proxy: {
+    '/api/': {
+      target: 'http://localhost:3001/',
+      pathRewrite: { '^/api/': '' }
+    }
   },
 
   auth: {
     strategies: {
       cookie: {
+        // cookie: {
+        //   name: 'connect.sid'
+        // },
         endpoints: {
           login: {
-            url: 'user/login',
+            url: 'api/auth/login',
             method: 'post'
           },
           logout: {
-            url: 'user/logout',
+            url: 'api/auth/logout',
             method: 'post'
           },
           user: {
-            url: 'user/me',
+            url: 'api/user/me',
             method: 'get'
           }
+        },
+        user: {
+          property: false
         }
       }
     }

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@nuxtjs/auth-next": "5.0.0-1624817847.21691f1",
     "@nuxtjs/axios": "^5.13.6",
+    "@nuxtjs/proxy": "^2.1.0",
     "@nuxtjs/pwa": "^3.3.5",
     "core-js": "^3.9.1",
     "nuxt": "^2.15.3"

pages/Login.vue

@@ -96,7 +96,10 @@
     </svg>
     <h1><span>Log in</span> to access</h1>
     <h2>your hydrominder</h2>
-    <p>{{ $auth.loggedIn }}</p>
+    <p v-if="loginError" class="error">
+      Something went wrong logging you in.
+      Check your username and password and try again.
+    </p>
     <form class="login-form" @submit.prevent="userLogin">
       <label for="username">Username</label>
       <input id="username" v-model="login.username" type="text">
@@ -114,16 +117,17 @@ export default {
       login: {
         username: '',
         password: ''
-      }
+      },
+      loginError: false
     }
   },
   methods: {
     async userLogin () {
       try {
-        const response = await this.$auth.loginWith('cookie', { data: this.login })
-        console.log(response)
+        await this.$auth.loginWith('cookie', { data: this.login })
+        this.loginError = false
       } catch (err) {
-        console.log(err)
+        this.loginError = true
       }
     }
   },
@@ -194,6 +198,12 @@ export default {
     text-shadow: -1px 3px 4px #444;
   }
 
+  .error {
+    color: darkred;
+    text-shadow: none;
+    font-size: .7em;
+  }
+
   .watermark {
     position: absolute;
     top: 3%;

store/index.js

+export const state = () => ({
+})