切换账号警告

package.json

 {
   "name": "mycard-mobile",
-  "version": "1.0.31",
+  "version": "1.0.32",
   "license": "UNLISENCED",
   "scripts": {
     "ng": "ng",

src/app/app.module.ts

@@ -40,6 +40,7 @@ import { HttpClientModule } from '@angular/common/http';
 import * as Raven from 'raven-js';
 import { DecksComponent } from './decks/decks.component';
 import { ConfirmDialogComponent } from './confirm-dialog/confirm-dialog.component';
+import { LogoutDialogComponent } from './logout-dialog/logout-dialog.component';
 
 export class RavenErrorHandler implements ErrorHandler {
   handleError(err: any): void {
@@ -67,7 +68,8 @@ if (environment.production) {
     ToolbarComponent,
     ResultDialogComponent,
     DecksComponent,
-    ConfirmDialogComponent
+    ConfirmDialogComponent,
+    LogoutDialogComponent
   ],
   imports: [
     BrowserModule,
@@ -96,6 +98,6 @@ if (environment.production) {
   ],
   providers: [YGOProService, StorageService, ...sentry],
   bootstrap: [AppComponent],
-  entryComponents: [MatchDialogComponent, ResultDialogComponent, ConfirmDialogComponent]
+  entryComponents: [MatchDialogComponent, ResultDialogComponent, ConfirmDialogComponent, LogoutDialogComponent]
 })
 export class AppModule {}

src/app/lobby/lobby.component.html

@@ -24,7 +24,7 @@
     <mat-icon>add</mat-icon>
   </button>
   <mat-menu #menu="matMenu">
-    <a [href]="login.logout()" mat-menu-item>切换用户</a>
+    <a (click)="logout()" mat-menu-item>切换用户</a>
     <button mat-menu-item>大厅版本 {{version}}</button>
     <button mat-menu-item *ngIf="build">应用版本 {{build.version_name}}</button>
   </mat-menu>

src/app/lobby/lobby.component.ts

@@ -8,6 +8,8 @@ import { YGOProService } from '../ygopro.service';
 
 import { HttpClient } from '@angular/common/http';
 import { distinctUntilChanged, filter, map, switchMap } from 'rxjs/internal/operators';
+import { MatDialog } from '@angular/material';
+import { LogoutDialogComponent } from '../logout-dialog/logout-dialog.component';
 
 @Component({
   selector: 'app-lobby',
@@ -34,7 +36,13 @@ export class LobbyComponent {
 
   arena_url: string;
 
-  constructor(public login: LoginService, public ygopro: YGOProService, private http: HttpClient, public storage: StorageService) {
+  constructor(
+    public login: LoginService,
+    public ygopro: YGOProService,
+    private http: HttpClient,
+    public storage: StorageService,
+    private dialog: MatDialog
+  ) {
     const arena_url = new URL('https://mycard.moe/ygopro/arena');
     arena_url.searchParams.set('sso', login.token);
     this.arena_url = arena_url.toString();
@@ -54,6 +62,17 @@ export class LobbyComponent {
     url.searchParams.set('key', key);
     open(url.toString());
   }
+
+  async logout() {
+    if (
+      await this.dialog
+        .open(LogoutDialogComponent)
+        .afterClosed()
+        .toPromise()
+    ) {
+      location.href = this.login.logout();
+    }
+  }
 }
 
 interface BuildConfig {

src/app/logout-dialog/logout-dialog.component.html

+<h2 mat-dialog-title>切换账号</h2>
+<mat-dialog-content>
+  您当前的卡组绑定着当前的帐号。切换帐号后，卡组列表将只会有您新帐号所绑定的卡组。
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+  <button mat-button mat-dialog-close>取消</button>
+  <button mat-button [mat-dialog-close]="true">切换账号</button>
+</mat-dialog-actions>

src/app/logout-dialog/logout-dialog.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-logout-dialog',
+  templateUrl: './logout-dialog.component.html',
+  styleUrls: ['./logout-dialog.component.css']
+})
+export class LogoutDialogComponent {}

src/app/match-dialog/match-dialog.component.css

@@ -8,9 +8,6 @@ mat-dialog-content {
   display: flex;
   overflow: hidden;
 }
-mat-dialog-actions {
-  justify-content: flex-end
-}
 ul {
   margin: 0;
 }

src/app/match-dialog/match-dialog.component.html

@@ -11,6 +11,6 @@
     <dd>{{actual_wait | async | date: 'mm:ss'}}</dd>
   </ul>
 </mat-dialog-content>
-<mat-dialog-actions>
+<mat-dialog-actions align="end">
   <button mat-button mat-dialog-close>取消</button>
 </mat-dialog-actions>

src/app/result-dialog/result-dialog.component.html

@@ -17,7 +17,7 @@
     </mat-list-item>
   </mat-list>
 </mat-dialog-content>
-<mat-dialog-actions>
+<mat-dialog-actions align="end">
   <button mat-button mat-dialog-close>关闭</button>
   <button mat-button [mat-dialog-close]="true">再来一局</button>
 </mat-dialog-actions>