Merge pull request #287 from mieweb/develop

Add google authentication New error report button Added Google Auth Other various bug fixes
mieweb · Jul 30, 2022 · 03e3d37 · 03e3d37
2 parents 0078500 + d64fbd7
commit 03e3d37
Show file tree

Hide file tree

Showing 36 changed files with 818 additions and 297 deletions.
diff --git a/.github/ISSUE_TEMPLATE/markdown_report.md b/.github/ISSUE_TEMPLATE/markdown_report.md
@@ -0,0 +1,24 @@
+---
+name: Markdown transform error report
+about: Create a report to help us improve
+title: '[MARKDOWN] <title>'
+labels: '<labels>'
+assignees: ''
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Versions:**
+- OS [e.g. windows, osx]:
+- Browser [e.g. chrome, safari]:
+- Browser Version [e.g. 22]:
+
+**Additional context**
+Add any other context about the problem here.
diff --git a/.github/workflows/DevelopServerDeploy.yml b/.github/workflows/DevelopServerDeploy.yml
@@ -24,7 +24,7 @@ jobs:
         push_image_and_stages: false
         build_extra_args: "{'--build-arg': 'GIT_SHA=${{ github.sha }}'}"
 
-    - name: Build hugo rederer
+    - name: Build hugo renderer
       run: docker build -t "hugo-render:develop" --build-arg "GIT_SHA=${GITHUB_SHA}" apps/hugo-render
 
     - name: Stop and remove
@@ -37,18 +37,11 @@ jobs:
           --restart unless-stopped \
           -v wikiGDriveDevelop:/data \
           -v /home/githubactions/wikigdrive/service_account.json:/service_account.json \
+          -v /home/githubactions/wikigdrive/env.develop:/usr/src/app/.env \
           -v /var/run/docker.sock:/var/run/docker.sock \
-          -e VOLUME_DATA=/var/lib/docker/volumes/wikiGDriveDevelop/_data \
-          -e VOLUME_PREVIEW=/var/www/preview-develop \
-          -e RENDER_IMAGE=hugo-render:develop \
-          -e DOMAIN=https://dev.wikigdrive.com \
           --publish 127.0.0.1:4000:3000 \
           "wikigdrive-develop:${GITHUB_SHA}" wikigdrive-ts \
           --service_account /service_account.json \
           --share_email mie-docs-wikigdrive@wikigdrive.iam.gserviceaccount.com \
           --workdir /data \
           server 3000
-
-    - name: Stop and remove
-      run: docker stop transform-preview-develop ; docker rm transform-preview-develop
-      continue-on-error: true
diff --git a/.github/workflows/ProdServerDeploy.yml b/.github/workflows/ProdServerDeploy.yml
@@ -41,11 +41,8 @@ jobs:
         docker run -d --name wikigdrive-prod \
           -v wikiGDriveProd:/data \
           -v /home/githubactions/wikigdrive/service_account.json:/service_account.json \
+          -v /home/githubactions/wikigdrive/env.prod:/usr/src/app/.env \
           -v /var/run/docker.sock:/var/run/docker.sock \
-          -e VOLUME_DATA=/var/lib/docker/volumes/wikiGDriveProd/_data \
-          -e VOLUME_PREVIEW=/var/www/preview-prod \
-          -e RENDER_IMAGE=hugo-render:prod \
-          -e DOMAIN=https://wikigdrive.com \
           --publish 127.0.0.1:3000:3000 \
           --restart unless-stopped \
           wikigdrive-prod wikigdrive-ts \

diff --git a/apps/hugo-render/Dockerfile b/apps/hugo-render/Dockerfile
@@ -10,7 +10,8 @@ ENV THEME_URL=https://github.com/budparr/gohugo-theme-ananke.git
 VOLUME ["/site/content"]
 VOLUME ["/site/public"]
 
-RUN apk add --no-cache hugo git
+RUN apk add --no-cache hugo git nodejs npm
+RUN npm i -g postcss postcss-cli
 
 RUN git init /site
 

diff --git a/apps/hugo-render/generate.sh b/apps/hugo-render/generate.sh
@@ -2,11 +2,15 @@
 
 cd /site
 
-git submodule add $THEME_URL themes/$THEME_ID
+echo "Using theme $THEME_URL $THEME_SUBPATH"
 
-cp config.toml.example config.toml
+git clone $THEME_URL themes/$THEME_ID
 
