<%
    * VS Addin Comment: SourceFile="~/../../fox/samples/wwdemo/wwdemo.prg"
    pcPageTitle = "Sessions and Cookies "
%>
<% Layout="~/views/_layoutpage.wcs" %>

<div class="container">


    <div class="sample">
        <div class="page-header-text">
            <i class="fa fa-street-view"></i>
            Sessions And Cookies
        </div>

        <div class="btn-group margin-bottom-2x">
            <a href="~/" class="btn btn-outline-primary btn-sm"> <i class="fa fa-home"></i> Samples</a>
            <a href="showcode.wwd" class="btn btn-outline-primary btn-sm"> <i class="fa fa-code"></i> Server Code</a>
            <a href="showfileastext.wwd?file=SessionsAndCookies.wwd" class="btn btn-outline-primary btn-sm"> <i class="fa fa-code"></i> Script Code</a>
            <a href="" class="btn btn-outline-primary  btn-sm"> <i class="fa fa-redo"></i> Refresh</a>
        </div>

        <h2>Cookie</h2>
        <p>
            HTTP Cookies are an HTTP protocol feature that allow tracking of a key value pair in the browser.
            Use cookies as identifying tokens for users or for encrypted authentication data,
            so you can track users through a site. Cookies are
            created on the server as Response header and cached as a client header by the browser and sent
            on each request. Cookie data is not secure and can be inspected, so don't store sensitive data
            in cookies unless it is encrypted.
        </p>

        <form id="form1" action="" method="post">
            <p>
                <div class="input-group" style="margin-bottom: 10px;">
                    <span class="input-group-prepend">
                        <span class="input-group-text">
                            <i class="fa fa-user"></i>
                        </span>
                    </span>
                    <input type="text" class="form-control"
                           id="CookieName" name="CookieName"
                           placeholder="Enter you name">
                </div>
                <button class="btn btn-primary" type="submit"
                        id="CookieSubmit"
                        name="CookieSubmit"
                        title="Writes the name into the session, so it can be remembered on subsequent page accesses and other requests."
                        >
                    <i class="fa fa-check"></i>
                    Remember my name
                </button>

                <button class="btn btn-secondary" type="submit"
                        title="Refreshes the page and should remember the refresh count and your entered name">
                    <i class="fa fa-redo"></i>
                    Refresh Page
                </button>
            </p>
            <% IF !EMPTY(pcCookieName) %>
            <div class="alert alert-success">
                <label class="error">We remember you. Welcome back, <%= pcCookieName %>.</label>
            </div>
            <% ENDIF %>
        </form>
    </div>

    <div class="sample">
        <h2>Session</h2>
        <p>
            Session is a server side state meachanism that stores key value pairs in
            a table row on the server. Sessions use Cookies to track a user and
            attach a single cookie value that holds an ID to a session record on the server.
            You can save values on the server and restore them on subsequent hits which allows
            you to identify a specific user as she moves through the site. Sessions can store
            larger blocks of data but data is always serialized to a string so for complex data
            stored you need to store JSON or XML.
        </p>

        <div class="alert alert-info">
            <label class="error">
                You've visited this page <%= TRANSFORM(pnPageHits) %>  times in this browser session.
            </label>
        </div>

    </div>

    
    <div class="sample">
        <h2>Cookie and Session Lifetime</h2>
        <p>
            Sessions and cookies both by default last for the duration of the browser
            session, but both Sessions and Cookies can be overridden to allow setting
            an explicit timeout. The Cookie and Session in this sample use the default.
            To demonstrate unload this browser instance and reload this in a new instance
            of the browser (or another browser) and you should see the count start over.
        </p>
        <p>
            Cookies span browser tabs and multiple browser instances of the same browser.
            If you open this page in another browser tab the name and page count will
            continue to show up.
        </p>

    </div>

</div>  <!-- end #MainView.container -->

<!-- remove sections if you're not using them -->
<% section="headers" %>
<style>
    .sample {
        margin-top: 35px;
    }
</style>
<% endsection %>

<% section="scripts" %>

<% endsection %>