5-13 HTTP 회원관리(1) 프로그램, Node-RED MongoDB.txt

[{"id":"be92f87a.c53688","type":"tab","label":"Log in","disabled":false,"info":""},{"id":"1abd3562.08ea4b","type":"http in","z":"be92f87a.c53688","name":"","url":"/login","method":"get","upload":false,"swaggerDoc":"","x":80,"y":140,"wires":[["9e042af2.809408"]]},{"id":"b4f85c12.092c2","type":"http response","z":"be92f87a.c53688","name":"","x":630,"y":140,"wires":[]},{"id":"753cabb7.7deee4","type":"template","z":"be92f87a.c53688","name":"style","field":"payload.style","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"body {font-family: Arial, Helvetica, sans-serif;}\n\n/* Full-width input fields */\ninput[type=text], input[type=password] {\n  width: 100%;\n  padding: 12px 20px;\n  margin: 8px 0;\n  display: inline-block;\n  border: 1px solid #ccc;\n  box-sizing: border-box;\n}\n\n/* Set a style for all buttons */\nbutton {\n  background-color: #4CAF50;\n  color: white;\n  padding: 14px 20px;\n  margin: 8px 0;\n  border: none;\n  cursor: pointer;\n  width: 100%;\n}\n\nbutton:hover {\n  opacity: 0.8;\n}\n\n/* Extra styles for the cancel button */\n.cancelbtn {\n  width: auto;\n  padding: 10px 18px;\n  background-color: #f44336;\n}\n\n/* Center the image and position the close button */\n.imgcontainer {\n  text-align: center;\n  margin: 24px 0 12px 0;\n  position: relative;\n}\n\nimg.avatar {\n  width: 40%;\n  border-radius: 50%;\n}\n\n.container {\n  padding: 16px;\n}\n\nspan.psw {\n  float: right;\n  padding-top: 16px;\n}\n\n/* The Modal (background) */\n.modal {\n  display: none; /* Hidden by default */\n  position: fixed; /* Stay in place */\n  z-index: 1; /* Sit on top */\n  left: 0;\n  top: 0;\n  width: 100%; /* Full width */\n  height: 100%; /* Full height */\n  overflow: auto; /* Enable scroll if needed */\n  background-color: rgb(0,0,0); /* Fallback color */\n  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */\n  padding-top: 60px;\n}\n\n/* Modal Content/Box */\n.modal-content {\n  background-color: #fefefe;\n  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */\n  border: 1px solid #888;\n  width: 80%; /* Could be more or less, depending on screen size */\n}\n\n/* The Close Button (x) */\n.close {\n  position: absolute;\n  right: 25px;\n  top: 0;\n  color: #000;\n  font-size: 35px;\n  font-weight: bold;\n}\n\n.close:hover,\n.close:focus {\n  color: red;\n  cursor: pointer;\n}\n\n/* Add Zoom Animation */\n.animate {\n  -webkit-animation: animatezoom 0.6s;\n  animation: animatezoom 0.6s\n}\n\n@-webkit-keyframes animatezoom {\n  from {-webkit-transform: scale(0)} \n  to {-webkit-transform: scale(1)}\n}\n  \n@keyframes animatezoom {\n  from {transform: scale(0)} \n  to {transform: scale(1)}\n}\n\n/* Change styles for span and cancel button on extra small screens */\n@media screen and (max-width: 300px) {\n  span.psw {\n     display: block;\n     float: none;\n  }\n  .cancelbtn {\n     width: 100%;\n  }\n}","x":348,"y":140,"wires":[["1e273149.38dd8f"]]},{"id":"9e042af2.809408","type":"template","z":"be92f87a.c53688","name":"script","field":"payload.script","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"// Get the modal\nvar modal = document.getElementById('id01');\n\n// When the user clicks anywhere outside of the modal, close it\nwindow.onclick = function(event) {\n    if (event.target == modal) {\n        modal.style.display = \"none\";\n    }\n}","output":"str","x":223,"y":140,"wires":[["753cabb7.7deee4"]]},{"id":"e2c88340.aef9f","type":"http in","z":"be92f87a.c53688","name":"","url":"/login_action","method":"get","upload":false,"swaggerDoc":"","x":140,"y":320,"wires":[["7873f3f3.9db97c","33279e5.5af2662"]]},{"id":"7873f3f3.9db97c","type":"debug","z":"be92f87a.c53688","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":330,"y":380,"wires":[]},{"id":"c36e54c7.2dca78","type":"http response","z":"be92f87a.c53688","name":"","x":490,"y":320,"wires":[]},{"id":"33279e5.5af2662","type":"template","z":"be92f87a.c53688","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"This is the payload: {{payload.email}}  {{payload.pw}}  !","output":"str","x":340,"y":320,"wires":[["c36e54c7.2dca78"]]},{"id":"1e273149.38dd8f","type":"template","z":"be92f87a.c53688","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n<html>\n<head>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<style> {{{payload.style}}} </style>\n</head>\n<body>\n<h2>김동일</h2>\n<h2>4차산업혁명의 시작</h2>\n<h2>센서와 엑튜에이터를 크라우드컴퓨터 빅데이터에 연결</h2>\n\n<button onclick=\"document.getElementById('id01').style.display='block'\" style=\"width:auto;\">Login</button>\n\n<div id=\"id01\" class=\"modal\">\n  \n  <form class=\"modal-content animate\" action=\"/login_action\" method=\"get\">\n    <div class=\"imgcontainer\">\n      <span onclick=\"document.getElementById('id01').style.display='none'\" class=\"close\" title=\"Close Modal\">&times;</span>\n      <img src=\"http://c.doowon.ac.kr/image/i2r_big.png\" alt=\"Avatar\" class=\"avatar\">\n    </div>\n\n    <div class=\"container\">\n      <label for=\"email\"><b>email</b></label>\n      <input type=\"text\" placeholder=\"Enter Username\" name=\"email\" required>\n\n      <label for=\"pw\"><b>Password</b></label>\n      <input type=\"password\" placeholder=\"Enter Password\" name=\"pw\" required>\n        \n      <button type=\"submit\">Login</button>\n    </div>\n\n    <div class=\"container\" style=\"background-color:#f1f1f1\">\n      <button type=\"button\" onclick=\"document.getElementById('id01').style.display='none'\" class=\"cancelbtn\">Cancel</button>\n      <span class=\"pw\">Forgot <a href=\"#\">password?</a></span>\n    </div>\n  </form>\n</div>\n\n<script> {{{payload.script}}} </script>\n\n</body>\n</html>","output":"str","x":479,"y":140,"wires":[["b4f85c12.092c2"]]},{"id":"6873e955.5ccac8","type":"template","z":"be92f87a.c53688","name":"html start","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<html>\n    <head>\n        <meta name='viewport' content='width=device-width, initial-scale=1.0'/>\n    </head>\n    <body>\n         <form action=\"/login_action\" method=\"get\">\n          <input name=\"email\" value=\"E-mail\">\n          <input name=\"pw\" value=\"비밀번호\">\n          <button>Login</button>\n    </body>\n</html>\n","x":300,"y":200,"wires":[[]]}]