fluidd

1
<template>
2
  <v-row
3
    :dense="$vuetify.breakpoint.smAndDown"
4
    justify="center"
5
    align="center"
6
  >
7
    <v-col
8
      cols="12"
9
      md="4"
10
      lg="3"
11
      xl="2"
12
    >
13
      <v-form
14
        @submit.prevent="handleLogin"
15
      >
16
        <div class="text-center">
17
          <p v-html="$t('app.general.msg.welcome_back')" />
18

19
          <v-alert
20
            v-if="error"
21
            type="error"
22
          >
23
            {{ $t('app.general.simple_form.error.credentials') }}
24
          </v-alert>
25

26
          <v-text-field
27
            v-model="username"
28
            :label="$t('app.general.label.username')"
29
            autocomplete="username"
30
            spellcheck="false"
31
            filled
32
            dense
33
            hide-details="auto"
34
            :disabled="loading"
35
            class="mb-4"
36
          />
37

38
          <v-text-field
39
            v-model="password"
40
            :label="$t('app.general.label.password')"
41
            autocomplete="current-password"
42
            filled
43
            dense
44
            type="password"
45
            hide-details="auto"
46
            :disabled="loading"
47
            class="mb-4"
48
          />
49

50
          <v-select
51
            v-if="availableSources.length > 1"
52
            v-model="source"
53
            :label="$t('app.general.label.auth_source')"
54
            filled
55
            dense
56
            hide-details="auto"
57
            :disabled="loading"
58
            :items="availableSources.map(value => ({ text: $t(`app.general.label.${value}`), value }))"
59
            class="mb-4"
60
          />
61

62
          <app-btn
63
            type="submit"
64
            :disabled="loading"
65
            large
66
            block
67
            class="mb-6"
68
          >
69
            <v-icon
70
              v-if="loading"
71
              class="spin mr-2"
72
            >
73
              $loading
74
            </v-icon>
75
            {{ $t('app.general.btn.login') }}
76
          </app-btn>
77

78
          <app-btn
79
            color=""
80
            plain
81
            class="custom-transform-class text-none"
82
            :href="$globals.DOCS_AUTH_LOST_PASSWORD"
83
            target="_blank"
84
          >
85
            {{ $t('app.general.btn.forgot_password') }}
86
          </app-btn>
87

88
          <app-btn
89
            color=""
90
            plain
91
            class="custom-transform-class text-none"
92
            :href="$globals.DOCS_AUTH"
93
            target="_blank"
94
          >
95
            {{ $t('app.general.btn.auth_unsure') }}
96
          </app-btn>
97
        </div>
98
      </v-form>
99
    </v-col>
100
  </v-row>
101
</template>
102

103
<script lang="ts">
104
import { Component, Vue } from 'vue-property-decorator'
105
import { appInit } from '@/init'
106
import { consola } from 'consola'
107

108
@Component({})
109
export default class Login extends Vue {
110
  username = ''
111
  password = ''
112
  error = false
113
  loading = false
114
  source = 'moonraker'
115
  availableSources = [this.source]
116

117
  async mounted () {
118
    const authInfo = await this.$store.dispatch('auth/getAuthInfo')
119
    this.source = authInfo.defaultSource ?? this.source
120
    this.availableSources = authInfo.availableSources ?? this.availableSources
121
  }
122

123
  async handleLogin () {
124
    this.error = false
125
    this.loading = true
126
    try {
127
      await this.$store.dispatch('auth/login', { username: this.username, password: this.password, source: this.source })
128
    } catch (err) {
129
      this.error = true
130
    }
131
    this.loading = false
132

133
    // Re-init the app.
134
    if (!this.error) {
135
      const instance = this.$store.getters['config/getCurrentInstance']
136

137
      const config = await appInit(instance, this.$store.state.config.hostConfig)
138

139
      // Reconnect the socket with the new instance url.
140
      if (config.apiConnected && config.apiAuthenticated) {
141
        consola.debug('Activating socket with config', config)
142
        this.$socket.connect(config.apiConfig.socketUrl)
143
      }
144
    }
145
  }
146
}
147
</script>
148

149
<style lang="scss" scoped>
150
  .v-card__actions {
151
    padding: 8px 16px;
152
  }
153
</style>
154