mirror of
https://github.com/inverse-inc/sogo.git
synced 2026-10-07 04:47:14 +00:00
feat(core(js)): improve Google Authenticator on login page, add QR code
Closes #2722
This commit is contained in:
1 parent
f78300a12e
commit
e8f0471bcf
8 files changed
+116
-34
No files matched your search
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in new issue
Block a user