-echo "theme=\"$THEME_ID\"" >> config.toml
-echo "baseURL=\"$BASE_URL\"" >> config.toml
+if [[ ! -z "$THEME_SUBPATH" ]]
+then
+    mv themes/$THEME_ID/$THEME_SUBPATH/* themes/$THEME_ID
+fi
 
-hugo
+cat /site/tmp_dir/config.toml
+
+hugo --config=/site/tmp_dir/config.toml --verbose
diff --git a/apps/ui/assets/components/ChangesViewer.vue b/apps/ui/assets/components/ChangesViewer.vue
@@ -3,7 +3,7 @@
     <div class="row py-1">
       <div class="col-12 text-end">
         <router-link v-if="!isGDocsPreview" :to="{ name: 'drive', params: { driveId }, hash: '#drive_logs' }" class="btn btn-white text-primary ml-1" type="button" aria-label="Logs" title="Logs">
-          <i class="fa-solid fa-bug me-1"></i>
+          <i class="fa-solid fa-computer me-1"></i>
         </router-link>
         <router-link v-if="!isGDocsPreview" :to="{ name: 'drive', params: { driveId }, hash: '#drive_config' }" class="btn btn-white text-primary ml-1" type="button" aria-label="Settings" title="Settings">
           <i class="fa-solid fa-gear me-1"></i>
@@ -62,7 +62,7 @@ export default {
   methods: {
     async gotoFile(fileId) {
       if (fileId) {
-        const response = await fetch(`/api/gdrive/${this.driveId}/${fileId}`);
+        const response = await this.authenticatedClient.fetchApi(`/api/gdrive/${this.driveId}/${fileId}`);
 
         const path = response.headers.get('wgd-path') || '';
         const fileName = response.headers.get('wgd-file-name') || '';

diff --git a/apps/ui/assets/components/DriveTools.vue b/apps/ui/assets/components/DriveTools.vue
@@ -33,7 +33,7 @@
       </li>
       <li class="list-group-item" v-if="!isGDocsPreview">
         <router-link :to="{ name: 'drive', params: { driveId }, hash: '#drive_logs' }">
-          <i class="fa-solid fa-bug me-1"></i>
+          <i class="fa-solid fa-computer me-1"></i>
           Logs
         </router-link>
       </li>

diff --git a/apps/ui/assets/components/GitCommit.vue b/apps/ui/assets/components/GitCommit.vue
@@ -85,7 +85,7 @@ export default {
   },
   methods: {
     async fetch() {
-      const response = await fetch(`/api/git/${this.driveId}/commit`);
+      const response = await this.authenticatedClient.fetchApi(`/api/git/${this.driveId}/commit`);
       const json = await response.json();
       this.changes = json.changes;
       this.filePath = [];

diff --git a/apps/ui/assets/components/GitMixin.mjs b/apps/ui/assets/components/GitMixin.mjs
@@ -1,7 +1,7 @@
 export const GitMixin = {
   methods: {
     async commit({ message, filePath }) {
-      await fetch(`/api/git/${this.driveId}/commit`, {
+      await this.authenticatedClient.fetchApi(`/api/git/${this.driveId}/commit`, {
         method: 'post',
         headers: {
           'Content-type': 'application/json'
@@ -14,7 +14,7 @@ export const GitMixin = {
       await this.fetch();
     },
     async pull() {
-      const response = await fetch(`/api/git/${this.driveId}/pull`, {
+      const response = await this.authenticatedClient.fetchApi(`/api/git/${this.driveId}/pull`, {
         method: 'post',
         headers: {
           'Content-type': 'application/json'
@@ -29,7 +29,7 @@ export const GitMixin = {
     },
     async push({ message, filePath }) {
       if (message) {
-        await fetch(`/api/git/${this.driveId}/commit`, {
+        await this.authenticatedClient.fetchApi(`/api/git/${this.driveId}/commit`, {
           method: 'post',
           headers: {
             'Content-type': 'application/json'
@@ -41,7 +41,7 @@ export const GitMixin = {
         });
       }
 
-      const response = await fetch(`/api/git/${this.driveId}/push`, {
+      const response = await this.authenticatedClient.fetchApi(`/api/git/${this.driveId}/push`, {
         method: 'post',
         headers: {
           'Content-type': 'application/json'

diff --git a/apps/ui/assets/components/LogsViewer.vue b/apps/ui/assets/components/LogsViewer.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="x-container">
-    <pre class="bg-dark text-white log-viewer" ref="scroller"
+    <pre class="bg-dark text-white log-viewer"
     ><div v-for="(item, idx) of logs" :key="idx" :class="{'text-danger': 'error' === item.level}"
     ><span>[{{dateStr(item.timestamp)}}]</span
     > <span v-html="getLink(item.filename)"></span
@@ -26,18 +26,19 @@ export default {
   },
   methods: {
     async fetch(from) {
-      const response = await fetch(`/api/logs/${this.driveId}?from=` + from);
+      const response = await this.authenticatedClient.fetchApi(`/api/logs/${this.driveId}?from=` + from);
       const logs = await response.json();
       const firstLog = logs.length > 0 ? logs[0] : null;
       if (firstLog) {
         this.logs = this.logs.filter(row => row.timestamp < firstLog.timestamp);
       }
 
-      const oldScrollTop = this.$refs.scroller.scrollHeight - this.$refs.scroller.offsetHeight - 20;
+      const scroller = document.querySelector('.mainbar__content');
+      const oldScrollTop = scroller.scrollHeight - scroller.offsetHeight - 10;
       this.logs.push(...logs);
-      if (this.$refs.scroller.scrollTop > oldScrollTop) {
+      if (scroller.scrollTop > oldScrollTop) {
         this.$nextTick(() => {
-          this.$refs.scroller.scrollTop = this.$refs.scroller.scrollHeight - this.$refs.scroller.offsetHeight;
+          scroller.scrollTop = scroller.scrollHeight - scroller.offsetHeight;
         });
       }
     },

diff --git a/apps/ui/assets/components/PreviewHeader.vue b/apps/ui/assets/components/PreviewHeader.vue
@@ -54,6 +54,11 @@
       <button v-if="drive.navFilePath" @click.prevent.stop="goToPath(drive.navFilePath)" class="btn btn-white text-primary mx-1" type="button" aria-label="Navigation" title="Navigation">
         <i class="fa-solid fa-ellipsis-vertical"></i>
       </button>
+
+      <button v-if="selectedFile.id && (isDocument(selectedFile) || isMarkdown(selectedFile))" @click.prevent.stop="reportBug(selectedFile)" class="btn btn-white text-primary ml-1" type="button" aria-label="Report issue" title="Report issue" >
+        <i class="fa-solid fa-bug"></i>
+      </button>
+
     </div>
   </div>
 
@@ -94,7 +99,18 @@ export default {
       this.commitMsg = '';
     },
     // eslint-disable-next-line @typescript-eslint/no-empty-function
-    fetch() {}
+    fetch() {},
+    reportBug(selectedFile) {
+      const url = 'https://github.com/mieweb/wikiGDrive/issues/new?' + new URLSearchParams({
+        labels: 'markdown',
+        title: 'Incorrect result',
+        template: 'markdown_report.md',
+        body: `FileId: ${selectedFile.id}\nURL: ${window.location.toString()}\nGoogle Docs: https://drive.google.com/open?id=${selectedFile.id}`
+
+      }).toString();
+
+      window.open(url, '_blank');
+    }
   }
 };
 </script>
diff --git a/apps/ui/assets/components/UserConfig.vue b/apps/ui/assets/components/UserConfig.vue
@@ -3,13 +3,19 @@
     <div class="card">
       <div class="card-body">
         <form>
-          <div class="input-group">
+          <div class="form-group">
+            <label>
+              Remote URL
+            </label>
             <input class="form-control" size="50" placeholder="git@github.com:[...].git" v-model="user_config.remote_url" />
           </div>
-          <div class="input-group">
+          <div class="form-group">
+            <label>
+              Remote Branch
+            </label>
             <input class="form-control" size="50" placeholder="remote_branch, eg: gh-pages" v-model="user_config.remote_branch" />
           </div>
-          <div class="input-group">
+          <div class="form-group">
             <label>Theme</label>
             <select class="form-control" @change="changeTheme($event.target.value)">
               <option></option>
@@ -20,6 +26,10 @@
                   v-for="theme of drive.hugo_themes">{{ theme.name }}</option>
             </select>
           </div>
+          <div class="form-group">
+            <label>Config.toml</label>
+            <textarea class="form-control" rows="10" v-model="user_config.config_toml"></textarea>
+          </div>
 
           <div>
             <img v-if="user_config.hugo_theme.preview_img" :src="user_config.hugo_theme.preview_img" style="height: 250px;" :alt="user_config.hugo_theme.id" />
@@ -45,6 +55,7 @@ export default {
       user_config: {
         remote_url: '',
         remote_branch: '',
+        config_toml: '',
         hugo_theme: ''
       }
     };
@@ -65,7 +76,7 @@ export default {
       this.user_config = { ...this.$root.drive?.git || {}, hugo_theme: this.$root.drive.hugo_theme };
     },
     async save() {
-      await fetch(`/api/config/${this.driveId}`, {
+      await this.authenticatedClient.fetchApi(`/api/config/${this.driveId}`, {
         method: 'put',
         headers: {
           'Content-type': 'application/json'

diff --git a/apps/ui/assets/components/UtilsMixin.mjs b/apps/ui/assets/components/UtilsMixin.mjs
@@ -111,15 +111,15 @@ export const UtilsMixin = {
     },
     async syncSingle(selectedFile) {
       try {
-        await fetch(`/api/sync/${this.driveId}/${selectedFile.id}`, {
+        await this.authenticatedClient.fetchApi(`/api/sync/${this.driveId}/${selectedFile.id}`, {
           method: 'post'
         });
         // eslint-disable-next-line no-empty
       } finally {
       }
     },
     async syncAll() {
-      await fetch(`/api/sync/${this.driveId}`, {
+      await this.authenticatedClient.fetchApi(`/api/sync/${this.driveId}`, {
         method: 'post'
       });
     },

diff --git a/apps/ui/assets/layout.css b/apps/ui/assets/layout.css
@@ -27,18 +27,17 @@ body,
 }
 
 .mainbar__sidebar {
-  /*min-width: var(--sidebar-width);*/
+  min-width: var(--sidebar-width);
   width: var(--sidebar-width);
   max-width: 50vw;
