1
0
mirror of https://github.com/bitwarden/browser.git synced 2024-10-09 05:57:40 +02:00
bitwarden-browser/src/app/settings/options.component.ts
Danny Murphy 0c02cfea2f
Dark Theme (#1017)
* Stylesheets

* Theme Configuration

* Options Area

* swal2 style

* Icon styling

* Fix theme not saving

* Update English

* Update messages.json

* dropdown and login logo

* btn-link and totp fix

* Organisation Styling

* Update webauthn-fallback.ts

* Fix contrast issues

* Add Paypal Container and Loading svg file

* Password Generator contrast fix

* Dark Mode Fix buttons and foreground

* Fix button hover

* Fix Styles after rebase

* Add hover on nav dropdown-item

* Disable Theme Preview

* Options Fix for Default Theme Changes

* Updated Colour Scheme

* Toast fix

* Button and Text Styling

* Options Update and Messages Fix

* Added Search Icon and Fixed Callout styling

* Add theme styling to Stripe

* Refactor logic for setting color

* Reorder logic to avoid race condition

* PayPal Loading and Misc Fix

* text-state bug fix

* Badge Colour Fix

* Remove PayPal Tagline

The colour cannot be styled so it's not visible on a dark theme

* Adding the Styling from #1131

* Update to New Design

* Form and Nav restyle

* Modal Opacity and Callout

* Nav Colours

* Missing Borders

* Light theme fix

* Improved border for listgroup

* Change Org Nav Colour

* Save theme to localStorage for persistence

* Undo change to Wired image

* !Important removal and tweaks

* Fix regression with navbar

* Light theme by default

* Refactor to use getEffectiveTheme

* Refactor theme constants to use enum

* Set theme in index.html before app loads

* Use scss selector to set logo image

* Export Sass to TS

* Update jslib

Co-authored-by: Thomas Rittson <trittson@bitwarden.com>
2021-09-30 08:06:20 +10:00

129 lines
5.9 KiB
TypeScript

import {
Component,
OnInit,
} from '@angular/core';
import { FormControl } from '@angular/forms';
import { ToasterService } from 'angular2-toaster';
import { I18nService } from 'jslib-common/abstractions/i18n.service';
import { MessagingService } from 'jslib-common/abstractions/messaging.service';
import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
import { StateService } from 'jslib-common/abstractions/state.service';
import { StorageService } from 'jslib-common/abstractions/storage.service';
import { VaultTimeoutService } from 'jslib-common/abstractions/vaultTimeout.service';
import { ConstantsService } from 'jslib-common/services/constants.service';
import { ThemeType } from 'jslib-common/enums/themeType';
import { Utils } from 'jslib-common/misc/utils';
@Component({
selector: 'app-options',
templateUrl: 'options.component.html',
})
export class OptionsComponent implements OnInit {
vaultTimeoutAction: string = 'lock';
disableIcons: boolean;
enableGravatars: boolean;
enableFullWidth: boolean;
theme: string = null;
locale: string;
vaultTimeouts: { name: string; value: number; }[];
localeOptions: any[];
themeOptions: any[];
vaultTimeout: FormControl = new FormControl(null);
private startingLocale: string;
private startingTheme: string;
constructor(private storageService: StorageService, private stateService: StateService,
private i18nService: I18nService, private toasterService: ToasterService,
private vaultTimeoutService: VaultTimeoutService, private platformUtilsService: PlatformUtilsService,
private messagingService: MessagingService) {
this.vaultTimeouts = [
{ name: i18nService.t('oneMinute'), value: 1 },
{ name: i18nService.t('fiveMinutes'), value: 5 },
{ name: i18nService.t('fifteenMinutes'), value: 15 },
{ name: i18nService.t('thirtyMinutes'), value: 30 },
{ name: i18nService.t('oneHour'), value: 60 },
{ name: i18nService.t('fourHours'), value: 240 },
{ name: i18nService.t('onRefresh'), value: -1 },
];
if (this.platformUtilsService.isDev()) {
this.vaultTimeouts.push({ name: i18nService.t('never'), value: null });
}
const localeOptions: any[] = [];
i18nService.supportedTranslationLocales.forEach(locale => {
let name = locale;
if (i18nService.localeNames.has(locale)) {
name += (' - ' + i18nService.localeNames.get(locale));
}
localeOptions.push({ name: name, value: locale });
});
localeOptions.sort(Utils.getSortFunction(i18nService, 'name'));
localeOptions.splice(0, 0, { name: i18nService.t('default'), value: null });
this.localeOptions = localeOptions;
this.themeOptions = [
{ name: i18nService.t('themeLight'), value: null },
{ name: i18nService.t('themeDark'), value: ThemeType.Dark },
{ name: i18nService.t('themeSystem'), value: ThemeType.System },
];
}
async ngOnInit() {
this.vaultTimeout.setValue(await this.vaultTimeoutService.getVaultTimeout());
this.vaultTimeoutAction = await this.storageService.get<string>(ConstantsService.vaultTimeoutActionKey);
this.disableIcons = await this.storageService.get<boolean>(ConstantsService.disableFaviconKey);
this.enableGravatars = await this.storageService.get<boolean>('enableGravatars');
this.enableFullWidth = await this.storageService.get<boolean>('enableFullWidth');
this.locale = this.startingLocale = await this.storageService.get<string>(ConstantsService.localeKey);
this.theme = this.startingTheme = await this.storageService.get<ThemeType>(ConstantsService.themeKey);
}
async submit() {
if (!this.vaultTimeout.valid) {
this.toasterService.popAsync('error', null, this.i18nService.t('vaultTimeoutToLarge'));
return;
}
await this.vaultTimeoutService.setVaultTimeoutOptions(this.vaultTimeout.value, this.vaultTimeoutAction);
await this.storageService.save(ConstantsService.disableFaviconKey, this.disableIcons);
await this.stateService.save(ConstantsService.disableFaviconKey, this.disableIcons);
await this.storageService.save('enableGravatars', this.enableGravatars);
await this.stateService.save('enableGravatars', this.enableGravatars);
await this.storageService.save('enableFullWidth', this.enableFullWidth);
this.messagingService.send('setFullWidth');
if (this.theme !== this.startingTheme) {
await this.storageService.save(ConstantsService.themeKey, this.theme);
this.startingTheme = this.theme;
const effectiveTheme = await this.platformUtilsService.getEffectiveTheme();
const htmlEl = window.document.documentElement;
htmlEl.classList.remove('theme_' + ThemeType.Light, 'theme_' + ThemeType.Dark);
htmlEl.classList.add('theme_' + effectiveTheme);
}
await this.storageService.save(ConstantsService.localeKey, this.locale);
if (this.locale !== this.startingLocale) {
window.location.reload();
} else {
this.toasterService.popAsync('success', null, this.i18nService.t('optionsUpdated'));
}
}
async vaultTimeoutActionChanged(newValue: string) {
if (newValue === 'logOut') {
const confirmed = await this.platformUtilsService.showDialog(
this.i18nService.t('vaultTimeoutLogOutConfirmation'),
this.i18nService.t('vaultTimeoutLogOutConfirmationTitle'),
this.i18nService.t('yes'), this.i18nService.t('cancel'), 'warning');
if (!confirmed) {
this.vaultTimeoutAction = 'lock';
return;
}
}
this.vaultTimeoutAction = newValue;
}
}