issue #27 #38 clients list view and search

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 {

ui/src/components/Clients.vue

 <template>
     <v-container>
+        <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 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"
+                        <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)"
                     >
-                            Add new client
-                            <v-icon right dark>mdi-account-multiple-plus-outline</v-icon>
-                        </v-btn>
-                    </v-list-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"
@@ -128,9 +188,8 @@
                         </v-card>
                     </v-col>
                 </v-row>
+            </v-card-text>
         </v-card>
-            </v-col>
-        </v-row>
         <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:{