<html>
    <head>
        <title>Growth Hack</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
    </head>
    <body>
        <div class="container">
            <div class="col-md-6 offset-md-3">
            <div class="content text-center">
                <h1>Growth Hack</h1>
                <form>
                    <div class="input-group mb-3">
                        <input type="text" class="form-control" name="shop_name" id="shop_name" placeholder="Enter shop name" aria-label="Recipient's username" aria-describedby="basic-addon2">
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary" type="button" id="install">Install</button>
                        </div>
                    </div>
                </form>
            </div>
            </div>
        </div>
    </body>
</html>
<script>
    $(document).on('click','#install',function(){
        var shopName = $('#shop_name').val().trim();
        if(shopName == ""){
            alert("Enter Shop Name");
        }else{
            install(shopName);
        }
    });
    function install($store) {
        
        var $api = "38e458f5b9ba53558c9f086984eea032";

        if ($store.indexOf("http://") == 0 || $store.indexOf("https://") == 0) {
            $store = $store.replace("http://", '');
            $store = $store.replace("https://", '');
        }
        if ($store.length > 1 && $store.indexOf('.myshopify.com') > 0) {
            $store = $store.substring(0, $store.indexOf('.myshopify.com'));
            window.location.replace("https://" + $store + ".myshopify.com/admin/api/auth?api_key=" + $api);
        } else {
            alert('Invalid shop url');
        }
        return;

    }
</script>