-rw-r--r-- | frontend/gamma/js/Clipperz/PM/UI/Web/Components/PageHeader.js | 4 | ||||
-rw-r--r-- | frontend/gamma/js/Clipperz/PM/UI/Web/Components/UserInfoBox.js | 32 |
2 files changed, 32 insertions, 4 deletions
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/PageHeader.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/PageHeader.js index 5e49fb5..3c57f67 100644 --- a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/PageHeader.js +++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/PageHeader.js @@ -1,189 +1,189 @@ /* Copyright 2008-2013 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/. */ Clipperz.Base.module('Clipperz.PM.UI.Web.Components'); Clipperz.PM.UI.Web.Components.PageHeader = function(args) { args = args || {}; Clipperz.PM.UI.Web.Components.PageHeader.superclass.constructor.apply(this, arguments); this._newsIsOpen = args.newsIsOpen || false; this._animationDuration = args.animationDuration || 0.5; this._offset = 82; return this; } //============================================================================= Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.PageHeader, Clipperz.PM.UI.Common.Components.BaseComponent, { //------------------------------------------------------------------------- 'toString': function () { return "Clipperz.PM.UI.Web.Components.PageHeader component"; }, //------------------------------------------------------------------------- 'iframeURL': function () { // return './rss_view.html'; - return 'http://www.clipperz.com/files/clipperz.com/appTips/index.html'; + return 'https://www.clipperz.com/tips/index.html'; }, //------------------------------------------------------------------------- 'renderSelf': function(/*aContainer, aPosition*/) { this.append(this.element(), [ {tag:'div', id:'miscLinks', children:[ {tag:'ul', children:[ {tag:'li', children:[{tag:'a', id:'donateHeaderLink', stringID:'pageHeader.donation', href:'http://www.clipperz.com/donations', target:'_blank', html:Clipperz.PM.Strings.getValue('pageHeader.donation')}]}, {tag:'li', children:[{tag:'a', id:'forumHeaderLink', stringID:'pageHeader.forum', href:'http://www.clipperz.com/forum', target:'_blank', html:Clipperz.PM.Strings.getValue('pageHeader.forum')}]}, - {tag:'li', children:[{tag:'a', id:'creditsHeaderLink', stringID:'pageHeader.credits', href:'http://www.clipperz.com/credits', target:'_blank', html:Clipperz.PM.Strings.getValue('pageHeader.credits')}]}, +// {tag:'li', children:[{tag:'a', id:'creditsHeaderLink', stringID:'pageHeader.credits', href:'http://www.clipperz.com/credits', target:'_blank', html:Clipperz.PM.Strings.getValue('pageHeader.credits')}]}, {tag:'li', children:[{tag:'a', id:'feedbackHeaderLink', stringID:'pageHeader.feedback', href:'http://www.clipperz.com/contact', target:'_blank', html:Clipperz.PM.Strings.getValue('pageHeader.feedback')}]}, {tag:'li', children:[{tag:'a', id:'helpHeaderLink', stringID:'pageHeader.help', href:'http://www.clipperz.com/support/user_guide', target:'_blank', html:Clipperz.PM.Strings.getValue('pageHeader.help')}]} ]} ]}, {tag:'div', id:'logoFrame', children:[ {tag:'a', href:'http://www.clipperz.com', target:'_blank', children:[ // {tag:'h1', cls:'logo', html:"clipperz"}, {tag:'canvas', id:this.getId('logo'), cls:'logo'}, {tag:'h5', cls:'clipperzPayoff', html:"keep it to yourself!"} ]} ]}, {tag:'div', id:'news', cls:'hidden', children:[ // {tag:'div', cls:'close', children:[ // {tag:'a', href:'#', id:this.getId('closeTips'), html:'x'} // ]}, {tag:'div', id:'newsframe', children:[ {tag:'iframe', id:this.getId('iframe'), src:this.iframeURL()} ]}, {tag:'div', id:this.getId('newsGrip'), cls:'grip', children:[ {tag:'div', cls:'gripHandler', children:[]} ]} ]}, {tag:'div', id:'featureTabs', children:[ {tag:'table', children:[{tag:'tr', children:[ {tag:'td', children:[{tag:'div', id:'feature_store', children:[{tag:'canvas', cls:'featureIcon', id:this.getId('storeIcon')}, {tag:'span', html:"Store and manage your password and online credentials"}]}]}, {tag:'td', children:[{tag:'div', id:'feature_protect', children:[{tag:'canvas', cls:'featureIcon', id:this.getId('protectIcon')}, {tag:'span', html:"Protect all your sensitive data"}]}]}, {tag:'td', children:[{tag:'div', id:'feature_directLogin', children:[{tag:'canvas', cls:'featureIcon', id:this.getId('directLoginIcon')}, {tag:'span', html:"Login to your web services without entering any username or password"}]}]}, {tag:'td', children:[{tag:'div', id:'feature_share', children:[{tag:'canvas', cls:'featureIcon', id:this.getId('shareIcon')}, {tag:'span', html:"Share secret with family members and associates"}]}]} ]}]} ]} ]); Clipperz.PM.UI.Canvas.features.store(this.getElement('storeIcon'), "#ffffff"); Clipperz.PM.UI.Canvas.features.protect(this.getElement('protectIcon'), "#ffffff"); Clipperz.PM.UI.Canvas.features.directLogin(this.getElement('directLoginIcon'), "#ffffff"); Clipperz.PM.UI.Canvas.features.share(this.getElement('shareIcon'), "#ffffff", "#ffffff", "#ff0000"); MochiKit.Signal.connect(this.getElement('newsGrip'), 'onclick', this, 'toggleTips'); MochiKit.Signal.connect(this.getElement('iframe'), 'onload', this, 'handleIframeDidLoad'); this.setLogoDefaultColors(); }, //------------------------------------------------------------------------- 'switchToLoggedMode': function() { // MochiKit.Style.addElementClass(this.element(), 'logged'); MochiKit.Style.hideElement('featureTabs'); }, //------------------------------------------------------------------------- 'animationDuration': function () { return this._animationDuration; }, 'offset': function () { return this._offset; }, //------------------------------------------------------------------------- 'isNewsOpen': function () { return this._newsIsOpen; }, 'toggleNewsIsOpen': function () { this._newsIsOpen = !this._newsIsOpen; }, 'toggleTips': function(anEvent) { anEvent.preventDefault(); if (this.isNewsOpen() == true) { MochiKit.Visual.Move(Clipperz.DOM.get('news'), { x: 0, y: -this.offset(), mode: 'relative', duration: this.animationDuration(), beforeStart: function () { MochiKit.DOM.setElementClass(Clipperz.DOM.get('news'), 'hiding'); }, afterFinish: function () { Clipperz.DOM.get('newsframe').innerHTML = ""; MochiKit.DOM.setElementClass(Clipperz.DOM.get('news'), 'hidden'); } }) this.toggleNewsIsOpen(); } else { MochiKit.DOM.addElementClass('newsframe', 'loading'); MochiKit.Visual.Move(Clipperz.DOM.get('news'), { x: 0, y: this.offset(), mode: 'relative', duration: this.animationDuration(), beforeStart: MochiKit.Base.bind(function () { this.append(Clipperz.DOM.get('newsframe'), {tag:'iframe', id:this.getId('iframe'), src:this.iframeURL()}); MochiKit.Signal.connect(this.getElement('iframe'), 'onload', this, 'handleIframeDidLoad'); MochiKit.DOM.setElementClass(Clipperz.DOM.get('news'), 'opening'); }, this), afterFinish: function () { MochiKit.DOM.setElementClass(Clipperz.DOM.get('news'), 'open'); } }) this.toggleNewsIsOpen(); } }, 'setLogoDefaultColors': function () { Clipperz.PM.UI.Canvas.logo.normal(this.getElement('logo'), "clipperz", "28.0pt", "#ffffff"); }, //------------------------------------------------------------------------- 'handleIframeDidLoad': function (anEvent) { if (this.isNewsOpen() == false) { this.toggleTips(anEvent); } MochiKit.DOM.removeElementClass('newsframe', 'loading'); MochiKit.Signal.disconnectAllTo(this.getElement('iframe')); }, //------------------------------------------------------------------------- __syntaxFix__: "syntax fix" }); diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/UserInfoBox.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/UserInfoBox.js index fbf58e0..91085cf 100644 --- a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/UserInfoBox.js +++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/UserInfoBox.js @@ -1,337 +1,365 @@ /* Copyright 2008-2013 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/. */ Clipperz.Base.module('Clipperz.PM.UI.Web.Components'); Clipperz.PM.UI.Web.Components.UserInfoBox = function(args) { args = args || {}; Clipperz.PM.UI.Web.Components.UserInfoBox.superclass.constructor.apply(this, arguments); this._slots = { }; this._isLocked = false; this._lockTooltip = null; return this; } //============================================================================= Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.UserInfoBox, Clipperz.PM.UI.Common.Components.BaseComponent, { //------------------------------------------------------------------------- 'toString': function () { return "Clipperz.PM.UI.Web.Components.UserInfoBox component"; }, //------------------------------------------------------------------------- 'handleLogout': function(anEvent) { //Clipperz.log(">>> UserInfoBox.handleLogout"); anEvent.preventDefault(); MochiKit.Signal.signal(this, 'logout'); //Clipperz.log("<<< UserInfoBox.handleLogout"); }, //------------------------------------------------------------------------- 'lockTooltip': function () { return this._lockTooltip; }, //------------------------------------------------------------------------- 'isLocked': function () { return this._isLocked; }, 'setIsLocked': function (aValue) { this._isLocked = aValue; }, 'toggleLock': function(anEvent) { var deferredResult; var shouldLock; anEvent.preventDefault(); this.lockTooltip().hide(); shouldLock = (this.isLocked() == false); if (shouldLock) { var maskElement; this.setIsLocked(true); maskElement = this.getId('modalDialogMask'); deferredResult = Clipperz.Async.callbacks("UserInfoBox.toggleLock [lock]", [ MochiKit.Base.partial(MochiKit.DOM.addElementClass, this.element(), 'locked'), MochiKit.Base.partial(Clipperz.Visual.deferredAnimation, MochiKit.Visual.appear, maskElement, {from:0.0, to:0.75, duration:0.5}), MochiKit.Base.method(Clipperz.PM.RunTime.mainController, 'setPassphraseDelegate', MochiKit.Base.method(this, 'askForPassphrase')), MochiKit.Base.partial(MochiKit.Signal.signal, this, 'lock') ], {trace:false}); } else { deferredResult = Clipperz.Async.callbacks("UserInfoBox.toggleLock [unlock]", [ MochiKit.Base.partial(MochiKit.Signal.signal, this, 'unlock') ], {trace:false}); } return deferredResult; }, //------------------------------------------------------------------------- 'unlock': function () { var deferredResult; var maskElement; this.setIsLocked(false); maskElement = this.getId('modalDialogMask'); deferredResult = Clipperz.Async.callbacks("UserInfoBox.unlock", [ MochiKit.Base.partial(Clipperz.Visual.deferredAnimation, MochiKit.Visual.fade, maskElement, {from:0.75, to:0.0, duration:0.5}), // Clipperz.Visual.deferredAnimation(MochiKit.Visual.fade, maskElement, {from:0.75, to:0.0, duration:0.5}), MochiKit.Base.partial(MochiKit.DOM.removeElementClass, this.element(), 'locked') ], {trace:false}); }, //------------------------------------------------------------------------- 'askForPassphrase': function () { var unlockPasswordComponent; /* var deferredResult; deferredResult = new Clipperz.Async.Deferred("UserInfoBox.askForPassphrase", {trace:false}); deferredResult.addCallback(MochiKit.Async.succeed, 'test'); deferredResult.callback(); return deferredResult; */ unlockPasswordComponent = new Clipperz.PM.UI.Web.Components.UnlockPasswordComponent({ 'title': "Unlock account", 'text': "Insert the passprase to unlock the account", 'type': 'INFO', 'buttons': [ {text:"Cancel", result:'CANCEL'}, {text:"Unlock", result:'OK', isDefault:true} ], 'openFromElement': this.getElement('lock'), 'onOkCloseToElement': null, 'onCancelCloseToElement': this.getId('lock') }); return unlockPasswordComponent.getPassphrase(); }, //========================================================================= 'renderSelf': function(/*aContainer, aPosition*/) { this.append(this.element(), [ // {tag:'canvas', id:this.getId('canvas'), cls:'canvas', width:'188', height:'154'}, {tag:'div', cls:'header', children:[ {tag:'h1', html:"Welcome"}, {tag:'a', cls:'lockButton', href:'#', id:this.getId('lock'), html:' '} ]}, {tag:'div', cls:'body', children:[ {tag:'h3', id:this.getId('username'), html:""}, {tag:'ul', children:[ {tag:'li', id:this.getId('cards'), children:[ {tag:'span', id:this.getId('cardsNumber'), cls:'number', html:"-"}, {tag:'span', id:this.getId('cardsLabel'), html:"cards"} ]}, {tag:'li', id:this.getId('directLogins'), children:[ {tag:'span', id:this.getId('directLoginsNumber'), cls:'number', html:"-"}, {tag:'span', id:this.getId('directLoginsLabel'), html:"direct logins"} ]} ]}, + {tag:'div', cls:'accountInfo', children:[ + {tag:'div', cls:'payButton', children:[ + {tag:'a', href:'#', id:this.getId('payButton'), cls:'info', html:"info"} + ]}, + {tag:'h5', html:"Account info"}, + {tag:'div', cls:'accountStatus', children:[ + {tag:'span', cls:'label', html:"status"}, + {tag:'span', cls:'status', html:"early adopter"} + ]}, + {tag:'div', cls:'accountLevel', children:[ + {tag:'span', cls:'label', html:"level"}, +// {tag:'span', cls:'level', html:"★☆☆☆"} + {tag:'span', cls:'level', html:"☆☆☆☆"} + ]}, + {tag:'div', cls:'accountExpiration', children:[ + {tag:'span', cls:'label', html:"expires"}, +// {tag:'span', cls:'expriation', html:"on 26 April 2014"} + {tag:'span', cls:'expriation', html:"never"} + ]} + ]}, {tag:'a', href:'#', id:this.getId('logout'), html:"logout >"} ]}, {tag:'div', cls:'footer'} ]); - MochiKit.Signal.connect(this.getElement('logout'), 'onclick', this, 'handleLogout'); - MochiKit.Signal.connect(this.getElement('lock'), 'onclick', this, 'toggleLock'); + MochiKit.Signal.connect(this.getElement('logout'), 'onclick', this, 'handleLogout'); + MochiKit.Signal.connect(this.getElement('lock'), 'onclick', this, 'toggleLock'); + MochiKit.Signal.connect(this.getElement('payButton'), 'onclick', this, 'handlePayButton'); this._lockTooltip = new Clipperz.PM.UI.Common.Components.Tooltip({ element: this.getElement('lock'), text: "Click here to lock/unlock your account.", position: 'RIGHT' }); Clipperz.DOM.Helper.append(MochiKit.DOM.currentDocument().body, {tag:'div', id:this.getId('modalDialogWrapper'), cls:'modalDialogWrapper', children:[ {tag:'div', id:this.getId('modalDialogMask'), cls:'modalDialogMask userInfoBoxMask'} ]} ); MochiKit.Style.hideElement(this.getId('modalDialogMask')); // this.drawUserInfoBackground(this.getElement('canvas')); }, //------------------------------------------------------------------------- + + 'handlePayButton': function (anEvent) { + anEvent.preventDefault(); + window.open('https://www.clipperz.com/pricing/', '_blank'); + }, + + //------------------------------------------------------------------------- /* 'drawUserInfoBackground': function (canvas) { var kMyDrawingFunctionWidth = 188.0; var kMyDrawingFunctionHeight = 154.0; var context = canvas.getContext("2d"); var color; var resolution; var alignStroke; var path; var pointX; var pointY; var controlPoint1X; var controlPoint1Y; var controlPoint2X; var controlPoint2Y; var gradient; if (window.devicePixelRatio) resolution = window.devicePixelRatio; else resolution = 1.0; resolution *= 0.5 * (canvas.width / kMyDrawingFunctionWidth + canvas.height / kMyDrawingFunctionHeight); context.save(); context.scale(canvas.width / kMyDrawingFunctionWidth, canvas.height / kMyDrawingFunctionHeight); context.clearRect(0.0, 0.0, kMyDrawingFunctionWidth, kMyDrawingFunctionHeight); // Setup for Shadow Effect color = "rgba(0.0%, 0.0%, 0.0%, 0.667)"; context.save(); context.shadowColor = color; context.shadowBlur = 3.0; context.shadowOffsetX = 5.729 * Math.cos(7.592) * resolution; context.shadowOffsetY = 5.729 * Math.sin(7.592) * resolution; // Layer 1 alignStroke = 0.0; context.beginPath(); pointX = 169.5; pointY = 141.5; pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution; pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution; context.moveTo(pointX, pointY); pointX = 177.5; pointY = 133.5; pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution; pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution; controlPoint1X = 173.889; controlPoint1Y = 141.5; controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution; controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution; controlPoint2X = 177.5; controlPoint2Y = 137.889; controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution; controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution; context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY); pointX = 177.5; pointY = 19.5; pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution; pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution; context.lineTo(pointX, pointY); pointX = 169.5; pointY = 11.5; pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution; pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution; controlPoint1X = 177.5; controlPoint1Y = 15.111; controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution; controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution; controlPoint2X = 173.889; controlPoint2Y = 11.5; controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution; controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution; context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY); pointX = 18.5; pointY = 11.5; pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution; pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution; context.lineTo(pointX, pointY); pointX = 10.5; pointY = 19.5; pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution; pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution; controlPoint1X = 14.111; controlPoint1Y = 11.5; controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution; controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution; controlPoint2X = 10.5; controlPoint2Y = 15.111; controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution; controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution; context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY); pointX = 10.5; pointY = 133.5; pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution; pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution; context.lineTo(pointX, pointY); pointX = 18.5; pointY = 141.5; pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution; pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution; controlPoint1X = 10.5; controlPoint1Y = 137.889; controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution; controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution; controlPoint2X = 14.111; controlPoint2Y = 141.5; controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution; controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution; context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY); pointX = 169.5; pointY = 141.5; pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution; pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution; context.lineTo(pointX, pointY); context.closePath(); gradient = context.createLinearGradient(94.0, 11.5, 94.0, 141.5); color = "#EE9B69"; gradient.addColorStop(0.0, color); color = "#E38D62"; gradient.addColorStop(1.0, color); context.fillStyle = gradient; context.fill(); // Shadow Effect context.restore(); context.restore(); }, */ //------------------------------------------------------------------------- 'updateUserDetails': function (someUserInfo) { var elementName; for (elementName in someUserInfo) { this.getElement(elementName).innerHTML = someUserInfo[elementName]; } }, //------------------------------------------------------------------------- __syntaxFix__: "syntax fix" }); |