From c156e7342b680350f08eaf48ad4f78c9b2b1a08a Mon Sep 17 00:00:00 2001
From: Phan An <me@phanan.net>
Date: Fri, 29 Apr 2022 22:15:10 +0200
Subject: [PATCH] fix: demo build

---
 .eslintrc                                        |  1 -
 package.json                                     |  2 +-
 resources/assets/jest.config.js                  |  3 +--
 .../assets/js/components/auth/LoginForm.vue      |  5 +++--
 .../assets/js/components/meta/AboutKoelModal.vue |  5 ++---
 .../profile-preferences/ProfileForm.vue          | 16 +++++++++++++---
 resources/assets/js/types.d.ts                   |  3 +--
 resources/assets/js/utils/common.ts              |  2 ++
 webpack.config.js                                |  3 +--
 9 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 644a877d26..2b7378f59b 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -22,7 +22,6 @@
   ],
   "globals": {
     "KOEL_ENV": "readonly",
-    "NODE_ENV": "readonly",
     "FileReader": "readonly",
     "defineProps": "readonly",
     "defineEmits": "readonly",
diff --git a/package.json b/package.json
index b2001e3c2f..248093378a 100644
--- a/package.json
+++ b/package.json
@@ -95,7 +95,7 @@
     "test:e2e": "kill-port 8080 && start-test dev :8080 'cypress open'",
     "test:e2e:ci": "kill-port 8080 && start-test 'php artisan serve --port=8080 --quiet' http-get://localhost:8080/api/ping 'cypress run'",
     "build": "yarn prod",
-    "build-demo": "cross-env NODE_ENV=demo npm run production",
+    "build-demo": "cross-env KOEL_ENV=demo mix --production",
     "dev": "start-test 'php artisan serve --port=8000 --quiet' http-get://localhost:8000/api/ping hot",
     "development": "mix",
     "watch": "mix watch",
diff --git a/resources/assets/jest.config.js b/resources/assets/jest.config.js
index 7812cda1f5..6f42781053 100644
--- a/resources/assets/jest.config.js
+++ b/resources/assets/jest.config.js
@@ -28,8 +28,7 @@ module.exports = {
     `node_modules/(?!(${forceTransformModules.join('|')})/)`
   ],
   globals: {
-    KOEL_ENV: 'web',
-    NODE_ENV: 'test'
+    KOEL_ENV: ''
   },
   setupFilesAfterEnv: ['<rootDir>/js/__tests__/setup.ts'],
   verbose: true,
diff --git a/resources/assets/js/components/auth/LoginForm.vue b/resources/assets/js/components/auth/LoginForm.vue
index 1b1af37c51..6a142d617f 100644
--- a/resources/assets/js/components/auth/LoginForm.vue
+++ b/resources/assets/js/components/auth/LoginForm.vue
@@ -12,6 +12,7 @@
 <script lang="ts" setup>
 import { defineAsyncComponent, ref } from 'vue'
 import { userStore } from '@/stores'
+import { isDemo } from '@/utils'
 
 const DEMO_ACCOUNT = {
   email: 'demo@koel.dev',
@@ -21,8 +22,8 @@ const DEMO_ACCOUNT = {
 const Btn = defineAsyncComponent(() => import('@/components/ui/Btn.vue'))
 
 const url = ref('')
-const email = ref(NODE_ENV === 'demo' ? DEMO_ACCOUNT.email : '')
-const password = ref(NODE_ENV === 'demo' ? DEMO_ACCOUNT.password : '')
+const email = ref(isDemo ? DEMO_ACCOUNT.email : '')
+const password = ref(isDemo ? DEMO_ACCOUNT.password : '')
 const failed = ref(false)
 
 const emit = defineEmits(['loggedin'])
diff --git a/resources/assets/js/components/meta/AboutKoelModal.vue b/resources/assets/js/components/meta/AboutKoelModal.vue
index 631216428f..2cbc62fa2a 100644
--- a/resources/assets/js/components/meta/AboutKoelModal.vue
+++ b/resources/assets/js/components/meta/AboutKoelModal.vue
@@ -25,7 +25,7 @@
         <a href="/koel/koel/graphs/contributors" rel="noopener" target="_blank">contributors</a>.
       </p>
 
-      <p v-if="demo" class="demo-credits">
+      <p v-if="isDemo" class="demo-credits">
         Demo music provided by
         <a href="https://www.bensound.com" rel="noopener" target="_blank">Bensound</a>.
       </p>
@@ -48,11 +48,10 @@
 import compareVersions from 'compare-versions'
 import { defineAsyncComponent } from 'vue'
 import { commonStore, userStore } from '@/stores'
+import { isDemo } from '@/utils'
 
 const Btn = defineAsyncComponent(() => import('@/components/ui/Btn.vue'))
 
-const demo = NODE_ENV === 'demo'
-
 const latestVersionUrl = `https://github.com/phanan/koel/releases/tag/${commonStore.state.latestVersion}`
 const shouldDisplayVersionUpdate = userStore.state.current.is_admin
 
diff --git a/resources/assets/js/components/profile-preferences/ProfileForm.vue b/resources/assets/js/components/profile-preferences/ProfileForm.vue
index 14bc6d699f..134d773e51 100644
--- a/resources/assets/js/components/profile-preferences/ProfileForm.vue
+++ b/resources/assets/js/components/profile-preferences/ProfileForm.vue
@@ -42,7 +42,7 @@
 
     <div class="form-row">
       <Btn class="btn-submit" type="submit">Save</Btn>
-      <span v-if="demo" style="font-size:.95rem; opacity:.7; margin-left:5px">
+      <span v-if="isDemo" class="demo-notice">
         Changes will not be saved in the demo version.
       </span>
     </div>
@@ -52,11 +52,10 @@
 <script lang="ts" setup>
 import { defineAsyncComponent, onMounted, ref } from 'vue'
 import { UpdateCurrentProfileData, userStore } from '@/stores'
-import { alerts, parseValidationError } from '@/utils'
+import { alerts, isDemo, parseValidationError } from '@/utils'
 
 const Btn = defineAsyncComponent(() => import('@/components/ui/Btn.vue'))
 
-const demo = NODE_ENV === 'demo'
 const profile = ref<UpdateCurrentProfileData>({} as unknown as UpdateCurrentProfileData)
 
 onMounted(() => {
@@ -72,6 +71,11 @@ const update = async () => {
     throw Error()
   }
 
+  if (isDemo) {
+    alerts.success('Profile updated.')
+    return
+  }
+
   try {
     await userStore.updateProfile(profile.value)
     profile.value.current_password = null
@@ -99,6 +103,12 @@ input {
   margin-top: .75rem;
 }
 
+.demo-notice {
+  font-size: .95rem;
+  opacity: .7;
+  margin-left: 5px;
+}
+
 @media only screen and (max-width: 667px) {
   input {
     &[type="text"], &[type="email"], &[type="password"] {
diff --git a/resources/assets/js/types.d.ts b/resources/assets/js/types.d.ts
index f9135cb478..78ba4dc723 100644
--- a/resources/assets/js/types.d.ts
+++ b/resources/assets/js/types.d.ts
@@ -91,8 +91,7 @@ declare module 'nouislider' {
   }): void
 }
 
-declare const KOEL_ENV: 'app' | 'web'
-declare const NODE_ENV: 'dev' | 'test' | 'prod' | 'demo'
+declare const KOEL_ENV: '' | 'demo'
 
 declare module '*.vue' {
   import { defineComponent } from 'vue'
diff --git a/resources/assets/js/utils/common.ts b/resources/assets/js/utils/common.ts
index 856f34ec51..f5209a984f 100644
--- a/resources/assets/js/utils/common.ts
+++ b/resources/assets/js/utils/common.ts
@@ -109,3 +109,5 @@ export const startDragging = (event: DragEvent, dragged: Song | Song[] | Album |
 
   createGhostDragImage(event, text)
 }
+
+export const isDemo = KOEL_ENV === 'demo'
diff --git a/webpack.config.js b/webpack.config.js
index f18eb0f146..16de7b4b53 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -24,8 +24,7 @@ module.exports = {
   },
   plugins: [
     new webpack.DefinePlugin({
-      KOEL_ENV: '"web"',
-      NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')
+      KOEL_ENV: JSON.stringify(process.env.KOEL_ENV || '""')
     })
   ],
   devServer: {