WIP for the new "log in" page

src/app/log-in/log-in.component.html

@@ -1,15 +1,23 @@
 <app-banner></app-banner>
 
+<!--
+TODO - Unused for now. Revamp this page to be a channel picker for logging in
+-->
+
 <div class="container home-container text-center" *ngIf="globalVars.inTab || globalVars.webview">
   <div class="mb-20px">
-    <span class="title-text">Log in to {{ globalVars.hostname }}</span>
+    <span class="title-text">Choose an account to share with {{ globalVars.hostname }}</span>
   </div>
 
-  <div class="d-flex flex-column" *ngIf="hasUsers">
+  <!--
+  Wallet Sync Login redirects to here, like load-seed did. Now we choose which account to log in with.
+  -->
+
+  <div class="d-flex flex-column" *ngIf="allAccountNames.length">
     <ul class="list-group mt-7px mb-30px saved-seeds-list">
       <span class="saved-seeds-header d-flex align-items-center"><span>Select an account</span></span>
       <div class="saved-seeds-scroll">
-        <li *ngFor="let item of allUsernames | keyvalue" class="list-group-item list-group-item-action cursor-pointer saved-seed" (click)="selectAccount(item.key)">
+        <li *ngFor="let item of allAccountNames | keyvalue" class="list-group-item list-group-item-action cursor-pointer saved-seed" (click)="selectAccount(item.key)">
           <div class="w-100">
             <div *ngIf="!item.value" class="text-truncate">{{ item.key }}&hellip;</div>
             <div *ngIf="item.value" class="d-flex align-items-center">
@@ -20,11 +28,18 @@
       </div>
     </ul>
   </div>
+
   <div class="d-flex align-items-center flex-column">
+    <!--
+    Hmm... Maybe sign-up remains a TODO.
+    -->
     <button class="button button-large button-secondary mb-40px" [routerLink]="['/sign-up']">
       <span class="font-weight-normal">Sign up with DeSo seed</span>
     </button>
-    <a class="link" [routerLink]="['/load-seed']"><u>Log in with DeSo seed</u></a>
+    <!--
+    Go back to Wallet Sync Login page
+    -->
+    <a class="link" [routerLink]="['/test-lbry-log-in']"><u>Wallet Sync Log In</u></a>
   </div>
 
   <div>
@@ -32,6 +47,11 @@
       Logging in grants <b>{{ globalVars.hostname }}</b> access to:
     </div>
 
+    <!--
+    Generate a list of permissions on the ts side, show them here. Not hard coded.
+
+    But this is a TODO. Starting version doesn't have access levels.
+    -->
     <ul class="list-group list-group-flush mt-15px">
       <li class="list-group-item">
         <span *ngIf="globalVars.accessLevelRequest >= 2">✅</span>

src/app/log-in/log-in.component.ts

@@ -2,7 +2,9 @@ import {Component, OnInit} from '@angular/core';
 import {AccountService} from '../account.service';
 import {IdentityService} from '../identity.service';
 import {GlobalVarsService} from '../global-vars.service';
-import {BackendAPIService} from '../backend-api.service';
+
+// This is logging into the app, not the wallet sync
+// TODO rename this component to app-log-in
 
 @Component({
   selector: 'app-log-in',
@@ -10,34 +12,24 @@ import {BackendAPIService} from '../backend-api.service';
   styleUrls: ['./log-in.component.scss']
 })
 export class LogInComponent implements OnInit {
-  allUsernames: {[key: string]: string} = {};
-  hasUsers = false;
+  allAccountNames: {[key: string]: string} = {};
 
   constructor(
     private accountService: AccountService,
     private identityService: IdentityService,
     public globalVars: GlobalVarsService,
-    private backendApi: BackendAPIService,
   ) { }
 
   ngOnInit(): void {
-    // Load profile pictures and usernames
-    const publicKeys = this.accountService.getPublicKeys();
-    this.hasUsers = publicKeys.length > 0;
-    this.backendApi.GetUsernames(publicKeys)
-      .subscribe(usernames => {
-        // TODO - LBRY - probably gut this whole page, don't need to list
-        // users. we're not going to have a login history like this. but go
-        // over the html to make sure.
-        this.allUsernames = usernames;
-      });
+    // TODO - Will be channel claim IDs
+    this.allAccountNames = this.accountService.getAccountNames();
   }
 
-  selectAccount(publicKey: string): void {
-    this.accountService.setAccessLevel(publicKey, this.globalVars.hostname, this.globalVars.accessLevelRequest);
+  selectAccount(accountName: string): void {
+    this.accountService.setAccessLevel(accountName, this.globalVars.hostname, this.globalVars.accessLevelRequest);
     this.identityService.login({
-      users: this.accountService.getEncryptedUsers(),
-      publicKeyAdded: publicKey,
+      accounts: this.accountService.getPublicAccounts(),
+      accountNameAdded: accountName,
       signedUp: false
     });
   }

src/app/test-lbry-log-in/test-lbry-log-in.component.ts

@@ -102,7 +102,9 @@ export class TestLbryLogInComponent implements OnInit {
     const wallet = JSON.parse(walletStr)
     this.cryptoService.putWallet(this.globalVars.hostname, wallet);
 
-    this.router.navigate(['/', RouteNames.LOG_IN], {queryParamsHandling: 'merge'});
+    throw "fix me"
+    // For now, we'll just pick the first channel in the wallet and log right in
+    // this.router.navigate(['/', RouteNames.LOG_IN], {queryParamsHandling: 'merge'});
   }
 
 }