From e72fb04303d49570f1088142ac8eeb4ca57f4c83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Go=CC=88sta?= <goesta@helta-skelta.de>
Date: Sun, 3 Oct 2021 01:34:05 +0200
Subject: [PATCH] feat: moonraker user authorization

---
 .gitignore                                    |   1 +
 src/api/moonraker.ts                          |  57 +++++++
 src/api/moonraker.types.ts                    |  40 +++++
 src/components/TheConnectingDialog.vue        |  29 +++-
 src/components/panels/FarmPrinterPanel.vue    |  58 ++++++-
 .../panels/Machine/ConfigFilesPanel.vue       |   2 +-
 src/components/panels/Machine/UsersPanel.vue  | 106 +++++++++++++
 src/components/ui/LoginForm.vue               |  76 +++++++++
 src/locales/en.json                           |  26 ++-
 src/main.ts                                   |   2 +
 src/pages/Machine.vue                         |   7 +-
 src/plugins/interceptors.ts                   |  40 +++++
 src/plugins/webSocketClient.ts                |  16 +-
 src/store/auth/actions.ts                     |  80 ++++++++++
 src/store/auth/getters.ts                     |   9 ++
 src/store/auth/index.ts                       |  24 +++
 src/store/auth/mutations.ts                   |  44 ++++++
 src/store/auth/types.ts                       |  42 +++++
 src/store/farm/printer/actions.ts             | 148 +++++++++++-------
 src/store/farm/printer/getters.ts             |  23 ++-
 src/store/farm/printer/index.ts               |   4 +-
 src/store/farm/printer/types.ts               |   4 +-
 src/store/index.ts                            |   2 +
 src/store/server/actions.ts                   |   5 +-
 src/store/socket/actions.ts                   |   6 +-
 src/store/types.ts                            |   4 +-
 26 files changed, 768 insertions(+), 87 deletions(-)
 create mode 100644 src/api/moonraker.ts
 create mode 100644 src/api/moonraker.types.ts
 create mode 100644 src/components/panels/Machine/UsersPanel.vue
 create mode 100644 src/components/ui/LoginForm.vue
 create mode 100644 src/plugins/interceptors.ts
 create mode 100644 src/store/auth/actions.ts
 create mode 100644 src/store/auth/getters.ts
 create mode 100644 src/store/auth/index.ts
 create mode 100644 src/store/auth/mutations.ts
 create mode 100644 src/store/auth/types.ts

