Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-10-08 05:47:50 +02:00
Code Issues Projects Releases Wiki Activity

[PM-12694] Modify logo on AnonLayout to direct to base route on click (#11263)

Browse Source 
* Add "back" functionality for Desktop.

* Return user to email field when logo is clicked in Web.

* Update function name.

* Move hideLogo to anchor wrapper.

* Use "/" route for logo back link.
This commit is contained in:
Alec Rippberger 2024-10-02 08:00:37 -05:00 committed by GitHub
parent eb6b2c2531
commit acd47c2b79
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 24 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/desktop/src/auth/login/login.component.html
View File

@ -8,7 +8,9 @@
attr.aria-hidden="{{ showingModal }}" attr.aria-hidden="{{ showingModal }}"
> >
<div id="content" class="content" style="padding-top: 50px"> <div id="content" class="content" style="padding-top: 50px">
<a (click)="invalidateEmail()" class="tw-cursor-pointer">
<img class="logo-image" alt="Bitwarden" /> <img class="logo-image" alt="Bitwarden" />
</a>
<p class="lead">{{ "loginOrCreateNewAccount" | i18n }}</p> <p class="lead">{{ "loginOrCreateNewAccount" | i18n }}</p>
<!-- start email --> <!-- start email -->
<ng-container *ngIf="!validatedEmail; else loginPage"> <ng-container *ngIf="!validatedEmail; else loginPage">

7
apps/desktop/src/auth/login/login.component.ts
View File

@ -227,4 +227,11 @@ export class LoginComponent extends BaseLoginComponent implements OnInit, OnDest
); );
} }
} }
/**
* Force the validatedEmail flag to false, which will show the login page.
*/
invalidateEmail() {
this.validatedEmail = false;
}
} }

10
libs/angular/src/auth/components/login.component.ts
View File

@ -1,6 +1,6 @@
import { Directive, ElementRef, NgZone, OnDestroy, OnInit, ViewChild } from "@angular/core"; import { Directive, ElementRef, NgZone, OnDestroy, OnInit, ViewChild } from "@angular/core";
import { FormBuilder, Validators } from "@angular/forms"; import { FormBuilder, Validators } from "@angular/forms";
import { ActivatedRoute, Router } from "@angular/router"; import { ActivatedRoute, NavigationSkipped, Router } from "@angular/router";
import { Subject, firstValueFrom, of } from "rxjs"; import { Subject, firstValueFrom, of } from "rxjs";
import { switchMap, take, takeUntil } from "rxjs/operators"; import { switchMap, take, takeUntil } from "rxjs/operators";
@ -121,6 +121,14 @@ export class LoginComponent extends CaptchaProtectedComponent implements OnInit,
) )
.subscribe(); .subscribe();
// If the user navigates to /login from /login, reset the validatedEmail flag
// This should bring the user back to the login screen with the email field
this.router.events.pipe(takeUntil(this.destroy$)).subscribe((event) => {
if (event instanceof NavigationSkipped && event.url === "/login") {
this.validatedEmail = false;
}
});
// Backup check to handle unknown case where activatedRoute is not available // Backup check to handle unknown case where activatedRoute is not available
// This shouldn't happen under normal circumstances // This shouldn't happen under normal circumstances
if (!this.route) { if (!this.route) {

4
libs/auth/src/angular/anon-layout/anon-layout.component.html
View File

@ -9,7 +9,9 @@
'tw-min-h-[calc(100vh-54px)]': clientType === 'desktop', 'tw-min-h-[calc(100vh-54px)]': clientType === 'desktop',
}" }"
> >
<bit-icon *ngIf="!hideLogo" [icon]="logo" class="tw-w-[128px] [&>*]:tw-align-top"></bit-icon> <a *ngIf="!hideLogo" [routerLink]="['/']" class="tw-w-[128px] [&>*]:tw-align-top">
<bit-icon [icon]="logo"></bit-icon>
</a>
<div class="tw-text-center"> <div class="tw-text-center">
<div class="tw-mx-auto tw-max-w-28 sm:tw-max-w-32"> <div class="tw-mx-auto tw-max-w-28 sm:tw-max-w-32">

3
libs/auth/src/angular/anon-layout/anon-layout.component.ts
View File

@ -1,5 +1,6 @@
import { CommonModule } from "@angular/common"; import { CommonModule } from "@angular/common";
import { Component, Input, OnChanges, OnInit, SimpleChanges } from "@angular/core"; import { Component, Input, OnChanges, OnInit, SimpleChanges } from "@angular/core";
import { RouterModule } from "@angular/router";
import { firstValueFrom } from "rxjs"; import { firstValueFrom } from "rxjs";
import { ClientType } from "@bitwarden/common/enums"; import { ClientType } from "@bitwarden/common/enums";
@ -15,7 +16,7 @@ import { BitwardenLogo, BitwardenShield } from "../icons";
standalone: true, standalone: true,
selector: "auth-anon-layout", selector: "auth-anon-layout",
templateUrl: "./anon-layout.component.html", templateUrl: "./anon-layout.component.html",
imports: [IconModule, CommonModule, TypographyModule, SharedModule], imports: [IconModule, CommonModule, TypographyModule, SharedModule, RouterModule],
}) })
export class AnonLayoutComponent implements OnInit, OnChanges { export class AnonLayoutComponent implements OnInit, OnChanges {
@Input() title: string; @Input() title: string;