short-url/resources/views/home.blade.php

@extends('layout.default')

@section('title')
    Welcome
@endsection

@section('subtitle')
    The Simple URL Shortener
@endsection

@section('content')
    <div class="box box-default">
        <div class="box-body">
            <form action="/" id="shorten-url-form">
                <input type="text" class="form-control" placeholder="Enter your URL" id="shorten-url-form-field-url"/>
                <br/>
                <div class="form-group">
                    <label>Expired Date</label>

                    <div class="input-group date">
                        <div class="input-group-addon">
                            <input type="checkbox" id="shorten-url-form-field-expiration-date-checkbox"/>
                        </div>
                        <input type="text"
                               class="form-control pull-right"
                               id="shorten-url-form-field-expiration-date"
                               placeholder="Set expired date" readonly>
                    </div>
                    <!-- /.input group -->
                </div>
                <!-- /input-group -->
                <div class="form-group">
                    <label>Password Protection</label>

                    <div class="input-group date">
                        <div class="input-group-addon">
                            <input type="checkbox" id="shorten-url-form-field-password-checkbox"/>
                        </div>
                        <input type="password"
                               class="form-control pull-right"
                               placeholder="Insert password"
                               id="shorten-url-form-field-password">
                    </div>
                    <!-- /.input group -->
                </div>
                <br/>
                <div class="row">
                    <div class="col-md-2 col-sm-4">
                        <button type="submit" class="btn btn-info btn-flat btn-block">
                            <span>Shorten URL</span>
                        </button>
                    </div>
                    <div class="col-md-10 col-sm-8">
                        <br class="visible-xs"/>
                        <div class="input-group" id="shorten-url-form-field-url-generated-group" style="display: none;">
                            <input type="text"
                                   class="form-control"
                                   placeholder="Generated URL"
                                   id="shorten-url-form-field-url-generated"
                                   readonly>
                            <span class="input-group-btn">
                                <button type="button" class="btn btn-danger btn-flat"
                                        data-clipboard-target="#shorten-url-form-field-url-generated">
                                    <i class="fa fa-clipboard"></i>
                                </button>
                            </span>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <!-- /.box-body -->
    </div>
    <!-- /.box -->
@endsection

@section('js')
    <script type="application/javascript">
        const clipboard = new ClipboardJS('.btn');

        $('#shorten-url-form-field-expiration-date').datepicker({
            autoclose: true,
            startDate: new Date(),
            format: "yyyy-mm-dd"
        });

        $(document).ready(function () {
            clipboard.on('success', function (e) {
                toastr.success("URL Copied");
                e.clearSelection();
            });

            clipboard.on('error', function (e) {
                toastr.failed("Cannot Copy URL");
            });

            $("#shorten-url-form").on("submit", function (e) {
                e.preventDefault();
                const url = $("#shorten-url-form-field-url");

                const expiredDateCheckBox = $('#shorten-url-form-field-expiration-date-checkbox').is(":checked");
                const expiredDate = $('#shorten-url-form-field-expiration-date');

                const passwordCheckBox = $('#shorten-url-form-field-password-checkbox').is(":checked");
                const password = $('#shorten-url-form-field-password');

                $.ajax({
                    type: "POST",
                    url: "/s/g",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    },
                    data: JSON.stringify({
                        "url": url.val(),
                        "expired_date": (expiredDateCheckBox) ? expiredDate.val() : null,
                        "password": (passwordCheckBox) ? password.val() : null,
                    }),
                    contentType: "application/json",
                    dataType: "json",
                    async: true,
                    success: function (result) {
                        toastr.success(result.message);
                        $("#shorten-url-form-field-url-generated").val(result.url);
                        $("#shorten-url-form-field-url-generated-group").fadeIn();
                    },
                    error: function (result) {
                        toastr.error(result.responseJSON.message);
                    }
                });
            });
        });
    </script>
@endsection