2015-04-01 18:28:26 +02:00
/ *
Copyright 2008 - 2015 Clipperz Srl
This file is part of Clipperz , the online password manager .
For further information about its features and functionalities please
refer to http : //www.clipperz.com.
* Clipperz is free software : you can redistribute it and / or modify it
under the terms of the GNU Affero General Public License as published
by the Free Software Foundation , either version 3 of the License , or
( at your option ) any later version .
* Clipperz is distributed in the hope that it will be useful , but
WITHOUT ANY WARRANTY ; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE .
See the GNU Affero General Public License for more details .
* You should have received a copy of the GNU Affero General Public
License along with Clipperz . If not , see http : //www.gnu.org/licenses/.
* /
"use strict" ;
Clipperz . Base . module ( 'Clipperz.PM.UI.Components.ExtraFeatures' ) ;
Clipperz . PM . UI . Components . ExtraFeatures . DevicePINClass = React . createClass ( {
2016-03-29 11:45:50 +02:00
displayName : 'Clipperz.PM.UI.Components.ExtraFeatures.DevicePIN' ,
2015-04-01 18:28:26 +02:00
propTypes : {
// featureSet: React.PropTypes.oneOf(['FULL', 'EXPIRED', 'TRIAL']).isRequired,
// 'level': React.PropTypes.oneOf(['hide', 'info', 'warning', 'error']).isRequired
} ,
2015-09-30 20:09:58 +02:00
getInitialState : function ( ) {
return {
isEditing : false ,
pinValue : ''
}
} ,
2015-04-01 18:28:26 +02:00
//=========================================================================
2015-09-30 20:09:58 +02:00
handleChange : function ( anEvent ) {
2015-11-30 11:47:06 +01:00
var newValue = anEvent . target . value ;
if ( ! isNaN ( newValue ) && newValue . length <= this . props [ 'PIN' ] . DEFAULT _PIN _LENGTH ) {
2015-09-30 20:09:58 +02:00
this . setState ( {
'pinValue' : anEvent . target . value
} ) ;
}
} ,
2015-11-30 11:47:06 +01:00
handleSubmit : function ( anEvent ) {
var isSubmitEnabled = ( this . state [ 'pinValue' ] . length == this . props [ 'PIN' ] . DEFAULT _PIN _LENGTH ) ;
if ( isSubmitEnabled ) { this . savePIN ( ) ; }
anEvent . preventDefault ( ) ;
} ,
2015-10-06 15:33:42 +02:00
setFocus : function ( ) {
2016-03-29 11:45:50 +02:00
this . refs [ 'pinValue' ] . focus ( ) ;
2015-09-30 20:09:58 +02:00
} ,
2015-10-06 15:33:42 +02:00
resetPIN : function ( ) {
MochiKit . Signal . signal ( Clipperz . Signal . NotificationCenter , 'disablePIN' ) ;
MochiKit . Async . callLater ( 0.1 , MochiKit . Base . method ( this , 'setState' , this . getInitialState ( ) ) ) ;
MochiKit . Async . callLater ( 0.1 , MochiKit . Base . method ( this , 'setFocus' ) ) ;
} ,
savePIN : function ( ) {
MochiKit . Signal . signal ( Clipperz . Signal . NotificationCenter , 'updatePIN' , this . state . pinValue ) ;
MochiKit . Async . callLater ( 0.1 , MochiKit . Base . method ( this , 'setState' , this . getInitialState ( ) ) ) ;
2015-09-30 20:09:58 +02:00
} ,
//=========================================================================
2015-10-06 15:33:42 +02:00
renderButton : function ( ) {
var isButtonEnabled = ( this . props [ 'PIN' ] . isSet ( ) || this . state [ 'pinValue' ] . length == this . props [ 'PIN' ] . DEFAULT _PIN _LENGTH ) ;
var buttonText = this . props [ 'PIN' ] . isSet ( ) ? "Reset" : "Save" ;
var buttonOnClick = ( this . props [ 'PIN' ] . isSet ( ) ) ? this . resetPIN : this . savePIN ;
return React . DOM . a ( {
'className' : 'button' + ( ( isButtonEnabled ) ? '' : ' disabled' ) ,
'onClick' : ( isButtonEnabled ) ? buttonOnClick : null ,
} , buttonText ) ;
2015-09-30 20:09:58 +02:00
} ,
2015-04-01 18:28:26 +02:00
render : function ( ) {
2015-10-06 15:33:42 +02:00
var isInputEnabled = ! this . props [ 'PIN' ] . isSet ( ) ;
var displayedPin = ( this . props [ 'PIN' ] . isSet ( ) ) ? '*****' : this . state . pinValue ;
2015-09-30 20:09:58 +02:00
return React . DOM . div ( { className : 'extraFeature devicePIN' } , [
2015-06-27 19:08:20 +02:00
React . DOM . div ( { 'className' : 'header' } , [
React . DOM . h1 ( { } , "Device PIN" ) ,
2015-09-30 20:09:58 +02:00
React . DOM . div ( { 'className' : 'description' } , [
React . DOM . p ( { } , "You may create a 5-digit PIN to be used instead of your passphrase. Please note that the PIN is specific to the device you are now using." ) ,
React . DOM . p ( { } , [
React . DOM . strong ( { } , "Warning" ) ,
": enabling a PIN on your device may represent a security risk! Make sure to keep the device with you at all times!" ,
] ) ,
] ) ,
2015-06-27 19:08:20 +02:00
] ) ,
2015-05-21 14:32:51 +02:00
React . DOM . div ( { 'className' : 'content' } , [
2015-10-12 10:03:50 +02:00
// React.DOM.p({}, "PIN is "+((this.props['PIN'].isSet()) ? '' : 'not ')+"set on this device"),
React . DOM . p ( { } , ( ( this . props [ 'PIN' ] . isSet ( ) ) ? "PIN is set on this device" : "PIN is not set on this device" ) ) ,
2015-11-30 11:47:06 +01:00
React . DOM . form ( {
'onSubmit' : this . handleSubmit ,
} , [
2015-09-30 20:09:58 +02:00
React . DOM . input ( {
'type' : 'tel' ,
'key' : 'pinValue' ,
'ref' : 'pinValue' ,
'className' : 'pinValue' ,
2015-10-06 15:33:42 +02:00
'disabled' : ! isInputEnabled ,
2015-09-30 20:09:58 +02:00
'onChange' : this . handleChange ,
'onBlur' : this . handleBlur ,
'value' : displayedPin ,
} ) ,
2015-10-06 15:33:42 +02:00
this . renderButton ( ) ,
2015-09-30 20:09:58 +02:00
] )
2015-05-21 14:32:51 +02:00
] )
2015-04-01 18:28:26 +02:00
] ) ;
} ,
//=========================================================================
} ) ;
Clipperz . PM . UI . Components . ExtraFeatures . DevicePIN = React . createFactory ( Clipperz . PM . UI . Components . ExtraFeatures . DevicePINClass ) ;