ChrisRoss5/test.html

## test.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.js"></script>
    <link
      type="text/css"
      rel="stylesheet"
      href="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.css"
    />
    <style>
      body {
        background: #ccc;
        height: 100vh;
        margin: 0;
        padding: 0 15%;
      }
      #login {
        display: none;
        position: absolute;
        width: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      #main {
        display: none;
        background: #fff;
        height: 100%;
      }
      #logout {
        font-size: 3rem;
        text-align: center;
        padding: 0.5rem 1rem;
        background-color: #fff;
        cursor: pointer;
      }
      iframe {
        border: none;
        outline: none;
        width: 100%;
        height: 75%;
      }
    </style>
    <title>Test</title>
  </head>
  <body>
    <div id="login">
      <div id="firebaseui-auth-container"></div>
    </div>
    <div id="main">
      <iframe></iframe>
      <iframe></iframe>
      <div id="logout">Odjava</div>
    </div>

    <script type="module">
      import "https://www.gstatic.com/firebasejs/9.10.0/firebase-app-compat.js";
      import "https://www.gstatic.com/firebasejs/9.10.0/firebase-analytics-compat.js";
      import "https://www.gstatic.com/firebasejs/9.10.0/firebase-auth-compat.js";
      import "https://www.gstatic.com/firebasejs/9.10.0/firebase-database-compat.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 = {};  // todo

      // Initialize Firebase
      const app = firebase.initializeApp(firebaseConfig);
      const analytics = app.analytics();
      const auth = app.auth();
      const database = app.database();
      const ui = new firebaseui.auth.AuthUI(auth);

      // Elements
      const [login, main, logout] = document.querySelectorAll(
        "#login, #main, #logout"
      );

      auth.onAuthStateChanged((user) => {
        if (user) {
          // https://firebase.google.com/docs/reference/js/firebase.User
          main.style.display = "block";
          const uid = user.uid;
          database
            .ref("users/" + uid + "/links")
            .on("value", (snapshot) => updateLinks(snapshot.val()));
        } else {
          // https://firebase.google.com/docs/auth/web/firebaseui
          login.style.display = "block";
          ui.start("#firebaseui-auth-container", {
            signInOptions: [
              {
                provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
                requireDisplayName: false,
              },
            ],
            callbacks: {
              signInSuccessWithAuthResult: function (authResult, redirectUrl) {
                return false;
              },
            },
          });
        }
      });

      function updateLinks(links) {
        if (!links) main.style.display = "none";
        document.querySelectorAll("iframe").forEach((frame, i) => {
          frame.src = links ? links[i] : "";
        });
      }

      logout.onclick = () => auth.signOut().then(updateLinks);
    </script>
    <script></script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<script src="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.js"></script>
	<link
	type="text/css"
	rel="stylesheet"
	href="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.css"
	/>
	<style>
	body {
	background: #ccc;
	height: 100vh;
	margin: 0;
	padding: 0 15%;
	}
	#login {
	display: none;
	position: absolute;
	width: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	}
	#main {
	display: none;
	background: #fff;
	height: 100%;
	}
	#logout {
	font-size: 3rem;
	text-align: center;
	padding: 0.5rem 1rem;
	background-color: #fff;
	cursor: pointer;
	}
	iframe {
	border: none;
	outline: none;
	width: 100%;
	height: 75%;
	}
	</style>
	<title>Test</title>
	</head>
	<body>
	<div id="login">
	<div id="firebaseui-auth-container"></div>
	</div>
	<div id="main">
	<iframe></iframe>
	<iframe></iframe>
	<div id="logout">Odjava</div>
	</div>

	<script type="module">
	import "https://www.gstatic.com/firebasejs/9.10.0/firebase-app-compat.js";
	import "https://www.gstatic.com/firebasejs/9.10.0/firebase-analytics-compat.js";
	import "https://www.gstatic.com/firebasejs/9.10.0/firebase-auth-compat.js";
	import "https://www.gstatic.com/firebasejs/9.10.0/firebase-database-compat.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 = {}; // todo

	// Initialize Firebase
	const app = firebase.initializeApp(firebaseConfig);
	const analytics = app.analytics();
	const auth = app.auth();
	const database = app.database();
	const ui = new firebaseui.auth.AuthUI(auth);

	// Elements
	const [login, main, logout] = document.querySelectorAll(
	"#login, #main, #logout"
	);

	auth.onAuthStateChanged((user) => {
	if (user) {
	// https://firebase.google.com/docs/reference/js/firebase.User
	main.style.display = "block";
	const uid = user.uid;
	database
	.ref("users/" + uid + "/links")
	.on("value", (snapshot) => updateLinks(snapshot.val()));
	} else {
	// https://firebase.google.com/docs/auth/web/firebaseui
	login.style.display = "block";
	ui.start("#firebaseui-auth-container", {
	signInOptions: [
	{
	provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
	requireDisplayName: false,
	},
	],
	callbacks: {
	signInSuccessWithAuthResult: function (authResult, redirectUrl) {
	return false;
	},
	},
	});
	}
	});

	function updateLinks(links) {
	if (!links) main.style.display = "none";
	document.querySelectorAll("iframe").forEach((frame, i) => {
	frame.src = links ? links[i] : "";
	});
	}

	logout.onclick = () => auth.signOut().then(updateLinks);
	</script>
	<script></script>
	</body>
	</html>