updated

app/app.html

@@ -25,16 +25,20 @@
     </div>
 
     <div class="loginbox">
-        <form method="post" action="">
+        <form id="loginform" method="post" action="http://96.30.198.29/">
+            <div class="hidden">
+                <input type="hidden" name="route" value="api.authenticate" />
+                <input type="hidden" name="action" value="getToken" />
+            </div>
             <div class="box1">
                 <ul>
                     <li>
                         <label for="username">사용자 이름</label>
-                        <input id="username" class="text" type="text" placeholder="사용자 이름" />
+                        <input id="username" name="username" class="text" type="text" placeholder="사용자 이름" />
                     </li>
                     <li>
                         <label for="password">패스워드</label>
-                        <input id="password" class="text" type="password" placeholder="패스워드" />
+                        <input id="password" name="password" class="text" type="password" placeholder="패스워드" />
                     </li>
                 </ul>
             </div>
@@ -44,6 +48,15 @@
             </div>
         </form>
     </div>
+
+    <div class="logoutbox">
+        <div class="box1">
+            <p>환영합니다. <span id="logged_username" class="username"></span></p>
+        </div>
+        <div class="box2">
+            <button id="btn_logout" class="logout" type="button">로그아웃</button>
+        </div>
+    </div>
     
     <div class="statusbox">
         <ul>
@@ -79,7 +92,7 @@
             </li>
             <li>
                 <dl>
-                    <dt>받음: <a id="test" href="#test">test</a></dt>
+                    <dt>받음: -</dt>
                     <dd>-</dd>
                 </dl>
             </li>

app/assets/css/style.css

@@ -85,8 +85,7 @@ input.text {
 }
 
 #aside .serverbox ul li {
-    border-top: 1px solid #2a2c2b;
+    border-top: 1px solid #333;
-    border-bottom: 1px solid #343635;
     background-color: #27282a;
     color: #fff;
 }
@@ -147,7 +146,11 @@ input.text {
     padding: 5px 10px;
 }
 
-#content .loginbox button.submit {
+#content .loginbox .box2 {
+    margin-top: 30px;
+}
+
+#content .loginbox .box2 button.submit {
     border: 0;
     background: none;
     background-color: #43a747;
@@ -159,8 +162,34 @@ input.text {
     cursor: pointer;
 }
 
-#content .loginbox .box2 {
+#content .logoutbox {
-    margin-top: 30px;
+    text-align: center;
+}
+
+#content .logoutbox .box1 {
+    margin: 30px 0;
+}
+
+#content .logoutbox .box1 p {
+    color: #fff;
+    font-size: 2em;
+    font-weight: bold;
+}
+
+#content .logoutbox .box2 {
+    margin: 30px 0;
+}
+
+#content .logoutbox .box2 button.logout {
+    border: 0;
+    background: none;
+    background-color: #db0000;
+    color: #fff;
+    font-weight: bold;
+    padding: 10px 20px;
+    border-radius: 8px;
+    font-size: 1em;
+    cursor: pointer;
 }
 
 #content .statusbox {

app/assets/js/index.js

@@ -1,5 +1,65 @@
+var FILE = require("lib/file");
+var serverUrl = "http://96.30.198.29/";
+
 $(document).ready(function() {
-    $("#btn_login").click(function() {
+    $(".logoutbox").css("display", "none");
-        alert("clicked");
+
+    $("#loginform").ajaxForm({
+        success: function(res) {
+            if(res.success === false) {
+                alert("로그인에 실패하였습니다. 다시 시도하여 주세요");
+            } else {
+                // 로그인 사용자의 토큰을 저장
+                FILE.writeFile("token.txt", res.data.token, "utf-8");
+
+                // 저장 여부 확인
+                var isTokenExists = FILE.fileExists("token.txt");
+                if(isTokenExists) {
+                    // 성공하면 아이디 표시
+                    $("#logged_username").text(res.data.username);
+
+                    // 화면 전환
+                    $(".loginbox").css("display", "none");
+                    $(".logoutbox").css("display", "");
+                } else {
+                    alert("저장공간이 충분한지 확인하여 주세요");
+                }
+            }
+        },
+        error: function() {
+            alert("잠시 후 다시 시도하여 주세요");
+        }
+    });
+
+    // 기존 토큰 정보가 있는 경우
+    var isTokenExists = FILE.fileExists("token.txt");
+    if(isTokenExists) {
+        var token = FILE.readFile("token.txt", "utf-8");
+        $.get(serverUrl, {
+            route: "api.authenticate",
+            action: "checkToken",
+            token: token
+        }, function(res) {
+            // 토큰 확인에 성공하면 아이디 표시
+            $("#logged_username").text(res.data.username);
+
+            // 화면 전환
+            $(".loginbox").css("display", "none");
+            $(".logoutbox").css("display", "");
+        });
+    }
+    
+    // 로그아웃
+    $("#btn_logout").click(function() {
+        // 토큰 파일 삭제
+        FILE.deleteFile("token.txt");
+        
+        // todo: expire token in the database
+        
+        // 화면 전환
+        $(".loginbox").css("display", "");
+        $(".logoutbox").css("display", "none");
+
+        alert("로그아웃 되었습니다.");
     });
 });

lib/file.js

@@ -141,6 +141,17 @@ module.createFolder = function(FN) {
     return res;
 };
 
+/////////////////////////////////////////////////////////////////////////////////
+// module.deleteFile
+/////////////////////////////////////////////////////////////////////////////////
+
+module.deleteFile = function(FN) {
+    var FSO = CreateObject("Scripting.FileSystemObject");
+    var res = FSO.DeleteFile(FN);
+    FSO = null;
+    return res;
+};
+
 /////////////////////////////////////////////////////////////////////////////////
 
 return module;

webloader.js

@@ -11,7 +11,7 @@ return {
         el.type = "text/javascript";
         el.charset = "utf-8";
         document.head.appendChild(el);
-        if(typeof(callback) == "function") {
+        if(typeof(callback) === "function") {
             el.onload = callback(el);
         }
         return el;
@@ -22,16 +22,17 @@ return {
         el.rel = "stylesheet";
         el.type = "text/css";
         document.head.appendChild(el);
-        if(typeof(callback) == "function") {
+        if(typeof(callback) === "function") {
             el.onload = callback(el);
         }
         return el;
     },
-	main: function() {
+    main: function() {
         var contents = FILE.readFile("app\\app.html", "utf-8");
         document.getElementById("app").innerHTML = contents;
         this.addScript("app/assets/js/jquery-3.5.1.min.js");
+        this.addScript("app/assets/js/jquery.form.min.js");
         this.addScript("app/assets/js/index.js");
-		return 0;
+        return 0;
-	}
+    }
 }