diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json index 0a69b948876..69d26333a84 100644 --- a/apps/browser/src/_locales/en/messages.json +++ b/apps/browser/src/_locales/en/messages.json @@ -2221,7 +2221,18 @@ } } }, + "region": { + "message": "Region" + }, "opensInANewWindow": { "message": "Opens in a new window" + }, + "eu": { + "message": "EU", + "description": "European Union" + }, + "us": { + "message": "US", + "description": "United States" } } diff --git a/apps/browser/src/_locales/en_GB/messages.json b/apps/browser/src/_locales/en_GB/messages.json index c0d018ee1fb..3b54fe0efe4 100644 --- a/apps/browser/src/_locales/en_GB/messages.json +++ b/apps/browser/src/_locales/en_GB/messages.json @@ -2221,6 +2221,9 @@ } } }, + "region": { + "message": "Region" + }, "opensInANewWindow": { "message": "Opens in a new window" } diff --git a/apps/browser/src/auth/popup/environment.component.ts b/apps/browser/src/auth/popup/environment.component.ts index 3b58ccfa1d5..5ad42a600c7 100644 --- a/apps/browser/src/auth/popup/environment.component.ts +++ b/apps/browser/src/auth/popup/environment.component.ts @@ -2,6 +2,7 @@ import { Component, OnInit } from "@angular/core"; import { Router } from "@angular/router"; import { EnvironmentComponent as BaseEnvironmentComponent } from "@bitwarden/angular/components/environment.component"; +import { ModalService } from "@bitwarden/angular/services/modal.service"; import { I18nService } from "@bitwarden/common/abstractions/i18n.service"; import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service"; @@ -18,9 +19,10 @@ export class EnvironmentComponent extends BaseEnvironmentComponent implements On platformUtilsService: PlatformUtilsService, public environmentService: BrowserEnvironmentService, i18nService: I18nService, - private router: Router + private router: Router, + modalService: ModalService ) { - super(platformUtilsService, environmentService, i18nService); + super(platformUtilsService, environmentService, i18nService, modalService); this.showCustom = true; } diff --git a/apps/browser/src/auth/popup/home.component.html b/apps/browser/src/auth/popup/home.component.html index fb51458c136..da208a8d50c 100644 --- a/apps/browser/src/auth/popup/home.component.html +++ b/apps/browser/src/auth/popup/home.component.html @@ -9,9 +9,7 @@ -
- {{ "loggingInTo" | i18n : selfHostedDomain }} -
+
- diff --git a/apps/browser/src/auth/popup/home.component.ts b/apps/browser/src/auth/popup/home.component.ts index 9f864fa2ad5..361218c6e4b 100644 --- a/apps/browser/src/auth/popup/home.component.ts +++ b/apps/browser/src/auth/popup/home.component.ts @@ -1,7 +1,9 @@ -import { Component, OnInit } from "@angular/core"; +import { Component, OnDestroy, OnInit, ViewChild } from "@angular/core"; import { FormBuilder, Validators } from "@angular/forms"; -import { ActivatedRoute, Router } from "@angular/router"; +import { Router } from "@angular/router"; +import { Subject, takeUntil } from "rxjs"; +import { EnvironmentSelectorComponent } from "@bitwarden/angular/auth/components/environment-selector.component"; import { EnvironmentService } from "@bitwarden/common/abstractions/environment.service"; import { I18nService } from "@bitwarden/common/abstractions/i18n.service"; import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service"; @@ -12,9 +14,12 @@ import { LoginService } from "@bitwarden/common/auth/abstractions/login.service" selector: "app-home", templateUrl: "home.component.html", }) -export class HomeComponent implements OnInit { - loginInitiated = false; +export class HomeComponent implements OnInit, OnDestroy { + @ViewChild(EnvironmentSelectorComponent, { static: true }) + environmentSelector!: EnvironmentSelectorComponent; + private destroyed$: Subject = new Subject(); + loginInitiated = false; formGroup = this.formBuilder.group({ email: ["", [Validators.required, Validators.email]], rememberEmail: [false], @@ -27,9 +32,9 @@ export class HomeComponent implements OnInit { private router: Router, private i18nService: I18nService, private environmentService: EnvironmentService, - private route: ActivatedRoute, private loginService: LoginService ) {} + async ngOnInit(): Promise { let savedEmail = this.loginService.getEmail(); const rememberEmail = this.loginService.getRememberEmail(); @@ -48,6 +53,18 @@ export class HomeComponent implements OnInit { }); } } + + this.environmentSelector.onOpenSelfHostedSettings + .pipe(takeUntil(this.destroyed$)) + .subscribe(() => { + this.setFormValues(); + this.router.navigate(["environment"]); + }); + } + + ngOnDestroy(): void { + this.destroyed$.next(); + this.destroyed$.complete(); } submit() { diff --git a/apps/browser/src/popup/app.module.ts b/apps/browser/src/popup/app.module.ts index a0cd5e8887b..3b8501be447 100644 --- a/apps/browser/src/popup/app.module.ts +++ b/apps/browser/src/popup/app.module.ts @@ -10,6 +10,7 @@ import { FormsModule, ReactiveFormsModule } from "@angular/forms"; import { BrowserModule } from "@angular/platform-browser"; import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { EnvironmentSelectorComponent } from "@bitwarden/angular/auth/components/environment-selector.component"; import { BitwardenToastModule } from "@bitwarden/angular/components/toastr.component"; import { JslibModule } from "@bitwarden/angular/jslib.module"; import { ColorPasswordCountPipe } from "@bitwarden/angular/pipes/color-password-count.pipe"; @@ -153,6 +154,7 @@ import "./locales"; AboutComponent, HelpAndFeedbackComponent, AutofillComponent, + EnvironmentSelectorComponent, ], providers: [CurrencyPipe, DatePipe], bootstrap: [AppComponent], diff --git a/apps/browser/src/popup/images/eu-flag.png b/apps/browser/src/popup/images/eu-flag.png new file mode 100644 index 00000000000..592bc95e0ce Binary files /dev/null and b/apps/browser/src/popup/images/eu-flag.png differ diff --git a/apps/browser/src/popup/images/us-flag.png b/apps/browser/src/popup/images/us-flag.png new file mode 100644 index 00000000000..543dc133247 Binary files /dev/null and b/apps/browser/src/popup/images/us-flag.png differ diff --git a/apps/browser/src/popup/scss/environment.scss b/apps/browser/src/popup/scss/environment.scss index 042bcd1b450..cf25aa2ebfb 100644 --- a/apps/browser/src/popup/scss/environment.scss +++ b/apps/browser/src/popup/scss/environment.scss @@ -45,3 +45,67 @@ html.browser_safari { border-color: #2e3440; } } + +.environment-selector-btn { + font-size: $font-size-small; + color: $text-muted; + line-height: 25px; + font-weight: 400; + padding-left: 5px; + + label { + font-weight: 600; + } + + a, + a label:hover { + cursor: pointer; + } +} + +.environment-selector-dialog { + @include themify($themes) { + background-color: themed("boxBackgroundColor"); + } + padding: 5px; + width: 100%; + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), + 0 1px 5px 0 rgba(0, 0, 0, 0.2); + border-radius: $border-radius; +} + +.environment-selector-dialog-item { + @include themify($themes) { + color: themed("textColor") !important; + } + width: 100%; + text-align: left; + padding: 0px 15px 0px 5px; + border-radius: 3px; + border: 1px solid transparent; + transition: all 0.2s ease-in-out; + + &:hover { + @include themify($themes) { + background-color: themed("listItemBackgroundHoverColor") !important; + } + } + + img { + margin-bottom: -2px; + width: 22px; + height: 14px; + } + + .img-us { + content: url("../images/us-flag.png"); + } + + .img-eu { + content: url("../images/eu-flag.png"); + } +} + +.environment-selector-padding { + padding-left: 10px; +} diff --git a/apps/browser/src/popup/scss/pages.scss b/apps/browser/src/popup/scss/pages.scss index 359072d1e26..e104570e563 100644 --- a/apps/browser/src/popup/scss/pages.scss +++ b/apps/browser/src/popup/scss/pages.scss @@ -144,7 +144,7 @@ body.body-full { } .remember-email-check { - padding-top: 8px; + padding-top: 18px; padding-left: 10px; padding-bottom: 18px; } diff --git a/apps/desktop/src/auth/environment.component.ts b/apps/desktop/src/auth/environment.component.ts index a3c0d40e5b3..8c40ee974d9 100644 --- a/apps/desktop/src/auth/environment.component.ts +++ b/apps/desktop/src/auth/environment.component.ts @@ -1,6 +1,7 @@ import { Component } from "@angular/core"; import { EnvironmentComponent as BaseEnvironmentComponent } from "@bitwarden/angular/components/environment.component"; +import { ModalService } from "@bitwarden/angular/services/modal.service"; import { EnvironmentService } from "@bitwarden/common/abstractions/environment.service"; import { I18nService } from "@bitwarden/common/abstractions/i18n.service"; import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service"; @@ -13,8 +14,9 @@ export class EnvironmentComponent extends BaseEnvironmentComponent { constructor( platformUtilsService: PlatformUtilsService, environmentService: EnvironmentService, - i18nService: I18nService + i18nService: I18nService, + modalService: ModalService ) { - super(platformUtilsService, environmentService, i18nService); + super(platformUtilsService, environmentService, i18nService, modalService); } } diff --git a/apps/desktop/src/auth/login/login.component.html b/apps/desktop/src/auth/login/login.component.html index 31eceb77696..e21df43e3ab 100644 --- a/apps/desktop/src/auth/login/login.component.html +++ b/apps/desktop/src/auth/login/login.component.html @@ -1,16 +1,4 @@ -
- +
-
+
Bitwarden

{{ "loginOrCreateNewAccount" | i18n }}

@@ -37,9 +25,7 @@ />
-
- {{ "loggingInTo" | i18n : selfHostedDomain }} -
+