login mechanism

src/components/input/Button/index.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+const style = require('./style.scss');
+
+interface IButtonProps {
+  children?: string,
+  label?: string,
+
+  onClick?: React.MouseEventHandler,
+}
+
+export const Button: React.FunctionComponent<IButtonProps> = ({
+  children,
+  label,
+  onClick = () => {},
+}) => (
+  <div className={style.container} onClick={onClick}>
+    {label || children || ''}
+  </div>
+);

src/components/input/Button/style.scss

@@ -0,0 +1,14 @@
+.container {
+  height: $input_height;
+  border-radius: $input_radius;
+  display: flex;
+  background: $button_bg_color;
+  align-items: center;
+  justify-content: center;
+  text-transform: uppercase;
+  font-weight: 600;
+  font-size: $text_small;
+  cursor: pointer;
+
+  @include outer_shadow();
+}

src/components/input/Info/index.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import classNames = require("classnames");
+
+const style = require('./style.scss');
+
+interface IInfoProps {
+  text?: string,
+  children?: string,
+  level?: string,
+}
+export const Info: React.FunctionComponent<IInfoProps> = ({
+  text,
+  children,
+  level = 'normal',
+}) => (
+  <div className={classNames(style.container, { [level]: true })}>
+    {
+      text || children || ''
+    }
+  </div>
+);

src/components/input/Info/style.scss

@@ -0,0 +1,28 @@
+.container {
+  min-height: $info_height;
+  border-radius: $input_radius;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: $text_small;
+  line-height: 1.2em;
+  padding: $gap;
+  background: transparentize(white, 0.9);
+
+  &:global(.danger) {
+    color: white;
+    background: transparentize($color_red, 0.5);
+  }
+
+  &:global(.warning) {
+    color: white;
+    background: transparentize($color_yellow, 0.5);
+  }
+
+  &:global(.primary) {
+    color: white;
+    background: transparentize($color_blue, 0.5);
+  }
+
+}
+

src/components/input/TextInput/index.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+
+const style = require('./style.scss');
+
+interface ITextInputProps {
+  type?: 'text' | 'password',
+  placeholder?: string,
+  label?: string,
+  value?: string,
+
+  onChange: React.ChangeEventHandler,
+}
+
+export const TextInput: React.FunctionComponent<ITextInputProps> = ({
+  type = 'text',
+  placeholder = '',
+  label,
+  onChange = () => {},
+  value='',
+}) => (
+  <div
+    className={style.wrapper}
+  >
+    {
+      label &&
+      <div className={style.label}>{label}</div>
+    }
+    <div className={style.container}>
+      <input
+        placeholder={placeholder}
+        className={style.input}
+        type={type}
+        onChange={onChange}
+        value={value}
+      />
+    </div>
+  </div>
+);

src/components/input/TextInput/style.scss

@@ -0,0 +1,37 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.label {
+  background: $input_bg_color;
+  font-size: 10px;
+  text-transform: uppercase;
+  font-weight: 600;
+  padding: 2px $gap;
+}
+
+.container {
+  height: $input_height;
+  background: $input_bg_color;
+  border-radius: $input_radius;
+  flex-direction: row;
+  flex: 1 0;
+  display: flex;
+  align-self: stretch;
+  align-items: center;
+  justify-content: center;
+  @include input_shadow();
+}
+
+.input {
+  outline: none;
+  background: transparent;
+  flex: 1;
+  border: none;
+  font-size: inherit;
+  color: white;
+  padding: 0 $gap;
+  box-sizing: border-box;
+}