2015-04-03 16:03:17 +02:00
/ *
2018-11-25 17:31:43 +01:00
Copyright 2008 - 2018 Clipperz Srl
2015-04-03 16:03:17 +02:00
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 . PassphraseClass = React . createClass ( {
2016-03-29 11:45:50 +02:00
displayName : 'Clipperz.PM.UI.Components.ExtraFeatures.Passphrase' ,
2015-04-03 16:03:17 +02:00
propTypes : {
} ,
getInitialState : function ( ) {
return {
2015-05-21 14:32:51 +02:00
'username' : 'empty' ,
'old-passphrase' : 'empty' ,
'new-passphrase' : 'empty' ,
'confirm-new-passphrase' : 'empty' ,
'confirm' : '' ,
2015-04-03 16:03:17 +02:00
} ;
} ,
//=========================================================================
2015-05-21 14:32:51 +02:00
resetForm : function ( ) {
this . setState ( this . getInitialState ( ) ) ;
2016-03-29 11:45:50 +02:00
this . refs [ 'username' ] . value = '' ;
this . refs [ 'old-passphrase' ] . value = '' ;
this . refs [ 'new-passphrase' ] . value = '' ;
this . refs [ 'confirm-new-passphrase' ] . value = '' ;
this . refs [ 'confirm' ] . checked = false ;
2015-04-03 16:03:17 +02:00
} ,
handleChangePassphrase : function ( event ) {
2015-05-21 14:32:51 +02:00
var newPassphrase ;
2015-04-03 16:03:17 +02:00
event . preventDefault ( ) ;
2016-03-29 11:45:50 +02:00
newPassphrase = this . refs [ 'new-passphrase' ] . value ;
2015-05-21 14:32:51 +02:00
this . resetForm ( ) ;
2015-04-14 10:44:23 +02:00
2015-05-21 14:32:51 +02:00
MochiKit . Signal . signal ( Clipperz . Signal . NotificationCenter , 'changePassphrase' , newPassphrase ) ;
} ,
handleFormChange : function ( ) {
2015-04-14 10:44:23 +02:00
var deferredResult ;
2015-05-21 14:32:51 +02:00
deferredResult = new Clipperz . Async . Deferred ( "Passphrase.handleFormChange" , { trace : false } ) ;
2016-03-29 11:45:50 +02:00
deferredResult . addCallback ( this . props . userInfo [ 'checkPassphraseCallback' ] , this . refs [ 'old-passphrase' ] . value ) ;
2015-05-21 14:32:51 +02:00
deferredResult . addMethod ( this , function ( passCheck ) {
2016-03-29 11:45:50 +02:00
var username = this . refs [ 'username' ] . value ;
var oldPassphrase = this . refs [ 'old-passphrase' ] . value ;
var newPassphrase = this . refs [ 'new-passphrase' ] . value ;
var confirmNewPassphrase = this . refs [ 'confirm-new-passphrase' ] . value ;
2015-05-21 14:32:51 +02:00
this . setState ( {
'username' : ( username != '' ) ? [ ( username == this . props . userInfo [ 'username' ] ) ? 'valid' : 'invalid' ] : 'empty' ,
'old-passphrase' : ( oldPassphrase != '' ) ? [ ( passCheck ) ? 'valid' : 'invalid' ] : 'empty' ,
'new-passphrase' : ( newPassphrase != '' ) ? 'valid' : 'empty' ,
'confirm-new-passphrase' : ( confirmNewPassphrase != '' ) ? [ ( confirmNewPassphrase == newPassphrase ) ? 'valid' : 'invalid' ] : 'empty' ,
2016-03-29 11:45:50 +02:00
'confirm' : this . refs [ 'confirm' ] . checked ,
2015-05-21 14:32:51 +02:00
} ) ;
} ) ;
2015-04-03 16:03:17 +02:00
2015-04-14 10:44:23 +02:00
deferredResult . callback ( ) ;
return deferredResult ;
2015-05-21 14:32:51 +02:00
} ,
shouldEnableChangePassphraseButton : function ( ) {
return (
this . state [ 'username' ] == 'valid' &&
this . state [ 'old-passphrase' ] == 'valid' &&
this . state [ 'new-passphrase' ] == 'valid' &&
this . state [ 'confirm-new-passphrase' ] == 'valid' &&
this . state [ 'confirm' ]
) ;
2015-04-03 16:03:17 +02:00
} ,
//=========================================================================
render : function ( ) {
return React . DOM . div ( { className : 'extraFeature passphrase' } , [
2015-06-27 19:08:20 +02:00
React . DOM . div ( { 'className' : 'header' } , [
2015-07-05 09:09:33 +02:00
React . DOM . h1 ( { } , "Change passphrase" ) ,
2015-06-27 19:08:20 +02:00
] ) ,
2015-05-21 14:32:51 +02:00
React . DOM . div ( { 'className' : 'content' } , [
React . DOM . form ( { 'key' : 'form' , 'className' : 'changePassphraseForm' , 'onChange' : this . handleFormChange , 'onSubmit' : this . handleChangePassphrase } , [
React . DOM . div ( { 'key' : 'fields' } , [
React . DOM . label ( { 'key' : 'username-label' , 'htmlFor' : 'name' } , "username" ) ,
React . DOM . input ( { 'key' : 'username' , 'className' : this . state [ 'username' ] , 'type' : 'text' , 'name' : 'name' , 'ref' : 'username' , 'placeholder' : "username" , 'autoCapitalize' : 'none' } ) ,
React . DOM . label ( { 'key' : 'old-passphrase-label' , 'htmlFor' : 'old-passphrase' } , "old passphrase" ) ,
React . DOM . input ( { 'key' : 'old-passphrase' , 'className' : this . state [ 'old-passphrase' ] , 'type' : 'password' , 'name' : 'old-passphrase' , 'ref' : 'old-passphrase' , 'placeholder' : "old passphrase" } ) ,
React . DOM . label ( { 'key' : 'new-passphrase-label' , 'autoFocus' : 'true' , 'htmlFor' : 'new-passphrase' } , "new passphrase" ) ,
React . DOM . input ( { 'key' : 'new-passphrase' , 'className' : this . state [ 'new-passphrase' ] , 'type' : 'password' , 'name' : 'new-passphrase' , 'ref' : 'new-passphrase' , 'placeholder' : "new passphrase" } ) ,
React . DOM . label ( { 'key' : 'confirm-new-passphrase-label' , 'htmlFor' : 'confirm-new-passphrase' } , "confirm new passphrase" ) ,
React . DOM . input ( { 'key' : 'confirm-new-passphrase' , 'className' : this . state [ 'confirm-new-passphrase' ] , 'type' : 'password' , 'name' : 'confirm-new-passphrase' , 'ref' : 'confirm-new-passphrase' , 'placeholder' : "confirm new passphrase" } ) ,
React . DOM . p ( { } , [
2015-06-27 19:08:20 +02:00
React . DOM . input ( { 'key' : 'confirm' , 'id' : 'changePassphraseConfirmCheckbox' , 'className' : 'confirmCheckbox' , 'type' : 'checkbox' , 'name' : 'confirm' , 'ref' : 'confirm' } ) ,
2015-07-20 10:27:28 +02:00
React . DOM . label ( { 'htmlFor' : 'changePassphraseConfirmCheckbox' } , "I understand that Clipperz is unable to recover a lost passphrase." )
2015-05-21 14:32:51 +02:00
] ) ,
] ) ,
React . DOM . button ( { 'key' : 'button' , 'type' : 'submit' , 'disabled' : ! this . shouldEnableChangePassphraseButton ( ) , 'className' : 'button' } , "Change passphrase" ) ,
] )
] )
2015-04-03 16:03:17 +02:00
] ) ;
} ,
//=========================================================================
} ) ;
Clipperz . PM . UI . Components . ExtraFeatures . Passphrase = React . createFactory ( Clipperz . PM . UI . Components . ExtraFeatures . PassphraseClass ) ;