MACAuth.vue 5.45 KB
Newer Older
gj4210's avatar
gj4210 committed
1
2
<template>
  <div id="MACAuth">
3
4
    <h1 class="my-4" v-if="entry || bcds == null">MACAuth</h1>
    <h1 class="my-4" v-else>{{ bcds[0].name }} <small class="text-muted">Broadcastdomain</small></h1>
janis.streib's avatar
janis.streib committed
5
    <b-alert show variant="info">Die Nutzung von MPSK (MACAuth im WLAN für Geräte, die kein Enterprise-WiFi können) muss
janis.streib's avatar
janis.streib committed
6
7
      für das entsprechende VLAN <a target="_blank" href="https://www.scc.kit.edu/dienste/internet-of-things.php">beantragt
        werden</a>.
janis.streib's avatar
janis.streib committed
8
    </b-alert>
9
    <b-checkbox v-if="entry" :value="true" :unchecked-value="false" v-model="only_own" switch>Nur eigene BCDs anzeigen
janis.streib's avatar
janis.streib committed
10
    </b-checkbox>
11
12
    <Loading :data="[clients_by_bcd, bcds]">
      <PaginatorList :items="bcds" v-if="entry">
janis.streib's avatar
janis.streib committed
13
        <template v-slot:item="card_data">
janis.streib's avatar
janis.streib committed
14
15
16
17
18
19
20
21
22
          <MacAuthCard
            :bcd="card_data.item"
            :clients="card_data.item.name in clients_by_bcd ? clients_by_bcd[card_data.item.name] : []"
            :create-client="createClient"
            :delete-client="deleteClient"
            :edit-client="editClient"
            :show-q-r="show_qr"
          >
          </MacAuthCard>
janis.streib's avatar
janis.streib committed
23
        </template>
24
      </PaginatorList>
25
26
27
28
29
30
31
32
      <MacAuthCard v-else-if="bcds"
                   :bcd="bcds[0]"
                   :clients="bcds[0].name in clients_by_bcd ? clients_by_bcd[bcds[0].name] : []"
                   :create-client="createClient"
                   :delete-client="deleteClient"
                   :edit-client="editClient"
                   :show-q-r="show_qr">
      </MacAuthCard>
janis.streib's avatar
janis.streib committed
33
34
      <DBEditor object_fq_name="macauth.client" :object_function="db_editor_object_function"
                modal_id="dbeditor_macauth" :old_data="db_editor_old_data" :presets="db_editor_presets"
35
                :non_optionals_order="['bcd_name', 'mac_addr', 'description', 'do_refresh_wpa_key']"
janis.streib's avatar
janis.streib committed
36
                :object_title="db_editor_object_title"
janis.streib's avatar
janis.streib committed
37
      ></DBEditor>
38
39
      <b-modal ok-only id="macauth-show-qr" v-if="qr_item" centered
               :title="'WiFi-QR-Code für Client \''+qr_item.mac_addr+'\''">
janis.streib's avatar
janis.streib committed
40
        <p class="text-center">
41
          <qrcode-vue v-if="qr_item" :value="'WIFI:S:KIT-IoT;T:WPA;P:'+encodeQr(qr_item.wpa_key)+';;'"></qrcode-vue>
janis.streib's avatar
janis.streib committed
42
        </p>
43
44
        <p><b>Passwort:</b></p>
        <CopyField :text="qr_item.wpa_key" code/>
janis.streib's avatar
janis.streib committed
45
      </b-modal>
gj4210's avatar
gj4210 committed
46
47
48
49
50
    </Loading>
  </div>
</template>

<script>
janis.streib's avatar
janis.streib committed
51
52
import Loading from '../../components/Loading'
import MACAuth from '@/api-services/macauth.service'
gj4210's avatar
gj4210 committed
53
import ApiUtil from '@/util/apiutil'
janis.streib's avatar
janis.streib committed
54
55
56
import DBEditor from '@/components/DBEditor'
import transactionutil from '@/util/transactionutil'
import MACAuthService from '@/api-services.gen/macauth.client'
57
import PaginatorList from '@/components/PaginatorList'
janis.streib's avatar
janis.streib committed
58
import QrcodeVue from 'qrcode.vue'
janis.streib's avatar
janis.streib committed
59
import MacAuthCard from '../../components/MacAuthCard'
60
import CopyField from '@/components/CopyField'
gj4210's avatar
gj4210 committed
61
62
63

