feat(core(js)): improve Google Authenticator on login page, add QR code

Closes #2722
This commit is contained in:
Francis Lachapelle committed 2020-05-07 16:45:37 -04:00
1 parent f78300a12e
commit e8f0471bcf
8 files changed
+116 -34

No files matched your search

+38 -14
View File
@@ -52,16 +52,6 @@
<input type="password" ng-model="app.creds.password" ng-required="true"/>
</md-input-container>
<var:if condition="isGoogleAuthenticatorEnabled">
<md-input-container class="md-block"
ng-show="app.showGoogleAuthenticatorCode">
<label><var:string label:value="Google Authenticator
Verification Code"/></label>
<md-icon>email</md-icon>
<input type="text" ng-model="app.creds.verificationCode" ng-required="false"/>
</md-input-container>
</var:if>
<!-- LANGUAGES SELECT -->
<div layout="row" layout-align="start end">
<md-icon>language</md-icon>
@@ -112,13 +102,13 @@
</md-button>
<md-button class="md-fab md-accent md-hue-2" type="submit"
label:aria-label="Connect"
ng-disabled="loginForm.$invalid" sg-ripple-click="loginContent">
ng-if="!app.loginState"
ng-disabled="loginForm.$invalid"
sg-ripple-click="loginContent">
<md-icon>arrow_forward</md-icon>
</md-button>
</div>
</form>
<sg-ripple class="md-default-theme md-accent md-bg"
ng-class="{ 'md-warn': app.loginState == 'error' }"><!-- ripple background --></sg-ripple>
<sg-ripple-content class="md-flex ng-hide"
@@ -136,6 +126,36 @@
</div>
</div>
<!-- Google Authenticator Code -->
<var:if condition="isGoogleAuthenticatorEnabled">
<div layout="row" layout-align="center center" layout-fill="layout-fill"
ng-switch-when="googleauthenticatorcode">
<div flex="80" flex-sm="50" flex-gt-sm="40">
<md-input-container class="md-block">
<label><var:string label:value="Verification Code"/></label>
<md-icon>lock</md-icon>
<input type="text" ng-pattern="app.verificationCodePattern" ng-model="app.creds.verificationCode" ng-required="app.loginState == 'googleauthenticatorcode'"/>
<div class="sg-hint"><var:string label:value="Enter the 6-digit verification code from your Google Authenticator application."/></div>
</md-input-container>
<div layout="row" layout-align="space-between center">
<md-button class="md-icon-button"
label:aria-label="Cancel"
ng-click="app.restoreLogin()"
sg-ripple-click="loginContent">
<md-icon>arrow_backward</md-icon>
</md-button>
<md-button class="md-fab md-accent md-hue-2" type="submit"
label:aria-label="Connect"
ng-if="app.loginState == 'googleauthenticatorcode'"
ng-disabled="loginForm.$invalid"
ng-click="app.login()">
<md-icon>arrow_forward</md-icon>
</md-button>
</div>
</div>
</div>
</var:if>
<!-- Logged in -->
<div layout="column" layout-align="center center"
ng-switch-when="logged">
@@ -152,10 +172,14 @@
<div class="md-default-theme md-accent md-hue-1 md-fg md-padding">
{{app.errorMessage}}
</div>
<md-button sg-ripple-click="loginContent"><var:string label:value="Retry"/></md-button>
<md-button
ng-click="app.restoreLogin()"
sg-ripple-click="loginContent"><var:string label:value="Retry"/></md-button>
</div>
</sg-ripple-content>
</form>
</div>
</div>
</md-content>
+12 -14
View File
@@ -8,7 +8,7 @@
xmlns:label="OGo:label"
className="UIxPageFrame"
title="title"
const:jsFiles="vendor/ckeditor/ckeditor.js, vendor/ckeditor/ck.js, vendor/angular-file-upload.min.js, vendor/ng-sortable.min.js, Common.js, Preferences.js, Preferences.services.js, Mailer.services.js, Contacts.services.js">
const:jsFiles="vendor/ckeditor/ckeditor.js, vendor/ckeditor/ck.js, vendor/angular-file-upload.min.js, vendor/ng-sortable.min.js, vendor/qrcode.min.js, Common.js, Preferences.js, Preferences.services.js, Mailer.services.js, Contacts.services.js">
<main layout-fill="layout-fill" ui-view="preferences"
ng-controller="navController"><!-- preferences --> </main>
@@ -232,24 +232,22 @@
</md-input-container>
<var:if condition="isGoogleAuthenticatorEnabled">
<md-checkbox flex="20"
ng-model="app.preferences.defaults.SOGoGoogleAuthenticatorEnabled"
<md-checkbox ng-model="app.preferences.defaults.SOGoGoogleAuthenticatorEnabled"
ng-true-value="1"
ng-false-value="0"
label:aria-label="Enable two-factor authentication using Google Authenticator">
<var:string label:value="Enable two-factor authentication using Google Authenticator"/>
</md-checkbox>
<input type="text"
ng-readonly="true"
ng-show="app.preferences.defaults.SOGoGoogleAuthenticatorEnabled == 1"
var:value="googleAuthenticatorKey"/>
<label
ng-show="app.preferences.defaults.SOGoGoogleAuthenticatorEnabled
== 1"><var:string label:value="You must enter
this key into your Google Authenticator
application. If you do not and you log out
you will not be able to access SOGo
again."/></label>
<div layout="row" layout-align="start center" layout-wrap="layout-wrap"
layout-padding="layout-padding" layout-margin="layout-margin"
ng-show="app.preferences.defaults.SOGoGoogleAuthenticatorEnabled">
<div>
<sg-qr-code var:text="googleAuthenticatorKey" />
</div>
<div flex="100" flex-sm="60" flex-gt-sm="50">
<var:string label:value="You must enter this key into your Google Authenticator application."/> <b><var:string label:value="If you do not and you log out you will not be able to login again."/></b>
</div>
</div>
</var:if>
</div>