-  transition: 0.3s width linear;
+  transition: 0.3s all linear;
 
   height: calc(100vh - var(--navbar-height));
   overflow-y: auto;
 }
 
 .mainbar__content {
   flex: 1 1 auto;
-  overflow: auto;
   text-overflow: ellipsis;
   white-space: nowrap;
   height: calc(100vh - var(--navbar-height));
@@ -55,6 +54,7 @@ body,
 
 .sidebar--collapsed .mainbar__sidebar {
   width: 0;
+  min-width: 0;
 }
 
 @media (max-width: 400px) {

diff --git a/apps/ui/assets/main.mjs b/apps/ui/assets/main.mjs
@@ -8,6 +8,7 @@ import * as Vue from 'vue';
 import * as VueRouter from 'vue-router';
 
 import App from './App.vue';
+import {AuthenticatedClient} from "./services/AuthenticatedClient.mjs";
 
 const app = Vue.createApp({
   data: {
@@ -22,6 +23,14 @@ const app = Vue.createApp({
   methods: {
     async changeDrive(toDriveId) {
       this.drive = await vm.DriveClientService.changeDrive(toDriveId, vm);
+      const titleEl = document.querySelector('title');
+      if (titleEl) {
+        if (this.drive?.name) {
+          titleEl.innerText = this.drive?.name + ' - wikigdrive';
+        } else {
+          titleEl.innerText = 'wikigdrive';
+        }
+      }
     },
     setJobs(jobs) {
       this.jobs = jobs;
@@ -34,10 +43,12 @@ const app = Vue.createApp({
 
 app.mixin({
   data() {
+    const authenticatedClient = new AuthenticatedClient();
     return {
-      DriveClientService: new DriveClientService(),
-      FileClientService: new FileClientService(),
-      GitClientService: new GitClientService()
+      authenticatedClient,
+      DriveClientService: new DriveClientService(authenticatedClient),
+      FileClientService: new FileClientService(authenticatedClient),
+      GitClientService: new GitClientService(authenticatedClient)
     }
   }
 });

diff --git a/apps/ui/assets/pages/MainView.vue b/apps/ui/assets/pages/MainView.vue
@@ -1,13 +1,13 @@
 <template>
   <BaseLayout>
     <template v-slot:default>
-      <div class="x-container">
+      <div class="container">
         <form @submit.prevent.stop="submit">
           <legend>Share</legend>
           <div class="input-group">
             <input class="form-control" v-model="url" placeholder="https://drive.google.com/drive/u/0/folders/..." />
+            <button type="submit" class="btn btn-primary">Share</button>
           </div>
-          <button type="submit" class="btn btn-primary">Share</button>
         </form>
       </div>
     </template>
@@ -27,7 +27,6 @@ export default {
   },
   methods: {
     async submit() {
-      console.log(this.url);
       const response = await fetch('/api/share_drive', {
         method: 'POST',
         headers: {