404.html

---

layout: default

---
<center>
<button class="loginbutton" type="button" id="logmein">Log in and Edit</button>

<div class="logincontainer">
  <div id="containerOfUser" class="usercontainer displaynone">
    <img class="userphoto" src="" id="photoOfUser">
    <div class="vertical">
      <div class="username" id="nameOfUser">no name</div>
      <div class="userstatus" id="statusOfUser">Edit access</div>
  </div>
  </div>
</div>

</center>

    <article id="pageContent" class="post h-entry displaynone" itemscope itemtype="http://schema.org/BlogPosting">

      <header class="post-header">

        <h1 id="title" class="post-title p-name" itemprop="name headline">
          <span id="htmlTitle">Loading...</span>
        </h1>

        <div id="htmlSubtitle" class="sub-title">You can type things here.</div>

      </header>

      <div id="htmlBody" class="post-content e-content" itemprop="articleBody">

      </div>

    </article>



    <script src="https://gyanl.com/assets/pell.js"></script>

    <script type="text/javascript">


      // Initialize pell on an HTMLElement
  pell.init({
    // <HTMLElement>, required
    element: document.getElementById('htmlBody'),

    // <Function>, required
    // Use the output html, triggered by element's `oninput` event
    onChange: html => console.log(html),

    // <string>, optional, default = 'div'
    // Instructs the editor which element to inject via the return key
    defaultParagraphSeparator: 'p',

    // <boolean>, optional, default = false
    // Outputs <span style="font-weight: bold;"></span> instead of <b></b>
    styleWithCSS: false,

    // <Array[string | Object]>, string if overwriting, object if customizing/creating
    // action.name<string> (only required if overwriting)
    // action.icon<string> (optional if overwriting, required if custom action)
    // action.title<string> (optional)
    // action.result<Function> (required)
    // Specify the actions you specifically want (in order)
    actions: [
      'bold',
      'italic',
      'underline',
      'heading1',
      'heading2',
      'heading3',
      'heading4',
      'paragraph',
      'olist',
      'ulist',
      'todo'
    ],

    // classes<Array[string]> (optional)
    // Choose your custom class names
    classes: {
      actionbar: 'pell-actionbar',
      button: 'pell-button',
      content: 'pell-content',
      selected: 'pell-button-selected'
    }
  })

    </script>

    <script type="module">

    // Get pageName = gyanl.com/string

    var pageName = location.pathname.substring(location.pathname.lastIndexOf("/") + 1);
    console.log(pageName);

    // Import the functions you need from the SDKs you need
    import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
    import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-analytics.js";
    import { getDatabase, ref, set, onValue, update } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-database.js";
    import { getAuth, signInWithPopup, GoogleAuthProvider } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-auth.js";

    // TODO: Add SDKs for Firebase products that you want to use
    // https://firebase.google.com/docs/web/setup#available-libraries

    // Your web app's Firebase configuration
    // For Firebase JS SDK v7.20.0 and later, measurementId is optional

    const firebaseConfig = {
      apiKey: "AIzaSyCLkh1I6haUU51EslRGSlXkXiYqOkvcCKA",
      authDomain: "idea-cbd6c.firebaseapp.com",
      databaseURL: "https://idea-cbd6c-default-rtdb.asia-southeast1.firebasedatabase.app",
      projectId: "idea-cbd6c",
      storageBucket: "idea-cbd6c.appspot.com",
      messagingSenderId: "965624401030",
      appId: "1:965624401030:web:accca7b65fddd344591507",
      measurementId: "G-CVF81V77DF"
    };

    // Initialize Firebase
    const app = initializeApp(firebaseConfig);
    const analytics = getAnalytics(app);
    const db = getDatabase();
    const provider = new GoogleAuthProvider();
    const auth = getAuth();
    const user = auth.currentUser;

    const reference = ref(db, pageName + '/');

    var vtitle = document.getElementById('htmlTitle');
    var vsubtitle = document.getElementById('htmlSubtitle');
    var vbody = document.getElementsByClassName("pell-content")[0];
    var vlogin = document.getElementById("logmein");

    var vdisplayname = "";
    var vphotourl = "";
    var vemail = "";

    var actionbar = document.getElementsByClassName("pell-actionbar")[0];
    hideActionBar();

    // One time run
      onValue(reference, (snapshot) => {

    // If snapshot exists, get the values and populate the page.
        if (snapshot.exists()) {
          console.log(snapshot.val());
          vtitle.innerHTML = snapshot.val().title;
          vsubtitle.innerHTML = snapshot.val().subtitle;
          vbody.innerHTML = snapshot.val().body;
        } else {
        // If no snapshot, fill values and create record.
          console.log("Creating new record.");
          vtitle.innerHTML = pageName;
          vbody.innerHTML = "Write something epic.<br><br><br><br><br><br><br>";
          vbody.style.opacity = "0.5";

    // Create new log
          set(ref(db, pageName + "/"), {
            title: vtitle.innerHTML,
            subtitle: vsubtitle.innerHTML,
            body : vbody.innerHTML
          });
        }

     // Stop showing loader and show content
        document.getElementById("pageContent").classList.remove('displaynone');


      });

      // Dont't allow editing of post body
      vbody.contentEditable = "false";

        // check if logged in
        hideActionBar();
        getUserDetails();

    function updateValues() {
      const updates = {};
      updates[pageName + "/"] = {
        title: vtitle.innerHTML,
        subtitle: vsubtitle.innerHTML,
        body: vbody.innerHTML
      };
      update(ref(db), updates);
      console.log("Update sent");
      hideActionBar();
    }

    function showActionBar() {
        actionbar.classList.remove("hidden");
        vbody.style.opacity = "1.0";
    }

    function hideActionBar() {
        actionbar.classList.add("hidden");
    }

    function signInUser() {
      console.log("Trying to sign in...")
      signInWithPopup(auth, provider)
        .then((result) => {
          const user = result.user;
          console.log("Signed in as " + user.displayName);
          vdisplayname = user.displayName;
          vphotourl = user.photoURL;
          vemail = user.email;
          showUserOnPage();
        })
        .catch((error) => {
          console.error("Sign in error:", error);
        });
    }

    // function showUserOnPage() {
    //   document.getElementById('containerOfUser').classList.remove('displaynone');
    //   document.getElementById('photoOfUser').src = vphotourl;
    //   document.getElementById('nameOfUser').innerHTML = vdisplayname;
    //   vlogin.classList.add('displaynone');
    // }

    function showUserOnPage() {

  // Show user chip
  document.getElementById('containerOfUser').classList.remove('displaynone');
  document.getElementById('photoOfUser').src = vphotourl;
  document.getElementById('nameOfUser').innerHTML = vdisplayname;

  // Hide login button
  vlogin.classList.add('displaynone');

  if (vemail == "gyanlakhwani@gmail.com"){
    //User can edit, show edit access
    document.getElementById('statusOfUser').innerHTML = "Edit Access";
    console.log("Setting Edit Access");


    // Make text areas editable
    vtitle.addEventListener("click", function() {
      vtitle.contentEditable = "true";
    });

    vsubtitle.addEventListener("click", function() {
      vsubtitle.contentEditable = "true";
    });

    vbody.contentEditable = "true";

    // Add event listeners for update values
    vtitle.addEventListener("blur", updateValues);
    vsubtitle.addEventListener("blur", updateValues);
    vbody.addEventListener("blur", updateValues);

    // Show action bar
    showActionBar();
  }

  else{
    //User read only, show read only access
    document.getElementById('statusOfUser').innerHTML = "Read Access";
  }
}

    function getUserDetails() {
      console.log("Trying to get user details...");
      
      auth.onAuthStateChanged((user) => {
        if (user) {
          console.log("User is signed in:", user.displayName);
          vdisplayname = user.displayName;
          vphotourl = user.photoURL;
          vemail = user.email;
          showUserOnPage();
        } else {
          console.log("No user signed in");
        }
      });
    }

    // Add event listeners

    vtitle.addEventListener("blur", updateValues);
    vsubtitle.addEventListener("blur", updateValues);
    vbody.addEventListener("blur", updateValues);
    vbody.addEventListener("focus", showActionBar);
    vlogin.addEventListener("click", signInUser);



    </script>