[update] 0.0.3

.circleci/config.yml

@@ -57,7 +57,7 @@ jobs:
                 root: .
                 paths:
                     - .
-    golint:
+    lint:
         machine: true
         steps:
             - attach_workspace:
@@ -66,8 +66,8 @@ jobs:
             - *load_docker_image
             - *run_docker_compose
             - run:
-                name: Run golint
-                command: make lint
+                name: Run lint
+                command: npm run lint
     test:
         machine: true
         steps:
@@ -78,13 +78,13 @@ jobs:
             - *run_docker_compose
             - run:
                 name: Run tests
-                command: make test
+                command: npm run test:unit
 workflows:
     version: 2
     build_and_test:
         jobs:
             - build
-            - golint:
+            - lint:
                 requires:
                     - build
             - test:

Makefile

@@ -31,13 +31,4 @@ ifeq ($(env), ci)
 	docker-compose -f docker-compose.ci.yml pull
 else
 	docker-compose -f docker-compose.yml pull
-endif
-
-lint: ## Run golint.
-	docker exec -it gobel-admin-client golint ./...
-
-test: ## Run tests.
-	docker exec -it gobel-admin-client go test -v ./...
-
-build: ## Run go build
-	cd app && GOOS=linux GOARCH=amd64 go build -o app
+endif

README.md

@@ -13,16 +13,37 @@ This is an example for admin client application of gobel.
 
 # Requirements
 <!-- TODO: -->
-- Docker Compose
-
-# Requirements
-<!-- TODO: -->
+- Docker
 - Docker Compose
 
 # Get started
 Before you start, you need to clone [gobel-api](https://github.com/bmf-san/gobel-api).
 
 <!-- TODO: -->
+```
+npm install
+```
+
+# Scripts
+## Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+## Compiles and minifies for production
+```
+npm run build
+```
+
+## Run your unit tests
+```
+npm run test:unit
+```
+
+## Lints and fixes files
+```
+npm run lint
+```
 
 # Contributing
 We welcome your issue or pull request from everyone.

app/Dockerfile

@@ -6,12 +6,12 @@ COPY package*.json ./
 
 RUN npm install
 
-COPY ./ .
+COPY . .
 
 RUN npm run local-build
 
 FROM nginx:1.19.0-alpine
 
 COPY ./nginx/nginx.conf /etc/nginx/nginx.conf
-COPY ./nginx/conf.d/gobel-admin-client.conf /etc/nginx/conf.d/goble-admin-client-example.conf
+COPY ./nginx/conf.d/gobel-admin-client.conf /etc/nginx/conf.d/gobel-admin-client.conf
 COPY --from=build-stage /app/dist /var/www/html

app/Dockerfile.prod

@@ -12,4 +12,4 @@ RUN npm run prod-build
 
 FROM alpine
 
-COPY --from=build-stage /app/dist /var/www/html
+COPY --from=build-stage /app/dist/ ./

app/nginx/conf.d/gobel-admin-client-example.conf → app/nginx/conf.d/gobel-admin-client.conf

@@ -2,8 +2,8 @@ server {
     listen       80;
     server_name  gobel-admin-client.local;
     charset UTF-8;
-    access_log  /var/log/nginx/access_gobel_admin_client_example.log;
-    error_log   /var/log/nginx/error_gobel_admin_client_example.log;
+    access_log  /var/log/nginx/access_gobel_admin_client.log;
+    error_log   /var/log/nginx/error_gobel_admin_client.log;
 
     location / {
         root /var/www/html;

app/package.json

@@ -6,7 +6,7 @@
     "serve": "vue-cli-service serve",
     "local-build": "vue-cli-service build --mode=local",
     "prod-build": "vue-cli-service build --mode-production",
-    "test:unit": "vue-cli-service test:unit",
+    "test:unit": "vue-cli-service test:unit --u",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {

app/src/App.vue

@@ -1,9 +1,58 @@
 <template>
   <div id="app">
+    <Loader v-show="loading" />
     <div id="nav">
       <router-link to="/">Home</router-link>
       <router-link to="/posts">Posts</router-link>
+      <!-- TODO: It may be necessary to introduce a store pattern to adjust the display conditions -->
+      <button @click="signout()">Signout</button>
     </div>
     <router-view />
   </div>
 </template>
+
+<script>
+import Loader from "@/components/Loader.vue";
+import apiClient from "./modules/apiClient";
+import router from "./router";
+
+export default {
+  name: "App",
+  components: {
+    Loader
+  },
+  data() {
+    return {
+      loading: false
+    };
+  },
+  methods: {
+    async signout() {
+      try {
+        this.loading = true;
+        await apiClient
+          .post(
+            "/private/signout",
+            {},
+            {
+              headers: {
+                Authorization: "Bearer " + localStorage.getItem("access_token")
+              }
+            }
+          )
+          .then(() => {
+            this.loading = false;
+            this.isActive = false;
+            localStorage.removeItem("access_token");
+            localStorage.removeItem("refresh_token");
+            router.push({ name: "Signin" });
+          });
+      } catch (e) {
+        console.log(e);
+      } finally {
+        this.loading = false;
+      }
+    }
+  }
+};
+</script>

app/src/components/Pagination.vue

@@ -0,0 +1,35 @@
+<template>
+  <ul>
+    <li v-for="i of pagecount" :key="i">
+      <router-link
+        :to="{ name: name, query: { page: i, limit: limit } }"
+        :class="{ current: isCurrent(i) }"
+        >{{ i }}</router-link
+      >
+    </li>
+  </ul>
+</template>
+
+<script>
+export default {
+  name: "Pagination",
+  props: {
+    name: String,
+    page: Number,
+    limit: Number,
+    pagecount: Number,
+    refresh: Function
+  },
+  methods: {
+    isCurrent(i) {
+      return i == this.page;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.current {
+  color: red;
+}
+</style>

app/src/consts/posts.js

@@ -0,0 +1,8 @@
+const PUBLISH = "publish";
+const DRAFT = "draft";
+
+export default Object.freeze({
+  STATUS_PUBLIC: PUBLISH,
+  STATUS_PRIVATE: DRAFT,
+  STATUSES: [PUBLISH, DRAFT]
+});

app/src/modules/apiClient.js

@@ -5,12 +5,11 @@ import router from "../router";
 const apiClient = axios.create({
   baseURL: process.env.VUE_APP_API_ENDPOINT,
   headers: {
-    "Content-Type": "application/json",
+    "Content-Type": "application/json"
   },
   responseType: "json"
 });
 
-// TODO: 動作確認ちゃんとしていないので後でする
 apiClient.interceptors.response.use(
   res => {
     // if the api request is successful, return response as it is.
@@ -21,11 +20,11 @@ apiClient.interceptors.response.use(
     if (error.config && error.response && error.response.status === 401) {
       apiClient
         .post(
-          "/refresh",
+          "/private/refresh",
           {},
           {
             headers: {
-              'Authorization': "Bearer " + localStorage.getItem("refresh_token"),
+              Authorization: "Bearer " + localStorage.getItem("refresh_token")
             }
           }
         )
@@ -34,7 +33,7 @@ apiClient.interceptors.response.use(
             const config = error.config;
             localStorage.setItem("access_token", res.data.access_token);
             localStorage.setItem("refresh_token", res.data.refresh_token);
-            config.headers["Authorization"] = res.data.refresh_token;
+            config.headers["Authorization"] = "Bearer " + res.data.access_token;
 
             // Retry the api request.
             return Axios.request(error.config);