<!doctype html>
<html lang="en">
  <head>    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <title>URL단축 서비스</title>
    <script>
        $(document).ready(()=>{
            var form = document.getElementById('form');
            form.addEventListener('submit', function(e) {
                e.preventDefault();
            });
        });
    
        function getShortUrl(){
            var url = document.getElementById('url').value;  
            if(!validURL(url)){
                document.getElementById('shortURLDiv').innerHTML='<br><div class="alert alert-danger" role="alert">잘못된 URL</div>';            
                return false;
            }
            var data_toSend = {
                url:document.getElementById('url').value
            }        
            fetch('/giveShortUrl?url='+document.getElementById('url').value, {
                method:'GET',                    
            }).then((res)=>{
                return res.json();
            }).then((data)=>{    
                $('#url').val('');
                if(data.error==false){
                    document.getElementById('shortURLDiv').innerHTML='<br><div class="alert alert-primary" role="alert">링크가 단축 되었습니다 \n **도메인**'+data.shorturl+'</div>';            
                } else {
                    document.getElementById('shortURLDiv').innerHTML='<br><div class="alert alert-danger" role="alert">일부 오류가 발생했습니다.</div>';            
                }
                
            });
        }
    
        function validURL(string) {
            var res = string.match(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g);
            return (res !== null)
        }
    </script>
    <style>
        body {
            background: #f5f5f5;
        }
    </style>
  </head>
  <body>
    <div class="container">
        <div class="row">
            <div class="col-md-4"></div>
            <div class="col-md-4">
                <br><br><br><br><br><br><br>
                <div class="card" style="width: 100%;">                    
                    <div class="card-body">
                        <h4 class="card-title">URL단축 사이트</h4>.
                        <p class="card-text">여기에 긴 URL을 입력하세요.</p>
                        <form onsubmit="getShortUrl();" id="form">
                            <div class="form-group">                                
                                <input type="text" class="form-control" name="url" id="url" placeholder="여기에 단축할 URL을 입력해주세요...">
                            </div>                            
                            <button type="submit" class="btn btn-primary btn-lg" style="width:100%;">URL단축</button>
                        </form>
                        <div id="shortURLDiv"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-4"></div>
        </div>
    </div>        
  </body>
</html>
