06. log in one url

Admin Prayas November 18, 2023

log in one url

User-Friendly Login Process: The journey begins with a straightforward login mechanism. Users are required to input their login ID and password, ensuring a secure entry into the application. This uncomplicated login process sets the stage for what lies ahead – a personalized and engaging browsing experience.

Hidden Links, Revealed Pages: The standout feature of this web application lies in its ability to keep shared links hidden from users post-login. Instead of presenting a conventional list of links, the application takes users directly to the web pages associated with those links. This not only adds an element of surprise but also enhances user engagement by eliminating the need for manual navigation.

Curated Content Delivery: Imagine curating a collection of web pages tailored to specific interests, industries, or themes. This web application allows you to do just that. By sharing links with your audience, you provide them with a unique and curated journey through the internet, offering a more meaningful and personalized experience.

Enhanced User Experience: Gone are the days of sharing links that users have to click and explore individually. This web application elevates the user experience by seamlessly transporting users directly to the heart of the content. This not only saves time but also ensures that users are immediately immersed in the intended online experience.

Privacy and Security: Security is a top priority in the digital age, and this web application takes it seriously. The login credentials ensure that only authorized users gain access to the curated content. The seamless integration of this security measure adds a layer of protection to the personalized browsing experience.





Application Demo

Embedded Google Apps Script

Make For Won, Follow The Instraction

Step 1: Open Google Sheets

To get started, open Google Sheets and either create a new spreadsheet or open an existing one. This will serve as the foundation for the data manipulation and automation tasks you want to perform.

Step 2: Open Google Apps Script

Next, navigate to the "Extensions" menu and select "Apps Script." This will open the Google Apps Script editor in a new tab. This editor is where you'll be writing the code to automate your Google Sheets tasks.

Step 3: Write Google Apps Script Code

Once in the Google Apps Script editor, you'll likely see a default function. Delete any existing code, as we'll be starting from scratch. Now, let's write a simple example script that you can use as a foundation for more complex automation.


code.gs

function doGet() {
  var output = HtmlService.createHtmlOutputFromFile('index');
  output.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
  return output;
}

function loginUser(email, password) {
  var sheet = SpreadsheetApp.openById('1iSyom6SK9a4W99eoC-Re27w17bTeeOWOUsZTWGTcgKo').getSheetByName('Login');
  var data = sheet.getDataRange().getValues();

  for (var i = 1; i < data.length; i++) {
    if (data[i][0] === email && data[i][1] === password) {
      if (data[i][2] === 'yes') {
        return true;
      } else {
        return false;
      }
    }
  }
  return false;
}


index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Poppins", sans-serif;
    }
    body {
      background: url('https://i.imgur.com/eCsGwpT.jpg') center/cover fixed no-repeat; /* Replace 'path/to/your/image.jpg' with the actual path to your image */
    }
    .wrapper {
      width: 330px;
      padding: 2rem 0 1rem 0;
      margin: 50px auto;
      background: rgba(255, 255, 255, 0.8); /* Semi-transparent white background for the form */
      border-radius: 10px;
      text-align: center;
      box-shadow: 0 20px 35px rgba(0, 0, 0, 0.1);
    }
    h1 {
      font-size: 2rem;
      color: #07001f;
    }
    p {
      margin-bottom: 1.7rem;
    }
    form input {
      width: 85%;
      outline: none;
      border: none;
      background: #dfe9f5;
      padding: 12px 14px;
      margin-bottom: 10px;
      border-radius: 10px;
    }
    /* ... (rest of your styles) */
  </style>
  <script>
    function login() {
      var email = document.querySelector('input[type="text"]').value;
      var password = document.querySelector('input[type="password"]').value;

      google.script.run
        .withSuccessHandler(function(isLoggedIn) {
          if (isLoggedIn) {
            window.location.href = 'https://script.google.com/macros/s/AKfycbxhPq8tCs9UAgUb2DWpTTb8WpB55A3ac4bMoCRxtOdGajFnBrb-aSjoWN0vcj3Z5MW6YA/exec';
          } else {
            alert('Login failed. Please check your email and password.');
          }
        })
        .loginUser(email, password);
    }
  </script>
</head>
<body>
  <div class="wrapper">
    <h1>Admin Log In</h1>
    <p>Only For Admin Log In</p>
    <form>
      <input type="text" placeholder="Enter username">
      <input type="password" placeholder="Password">
    </form>
    <button onclick="login()">Sign in</button>
    <p class="or">
      ----- or continue with -----
    </p>
    <div class="icons">
      <i class="fab fa-google"></i>
      <i class="fab fa-github"></i>
      <i class="fab fa-facebook"></i>
    </div>
  </div>
</body>
</html>

Admin Prayas

Posted by Admin Prayas