diff --git a/.gitignore b/.gitignore
index 635094a58..fcf1fe2ea 100644
--- a/.gitignore
+++ b/.gitignore
@@ -20,3 +20,4 @@ docker/config/*.cfg
 docker/config/*.conf
 docker/config/.mainsail.json
 docker/config/.theme
+*.iml
diff --git a/src/api/moonraker.ts b/src/api/moonraker.ts
new file mode 100644
index 000000000..6e1485492
--- /dev/null
+++ b/src/api/moonraker.ts
@@ -0,0 +1,57 @@
+import axios from 'axios'
+import store from '@/store'
+
+import {
+    MoonrakerApiResponse, MoonrakerCreateUserResponse, MoonrakerDeleteUserResponse,
+    MoonrakerLoginResponse,
+    MoonrakerUser,
+    MoonrakerUsersResponse
+} from '@/api/moonraker.types'
+
+async function login(baseUrl: string, username: string, password: string): Promise<MoonrakerLoginResponse> {
+    const url = baseUrl + '/access/login'
+    const response = await axios.post<MoonrakerApiResponse<MoonrakerLoginResponse>>(url, {
+        username,
+        password
+    })
+    return response.data.result
+}
+
+export async function getOneshotToken(baseUrl: string): Promise<string> {
+    const url = `${baseUrl}/access/oneshot_token`
+    const response = await axios.get<MoonrakerApiResponse<string>>(url, {})
+    return response.data.result
+}
+
+async function getUserlist(baseUrl: string): Promise<MoonrakerUser[]> {
+    const url = baseUrl + '/access/users/list'
+    const result = await axios.get<MoonrakerApiResponse<MoonrakerUsersResponse>>(url, {})
+    return result.data.result.users
+}
+
+async function deleteUser(baseUrl: string, username: string): Promise<MoonrakerDeleteUserResponse> {
+    const url = store.getters['socket/getUrl'] + '/access/user'
+    const response = await axios.delete<MoonrakerApiResponse<MoonrakerDeleteUserResponse>>(url, {
+        data: {
+            username
+        }
+    })
+    return response.data.result
+}
+
+async function createUser(baseUrl: string, username: string, password: string): Promise<MoonrakerCreateUserResponse> {
+    const url = baseUrl + '/access/user'
+    const response = await axios.post<MoonrakerApiResponse<MoonrakerCreateUserResponse>>(url, {
+        username: username,
+        password: password
+    }, {})
+    return response.data.result
+}
+
+export const MoonrakerApi = {
+    login,
+    createUser,
+    deleteUser,
+    getOneshotToken,
+    getUserlist
+}
diff --git a/src/api/moonraker.types.ts b/src/api/moonraker.types.ts
new file mode 100644
index 000000000..088e9ba20
--- /dev/null
+++ b/src/api/moonraker.types.ts
@@ -0,0 +1,40 @@
+export interface MoonrakerApiResponse<T> {
+    result: T
+}
+
+export interface MoonrakerDeleteUserResponse {
+    username: string
+    action: 'user_deleted'
+}
+
+export interface MoonrakerCreateUserResponse {
+    username: string
+    password: string
+}
+
+export interface MoonrakerLoginResponse {
+    username: string
+    token: string
+    refresh_token: string
+    action: 'user_logged_in'
+}
+
+export interface MoonrakerLogoutResponse {
+    username: string;
+    action: 'user_logged_out'
+}
+
+export interface MoonrakerUsersResponse {
+    users: MoonrakerUser[]
+}
+
+export interface MoonrakerUser {
+    username: string
+    created_on: number
+}
+
+export interface RefreshTokenResponse {
+    username: string;
+    token: string;
+    action: 'user_jwt_refresh'
+}
diff --git a/src/components/TheConnectingDialog.vue b/src/components/TheConnectingDialog.vue
index e78c42b21..a7c0ac63a 100644
--- a/src/components/TheConnectingDialog.vue
+++ b/src/components/TheConnectingDialog.vue
@@ -1,5 +1,4 @@
 <style scoped>
-
 </style>
 
 <template>
@@ -9,7 +8,8 @@
                 <v-toolbar-title>
                     <span class="subheading">
                         <v-icon class="mdi mdi-connection" left></v-icon>
-                        <template v-if="connectingFailed">{{ $t("ConnectionDialog.Failed", {'host': formatHostname}) }}</template>
+                        <template v-if="showLogin">{{ $t("ConnectionDialog.Login", {'host': formatHostname}) }}</template>
+                        <template v-else-if="!isConnecting && connectingFailed">{{ $t("ConnectionDialog.Failed", {'host': formatHostname}) }}</template>
                         <template v-else-if="isConnecting">{{ $t("ConnectionDialog.Connecting", {'host': formatHostname}) }}</template>
                         <template v-else>{{ formatHostname }}</template>
                     </span>
@@ -18,7 +18,7 @@
             <v-card-text class="pt-5" v-if="isConnecting">
                 <v-progress-linear color="white" indeterminate></v-progress-linear>
             </v-card-text>
-            <v-card-text class="pt-5" v-if="!isConnecting && connectingFailed">
+            <v-card-text class="pt-5" v-if="!isConnecting && !showLogin && connectingFailed">
                 <connection-status :moonraker="false"></connection-status>
                 <p class="text-center mt-3">{{ $t("ConnectionDialog.CannotConnectTo", {'host': formatHostname}) }}</p>
                 <template v-if="counter > 2">
@@ -34,6 +34,9 @@
                     <v-btn @click="reconnect" color="primary">{{ $t("ConnectionDialog.TryAgain") }}</v-btn>
                 </div>
             </v-card-text>
+
+            <login-form v-if="showLogin" :show-error="loginFailed" @login="login"></login-form>
+
         </v-card>
     </v-dialog>
 </template>
@@ -44,10 +47,13 @@ import Component from 'vue-class-component'
 import { Mixins } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import ConnectionStatus from '@/components/ui/ConnectionStatus.vue'
+import LoginForm from '@/components/ui/LoginForm.vue'
+import {UserCredentials} from '@/store/auth/types'
 
 @Component({
     components: {
         ConnectionStatus,
+        LoginForm
     }
 })
 export default class TheUpdateDialog extends Mixins(BaseMixin) {
@@ -85,10 +91,25 @@ export default class TheUpdateDialog extends Mixins(BaseMixin) {
         return !this.isConnected
     }
 
+    get showLogin() {
+        return this.$store.state.auth.showLogin
+    }
+
+    get loginFailed() {
+        return this.$store.state.auth.loginFailed
+    }
+
     reconnect() {
         this.counter++
         this.$store.dispatch('socket/setData', { connectingFailed: false })
         this.$socket.connect()
     }
+
+    login(user: UserCredentials) {
+        this.$store.dispatch('auth/login', {
+            username: user.username,
+            password: user.password
+        })
+    }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/panels/FarmPrinterPanel.vue b/src/components/panels/FarmPrinterPanel.vue
index 125fcadf7..02f7a57b7 100644
--- a/src/components/panels/FarmPrinterPanel.vue
+++ b/src/components/panels/FarmPrinterPanel.vue
@@ -106,12 +106,27 @@
                     </v-card-text>
                     <v-fade-transition>
                         <v-overlay v-if="hover" absolute :z-index="4" >
-                            <v-btn color="primary" @click="clickPrinter">{{ printer.socket.isConnected ? $t("Panels.FarmPrinterPanel.SwitchToPrinter") : $t("Panels.FarmPrinterPanel.ReconnectToPrinter") }}</v-btn>
+                            <v-btn color="primary" @click="clickPrinter">{{ $t(getButtonText) }}</v-btn>
                         </v-overlay>
                     </v-fade-transition>
                 </div>
             </template>
         </v-hover>
+
+      <v-dialog v-model="showLogin" persistent :width="400">
+        <v-card dark>
+          <v-toolbar flat dense color="primary">
+            <v-toolbar-title>
+                    <span class="subheading">
+                        <v-icon class="mdi mdi-connection" left></v-icon>
+                        <template>{{ $t("ConnectionDialog.Login", {'host': printer_name}) }}</template>
+                    </span>
+            </v-toolbar-title>
+          </v-toolbar>
+          <login-form :show-error="printer.socket.loginFailed" @login="login"></login-form>
+        </v-card>
+      </v-dialog>
+
     </v-card>
 </template>
 
@@ -122,17 +137,20 @@ import { FarmPrinterState } from '@/store/farm/printer/types'
 import Mjpegstreamer from '@/components/webcams/Mjpegstreamer.vue'
 import MjpegstreamerAdaptive from '@/components/webcams/MjpegstreamerAdaptive.vue'
 import MainsailLogo from '@/components/ui/MainsailLogo.vue'
+import LoginForm from '@/components/ui/LoginForm.vue'
+import {UserCredentials} from '@/store/auth/types'
 
 @Component({
     components: {
         'webcam-mjpegstreamer': Mjpegstreamer,
         'webcam-mjpegstreamer-adaptive': MjpegstreamerAdaptive,
-        'mainsail-logo': MainsailLogo
+        'mainsail-logo': MainsailLogo,
+        LoginForm
     }
 })
 export default class FarmPrinterPanel extends Mixins(BaseMixin) {
     private imageHeight = 200;
-
+    private showLogin = false
     @Prop({ type: Object, required: true }) printer!: FarmPrinterState
     @Ref() readonly imageDiv!: Vue
 
@@ -166,6 +184,10 @@ export default class FarmPrinterPanel extends Mixins(BaseMixin) {
         return this.$store.getters['farm/'+this.printer._namespace+'/getStatus']
     }
 
+    get reqiresLogin() {
+        return this.$store.getters['farm/'+this.printer._namespace+'/getRequiresLogin']
+    }
+
     get printer_current_filename() {
         return this.$store.getters['farm/'+this.printer._namespace+'/getCurrentFilename']
     }
@@ -201,11 +223,33 @@ export default class FarmPrinterPanel extends Mixins(BaseMixin) {
         return false
     }
 
+    get getButtonText(): string {
+        if (this.printer.socket.isConnected) {
+            return 'Panels.FarmPrinterPanel.SwitchToPrinter'
+        }
+        if (this.printer.socket.requiresLogin) {
+            return 'Panels.FarmPrinterPanel.Login'
+        }
+
+        return 'Panels.FarmPrinterPanel.ReconnectToPrinter'
+    }
+
     clickPrinter() {
-        if (this.printer.socket.isConnected)
+        if (this.printer.socket.requiresLogin) {
+            this.showLogin = true
+            return
+        }
+        if (this.printer.socket.isConnected) {
             this.$store.dispatch('changePrinter', { printer: this.printer._namespace })
-        else
-            this.$store.dispatch('farm/'+this.printer._namespace+'/reconnect')
+            return
+        }
+        this.$store.dispatch('farm/'+this.printer._namespace+'/reconnect')
+    }
+
+    login(user: UserCredentials) {
+        this.$store.dispatch('farm/'+this.printer._namespace+'/login', user).then(() => {
+            this.showLogin = this.printer.socket.loginFailed
+        })
     }
 
     mounted() {
@@ -224,4 +268,4 @@ export default class FarmPrinterPanel extends Mixins(BaseMixin) {
     }
 
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/panels/Machine/ConfigFilesPanel.vue b/src/components/panels/Machine/ConfigFilesPanel.vue
index 363dbe5c1..608edc25a 100644
--- a/src/components/panels/Machine/ConfigFilesPanel.vue
+++ b/src/components/panels/Machine/ConfigFilesPanel.vue
@@ -4,7 +4,7 @@
 
 <template>
     <div>
-        <v-card>
+        <v-card class="mb-6">
             <v-toolbar flat dense>
                 <v-toolbar-title>
                     <span class="subheading align-baseline"><v-icon left>mdi-information</v-icon>{{ $t('Machine.ConfigFilesPanel.ConfigFiles') }}</span>
diff --git a/src/components/panels/Machine/UsersPanel.vue b/src/components/panels/Machine/UsersPanel.vue
new file mode 100644
index 000000000..63fd8fdda
--- /dev/null
+++ b/src/components/panels/Machine/UsersPanel.vue
@@ -0,0 +1,106 @@
+<style scoped>
+</style>
+
+<template>
+  <div>
+    <v-card class="mb-6">
+      <v-toolbar flat dense>
+        <v-toolbar-title>
+          <span class="subheading align-baseline"><v-icon
+              left>mdi-account-multiple</v-icon>{{ $t('Machine.UsersPanel.Users') }}</span>
+        </v-toolbar-title>
+        <v-spacer></v-spacer>
+        <v-tooltip bottom>
+          <template v-slot:activator="{ on, attrs }">
+            <v-btn small class="px-2 minwidth-0" color="primary" @click="openCreateUserDialog" v-bind="attrs" v-on="on">
+              <v-icon small>mdi-account-plus</v-icon>
+            </v-btn>
+          </template>
+          <span>{{ $t('Machine.UsersPanel.CreateUser') }}</span>
+        </v-tooltip>
+      </v-toolbar>
+
+      <v-list>
+        <v-list-item v-for="user in userlist" :key="user.username">
+          <v-list-item-avatar>
+            <v-icon dark>mdi-account</v-icon>
+          </v-list-item-avatar>
+
+          <v-list-item-content>
+            <v-list-item-title v-text="user.username"></v-list-item-title>
+            <v-list-item-subtitle>{{
+                $t("Machine.UsersPanel.CreatedAt", {'date': formatTimestamp(user.created_on)})
+              }}
+            </v-list-item-subtitle>
+          </v-list-item-content>
+
+          <v-list-item-action>
+            <v-btn icon>
+              <v-icon small @click="deleteUser(user.username)">mdi-delete</v-icon>
+            </v-btn>
+          </v-list-item-action>
+        </v-list-item>
+      </v-list>
+    </v-card>
+
+    <v-dialog v-model="showCreateUserDialog" max-width="400">
+      <v-card>
+        <v-card-title class="headline">{{ $t('Machine.UsersPanel.CreateUser') }}</v-card-title>
+        <v-card-text>
+          <v-text-field :label="$t('Machine.UsersPanel.Username')" required v-model="createUserDialogModel.username"></v-text-field>
+          <v-text-field :label="$t('Machine.UsersPanel.Password')" required v-model="createUserDialogModel.password"></v-text-field>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="" text @click="showCreateUserDialog = false">{{ $t('Machine.UsersPanel.Cancel') }}</v-btn>
+          <v-btn color="primary" text @click="createUser">{{ $t('Machine.UsersPanel.Create') }}</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script lang="ts">
+
+import {Component, Mixins} from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import {User} from '@/store/auth/types'
+
+
+@Component
+export default class UsersPanel extends Mixins(BaseMixin) {
+
+    showCreateUserDialog = false
+    createUserDialogModel = {
+        username: '',
+        password: ''
+    }
+
+    get userlist(): User[] {
+        return this.$store.getters['auth/getUserlist'] || []
+    }
+
+    openCreateUserDialog(): void {
+        this.showCreateUserDialog = true
+    }
+
+    createUser(): void {
+        this.$store.dispatch('auth/createUser', {
+            username: this.createUserDialogModel.username,
+            password: this.createUserDialogModel.password
+        })
+        this.showCreateUserDialog = false
+    }
+
+    deleteUser(username: string): void {
+        this.$store.dispatch('auth/deleteUser', {
+            username: username
+        })
+    }
+
+    formatTimestamp(timestamp: number): string {
+        const date = new Date(timestamp * 1000)
+        return date.toLocaleDateString()
+    }
+}
+</script>
diff --git a/src/components/ui/LoginForm.vue b/src/components/ui/LoginForm.vue
new file mode 100644
index 000000000..dba1c0b13
--- /dev/null
+++ b/src/components/ui/LoginForm.vue
@@ -0,0 +1,76 @@
+<style scoped>
+.login-error-message {
+    color: #F56565;
+}
+</style>
+
+<template>
+    <v-card-text class="pt-5">
+        <v-form
+            ref="form"
+            v-model="valid"
+            lazy-validation
+            @submit.prevent="login"
+        >
+            <v-text-field
+                v-model="username"
+                :label="$t('LoginForm.Username')"
+                required
+            ></v-text-field>
+
+            <v-text-field
+                v-model="password"
+                :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
+                :type="showPassword ? 'text' : 'password'"
+                name="input-10-1"
+                :label="$t('LoginForm.Password')"
+                @click:append="showPassword = !showPassword"
+            ></v-text-field>
+            <div class="login-error-message" v-if="showError">{{ $t("LoginForm.LoginFailed") }}</div>
+            <v-checkbox
+                v-model="rememberMe"
+                :label="$t('LoginForm.RememberMe')"
+                required
+            ></v-checkbox>
+
+            <v-btn
+                type="submit"
+                :disabled="!valid"
+                color="success"
+                class="mr-4"
+            >
+                {{ $t("LoginForm.LoginButton") }}
+            </v-btn>
+
+        </v-form>
+    </v-card-text>
+</template>
+
+<script lang="ts">
+
+import Component from 'vue-class-component'
+import {Emit, Mixins, Prop} from 'vue-property-decorator'
+import BaseMixin from '../mixins/base'
+import {UserCredentials} from '@/store/auth/types'
+
+@Component
+export default class LoginForm extends Mixins(BaseMixin) {
+    valid = true
+    username = ''
+    password = ''
+    rememberMe = false
+    showPassword = false
+
+    @Prop({required: true, default: false})
+    readonly showError!: boolean
+
+    @Emit()
+    login(): UserCredentials {
+        return {
+            username: this.username,
+            password: this.password
+        }
+    }
+
+}
+</script>
diff --git a/src/locales/en.json b/src/locales/en.json
index 9a0b12624..6c25c905b 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -49,8 +49,16 @@
 			"DescriptionPreviouslyTemperatureLimited": "rPi uC (3A+/3B+ only) temperature was at least once above the soft limit (default 60C) since last power-on."
 		}
 	},
+	"LoginForm": {
+		"Username": "Username",
+		"Password": "Password",
+		"RememberMe": "Remember me",
+		"LoginButton": "Login",
+		"LoginFailed": "Login failed."
+	},
     "ConnectionDialog": {
-        "Connecting": "Connecting to {host}",
+		"Login": "Login to {host}",
+		"Connecting": "Connecting to {host}",
         "Failed": "Connection failed",
         "CannotConnectTo": "Cannot connect to Moonraker ({host}).",
         "TryAgain": "try again",
@@ -257,7 +265,8 @@
 		"FarmPrinterPanel": {
 			"WebcamOff": "Off",
 			"SwitchToPrinter": "Switch to Printer",
-			"ReconnectToPrinter": "Reconnect"
+			"ReconnectToPrinter": "Reconnect",
+			"Login": "Login"
 		},
 		"KlippyStatePanel": {
 			"KlippyState": "Klippy-State",
@@ -470,6 +479,17 @@
 			"Constants": "Constants",
 			"LastStats": "Last stats",
 			"HostDetails": "Host details"
+		},
+		"UsersPanel": {
+			"Users": "Users",
+			"CreateUser": "Create User",
+			"RemoveUser": "Delete User",
+			"ResetPassword": "Reset Password",
+			"CreatedAt": "Created at {date}",
+			"Username": "Username",
+			"Password": "Password",
+			"Create": "Create",
+			"Cancel": "Cancel"
 		}
 	},
 	"Settings": {
@@ -635,4 +655,4 @@
 		"Downloading" : "Downloading",
 		"ColorMode" : "Color Mode"
 	}
-}
\ No newline at end of file
+}
diff --git a/src/main.ts b/src/main.ts
index bfe3fcdf5..d1625fa9a 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -38,6 +38,7 @@ Vue.use(VueToast, {
 //vue-echarts-ts
 import { plugin } from 'echarts-for-vue'
 import * as echarts from 'echarts/core'
+import {setupInterceptors} from '@/plugins/interceptors'
 Vue.use(plugin, { echarts })
 
 //load config.json and init vue
@@ -71,4 +72,5 @@ fetch('/config.json')
     window.console.error('Error:', error)
     })
 
+setupInterceptors()
 
diff --git a/src/pages/Machine.vue b/src/pages/Machine.vue
index 015112d22..e0173c9f7 100644
--- a/src/pages/Machine.vue
+++ b/src/pages/Machine.vue
@@ -3,6 +3,7 @@
         <v-row>
             <v-col class="col-12 col-md-6">
                 <config-files-panel></config-files-panel>
+                <users-panel></users-panel>
             </v-col>
             <v-col class="col-12 col-md-6">
                 <klippy-state-panel></klippy-state-panel>
@@ -32,10 +33,12 @@ import LogfilesPanel from '@/components/panels/Machine/LogfilesPanel.vue'
 import EndstopPanel from '@/components/panels/Machine/EndstopPanel.vue'
 import ConfigFilesPanel from '@/components/panels/Machine/ConfigFilesPanel.vue'
 import SystemPanel from '@/components/panels/Machine/SystemPanel.vue'
+import UsersPanel from '@/components/panels/Machine/UsersPanel.vue'
+
 @Component({
-    components: {SystemPanel, ConfigFilesPanel, EndstopPanel, LogfilesPanel, UpdatePanel, LimitsPanel, KlippyStatePanel}
+    components: {SystemPanel, ConfigFilesPanel, EndstopPanel, LogfilesPanel, UpdatePanel, LimitsPanel, KlippyStatePanel, UsersPanel}
 })
 export default class PageMachine extends Mixins(BaseMixin) {
 
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/plugins/interceptors.ts b/src/plugins/interceptors.ts
new file mode 100644
index 000000000..dc198e24f
--- /dev/null
+++ b/src/plugins/interceptors.ts
@@ -0,0 +1,40 @@
+import store from '@/store'
+import axios from 'axios'
+import {AxiosRequestConfig} from 'axios'
+
+const extractBaseUrlRegex = /(?<baseurl>\/\/[\w|.|:]+)\//
+
+function getBaseUrl(config: AxiosRequestConfig) {
+    const match = config.url?.match(extractBaseUrlRegex)
+    const baseUrl = match?.groups?.baseurl
+    return baseUrl
+}
+
+export function setupInterceptors() {
+
+    axios.interceptors.request.use(function (config) {
+        const baseUrl = getBaseUrl(config)
+        if (!baseUrl) {
+            console.error('BASEURL REGEX FAILED', config.url)
+            return config
+        }
+        const token = store.state.auth?.servers?.[baseUrl]?.token
+        if (token) {
+            config.headers.Authorization = `Bearer ${token}`
+        }
+
+        return config
+    }, function (err) {
+        return Promise.reject(err)
+    })
+
+    axios.interceptors.response.use(function (response) {
+        return response
+    }, function (error) {
+        if (error.response?.status === 401) {
+            store.dispatch('auth/showLogin')
+        }
+        return Promise.reject(error)
+    })
+}
+
diff --git a/src/plugins/webSocketClient.ts b/src/plugins/webSocketClient.ts
index 28a20ea3c..a2f48ea7a 100644
--- a/src/plugins/webSocketClient.ts
+++ b/src/plugins/webSocketClient.ts
@@ -1,6 +1,7 @@
 import {Store} from 'vuex'
 import _Vue from 'vue'
 import {RootState} from '@/store/types'
+import {getOneshotToken} from '@/api/moonraker'
 
 export class WebSocketClient {
     url = ''
@@ -12,6 +13,7 @@ export class WebSocketClient {
     timerId: number | null = null
     store: Store<RootState> | null = null
     waits: Wait[] = []
+    oneShotToken: string | undefined
 
     constructor (options: WebSocketPluginOptions) {
         this.url = options.url
@@ -32,8 +34,20 @@ export class WebSocketClient {
     }
 
     connect(): void {
+        const baseUrl = this.store?.getters['socket/getUrl']
         this.store?.dispatch('socket/setData', { isConnecting: true })
-        this.instance = new WebSocket(this.url)
+        getOneshotToken(baseUrl).then(token => {
+            this.oneShotToken = token
+            this.connectWebsocket()
+        }).catch(e => {
+            this.store?.dispatch('socket/onClose', {})
+        })
+    }
+
+    connectWebsocket(): void {
+        const connectionUrl = this.oneShotToken ? `${this.url}?token=${this.oneShotToken}` : this.url
+        this.store?.dispatch('socket/setData', { isConnecting: true })
+        this.instance = new WebSocket(connectionUrl)
 
         this.instance.onopen = () => {
             this.reconnects = 0
diff --git a/src/store/auth/actions.ts b/src/store/auth/actions.ts
new file mode 100644
index 000000000..024e157e3
--- /dev/null
+++ b/src/store/auth/actions.ts
@@ -0,0 +1,80 @@
+import {ActionTree} from 'vuex'
+import {RootState} from '@/store/types'
+import Vue from 'vue'
+import i18n from '@/plugins/i18n'
+import {AuthState, UserCredentials} from '@/store/auth/types'
+import {MoonrakerApi} from '@/api/moonraker'
+import {MoonrakerLoginResponse} from '@/api/moonraker.types'
+
+export const actions: ActionTree<AuthState, RootState> = {
+    reset({commit}) {
+        commit('reset')
+    },
+
+    async getUsers({state, dispatch, commit, rootGetters}) {
+        try {
+            const baseUrl = rootGetters['socket/getUrl']
+            const users = await MoonrakerApi.getUserlist(baseUrl)
+            commit('setUsers', {users, baseUrl})
+        } catch (error) {
+            window.console.log(error.response?.data.error)
+            Vue.$toast.error(i18n.t('Auth.GetUsersFailed').toString())
+        }
+    },
+
+    async createUser({state, dispatch, commit, rootGetters}, payload: UserCredentials) {
+        const baseUrl = rootGetters['socket/getUrl']
+        try {
+            await MoonrakerApi.createUser(baseUrl, payload.username, payload.password)
+            dispatch('getUsers')
+        } catch (error) {
+            window.console.log(error.response?.data.error)
+            Vue.$toast.error(i18n.t('Auth.FailedToCreateUser', { username: payload.username }).toString())
+        }
+    },
+
+    async deleteUser({state, dispatch, commit, rootGetters}, payload) {
+        const baseUrl = rootGetters['socket/getUrl']
+        try {
+            await MoonrakerApi.deleteUser(baseUrl, payload.username)
+            dispatch('getUsers')
+        } catch (error) {
+            window.console.log(error.response?.data.error)
+            Vue.$toast.error(i18n.t('Auth.FailedToDeleteUser', { username: payload.username }).toString())
+        }
+    },
+
+    logout({state, dispatch, commit, rootGetters}, payload) {
+        console.log('logout')
+    },
+
+    showLogin({state, dispatch, commit, rootGetters}) {
+        commit('showLogin', true)
+    },
+
+    async login({state, dispatch, commit, rootGetters}, payload) {
+        const baseUrl = rootGetters['socket/getUrl']
+        try {
+            const response: MoonrakerLoginResponse = await MoonrakerApi.login(baseUrl, payload.username, payload.password)
+            commit('setLoginData', {
+                username: response.username,
+                token: response.token,
+                refreshToken: response.refresh_token,
+                baseUrl,
+            })
+            dispatch('socket/reconnect', null, { root: true })
+            commit('showLogin', false)
+        } catch (e) {
+            commit('setLoginFailed', true)
+        }
+    },
+
+    resetPassword({state, dispatch, commit, rootGetters}, payload) {
+        console.log('resetPassword')
+    },
+
+    close({commit}) {
+        commit('reset')
+    },
+
+}
diff --git a/src/store/auth/getters.ts b/src/store/auth/getters.ts
new file mode 100644
index 000000000..9c756ee56
--- /dev/null
+++ b/src/store/auth/getters.ts
@@ -0,0 +1,9 @@
+import {GetterTree} from 'vuex'
+import {AuthState, User} from '@/store/auth/types'
+
+export const getters: GetterTree<AuthState, any> = {
+    getUserlist(state: AuthState, getters, rootState, rootGetters): User[] {
+        const baseUrl = rootGetters['socket/getUrl']
+        return state.servers[baseUrl]?.users || []
+    }
+}
diff --git a/src/store/auth/index.ts b/src/store/auth/index.ts
new file mode 100644
index 000000000..be653ca5e
--- /dev/null
+++ b/src/store/auth/index.ts
@@ -0,0 +1,24 @@
+import {Module} from 'vuex'
+import {actions} from '@/store/auth/actions'
+import {mutations} from '@/store/auth/mutations'
+import {getters} from '@/store/auth/getters'
+import {AuthState} from '@/store/auth/types'
+
+export const getDefaultState = (): AuthState => {
+    return {
+        showLogin: false,
+        loginFailed: false,
+        servers: {}
+    }
+}
+
+// initial state
+const state = getDefaultState()
+
+export const auth: Module<AuthState, any> = {
+    namespaced: true,
+    state,
+    getters,
+    actions,
+    mutations
+}
diff --git a/src/store/auth/mutations.ts b/src/store/auth/mutations.ts
new file mode 100644
index 000000000..72d7fedca
--- /dev/null
+++ b/src/store/auth/mutations.ts
@@ -0,0 +1,44 @@
+import {getDefaultState} from './index'
+import {MutationTree} from 'vuex'
+import {AuthState, SetLoginData, User} from '@/store/auth/types'
+
+export const mutations: MutationTree<AuthState> = {
+    reset(state: AuthState) {
+        Object.assign(state, getDefaultState())
+    },
+
+    setUsers(state: AuthState, payload: {baseUrl: string, users: User[]}) {
+        state.servers = {
+            ...state.servers,
+            [payload.baseUrl]: {
+                ...state.servers[payload.baseUrl],
+                users: payload.users
+            }
+        }
+    },
+
+    setLoginData(state: AuthState, login: SetLoginData) {
+        state.servers = {
+            ...state.servers,
+            [login.baseUrl]: {
+                ...state.servers[login.baseUrl],
+                token: login.token,
+                refreshToken: login.refreshToken,
+                username: login.username,
+                users: [],
+                loginFailed: false
+            }
+        }
+        state.loginFailed = false
+        state.showLogin = false
+    },
+
+    setLoginFailed(state: AuthState, hasFailed: boolean) {
+        state.loginFailed = hasFailed
+    },
+
+    showLogin(state: AuthState, showLogin: boolean) {
+        state.showLogin = showLogin
+    }
+
+}
diff --git a/src/store/auth/types.ts b/src/store/auth/types.ts
new file mode 100644
index 000000000..6b52fc9c5
--- /dev/null
+++ b/src/store/auth/types.ts
@@ -0,0 +1,42 @@
+
+export interface AuthState {
+    showLogin: boolean
+    loginFailed: boolean
+    servers: {
+        [key: string]: ServerAuthState
+    }
+}
+
+export interface SetLoginData {
+    username: string
+    token: string
+    refreshToken: string
+    baseUrl: string
+}
+
+export interface ServerAuthState {
+    users: User[]
+    username?: string
+    token?: string
+    refreshToken?: string
+    loginFailed: boolean
+}
+
+export interface User {
+    username: string
+    created_on: number
+}
+
+export interface UserCredentials {
+    username: string
+    password: string
+}
+
+export interface ResetPasswordRequest {
+    password: string
+    new_password: string
+}
+
+export interface RefreshTokenRequest {
+    refresh_token: string
+}
diff --git a/src/store/farm/printer/actions.ts b/src/store/farm/printer/actions.ts
index 635425849..d6aa96dd3 100644
--- a/src/store/farm/printer/actions.ts
+++ b/src/store/farm/printer/actions.ts
@@ -1,83 +1,111 @@
 import {ActionTree} from 'vuex'
 import {FarmPrinterState} from '@/store/farm/printer/types'
 import {RootState} from '@/store/types'
+import {getOneshotToken, MoonrakerApi} from '@/api/moonraker'
+import {MoonrakerLoginResponse} from '@/api/moonraker.types'
+import {UserCredentials} from '@/store/auth/types'
 
 export const actions: ActionTree<FarmPrinterState, RootState> = {
     reset({commit}) {
         commit('reset')
     },
 
-    connect({ state, commit, dispatch, getters }) {
-        commit('setSocketData', { isConnecting: true })
-        const socket = new WebSocket(getters.getSocketUrl)
-
-        socket.onopen = () => {
-            commit('setSocketData', {
-                instance: socket,
-                reconnects: 0,
-                isConnecting: false,
-                isConnected: true
-            })
-
-            dispatch('initPrinter')
+    async login({state, commit, dispatch, getters}, user: UserCredentials) {
+        const baseUrl = getters.getBaseUrl
+        try {
+            const response: MoonrakerLoginResponse = await MoonrakerApi.login(baseUrl, user.username, user.password)
+            commit('auth/setLoginData', {
+                username: response.username,
+                token: response.token,
+                refreshToken: response.refresh_token,
+                baseUrl,
+            }, { root: true })
+
+            commit('setSocketData', {requiresLogin: false, loginFailed: false})
+            dispatch('reconnect')
+        } catch (e) {
+            commit('setSocketData', {loginFailed: true})
         }
+    },
 
-        socket.onclose = (e) => {
-            if (!e.wasClean && state.socket.reconnects < state.socket.maxReconnects) {
-                commit('setSocketData', { reconnects: state.socket.reconnects + 1 })
+    async connect({state, commit, dispatch, getters}) {
+        try {
+            commit('setSocketData', {isConnecting: true})
+            const oneShotToken = await getOneshotToken(getters.getBaseUrl)
+            const connectionUrl = oneShotToken ? `${getters.getSocketUrl}?token=${oneShotToken}` : getters.getSocketUrl
+            const socket = new WebSocket(connectionUrl)
 
-                setTimeout(() => {
-                    dispatch('connect')
-                }, state.socket.reconnectInterval)
-            } else {
+            socket.onopen = () => {
                 commit('setSocketData', {
+                    instance: socket,
+                    reconnects: 0,
                     isConnecting: false,
-                    isConnected: false,
-                    reconnects: 0
+                    isConnected: true
                 })
-            }
-        }
 
-        socket.onerror = () => {
-            window.console.log('Farm Printer WebSocket Error')
-        }
+                dispatch('initPrinter')
+            }
 
-        socket.onmessage = (msg) => {
-            const data = JSON.parse(msg.data)
-            if (data && data.method) {
-                switch (data.method) {
-                case 'notify_status_update':
-                    commit('setData', data.params[0])
-                    break
-
-                case 'notify_klippy_disconnected':
-                    dispatch('disconnectKlippy')
-                    break
-
-                case 'notify_klippy_ready':
-                    dispatch('initPrinter')
-                    break
+            socket.onclose = (e) => {
+                if (!e.wasClean && state.socket.reconnects < state.socket.maxReconnects) {
+                    commit('setSocketData', {reconnects: state.socket.reconnects + 1})
+
+                    setTimeout(() => {
+                        dispatch('connect')
+                    }, state.socket.reconnectInterval)
+                } else {
+                    commit('setSocketData', {
+                        isConnecting: false,
+                        isConnected: false,
+                        reconnects: 0
+                    })
                 }
-            } else if ('result' in data) {
-                if (
-                    state.socket.wsData.filter(item => item.id === data.id).length > 0 &&
-					state.socket.wsData.filter(item => item.id === data.id)[0].action !== undefined &&
-					state.socket.wsData.filter(item => item.id === data.id)[0].action !== ''
-                ) {
-                    let result = data.result
-                    if (result === 'ok') result = { result: result }
-                    if (typeof(result) === 'string') result = { result: result }
-
-                    const preload = {}
-                    const wsData = state.socket.wsData.filter(item => item.id === data.id)[0]
-                    if (wsData.actionPreload) Object.assign(preload, wsData.actionPreload)
-                    Object.assign(preload, { requestParams: wsData.params })
-                    Object.assign(preload, result)
-
-                    dispatch(wsData.action, preload)
+            }
+
+            socket.onerror = () => {
+                window.console.log('Farm Printer WebSocket Error')
+            }
+
+            socket.onmessage = (msg) => {
+                const data = JSON.parse(msg.data)
+                if (data && data.method) {
+                    switch (data.method) {
+                    case 'notify_status_update':
+                        commit('setData', data.params[0])
+                        break
+
+                    case 'notify_klippy_disconnected':
+                        dispatch('disconnectKlippy')
+                        break
+
+                    case 'notify_klippy_ready':
+                        dispatch('initPrinter')
+                        break
+                    }
+                } else if ('result' in data) {
+                    if (
+                        state.socket.wsData.filter(item => item.id === data.id).length > 0 &&
+                        state.socket.wsData.filter(item => item.id === data.id)[0].action !== undefined &&
+                        state.socket.wsData.filter(item => item.id === data.id)[0].action !== ''
+                    ) {
+                        let result = data.result
+                        if (result === 'ok') result = {result: result}
+                        if (typeof (result) === 'string') result = {result: result}
+
+                        const preload = {}
+                        const wsData = state.socket.wsData.filter(item => item.id === data.id)[0]
+                        if (wsData.actionPreload) Object.assign(preload, wsData.actionPreload)
+                        Object.assign(preload, {requestParams: wsData.params})
+                        Object.assign(preload, result)
+
+                        dispatch(wsData.action, preload)
+                    }
                 }
             }
+        } catch (e) {
+            commit('setSocketData', {requiresLogin: true})
         }
+
     },
 
     reconnect({ state, dispatch }) {
@@ -206,4 +234,4 @@ export const actions: ActionTree<FarmPrinterState, RootState> = {
     getMainsailData({ commit }, payload) {
         commit('setMainsailData', payload.value)
     }
-}
\ No newline at end of file
+}
diff --git a/src/store/farm/printer/getters.ts b/src/store/farm/printer/getters.ts
index bbb0676cb..af1662a85 100644
--- a/src/store/farm/printer/getters.ts
+++ b/src/store/farm/printer/getters.ts
@@ -6,8 +6,12 @@ import {FarmPrinterState} from '@/store/farm/printer/types'
 // eslint-disable-next-line
 export const getters: GetterTree<FarmPrinterState, any> = {
 
+    getBaseUrl: (state) => {
+        return `//${state.socket.hostname}:${state.socket.port}`
+    },
+
     getSocketUrl: (state) => {
-        return state.socket.protocol+'://'+state.socket.hostname+':'+state.socket.port+'/websocket'
+        return `${state.socket.protocol}://${state.socket.hostname}:${state.socket.port}/websocket`
     },
 
     getSocketData: (state) => {
@@ -37,13 +41,26 @@ export const getters: GetterTree<FarmPrinterState, any> = {
         return state.socket.port !== 80 ? state.socket.hostname+':'+state.socket.port : state.socket.hostname
     },
 
+    getRequiresLogin: (state) => {
+        return state.socket.requiresLogin
+    },
+
     getLogoColor: (state) => {
         return state.data.gui?.theme?.logo ?? defaultLogoColor
     },
 
     getStatus: (state, getters) => {
         if (!state.socket.isConnected) {
-            return state.socket.isConnecting ? 'Connecting...' : 'Disconnected'
+            // TODO: Translations
+            if (state.socket.requiresLogin) {
+                return 'Login required'
+            }
+
+            if (state.socket.isConnecting) {
+                return 'Connecting...'
+            }
+
+            return 'Disconnected'
         } else if (state.data?.print_stats?.state) {
             if (state.data.print_stats.state === 'printing') {
                 const percent = getters['getPrintPercent']
@@ -236,4 +253,4 @@ export const getters: GetterTree<FarmPrinterState, any> = {
     getPrinterWebcams: (state) => {
         return state.data.gui.webcam.configs ?? []
     }
-}
\ No newline at end of file
+}
diff --git a/src/store/farm/printer/index.ts b/src/store/farm/printer/index.ts
index 013c766d9..964d0314c 100644
--- a/src/store/farm/printer/index.ts
+++ b/src/store/farm/printer/index.ts
@@ -19,6 +19,8 @@ export const getDefaultState = (): FarmPrinterState => {
             reconnects: 0,
             maxReconnects: 2,
             reconnectInterval: 1000,
+            requiresLogin: false,
+            loginFailed: false,
             wsData: [],
         },
         data: {
@@ -49,4 +51,4 @@ export const printer: Module<FarmPrinterState, any> = {
     getters,
     actions,
     mutations
-}
\ No newline at end of file
+}
diff --git a/src/store/farm/printer/types.ts b/src/store/farm/printer/types.ts
index ca16753da..e12f7a403 100644
--- a/src/store/farm/printer/types.ts
+++ b/src/store/farm/printer/types.ts
@@ -14,6 +14,8 @@ export interface FarmPrinterState {
         reconnects: number
         maxReconnects: number
         reconnectInterval: number
+        requiresLogin: boolean
+        loginFailed: boolean
         // eslint-disable-next-line
         wsData: any[]
     },
@@ -27,4 +29,4 @@ export interface FarmPrinterState {
     databases: string[],
     current_file: FileStateFile,
     theme_files: string[]
-}
\ No newline at end of file
+}
diff --git a/src/store/index.ts b/src/store/index.ts
index 6448357a1..d4cd9fbff 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -14,6 +14,7 @@ import { gui } from '@/store/gui'
 import { farm } from '@/store/farm'
 import { editor } from '@/store/editor'
 import { gcodeviewer } from '@/store/gcodeviewer'
+import { auth } from '@/store/auth'
 
 Vue.use(Vuex)
 
@@ -38,6 +39,7 @@ export default new Vuex.Store({
         farm,
         editor,
         gcodeviewer,
+        auth,
     },
     getters: getters,
     mutations: mutations,
diff --git a/src/store/server/actions.ts b/src/store/server/actions.ts
index b048ff53f..b0ed7783a 100644
--- a/src/store/server/actions.ts
+++ b/src/store/server/actions.ts
@@ -12,7 +12,7 @@ export const actions: ActionTree<ServerState, RootState> = {
         dispatch('updateManager/reset')
     },
 
-    init() {
+    init({ dispatch }) {
         window.console.debug('init Server')
 
         Vue.$socket.emit('server.info', {}, { action: 'server/initServerInfo'})
@@ -20,6 +20,7 @@ export const actions: ActionTree<ServerState, RootState> = {
         Vue.$socket.emit('machine.system_info', {}, { action: 'server/initSystemInfo'})
         Vue.$socket.emit('machine.proc_stats', {}, { action: 'server/initProcStats' })
         Vue.$socket.emit('server.database.list', { root: 'config' }, { action: 'server/checkDatabases'})
+        dispatch('auth/getUsers', null, { root: true })
     },
 
     checkDatabases({ dispatch }, payload) {
@@ -133,4 +134,4 @@ export const actions: ActionTree<ServerState, RootState> = {
             })
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/store/socket/actions.ts b/src/store/socket/actions.ts
index 556d0d1f2..7259e553f 100644
--- a/src/store/socket/actions.ts
+++ b/src/store/socket/actions.ts
@@ -8,6 +8,10 @@ export const actions: ActionTree<SocketState, RootState> = {
         commit('reset')
     },
 
+    reconnect() {
+        Vue.$socket.connect()
+    },
+
     setData({ commit }, payload) {
         commit('setData', payload)
     },
@@ -117,4 +121,4 @@ export const actions: ActionTree<SocketState, RootState> = {
     reportDebug(_, payload) {
         window.console.log(payload)
     },
-}
\ No newline at end of file
+}
diff --git a/src/store/types.ts b/src/store/types.ts
index 34b3747b6..38049e2ed 100644
--- a/src/store/types.ts
+++ b/src/store/types.ts
@@ -3,6 +3,7 @@ import { ServerState } from '@/store/server/types'
 import { PrinterState } from '@/store/printer/types'
 import { GuiState } from '@/store/gui/types'
 import {EditorState} from '@/store/editor/types'
+import {AuthState} from '@/store/auth/types'
 
 export interface RootState {
     packageVersion: string
@@ -14,4 +15,5 @@ export interface RootState {
     printer?: PrinterState
     server?: ServerState
     editor?: EditorState
-}
\ No newline at end of file
+    auth?: AuthState
+}