From 367b7f897928cd6d2fb15258678adc2043e9d334 Mon Sep 17 00:00:00 2001
From: Andrey Kutejko <andy128k@gmail.com>
Date: Fri, 26 Apr 2019 17:20:37 +0200
Subject: [PATCH] improve admin widgets

---
 ipf/admin/assets/components/button/index.js     | 14 ++++++++++++--
 ipf/admin/assets/components/button/style.css    |  7 +++++++
 ipf/admin/assets/components/link/index.js       | 14 +++++++-------
 ipf/admin/assets/components/link/style.css      |  8 ++++----
 ipf/admin/assets/components/text_input/index.js | 10 +++-------
 5 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/ipf/admin/assets/components/button/index.js b/ipf/admin/assets/components/button/index.js
index 7b0fef0..52f4827 100644
--- a/ipf/admin/assets/components/button/index.js
+++ b/ipf/admin/assets/components/button/index.js
@@ -3,17 +3,27 @@ import classNames from 'classnames';
 import style from './style.css';
 
 export class Button extends React.Component {
+    static defaultProps = {
+        className: null,
+        default: false,
+        disabled: false,
+        dangerous: false,
+        object: null,
+    };
+
     render() {
         let className = classNames({
             [style.button]: true,
             [style.button_default]: this.props.default,
             [style.button_disabled]: this.props.disabled,
-        });
+            [style.button_dangerous]: this.props.dangerous,
+        }, this.props.className);
         return <button className={className} onClick={this.clicked}>{this.props.children}</button>;
     }
 
     clicked = (event) => {
         event.preventDefault();
-        this.props.onClick();
+        const {object, onClick} = this.props;
+        onClick(object);
     }
 }
diff --git a/ipf/admin/assets/components/button/style.css b/ipf/admin/assets/components/button/style.css
index 9ff6d08..8ef6a40 100644
--- a/ipf/admin/assets/components/button/style.css
+++ b/ipf/admin/assets/components/button/style.css
@@ -15,6 +15,13 @@
     color: white;
 }
 
+.button_dangerous {
+    border: 2px solid #600;
+    background: linear-gradient(to top, #933, #CC3434 16px);
+    font-weight: bold;
+    color: white;
+}
+
 .button_disabled {
     background: #e1e1e1;
     color: #888;
diff --git a/ipf/admin/assets/components/link/index.js b/ipf/admin/assets/components/link/index.js
index 1431217..0018841 100644
--- a/ipf/admin/assets/components/link/index.js
+++ b/ipf/admin/assets/components/link/index.js
@@ -2,20 +2,20 @@ import React from 'react';
 import style from './style.css';
 
 export class Link extends React.Component {
-    constructor(...args) {
-        super(...args);
-        this.clicked = this.clicked.bind(this);
-    }
+    static defaultProps = {
+        className: style.link,
+        object: null,
+    };
 
     render() {
         return (
-            <a className={style.link} href="#" onClick={this.clicked}>{this.props.children}</a>
+            <a className={this.props.className} href="#" onClick={this.clicked}>{this.props.children}</a>
         );
     }
 
-    clicked(event) {
+    clicked = (event) => {
         event.preventDefault();
         const {object, onClick} = this.props;
         onClick(object);
-    }
+    };
 }
diff --git a/ipf/admin/assets/components/link/style.css b/ipf/admin/assets/components/link/style.css
index 2bea761..52a206c 100644
--- a/ipf/admin/assets/components/link/style.css
+++ b/ipf/admin/assets/components/link/style.css
@@ -1,10 +1,10 @@
-a.link,
-a.link:link,
-a.link:visited {
+.link,
+.link:link,
+.link:visited {
     color: #006A95;
     text-decoration: none;
 }
 
-a.link:hover {
+.link:hover {
     color: #036;
 }
diff --git a/ipf/admin/assets/components/text_input/index.js b/ipf/admin/assets/components/text_input/index.js
index 2a6a8bf..881db60 100644
--- a/ipf/admin/assets/components/text_input/index.js
+++ b/ipf/admin/assets/components/text_input/index.js
@@ -1,18 +1,14 @@
 import React from 'react';
 
 export class TextInput extends React.Component {
-    constructor(...args) {
-        super(...args);
-        this.changed = this.changed.bind(this);
-    }
-
     render() {
+        const type = this.props.password ? 'password' : 'text';
         return (
-            <input type='text' value={this.props.value} onChange={this.changed}/>
+            <input type={type} value={this.props.value || ''} onChange={this.changed}/>
         );
     }
 
-    changed(event) {
+    changed = (event) => {
         if (this.props.onChange) {
             this.props.onChange(event.target.value);
         }
-- 
2.49.0