mirror of
https://github.com/bitwarden/directory-connector
synced 2025-12-10 13:23:18 +00:00
styling updates
This commit is contained in:
Kyle Spearrin
@@ -1,58 +1,35 @@
|
||||
<div class="modal fade">
|
||||
<div class="modal-dialog">
|
||||
<form class="modal-content" (ngSubmit)="submit()">
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title">{{'settings' | i18n}}</h3>
|
||||
<button type="button" class="close" data-dismiss="modal" title="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="box">
|
||||
<div class="box-header">
|
||||
{{'selfHostedEnvironment' | i18n}}
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<div class="box-content-row" appBoxRow>
|
||||
<h4>{{'selfHostedEnvironment' | i18n}}</h4>
|
||||
<p>{{'selfHostedEnvironmentFooter' | i18n}}</p>
|
||||
<div class="form-group">
|
||||
<label for="baseUrl">{{'baseUrl' | i18n}}</label>
|
||||
<input id="baseUrl" type="text" name="BaseUrl" [(ngModel)]="baseUrl"
|
||||
placeholder="ex. https://bitwarden.company.com">
|
||||
<input id="baseUrl" type="text" name="BaseUrl" [(ngModel)]="baseUrl" class="form-control">
|
||||
<small class="text-muted form-text">{{'ex' | i18n}} https://bitwarden.company.com</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer">
|
||||
{{'selfHostedEnvironmentFooter' | i18n}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="box-header">
|
||||
<button type="button" (click)="toggleCustom()">
|
||||
<i class="fa fa-plus-square-o" [hidden]="showCustom"></i>
|
||||
<i class="fa fa-minus-square-o" [hidden]="!showCustom"></i>
|
||||
{{'customEnvironment' | i18n}}
|
||||
</button>
|
||||
</div>
|
||||
<div class="box-content" [hidden]="!showCustom">
|
||||
<div class="box-content-row" appBoxRow>
|
||||
<label for="webVaultUrl">{{'webVaultUrl' | i18n}}</label>
|
||||
<input id="webVaultUrl" type="text" name="WebVaultUrl" [(ngModel)]="webVaultUrl">
|
||||
</div>
|
||||
<div class="box-content-row" appBoxRow>
|
||||
<h4>{{'customEnvironment' | i18n}}</h4>
|
||||
<p>{{'customEnvironmentFooter' | i18n}}</p>
|
||||
<div class="form-group">
|
||||
<label for="apiUrl">{{'apiUrl' | i18n}}</label>
|
||||
<input id="apiUrl" type="text" name="ApiUrl" [(ngModel)]="apiUrl">
|
||||
<input id="apiUrl" type="text" name="ApiUrl" [(ngModel)]="apiUrl" class="form-control">
|
||||
</div>
|
||||
<div class="box-content-row" appBoxRow>
|
||||
<div class="form-group">
|
||||
<label for="identityUrl">{{'identityUrl' | i18n}}</label>
|
||||
<input id="identityUrl" type="text" name="IdentityUrl" [(ngModel)]="identityUrl">
|
||||
</div>
|
||||
<div class="box-content-row" appBoxRow>
|
||||
<label for="iconsUrl">{{'iconsUrl' | i18n}}</label>
|
||||
<input id="iconsUrl" type="text" name="IconsUrl" [(ngModel)]="iconsUrl">
|
||||
<input id="identityUrl" type="text" name="IdentityUrl" [(ngModel)]="identityUrl" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-footer" [hidden]="!showCustom">
|
||||
{{'customEnvironmentFooter' | i18n}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button appBlurClick type="submit" class="primary" title="{{'save' | i18n}}">
|
||||
<i class="fa fa-save fa-lg fa-fw"></i>
|
||||
<div class="modal-footer justify-content-start">
|
||||
<button appBlurClick type="submit" class="btn btn-primary">
|
||||
{{'save' | i18n}}
|
||||
</button>
|
||||
<button type="button" data-dismiss="modal">{{'close' | i18n}}</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -1,45 +1,33 @@
|
||||
<form id="login-page" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
|
||||
<div class="content">
|
||||
<img src="../../images/logo@2x.png" alt="bitwarden">
|
||||
<p class="lead">{{'loginOrCreateNewAccount' | i18n}}</p>
|
||||
<div class="box last">
|
||||
<div class="box-content">
|
||||
<div class="box-content-row" appBoxRow>
|
||||
<div class="container-fluid">
|
||||
<form #form (ngSubmit)="submit()" [appApiAction]="formPromise">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8 col-lg-6">
|
||||
<div class="card">
|
||||
<h5 class="card-header">{{'logIn' | i18n}}</h5>
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<label for="email">{{'emailAddress' | i18n}}</label>
|
||||
<input id="email" type="text" name="Email" [(ngModel)]="email" required
|
||||
[appAutofocus]="email === ''">
|
||||
<input id="email" type="text" name="Email" [(ngModel)]="email" class="form-control" appAutoFocus>
|
||||
</div>
|
||||
<div class="box-content-row box-content-row-flex" appBoxRow>
|
||||
<div class="form-group">
|
||||
<div class="row-main">
|
||||
<label for="masterPassword">{{'masterPass' | i18n}}</label>
|
||||
<input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}" name="MasterPassword"
|
||||
class="monospaced" [(ngModel)]="masterPassword" required [appAutofocus]="email !== ''">
|
||||
</div>
|
||||
<div class="action-buttons">
|
||||
<a class="row-btn" href="#" appStopClick appBlurClick
|
||||
title="{{'toggleVisibility' | i18n}}" (click)="togglePassword()">
|
||||
<i class="fa fa-lg"
|
||||
[ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
|
||||
</a>
|
||||
<input id="masterPassword" type="password" name="MasterPassword" [(ngModel)]="masterPassword" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button type="submit" class="btn primary block" [disabled]="form.loading" appBlurClick>
|
||||
<span [hidden]="form.loading"><i class="fa fa-sign-in"></i> {{'logIn' | i18n}}</span>
|
||||
<button type="submit" class="btn btn-primary" [disabled]="form.loading" appBlurClick>
|
||||
<span [hidden]="form.loading">
|
||||
<i class="fa fa-sign-in"></i> {{'logIn' | i18n}}
|
||||
</span>
|
||||
<i class="fa fa-spinner fa-spin" [hidden]="!form.loading"></i>
|
||||
</button>
|
||||
<a routerLink="/register" class="btn block">
|
||||
<i class="fa fa-pencil-square-o"></i> {{'createAccount' | i18n}}
|
||||
</a>
|
||||
<button type="button" class="btn btn-link" (click)="settings()" appBlurClick>
|
||||
{{'settings' | i18n}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sub-options">
|
||||
<a routerLink="/hint">{{'getMasterPasswordHint' | i18n}}</a>
|
||||
</div>
|
||||
<a href="#" appStopClick (click)="settings()" class="settings-icon">
|
||||
<i class="fa fa-cog fa-lg"></i><span> {{'settings' | i18n}}</span>
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<ng-template #environment></ng-template>
|
||||
|
||||
@@ -29,7 +29,7 @@ export class LoginComponent extends BaseLoginComponent {
|
||||
analytics: Angulartics2, toasterService: ToasterService,
|
||||
i18nService: I18nService, private componentFactoryResolver: ComponentFactoryResolver) {
|
||||
super(authService, router, analytics, toasterService, i18nService);
|
||||
super.successRoute = '/dashboard';
|
||||
super.successRoute = '/tabs/dashboard';
|
||||
}
|
||||
|
||||
settings() {
|
||||
|
||||
@@ -1,27 +1,25 @@
|
||||
<div class="modal fade">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title">{{'twoStepOptions' | i18n}}</h3>
|
||||
<button type="button" class="close" data-dismiss="modal" title="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="box">
|
||||
<div class="box-header">
|
||||
{{'twoStepOptions' | i18n}}
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<a href="#" appStopClick *ngFor="let p of providers" class="box-content-row"
|
||||
(click)="choose(p)">
|
||||
<img [src]="'images/two-factor/' + p.type + '.png'" alt="" class="img-right">
|
||||
<span class="text">{{p.name}}</span>
|
||||
<span class="detail">{{p.description}}</span>
|
||||
<p *ngFor="let p of providers">
|
||||
<a href="#" (click)="choose(p)">
|
||||
<strong>{{p.name}}</strong>
|
||||
</a>
|
||||
<a href="#" appStopClick class="box-content-row" (click)="recover()">
|
||||
<span class="text">{{'recoveryCodeTitle' | i18n}}</span>
|
||||
<span class="detail">{{'recoveryCodeDesc' | i18n}}</span>
|
||||
<br /> {{p.description}}
|
||||
</p>
|
||||
<p>
|
||||
<a href="#" (click)="recover()">
|
||||
<strong>{{'recoveryCodeTitle' | i18n}}</strong>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" data-dismiss="modal">{{'close' | i18n}}</button>
|
||||
<br /> {{'recoveryCodeDesc' | i18n}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,75 +1,64 @@
|
||||
<form id="two-factor-page" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
|
||||
<div class="content">
|
||||
<h1>{{title}}</h1>
|
||||
<p *ngIf="selectedProviderType === providerType.Authenticator">{{'enterVerificationCodeApp' | i18n}}</p>
|
||||
<div class="container-fluid">
|
||||
<form #form (ngSubmit)="submit()" [appApiAction]="formPromise">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8 col-lg-6">
|
||||
<div class="card">
|
||||
<h5 class="card-header">{{title}}</h5>
|
||||
<div class="card-body">
|
||||
<ng-container *ngIf="selectedProviderType === providerType.Email || selectedProviderType === providerType.Authenticator">
|
||||
<p *ngIf="selectedProviderType === providerType.Authenticator">
|
||||
{{'enterVerificationCodeApp' | i18n}}
|
||||
</p>
|
||||
<p *ngIf="selectedProviderType === providerType.Email">
|
||||
{{'enterVerificationCodeEmail' | i18n : twoFactorEmail}}
|
||||
</p>
|
||||
<div class="box last"
|
||||
*ngIf="selectedProviderType === providerType.Email || selectedProviderType === providerType.Authenticator">
|
||||
<div class="box-content">
|
||||
<div class="box-content-row" appBoxRow>
|
||||
<div class="form-group">
|
||||
<label for="code">{{'verificationCode' | i18n}}</label>
|
||||
<input id="code" type="text" name="Code" [(ngModel)]="token" required appAutofocus>
|
||||
</div>
|
||||
<div class="box-content-row box-content-row-checkbox" appBoxRow>
|
||||
<label for="remember">{{'rememberMe' | i18n}}</label>
|
||||
<input id="remember" type="checkbox" name="Remember" [(ngModel)]="remember">
|
||||
</div>
|
||||
</div>
|
||||
<input id="code" type="text" name="Code" [(ngModel)]="token" appAutofocus class="form-control">
|
||||
</div>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="selectedProviderType === providerType.Yubikey">
|
||||
<p>{{'insertYubiKey' | i18n}}</p>
|
||||
<img src="../../images/yubikey.jpg" alt="">
|
||||
<div class="box last">
|
||||
<div class="box-content">
|
||||
<div class="box-content-row" appBoxRow>
|
||||
<label for="code" class="sr-only">{{'verificationCode' | i18n}}</label>
|
||||
<input id="code" type="password" name="Code" [(ngModel)]="token" required appAutofocus>
|
||||
</div>
|
||||
<div class="box-content-row box-content-row-checkbox" appBoxRow>
|
||||
<label for="remember">{{'rememberMe' | i18n}}</label>
|
||||
<input id="remember" type="checkbox" name="Remember" [(ngModel)]="remember">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="code">{{'verificationCode' | i18n}}</label>
|
||||
<input id="code" type="password" name="Code" [(ngModel)]="token" appAutofocus class="form-control">
|
||||
</div>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="selectedProviderType === providerType.Duo ||
|
||||
selectedProviderType === providerType.OrganizationDuo">
|
||||
<div id="duo-frame"><iframe id="duo_iframe"></iframe></div>
|
||||
<div class="box last">
|
||||
<div class="box-content">
|
||||
<div class="box-content-row box-content-row-checkbox" appBoxRow>
|
||||
<label for="remember">{{'rememberMe' | i18n}}</label>
|
||||
<input id="remember" type="checkbox" name="Remember" [(ngModel)]="remember">
|
||||
</div>
|
||||
</div>
|
||||
<div id="duo-frame">
|
||||
<iframe id="duo_iframe"></iframe>
|
||||
</div>
|
||||
</ng-container>
|
||||
<div class="box last" *ngIf="selectedProviderType == null">
|
||||
<div class="box-content">
|
||||
<div class="box-content-row">
|
||||
<div class="form-group" *ngIf="selectedProviderType !== null && selectedProviderType !== providerType.U2f">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="remember" [(ngModel)]="remember" name="Remember">
|
||||
<label class="form-check-label" for="remember">{{'rememberMe' | i18n}}</label>
|
||||
</div>
|
||||
</div>
|
||||
<ng-container class="card-body" *ngIf="selectedProviderType === null || selectedProviderType === providerType.U2f">
|
||||
<p>{{'noTwoStepProviders' | i18n}}</p>
|
||||
<p>{{'noTwoStepProviders2' | i18n}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button type="submit" class="btn primary block" [disabled]="form.loading" appBlurClick
|
||||
*ngIf="selectedProviderType != null && selectedProviderType !== providerType.Duo &&
|
||||
</ng-container>
|
||||
<button type="submit" class="btn btn-primary" [disabled]="form.loading" appBlurClick *ngIf="selectedProviderType != null && selectedProviderType !== providerType.U2f && selectedProviderType !== providerType.Duo &&
|
||||
selectedProviderType !== providerType.OrganizationDuo">
|
||||
<span [hidden]="form.loading"><i class="fa fa-sign-in"></i> {{'continue' | i18n}}</span>
|
||||
<span [hidden]="form.loading">
|
||||
<i class="fa fa-sign-in"></i> {{'continue' | i18n}}
|
||||
</span>
|
||||
<i class="fa fa-spinner fa-spin" [hidden]="!form.loading"></i>
|
||||
</button>
|
||||
<a routerLink="/login" class="btn block">{{'cancel' | i18n}}</a>
|
||||
<a routerLink="/login" class="btn btn-link">{{'cancel' | i18n}}</a>
|
||||
</div>
|
||||
<div class="sub-options">
|
||||
</div>
|
||||
<div class="text-center mt-3">
|
||||
<a href="#" appStopClick (click)="anotherMethod()">{{'useAnotherTwoStepMethod' | i18n}}</a>
|
||||
<a href="#" appStopClick (click)="sendEmail(true)" [appApiAction]="emailPromise"
|
||||
*ngIf="selectedProviderType === providerType.Email">
|
||||
<a href="#" appStopClick (click)="sendEmail(true)" [appApiAction]="emailPromise" *ngIf="selectedProviderType === providerType.Email">
|
||||
{{'sendVerificationCodeEmailAgain' | i18n}}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<ng-template #twoFactorOptions></ng-template>
|
||||
|
||||
@@ -38,7 +38,7 @@ export class TwoFactorComponent extends BaseTwoFactorComponent {
|
||||
private componentFactoryResolver: ComponentFactoryResolver) {
|
||||
super(authService, router, analytics, toasterService, i18nService, apiService,
|
||||
platformUtilsService, window, environmentService);
|
||||
super.successRoute = '/dashboard';
|
||||
super.successRoute = '/tabs/dashboard';
|
||||
}
|
||||
|
||||
anotherMethod() {
|
||||
|
||||
@@ -425,5 +425,8 @@
|
||||
},
|
||||
"dashboard": {
|
||||
"message": "Dashboard"
|
||||
},
|
||||
"organization": {
|
||||
"message": "Organization"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "bootstrap.scss";
|
||||
@import "~bootstrap/scss/_variables.scss";
|
||||
|
||||
html.os_windows {
|
||||
body {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "bootstrap.scss";
|
||||
@import "~bootstrap/scss/_variables.scss";
|
||||
|
||||
body {
|
||||
padding: 10px 0 20px 0;
|
||||
@@ -23,14 +23,17 @@ h3 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.nav.nav-tabs {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#duo-frame {
|
||||
background: url('../images/loading.svg') 0 0 no-repeat;
|
||||
height: 330px;
|
||||
margin: 0 -150px 15px -150px;
|
||||
height: 380px;
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
|
||||
@@ -2,7 +2,7 @@ $fa-font-path: "~font-awesome/fonts";
|
||||
@import "~font-awesome/scss/font-awesome.scss";
|
||||
@import "~angular2-toaster/toaster";
|
||||
|
||||
@import "bootstrap.scss";
|
||||
@import "~bootstrap/scss/_variables.scss";
|
||||
|
||||
#toast-container {
|
||||
.toast-close-button {
|
||||
@@ -73,3 +73,48 @@ $fa-font-path: "~font-awesome/fonts";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes modalshow {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate(0, -25%);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes backdropshow {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: $modal-backdrop-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
display: block !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
.modal.fade & {
|
||||
transform: initial !important;
|
||||
animation: modalshow 0.3s ease-in;
|
||||
}
|
||||
.modal.show & {
|
||||
transform: initial !important;
|
||||
}
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
&.fade {
|
||||
animation: backdropshow 0.1s ease-in;
|
||||
}
|
||||
opacity: $modal-backdrop-opacity !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user