<!--    Authors         :   Carlos C. Corrada-Bravo
                            David J. Ortiz-Rivera

        Organization    :   Centro de Desarrollo y Consultoria Computacional
        Project         :   OPASO Material Registry  
        File            :   index
        Description     :   Authenticate user -->

<!-- verify session -->
<?php       
    /* start user session */
    if(!isset($_SESSION)){
        session_start();
    }
    
    /* check for expired session */
    if(isset($_SESSION["last_activity"]) and (time() - $_SESSION["last_activity"]) <= 1800){
        header("Location: /menu");
        die();
    }

    /* initialize google client */
    require_once "vendor/autoload.php";
    $config = "config/o_auth.json";
    $client = new Google_Client();
    $client->setAuthConfig($config);
    
    /* set redirect uri */
    $redirect_uri = "http://".$_SERVER["HTTP_HOST"]."/session.php";
    $client->setRedirectUri($redirect_uri);
    $client->addScope("email");
    $client->addScope("profile");
?>

<!doctype html>
<html lang="en">
    <!-- encoding/imports/styling -->
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title class="title">OPASO - Log In</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
        <link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Noto+Sans'>
        <link rel="stylesheet" href="./style/main.css">
        <link rel="stylesheet" href="/style/login.css">
    </head>

    <!-- content -->
    <body>
        <div class="content">
            <!-- alerts -->
            <div class="alerts">
                <div class="alert">
                    <div class="message-icon-wrapper">
                        <i class="message-icon success-icon material-icons">done</i>
                        <i class="message-icon error-icon failed-icon warning-icon material-icons">close</i>
                    </div>
                    <p class="alert-status"></p>
                    <p class="alert-message"></p>
                </div>
            </div>

            <!-- login -->
            <div class="login">
                <div class="form-wrapper">
                    <div class="form">
                        <div class="form-header-wrapper">
                            <!-- <img class="form-logo" src="https://cdn.shopify.com/s/files/1/0533/2089/files/placeholder-images-image_large.png?v=1530129081"> -->
                            <h4 class="form-header">OPASO</h4>
                            <!-- <small class="form-header-subtitle">Material registry</small> -->
                        </div>
                        <div class="form-body">
                            <div class="form-input-wrapper">
                                <h5 class="form-body-header">Log In</h5>

                                <div class="input-wrapper">
                                    <span class="placeholder email">Email <i class="fas fa-circle placeholder-icon email-circle"></i></span>
                                    <input class="login-field" id="email" type="text" autocomplete="off">
                                </div>

                                <div class="input-wrapper">
                                    <span class="placeholder password">Password <i class="fas fa-circle placeholder-icon password-circle"></i></span>
                                    <input class="login-field" id="password" type="password" autocomplete="off">
                                    <i class="view-password far fa-eye-slash" value="password"></i>
                                </div>

                                <button class="btn btn-primary submit-login" type="button">Log In</button>
                            </div>

                            <!-- google sign in -->
                            <div class="google-sign-in-wrapper">
                                <h6 class="form-body-header or">Or</h6>
                                <h6 class="google-sign-in-header">Log In using institutional account</h6>
                                <a class="btn-light google-sign-in" href='<?php print $client->createAuthUrl();?>'><img class="google-logo" src="https://www.freepnglogos.com/uploads/google-logo-png/google-logo-png-suite-everything-you-need-know-about-google-newest-0.png"><div class="google-sign-in-text">Log In using Google</div></a>
                            </div>
                        </div>
                    </div>
                    <div class="form-subtitle">
                        <a class="form-link" href="#">Forgot password?</a><br>
                        <a class="form-link" href="#">Request an account</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- scripts -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
        <script type="text/javascript" src="/scripts/main.js"></script>
        <script type="text/javascript" src="/scripts/login.js"></script>
    </body>
</html>