export default {
  name: 'macauth',
64
  components: { MacAuthCard, PaginatorList, DBEditor, Loading, QrcodeVue, CopyField },
65
  data() {
gj4210's avatar
gj4210 committed
66
    return {
janis.streib's avatar
janis.streib committed
67
      qr_item: null,
janis.streib's avatar
janis.streib committed
68
      only_own: true,
janis.streib's avatar
janis.streib committed
69
70
71
      db_editor_object_function: 'create',
      db_editor_old_data: {},
      db_editor_presets: {},
janis.streib's avatar
janis.streib committed
72
      db_editor_object_title: {},
gj4210's avatar
gj4210 committed
73
74
      bcds: null,
      clients_by_bcd: null,
janis.streib's avatar
janis.streib committed
75
      filter_text: '',
76
      entry: true,
janis.streib's avatar
janis.streib committed
77
      waiting: false
gj4210's avatar
gj4210 committed
78
79
    }
  },
80
  created() {
gj4210's avatar
gj4210 committed
81
82
    this.fetchData()
  },
janis.streib's avatar
janis.streib committed
83
84
85
86
87
88
  watch: {
    only_own: {
      immediate: true,
      async handler() {
        await this.fetchData()
      }
89
90
91
    },
    $route() {
      this.fetchData()
janis.streib's avatar
janis.streib committed
92
93
    }
  },
gj4210's avatar
gj4210 committed
94
  methods: {
95
96
97
    encodeQr(data) {
      return data.replaceAll('\\', '\\\\').replaceAll(';', '\\;').replaceAll(',', '\\,').replaceAll('"', '\\"').replaceAll(':', '\\:')
    },
janis.streib's avatar
janis.streib committed
98
    async fetchData() {
99
      this.entry = !('bcd' in this.$route.params)
janis.streib's avatar
janis.streib committed
100
101
      this.bcds = null
      this.clients_by_bcd = null
102
103
104
105
106
107
      let response
      if (this.entry) {
        response = await MACAuth.list(this.$store.state.netdb_axios_config, this.only_own)
      } else {
        response = await MACAuth.get(this.$store.state.netdb_axios_config, this.only_own, this.$route.params.bcd)
      }
janis.streib's avatar
janis.streib committed
108
109
      this.clients_by_bcd = ApiUtil.dict_of_lists_by_value_of_array(response.data[1], 'bcd_name')
      this.bcds = response.data[0]
gj4210's avatar
gj4210 committed
110
    },
janis.streib's avatar
janis.streib committed
111
112
113
114
115
116
    show_qr(item) {
      this.qr_item = item
      this.$nextTick(() => {
        this.$root.$emit('bv::show::modal', 'macauth-show-qr')
      })
    },
117
    createClient(bcd) {
janis.streib's avatar
janis.streib committed
118
      this.db_editor_object_function = 'create'
janis.streib's avatar
janis.streib committed
119
      this.db_editor_old_data = {}
janis.streib's avatar
janis.streib committed
120
      this.db_editor_presets = { bcd_name: bcd.name }
janis.streib's avatar
janis.streib committed
121
      this.db_editor_object_title = null
janis.streib's avatar
janis.streib committed
122
      this.$root.$emit('bv::show::modal', 'dbeditor_macauth')
gj4210's avatar
gj4210 committed
123
    },
124
    editClient(item) {
janis.streib's avatar
janis.streib committed
125
126
127
128
129
      this.db_editor_object_function = 'update'
      this.db_editor_old_data = item
      this.db_editor_presets = item
      this.db_editor_object_title = item.mac_addr + ' in BCD ' + item.bcd_name
      this.$root.$emit('bv::show::modal', 'dbeditor_macauth')
gj4210's avatar
gj4210 committed
130
    },
131
    deleteClient(item) {
janis.streib's avatar
janis.streib committed
132
      const ta = transactionutil.generateDeleteElement('macauth.client', MACAuthService.deleteParamsList(), item, item.mac_addr + ' in BCD ' + item.bcd_name)
janis.streib's avatar
janis.streib committed
133
134
      this.$store.commit('addTransactionElement', ta)
      this.$emit('commited', ta)
gj4210's avatar
gj4210 committed
135
136
      if (!this.isMobile() && !this.$store.state.show_sidebar_right) {
        this.$store.state.show_sidebar_right = true
janis.streib's avatar
janis.streib committed
137
      }
gj4210's avatar
gj4210 committed
138
139
140
    }
  }
}
gj4210's avatar
gj4210 committed
141
142
143
144
145
146
147
148
149
150
</script>

<style>
.btn-group.fullwidth {
  display: flex;
}

.fullwidth .btn {
  flex: 1
}
gj4210's avatar
gj4210 committed
151
152
153
154
155
156
157
158
159

.collapse-icon {
  transition: transform;
  transition-duration: 250ms;
}

.not-collapsed > .collapse-icon {
  transform: rotate(-180deg);
}
janis.streib's avatar
janis.streib committed
160
</style>