Merge pull request #55 from stone-payments/task/CMPDC-970

CMPDC-970: Moves Login from sling-web
stone-payments · Sep 27, 2018 · 257ca59 · 257ca59
2 parents cfc9e83 + bc463cf
commit 257ca59
Show file tree

Hide file tree

Showing 10 changed files with 231 additions and 0 deletions.
diff --git a/packages/sling-web-component-login/.npmignore b/packages/sling-web-component-login/.npmignore
@@ -0,0 +1,2 @@
+node_modules/
+dev/
diff --git a/packages/sling-web-component-login/README.md b/packages/sling-web-component-login/README.md
@@ -0,0 +1,27 @@
+# sling-web-component-snackbar
+
+## Install
+
+```
+npm instal sling-web-component-login
+```
+
+## Tag
+
+```HTML
+  <sling-login></sling-login>
+```
+
+## Dependencies
+
+* **sling-web-component-input**
+* **sling-web-component-button**
+* **sling-helpers**
+
+## Events
+
+This component does not emit events.
+
+## Examples
+
+All component examples can be emulated using the `npm start sling-web-component-login` command.
diff --git a/packages/sling-web-component-login/package-lock.json b/packages/sling-web-component-login/package-lock.json
diff --git a/packages/sling-web-component-login/package.json b/packages/sling-web-component-login/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "sling-web-component-login",
+  "version": "1.5.0",
+  "description": "Sling Login component",
+  "author": "Stone Pagamentos",
+  "module": "src/index.js",
+  "main": "dist/cjs/es5/index.js",
+  "jsnext:main": "dist/es/es6/index.js",
+  "browser": "dist/iife/es6/index.js",
+  "dependencies": {
+    "sling-web-component-button": "^1.5.0",
+    "sling-web-component-input": "^1.5.0",
+    "sling-helpers": "^1.5.0"
+  }
+}
diff --git a/packages/sling-web-component-login/public/index.html b/packages/sling-web-component-login/public/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
+  <script src="../../../scripts/helpers/injectDependencies.js"></script>
+  <title>sling-login</title>
+</head>
+<body>
+  <sling-login></sling-login>
+</body>
+</html>
diff --git a/packages/sling-web-component-login/src/assets/Login.css b/packages/sling-web-component-login/src/assets/Login.css
@@ -0,0 +1,39 @@
+:host .login {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+:host .login__title {
+  font: var(--typography-title);
+  color: var(--color-white-label-grey);
+  text-transform: uppercase;
+}
+
+:host .login__error {
+  color: var(--color-danger);
+  text-align: center;
+  font: var(--typography-caption);
+  margin-top: 0;
+}
+
+/* for compatibility */
+
+sling-login .login {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+sling-login .login__title {
+  font: var(--typography-title);
+  color: var(--color-white-label-grey);
+  text-transform: uppercase;
+}
+
+sling-login .login__error {
+  color: var(--color-danger);
+  text-align: center;
+  font: var(--typography-caption);
+  margin-top: 0;
+}
diff --git a/packages/sling-web-component-login/src/component/Login.js b/packages/sling-web-component-login/src/component/Login.js
@@ -0,0 +1,73 @@
+import { isFunction } from 'sling-helpers';
+import 'sling-web-component-button';
+import 'sling-web-component-input';
+
+export class ScLogin extends HTMLElement {
+  constructor() {
+    super();
+    this.handleClick = this.handleClick.bind(this);
+    this.attachShadow({ mode: 'open' });
+  }
+
+  get errorMessage() {
+    return this._errorMessage;
+  }
+
+  set errorMessage(value) {
+    this._errorMessage = value;
+    this.handleError(value);
+  }
+
+  connectedCallback() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        @import url('sling-web-component-login/src/index.css');
+      </style>
+      <div class="login">
+        <p class="login__title">
+          Acesse Sua Conta
+        </p>
+        <sling-input
+          id="email"
+          required="true"
+          type="email"
+          label="Email">
+        </sling-input>
+        <sling-input
+          id="pw"
+          required="true"
+          type="password"
+          label="Senha">
+        </sling-input>
+        <p class="login__error"></p>
+        <sling-button color="success">Entrar</sling-button>
+      </div>
+    `;
+    this.setupLogin();
+  }
+
+  handleClick() {
+    if (isFunction(this.onSubmit)) {
+      this.$login__error.innerText = '';
+      const email = this.$email.value;
+      const password = this.$password.value;
+      this.onSubmit({ email, password });
+    }
+  }
+
+  handleError(value) {
+    this.$login__error.innerText = value;
+  }
+
+  setupLogin() {
+    this.$login__error = this.shadowRoot.querySelector('.login__error');
+    this.$email = this.shadowRoot.querySelector('#email');
+    this.$password = this.shadowRoot.querySelector('#pw');
+    this.$button = this.shadowRoot.querySelector('sling-button');
+    this.$button.addEventListener('click', this.handleClick);
+  }
+
+  disconnectedCallback() {
+    this.$button.removeEventListener('click', this.handleClick);
+  }
+}
diff --git a/packages/sling-web-component-login/src/component/Login.test.js b/packages/sling-web-component-login/src/component/Login.test.js
@@ -0,0 +1,4 @@
+/* eslint-disable */
+import { Login } from './Login.js';
+
+// TODO Write me!
diff --git a/packages/sling-web-component-login/src/index.css b/packages/sling-web-component-login/src/index.css
@@ -0,0 +1 @@
+@import url('assets/Login.css');
diff --git a/packages/sling-web-component-login/src/index.js b/packages/sling-web-component-login/src/index.js
@@ -0,0 +1,4 @@
+import { registerComponent } from 'sling-helpers';
+import { ScLogin } from './component/Login.js';
+
+registerComponent('sling-login', ScLogin);