skyquake/plugins/launchpad/src/ssh_keys/sshKeyCard.jsx

   1 /*
   2  *
   3  *   Copyright 2016 RIFT.IO Inc
   4  *
   5  *   Licensed under the Apache License, Version 2.0 (the "License");
   6  *   you may not use this file except in compliance with the License.
   7  *   You may obtain a copy of the License at
   8  *
   9  *       http://www.apache.org/licenses/LICENSE-2.0
  10  *
  11  *   Unless required by applicable law or agreed to in writing, software
  12  *   distributed under the License is distributed on an "AS IS" BASIS,
  13  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14  *   See the License for the specific language governing permissions and
  15  *   limitations under the License.
  16  *
  17  */
  18 import './sshKeyCard.scss';
  19 import React, {Component} from 'react';
  20 import TextInput from 'widgets/form_controls/textInput.jsx';
  21 import SshKeyActions from './sshKeyActions.js';
  22 import Button from 'widgets/button/rw.button.js';
  23
  24 export default class SshKeyCard extends Component {
  25     constructor(props) {
  26         super(props);
  27         this.state = {};
  28         this.state.isExpanded = false;
  29     }
  30     cancelEdit(name) {
  31             SshKeyActions.cancelEditSshKeyPair(name)
  32     }
  33     render() {
  34         let {className, ...props} = this.props;
  35         let editMode = props.editMode.toString().toUpperCase();
  36         let editToolsHTML = null;
  37         let isInEditMode = null;
  38         let isInCreateMode = null;
  39         className = "sshKeyCard " + className;
  40         isInEditMode = editMode == "TRUE" ? true : false;
  41         isInCreateMode = editMode == "CREATE" ? true : false;
  42         if(isInEditMode) {
  43             editToolsHTML = (
  44                 <div className="flex">
  45                     <span className="oi sshKeyCard-button" data-glyph="circle-check" onClick={props.updateEditSshKeyPair(props.name)}></span>
  46                     <span className="oi sshKeyCard-button" data-glyph="circle-x" onClick={props.cancelEditSshKeyPair(props.name)}></span>
  47                 </div>
  48             )
  49         } else {
  50             if(isInCreateMode) {
  51                 editToolsHTML = (
  52                     <div className="flex">
  53                     <Button className="dark" label="Add Key" onClick={props.saveEditSshKeyPair({name: props.name, key: props.value})}></Button>
  54                     </div>
  55                 );
  56             } else {
  57                 editToolsHTML = (
  58                     <div className="flex">
  59                         <span className="oi sshKeyCard-button" data-glyph="pencil" title="Edit SSH Key" onClick={props.editKey}></span>
  60                         <span className="oi sshKeyCard-button" data-glyph="trash" title="Delete SSH Key"  onClick={props.deleteKey}></span>
  61                     </div>
  62                 );
  63             }
  64         }
  65         return (
  66             <div className={className}>
  67                 <TextInput className="sshKeyCard-thumbnail " value={props.name} readonly={true && !isInCreateMode} label="name"
  68                  onChange={props.updateSshKeyPair(props.name, 'name')}
  69                 />
  70                 <div className="sshKeyCard-body">
  71                     <TextInput type="textarea"
  72                         className="sshKeyCard-key"
  73                         value={props.value}
  74                         readonly={!isInEditMode && !isInCreateMode} label="key"
  75                         onChange={props.updateSshKeyPair(props.name, 'key')}
  76                     />
  77                 </div>
  78                 <div className="sshKeyCard-controls">
  79                     {
  80                         editToolsHTML
  81                     }
  82                 </div>
  83             </div>
  84         )
  85     }
  86 }
  87 SshKeyCard.defaultProps = {
  88     className: null,
  89     editMode: false,
  90     saveKey: function(e) {
  91         console.log('saving key');
  92     },
  93     cancelEdit: function(e) {
  94         console.log('canceling edit');
  95     },
  96     editKey: function(e) {
  97         console.log('Starting edit')
  98     },
  99     deleteKey: function(e) {
 100         console.log('deleting key')
 101     }
 102
 103
 104 }