From 8e62f1b3aae6118d66506e6831a6ad1435aeecd6 Mon Sep 17 00:00:00 2001
From: igoradamenko <mail@igoradamenko.com>
Date: Wed, 14 Feb 2018 01:15:11 +0200
Subject: [PATCH] add auth-panel block

---
 .../auth-panel__pseudo-link.scss              |  6 +++
 web/app/components/auth-panel/auth-panel.jsx  | 42 +++++++++++++++++++
 web/app/components/auth-panel/auth-panel.scss |  4 ++
 web/app/components/auth-panel/index.js        |  5 +++
 4 files changed, 57 insertions(+)
 create mode 100644 web/app/components/auth-panel/__pseudo-link/auth-panel__pseudo-link.scss
 create mode 100644 web/app/components/auth-panel/auth-panel.jsx
 create mode 100644 web/app/components/auth-panel/auth-panel.scss
 create mode 100644 web/app/components/auth-panel/index.js

diff --git a/web/app/components/auth-panel/__pseudo-link/auth-panel__pseudo-link.scss b/web/app/components/auth-panel/__pseudo-link/auth-panel__pseudo-link.scss
new file mode 100644
index 00000000..d81c8d3a
--- /dev/null
+++ b/web/app/components/auth-panel/__pseudo-link/auth-panel__pseudo-link.scss
@@ -0,0 +1,6 @@
+.auth-panel__pseudo-link {
+  display: inline-block;
+  white-space: nowrap;
+  cursor: pointer;
+  color: #06c5c5;
+}
diff --git a/web/app/components/auth-panel/auth-panel.jsx b/web/app/components/auth-panel/auth-panel.jsx
new file mode 100644
index 00000000..be797235
--- /dev/null
+++ b/web/app/components/auth-panel/auth-panel.jsx
@@ -0,0 +1,42 @@
+import { h, Component } from 'preact';
+
+export default class AuthPanel extends Component {
+  render(props, state) {
+    const { user, providers } = props;
+
+    return (
+      <div className={b('auth-panel', props)}>
+        {
+          !!user.name && (
+            <span>You signed in as <strong>{user.name}</strong>. <span className="auth-panel__pseudo-link" onClick={props.onSignOut}>Sign out?</span></span>
+          )
+        }
+
+        {
+          !user.name && (
+            <span>
+              Sign in to comment using
+              {' '}
+              {
+                providers.map((provider, i) => {
+                  const comma = i === 0 ? '' : ', ';
+
+                  return (
+                    <span>
+                      {comma}
+                      <span
+                        className="auth-panel__pseudo-link"
+                        onClick={() => props.onSignIn(provider)}
+                      >{provider}</span>
+                    </span>
+                  )
+                })
+              }
+              {'.'}
+            </span>
+          )
+        }
+      </div>
+    );
+  }
+}
diff --git a/web/app/components/auth-panel/auth-panel.scss b/web/app/components/auth-panel/auth-panel.scss
new file mode 100644
index 00000000..0625ab0e
--- /dev/null
+++ b/web/app/components/auth-panel/auth-panel.scss
@@ -0,0 +1,4 @@
+.auth-panel {
+  font-size: 12px;
+  line-height: 16px;
+}
diff --git a/web/app/components/auth-panel/index.js b/web/app/components/auth-panel/index.js
new file mode 100644
index 00000000..974fbc18
--- /dev/null
+++ b/web/app/components/auth-panel/index.js
@@ -0,0 +1,5 @@
+export { default } from './auth-panel';
+
+require('./auth-panel.scss');
+
+require('./__pseudo-link/auth-panel__pseudo-link.scss');