From dd99358f8fb33e70dfb72ad01df684713265b876 Mon Sep 17 00:00:00 2001
From: vx3r <vx3r@127-0-0-1.fr>
Date: Thu, 30 Apr 2020 17:11:23 +0900
Subject: [PATCH] issue #27 #38 clients list view and search
---
auth/oauth2oidc/oauth2oidc.go | 9 -
ui/src/components/Clients.vue | 316 +++++++++++++++++++++-------------
2 files changed, 193 insertions(+), 132 deletions(-)
diff --git a/auth/oauth2oidc/oauth2oidc.go b/auth/oauth2oidc/oauth2oidc.go
index b50444a..6976800 100644
--- a/auth/oauth2oidc/oauth2oidc.go
+++ b/auth/oauth2oidc/oauth2oidc.go
@@ -74,15 +74,6 @@ func (o *Oauth2idc) UserInfo(oauth2Token *oauth2.Token) (*model.User, error) {
return nil, err
}
- type UserInfo struct {
- Subject string `json:"sub"`
- Profile string `json:"profile"`
- Email string `json:"email"`
- EmailVerified bool `json:"email_verified"`
-
- claims []byte
- }
-
// ID Token payload is just JSON
var claims map[string]interface{}
if err := userInfo.Claims(&claims); err != nil {
diff --git a/ui/src/components/Clients.vue b/ui/src/components/Clients.vue
index 57cd215..6d16b75 100644
--- a/ui/src/components/Clients.vue
+++ b/ui/src/components/Clients.vue
@@ -1,136 +1,195 @@
<template>
<v-container>
- <v-row>
- <v-col cols="12">
- <v-card dark>
- <v-list-item>
- <v-list-item-content>
- <v-list-item-title class="headline">Clients</v-list-item-title>
- </v-list-item-content>
- <v-btn
- color="success"
- @click="startCreate"
- >
- Add new client
- <v-icon right dark>mdi-account-multiple-plus-outline</v-icon>
- </v-btn>
- </v-list-item>
+ <v-card>
+ <v-card-title>
+ Clients
+ <v-switch
+ class="ml-3"
+ dark
+ :label="listView ? 'Switch to card view' : 'Switch to list view'"
+ v-model="listView"
+ />
+ <v-spacer></v-spacer>
+ <v-text-field
+ v-if="listView"
+ v-model="search"
+ append-icon="mdi-magnify"
+ label="Search"
+ single-line
+ hide-details
+ ></v-text-field>
+ </v-card-title>
+ <v-data-table
+ v-if="listView"
+ :headers="headers"
+ :items="clients"
+ :search="search"
+ >
+ <template v-slot:item.address="{ item }">
+ <v-chip
+ v-for="(ip, i) in item.address"
+ :key="i"
+ color="indigo"
+ text-color="white"
+ >
+ <v-icon left>mdi-ip-network</v-icon>
+ {{ ip }}
+ </v-chip>
+ </template>
+ <template v-slot:item.created="{ item }">
<v-row>
- <v-col
- v-for="(client, i) in clients"
- :key="i"
- sm12 lg6
+ <p>At {{ item.created | formatDate }} by {{ item.createdBy }}</p>
+ </v-row>
+ </template>
+ <template v-slot:item.updated="{ item }">
+ <v-row>
+ <p>At {{ item.updated | formatDate }} by {{ item.updatedBy }}</p>
+ </v-row>
+ </template>
+ <template v-slot:item.action="{ item }">
+ <v-icon
+ class="pr-1 pl-1"
+ @click.stop="startUpdate(item)"
+ >
+ mdi-square-edit-outline
+ </v-icon>
+ <v-icon
+ class="pr-1 pl-1"
+ @click.stop="forceFileDownload(item)"
+ >
+ mdi-cloud-download-outline
+ </v-icon>
+ <v-icon
+ class="pr-1 pl-1"
+ @click.stop="email(item)"
+ >
+ mdi-email-send-outline
+ </v-icon>
+ <v-icon
+ class="pr-1 pl-1"
+ @click="remove(item)"
+ >
+ mdi-trash-can-outline
+ </v-icon>
+ </template>
+
+ </v-data-table>
+ <v-card-text v-else>
+ <v-row>
+ <v-col
+ v-for="(client, i) in clients"
+ :key="i"
+ sm12 lg6
+ >
+ <v-card
+ :color="client.enable ? '#1F7087' : 'warning'"
+ class="mx-auto"
+ raised
+ shaped
>
- <v-card
- :color="client.enable ? '#1F7087' : 'warning'"
- class="mx-auto"
- raised
- shaped
- >
- <v-list-item>
- <v-list-item-content>
- <v-list-item-title class="headline">{{ client.name }}</v-list-item-title>
- <v-list-item-subtitle>{{ client.email }}</v-list-item-subtitle>
- <v-list-item-subtitle>Created: {{ client.created | formatDate }} by {{ client.createdBy }}</v-list-item-subtitle>
- <v-list-item-subtitle>Updated: {{ client.updated | formatDate }} by {{ client.updatedBy }}</v-list-item-subtitle>
- </v-list-item-content>
+ <v-list-item>
+ <v-list-item-content>
+ <v-list-item-title class="headline">{{ client.name }}</v-list-item-title>
+ <v-list-item-subtitle>{{ client.email }}</v-list-item-subtitle>
+ <v-list-item-subtitle>Created: {{ client.created | formatDate }} by {{ client.createdBy }}</v-list-item-subtitle>
+ <v-list-item-subtitle>Updated: {{ client.updated | formatDate }} by {{ client.updatedBy }}</v-list-item-subtitle>
+ </v-list-item-content>
- <v-list-item-avatar
- tile
- size="150"
- >
- <v-img :src="'data:image/png;base64, ' + getClientQrcode(client.id)"/>
- </v-list-item-avatar>
- </v-list-item>
+ <v-list-item-avatar
+ tile
+ size="150"
+ >
+ <v-img :src="'data:image/png;base64, ' + getClientQrcode(client.id)"/>
+ </v-list-item-avatar>
+ </v-list-item>
- <v-card-text class="text--primary">
- <v-chip
- v-for="(ip, i) in client.address"
- :key="i"
- color="indigo"
- text-color="white"
- >
- <v-icon left>mdi-ip-network</v-icon>
- {{ ip }}
- </v-chip>
- </v-card-text>
- <v-card-actions>
- <v-tooltip bottom>
- <template v-slot:activator="{ on }">
- <v-btn
- text
- v-on:click="forceFileDownload(client)"
- v-on="on"
- >
- <span class="d-none d-lg-flex">Download</span>
- <v-icon right dark>mdi-cloud-download-outline</v-icon>
- </v-btn>
- </template>
- <span>Download</span>
- </v-tooltip>
+ <v-card-text class="text--primary">
+ <v-chip
+ v-for="(ip, i) in client.address"
+ :key="i"
+ color="indigo"
+ text-color="white"
+ >
+ <v-icon left>mdi-ip-network</v-icon>
+ {{ ip }}
+ </v-chip>
+ </v-card-text>
+ <v-card-actions>
+ <v-tooltip bottom>
+ <template v-slot:activator="{ on }">
+ <v-btn
+ text
+ v-on:click="forceFileDownload(client)"
+ v-on="on"
+ >
+ <span class="d-none d-lg-flex">Download</span>
+ <v-icon right dark>mdi-cloud-download-outline</v-icon>
+ </v-btn>
+ </template>
+ <span>Download</span>
+ </v-tooltip>
- <v-tooltip bottom>
- <template v-slot:activator="{ on }">
- <v-btn
- text
- @click.stop="startUpdate(client)"
- v-on="on"
- >
- <span class="d-none d-lg-flex">Edit</span>
- <v-icon right dark>mdi-square-edit-outline</v-icon>
- </v-btn>
- </template>
- <span>Edit</span>
- </v-tooltip>
+ <v-tooltip bottom>
+ <template v-slot:activator="{ on }">
+ <v-btn
+ text
+ @click.stop="startUpdate(client)"
+ v-on="on"
+ >
+ <span class="d-none d-lg-flex">Edit</span>
+ <v-icon right dark>mdi-square-edit-outline</v-icon>
+ </v-btn>
+ </template>
+ <span>Edit</span>
+ </v-tooltip>
- <v-tooltip bottom>
- <template v-slot:activator="{ on }">
- <v-btn
- text
- @click="remove(client)"
- v-on="on"
- >
- <span class="d-none d-lg-flex">Delete</span>
- <v-icon right dark>mdi-trash-can-outline</v-icon>
- </v-btn>
- </template>
- <span>Delete</span>
- </v-tooltip>
+ <v-tooltip bottom>
+ <template v-slot:activator="{ on }">
+ <v-btn
+ text
+ @click="remove(client)"
+ v-on="on"
+ >
+ <span class="d-none d-lg-flex">Delete</span>
+ <v-icon right dark>mdi-trash-can-outline</v-icon>
+ </v-btn>
+ </template>
+ <span>Delete</span>
+ </v-tooltip>
- <v-tooltip bottom>
- <template v-slot:activator="{ on }">
- <v-btn
- text
- @click="email(client)"
- v-on="on"
- >
- <span class="d-none d-lg-flex">Send Email</span>
- <v-icon right dark>mdi-email-send-outline</v-icon>
- </v-btn>
- </template>
- <span>Send Email</span>
- </v-tooltip>
- <v-spacer/>
- <v-tooltip right>
- <template v-slot:activator="{ on }">
- <v-switch
- dark
- v-on="on"
- color="success"
- v-model="client.enable"
- v-on:change="update(client)"
- />
- </template>
- <span> {{client.enable ? 'Disable' : 'Enable'}} this client</span>
- </v-tooltip>
+ <v-tooltip bottom>
+ <template v-slot:activator="{ on }">
+ <v-btn
+ text
+ @click="email(client)"
+ v-on="on"
+ >
+ <span class="d-none d-lg-flex">Send Email</span>
+ <v-icon right dark>mdi-email-send-outline</v-icon>
+ </v-btn>
+ </template>
+ <span>Send Email</span>
+ </v-tooltip>
+ <v-spacer/>
+ <v-tooltip right>
+ <template v-slot:activator="{ on }">
+ <v-switch
+ dark
+ v-on="on"
+ color="success"
+ v-model="client.enable"
+ v-on:change="update(client)"
+ />
+ </template>
+ <span> {{client.enable ? 'Disable' : 'Enable'}} this client</span>
+ </v-tooltip>
- </v-card-actions>
- </v-card>
- </v-col>
- </v-row>
- </v-card>
- </v-col>
- </v-row>
+ </v-card-actions>
+ </v-card>
+ </v-col>
+ </v-row>
+ </v-card-text>
+ </v-card>
<v-dialog
v-if="client"
v-model="dialogCreate"
@@ -332,10 +391,21 @@
name: 'Clients',
data: () => ({
+ listView: false,
dialogCreate: false,
dialogUpdate: false,
client: null,
valid: false,
+ search: '',
+ headers: [
+ { text: 'Name', value: 'name', },
+ { text: 'Email', value: 'email', },
+ { text: 'IP addresses', value: 'address', },
+ { text: 'Created', value: 'created', sortable: false, },
+ { text: 'Updated', value: 'updated', sortable: false, },
+ { text: 'Actions', value: 'action', sortable: false, },
+
+ ],
}),
computed:{
--
GitLab