add support for configuring server url. fixes #11

This commit is contained in:
Thomas Amland 2020-09-19 09:23:25 +02:00
parent f22c03d2c8
commit 419f26b8bf
9 changed files with 45 additions and 6 deletions

View File

@ -22,7 +22,9 @@ Modern responsive web frontend for [Airsonic](https://github.com/airsonic/airson
https://airsonic.netlify.com
Password is `guest`.
Server: `/api`
Username: `guest1`
Password:`guest`
You can use the URL and credentials for your own server if you prefer. **Note**: if your server is using http only you must allow mixed content in your browser otherwise login will not work.
@ -37,6 +39,10 @@ $ docker run -d -p 8080:80 tamland/airsonic-frontend:latest
You can now access the application at http://localhost:8080/
Environment variables:
- `SERVER_URL` (Optional): The backend server URL. When set the server input on the login page will not be displayed.
### Pre-built bundle
Pre-built bundles can be found in the [Actions](https://github.com/tamland/airsonic-frontend/actions)

View File

@ -2,5 +2,12 @@ FROM nginx:alpine
EXPOSE 80
RUN apk add gettext
COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
COPY docker/env.js.template /env.js.template
COPY docker/docker-entrypoint.sh /docker-entrypoint.sh
RUN chmod +x /docker-entrypoint.sh
COPY dist/ /var/www/html/
ENTRYPOINT ["/docker-entrypoint.sh"]
CMD ["nginx", "-g", "daemon off;"]

View File

@ -0,0 +1,4 @@
#!/bin/sh
set -e
envsubst < env.js.template > /var/www/html/env.js
exec "$@"

3
docker/env.js.template Normal file
View File

@ -0,0 +1,3 @@
window.env = {
SERVER_URL: "$SERVER_URL",
}

View File

@ -17,4 +17,8 @@ server {
location = /index.html {
add_header 'Cache-Control' 'no-cache';
}
location = /env.js {
add_header 'Cache-Control' 'no-cache';
}
}

View File

@ -12,6 +12,7 @@
<meta name="theme-color" content="#1a1a1a" />
<link rel="icon" href="<%= BASE_URL %>icon.svg">
<link rel=manifest href="<%= BASE_URL %>manifest.webmanifest">
<script src="<%= BASE_URL %>env.js"></script>
<title></title>
</head>
<body>

View File

@ -5,7 +5,7 @@
<div style="font-size: 4rem; color: #fff;" class="text-center">
<Icon icon="person-circle" />
</div>
<b-form-group label="Server">
<b-form-group v-if="!config.serverUrl" label="Server">
<b-form-input v-model="server" name="server" type="text" :state="valid" />
</b-form-group>
<b-form-group label="Username">
@ -28,6 +28,7 @@
</template>>
<script lang="ts">
import Vue from 'vue'
import { config } from '@/shared/config'
export default Vue.extend({
props: {
@ -47,7 +48,8 @@
computed: {
valid(): false | null {
return this.error == null ? null : false
}
},
config: () => config
},
async created() {
this.server = await this.$auth.server

View File

@ -1,5 +1,6 @@
import axios from 'axios'
import { randomString, md5 } from '@/shared/utils'
import { config } from '@/shared/config'
export class AuthService {
public server = '';
@ -9,14 +10,16 @@ export class AuthService {
private authenticated = false;
constructor() {
this.server = localStorage.getItem('server') || '/api'
this.username = localStorage.getItem('username') || 'guest1'
this.server = config.serverUrl || localStorage.getItem('server') || ''
this.username = localStorage.getItem('username') || ''
this.salt = localStorage.getItem('salt') || ''
this.hash = localStorage.getItem('hash') || ''
}
private saveSession() {
localStorage.setItem('server', this.server)
if (!config.serverUrl) {
localStorage.setItem('server', this.server)
}
localStorage.setItem('username', this.username)
localStorage.setItem('salt', this.salt)
localStorage.setItem('hash', this.hash)

9
src/shared/config.ts Normal file
View File

@ -0,0 +1,9 @@
export interface Config {
serverUrl: string
}
const env = (window as any).env
export const config: Config = {
serverUrl: env?.SERVER_URL || '',
}