Proyecto en colaboración con OPASO

index.php 5.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. <!-- Authors : Carlos C. Corrada-Bravo
  2. David J. Ortiz-Rivera
  3. Organization : Centro de Desarrollo y Consultoria Computacional
  4. Project : OPASO Material Registry
  5. File : index
  6. Description : Authenticate user -->
  7. <!-- verify session -->
  8. <?php
  9. /* start user session */
  10. if(!isset($_SESSION)){
  11. session_start();
  12. }
  13. /* check for expired session */
  14. if(isset($_SESSION["last_activity"]) and (time() - $_SESSION["last_activity"]) <= 1800){
  15. header("Location: /menu");
  16. die();
  17. }
  18. /* initialize google client */
  19. require_once "vendor/autoload.php";
  20. $config = "config/o_auth.json";
  21. $client = new Google_Client();
  22. $client->setAuthConfig($config);
  23. /* set redirect uri */
  24. $redirect_uri = "http://".$_SERVER["HTTP_HOST"]."/session.php";
  25. $client->setRedirectUri($redirect_uri);
  26. $client->addScope("email");
  27. $client->addScope("profile");
  28. ?>
  29. <!doctype html>
  30. <html lang="en">
  31. <!-- encoding/imports/styling -->
  32. <head>
  33. <meta charset="utf-8">
  34. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  35. <title class="title">OPASO - Log In</title>
  36. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  37. <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  38. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  39. <link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Noto+Sans'>
  40. <link rel="stylesheet" href="./style/main.css">
  41. <link rel="stylesheet" href="/style/login.css">
  42. </head>
  43. <!-- content -->
  44. <body>
  45. <div class="content">
  46. <!-- alerts -->
  47. <div class="alerts">
  48. <div class="alert">
  49. <div class="message-icon-wrapper">
  50. <i class="message-icon success-icon material-icons">done</i>
  51. <i class="message-icon error-icon failed-icon warning-icon material-icons">close</i>
  52. </div>
  53. <p class="alert-status"></p>
  54. <p class="alert-message"></p>
  55. </div>
  56. </div>
  57. <!-- login -->
  58. <div class="login">
  59. <div class="form-wrapper">
  60. <div class="form">
  61. <div class="form-header-wrapper">
  62. <!-- <img class="form-logo" src="https://cdn.shopify.com/s/files/1/0533/2089/files/placeholder-images-image_large.png?v=1530129081"> -->
  63. <h4 class="form-header">OPASO</h4>
  64. <!-- <small class="form-header-subtitle">Material registry</small> -->
  65. </div>
  66. <div class="form-body">
  67. <div class="form-input-wrapper">
  68. <h5 class="form-body-header">Log In</h5>
  69. <div class="input-wrapper">
  70. <span class="placeholder email">Email <i class="fas fa-circle placeholder-icon email-circle"></i></span>
  71. <input class="login-field" id="email" type="text" autocomplete="off">
  72. </div>
  73. <div class="input-wrapper">
  74. <span class="placeholder password">Password <i class="fas fa-circle placeholder-icon password-circle"></i></span>
  75. <input class="login-field" id="password" type="password" autocomplete="off">
  76. <i class="view-password far fa-eye-slash" value="password"></i>
  77. </div>
  78. <button class="btn btn-primary submit-login" type="button">Log In</button>
  79. </div>
  80. <!-- google sign in -->
  81. <div class="google-sign-in-wrapper">
  82. <h6 class="form-body-header or">Or</h6>
  83. <h6 class="google-sign-in-header">Log In using institutional account</h6>
  84. <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>
  85. </div>
  86. </div>
  87. </div>
  88. <div class="form-subtitle">
  89. <a class="form-link" href="#">Forgot password?</a><br>
  90. <a class="form-link" href="#">Request an account</a>
  91. </div>
  92. </div>
  93. </div>
  94. </div>
  95. <!-- scripts -->
  96. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  97. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
  98. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  99. <script type="text/javascript" src="/scripts/main.js"></script>
  100. <script type="text/javascript" src="/scripts/login.js"></script>
  101. </body>
  102. </html>