Diffstat (limited to 'frontend/delta/js/Clipperz/PM/UI/Components/CardDetail.js') (more/less context) (show whitespace changes)
-rw-r--r-- | frontend/delta/js/Clipperz/PM/UI/Components/CardDetail.js | 142 |
1 files changed, 142 insertions, 0 deletions
diff --git a/frontend/delta/js/Clipperz/PM/UI/Components/CardDetail.js b/frontend/delta/js/Clipperz/PM/UI/Components/CardDetail.js new file mode 100644 index 0000000..df514a2 --- a/dev/null +++ b/frontend/delta/js/Clipperz/PM/UI/Components/CardDetail.js | |||
@@ -0,0 +1,142 @@ | |||
1 | /* | ||
2 | |||
3 | Copyright 2008-2013 Clipperz Srl | ||
4 | |||
5 | This file is part of Clipperz, the online password manager. | ||
6 | For further information about its features and functionalities please | ||
7 | refer to http://www.clipperz.com. | ||
8 | |||
9 | * Clipperz is free software: you can redistribute it and/or modify it | ||
10 | under the terms of the GNU Affero General Public License as published | ||
11 | by the Free Software Foundation, either version 3 of the License, or | ||
12 | (at your option) any later version. | ||
13 | |||
14 | * Clipperz is distributed in the hope that it will be useful, but | ||
15 | WITHOUT ANY WARRANTY; without even the implied warranty of | ||
16 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. | ||
17 | See the GNU Affero General Public License for more details. | ||
18 | |||
19 | * You should have received a copy of the GNU Affero General Public | ||
20 | License along with Clipperz. If not, see http://www.gnu.org/licenses/. | ||
21 | |||
22 | */ | ||
23 | |||
24 | Clipperz.PM.UI.Components.CardDetail = React.createClass({ | ||
25 | |||
26 | getDefaultProps: function () { | ||
27 | return { | ||
28 | // searchDelay: 0.3 | ||
29 | } | ||
30 | }, | ||
31 | |||
32 | propTypes: { | ||
33 | card: React.PropTypes.object.isRequired | ||
34 | }, | ||
35 | |||
36 | getInitialState: function () { | ||
37 | return { | ||
38 | // showSearch: false, | ||
39 | // searchTimer: null, | ||
40 | starred: false | ||
41 | }; | ||
42 | }, | ||
43 | |||
44 | handleDirectLoginClick: function (aDirectLoginReference, anEvent) { | ||
45 | MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'runDirectLogin', {record:this.props.card['reference'], directLogin:aDirectLoginReference}); | ||
46 | }, | ||
47 | |||
48 | //========================================================================= | ||
49 | |||
50 | normalizeFieldValue: function (aValue) { | ||
51 | varresult = []; | ||
52 | varrows = aValue.split('\n'); | ||
53 | |||
54 | for (var i = 0; i < rows.length; i++) { | ||
55 | if (i > 0) { | ||
56 | result.push(React.DOM.br()); | ||
57 | } | ||
58 | result.push(rows[i].replace(/[\s]/g, '\u00A0')); | ||
59 | } | ||
60 | |||
61 | return result; | ||
62 | }, | ||
63 | |||
64 | renderField: function (aField) { | ||
65 | //console.log("FIELD", aField); | ||
66 | varactionLabel; | ||
67 | |||
68 | if (aField['actionType'] == 'URL') { | ||
69 | actionLabel = "go"; | ||
70 | } else if (aField['actionType'] == 'PASSWORD') { | ||
71 | actionLabel = "locked"; | ||
72 | } else if (aField['actionType'] == 'EMAIL') { | ||
73 | actionLabel = "email"; | ||
74 | } else { | ||
75 | actionLabel = ""; | ||
76 | } | ||
77 | |||
78 | returnReact.DOM.div({className:'listItem ' + aField['actionType']}, [ | ||
79 | React.DOM.div({className:'fieldWrapper'}, [ | ||
80 | React.DOM.div({className:'fieldInnerWrapper'}, [ | ||
81 | React.DOM.div({className:'labelWrapper'}, React.DOM.span({className:'label'}, aField['label'])), | ||
82 | React.DOM.div({className:'valueWrapper'}, React.DOM.span({className:'value ' + aField['actionType']}, this.normalizeFieldValue(aField['value']))) | ||
83 | ]) | ||
84 | ]), | ||
85 | React.DOM.div({className:'actionWrapper'}, [ | ||
86 | React.DOM.div({className:aField['actionType']}, actionLabel) | ||
87 | ]) | ||
88 | ]); | ||
89 | }, | ||
90 | |||
91 | renderDirectLogin: function (aDirectLogin) { | ||
92 | //console.log("DIRECT LOGIN", aDirectLogin); | ||
93 | returnReact.DOM.div({className:'listItem', onClick:MochiKit.Base.method(this, 'handleDirectLoginClick', aDirectLogin['reference'])}, [ | ||
94 | React.DOM.div({className:'labelWrapper'}, React.DOM.span({className:'label'}, aDirectLogin['label'])), | ||
95 | React.DOM.div({className:'faviconWrapper'}, React.DOM.img({className:'favicon', src:aDirectLogin['favicon']})), | ||
96 | React.DOM.div({className:'directLoginLinkWrapper'}, React.DOM.span({className:'directLoginLink'}, "go")) | ||
97 | ]); | ||
98 | }, | ||
99 | |||
100 | handleBackClick: function (anEvent) { | ||
101 | window.history.back(); | ||
102 | }, | ||
103 | |||
104 | handleStarClick: function (anEvent) { | ||
105 | this.setState({starred: !this.state['starred']}); | ||
106 | }, | ||
107 | |||
108 | //========================================================================= | ||
109 | |||
110 | render: function () { | ||
111 | var card = this.props.card; | ||
112 | var starredStatus = (this.state['starred'] ? "starred" : "unstarred"); | ||
113 | |||
114 | if ((typeof(card['fields']) != 'undefined') && (card['notes'] != '')) { | ||
115 | card['fields'].push({ 'actionType': 'NOTES', 'isHidden': false, 'label': "notes", 'reference': "notes", 'value': card['notes'] }) | ||
116 | } | ||
117 | |||
118 | returnReact.DOM.div({className:'cardDetail'}, [ | ||
119 | React.DOM.div({className:'header'}, [ | ||
120 | React.DOM.div({className:'titleWrapper'}, React.DOM.div({className:'title'}, card.title)), | ||
121 | // React.DOM.div({className:'titleWrapper'}, React.DOM.div({className:'title'}, card.title + ' ' + card.title + ' ' + card.title + ' ' + card.title)), | ||
122 | React.DOM.div({className:'backWrapper'}, React.DOM.a({className:'button back', onClick:this.handleBackClick}, "back")), | ||
123 | React.DOM.div({className:'starWrapper'}, React.DOM.a({className:'star', onClick:this.handleStarClick}, starredStatus)) | ||
124 | ]), | ||
125 | React.DOM.div({className:'content'}, [ | ||
126 | card.fields ? React.DOM.div({className:'fields'}, MochiKit.Base.map(this.renderField, card.fields)) : null, | ||
127 | card.directLogins ? React.DOM.div({className:'directLogins'}, MochiKit.Base.map(this.renderDirectLogin,card.directLogins)): null | ||
128 | ]), | ||
129 | React.DOM.div({className:'footer'}, [ | ||
130 | /* | ||
131 | // React.DOM.a({className:'cancel'}, "cancel"), | ||
132 | // React.DOM.a({className:'save'}, "save") | ||
133 | |||
134 | React.DOM.a({className:'cancel button'}, "failed"), | ||
135 | React.DOM.a({className:'save button'}, "done") | ||
136 | */ | ||
137 | ]) | ||
138 | ]); | ||
139 | } | ||
140 | |||
141 | //========================================================================= | ||
142 | }); | ||