new login design (#4442)

* new login design

* remove effects file (wrong direction)

* add Known Hosts dropdown component

Co-authored-by: Jeremy Letto <jeremy.letto@datasite.com>

webclient/src/services/DexieDTOs/HostDTO.ts

@@ -0,0 +1,28 @@
+import { IndexableType } from 'dexie';
+import { Host } from 'types';
+
+import { dexieService } from '../DexieService';
+
+export class HostDTO extends Host {
+  save() {
+    return dexieService.hosts.put(this);
+  }
+
+  static add(host: HostDTO): Promise<IndexableType> {
+    return dexieService.hosts.add(host);
+  }
+
+  static get(id): Promise<HostDTO> {
+    return dexieService.hosts.where('id').equals(id).first();
+  }
+
+  static getAll(): Promise<HostDTO[]> {
+    return dexieService.hosts.toArray();
+  }
+
+  static bulkAdd(hosts: Host[]): Promise<IndexableType> {
+    return dexieService.hosts.bulkAdd(hosts);
+  }
+};
+
+dexieService.hosts.mapToClass(HostDTO);

webclient/src/services/DexieDTOs/index.ts

@@ -1,3 +1,4 @@
 export * from './CardDTO';
 export * from './SetDTO';
 export * from './TokenDTO';
+export * from './HostDTO';

webclient/src/services/DexieService.ts

@@ -4,12 +4,14 @@ enum Stores {
   CARDS = 'cards',
   SETS = 'sets',
   TOKENS = 'tokens',
+  HOSTS = 'hosts',
 }
 
 const StoreKeyIndexes = {
-  [Stores.CARDS]: "name",
-  [Stores.SETS]: "code",
-  [Stores.TOKENS]: "name.value",
+  [Stores.CARDS]: 'name',
+  [Stores.SETS]: 'code',
+  [Stores.TOKENS]: 'name.value',
+  [Stores.HOSTS]: '++id,name',
 };
 
 class DexieService {
@@ -30,6 +32,10 @@ class DexieService {
   get tokens() {
     return this.db.table(Stores.TOKENS);
   }
+
+  get hosts() {
+    return this.db.table(Stores.HOSTS);
+  }
 }
 
 export const dexieService = new DexieService();