devtud/login.html

## login.html
<html lang="ro">
<head>
  <title>Login</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans"/>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style type="text/css">
      body {
          background-color: #fbfbfb;
      }

      .login-form {
          font-family: arial;
          color: #333;
      }

      .login-form {
          width: 500px;
          margin: 0 auto;
          padding: 20px 30px 20px;
          border: 1px solid #ddd;
          border-radius: 5px;
          box-sizing: border-box;
          background-color: #ffffff;
      }

      .login-form h2 {
          text-align: center;
          font-size: 35px;
          margin: 10px 0px 40px;
      }

      .login-form input {
          width: 100%;
          border: 1px solid #ddd;
          padding: 5px 10px;
          height: 45px;
          margin: 0px 0px 20px;
          border-radius: 4px;
          box-sizing: border-box;
          font-size: 17px;
      }

      .login-form button {
          margin: 10px auto 30px;
          display: table;
          font-size: 20px;
          padding: 10px 30px;
          background-color: #4CAF50;
          border: none;
          color: #fff;
          border-radius: 4px;
          cursor: pointer;
      }

      .login-form button:hover {
          opacity: 0.8;
      }

      .login-form input[type="checkbox"] {
          height: 16px;
          width: 16px;
          margin-right: 5px;
          float: left;
      }

      .login-form .forget-psw {
          float: right;
      }

      .login-form .forget-psw a {
          color: #2196F3;
          text-decoration: none;
      }

      .social-btn button.google-btn, .social-btn button.facebook-btn {
          width: 100%;
          font-size: 18px;
          margin: 0px 0px 10px;
      }

      .social-btn button.google-btn {
          background-color: #DB4437;
      }

      .social-btn button.facebook-btn {
          background-color: #3f68be;
      }

      .social-btn {
          border-top: 1px solid #ddd;
          padding-top: 30px;
          margin-top: 30px;
      }

      .social-btn button i {
          margin-right: 5px;
          font-size: 20px;
      }

      @media (max-width: 767px) {
          .login-form {
              width: 90%;
              padding: 20px 15px 20px;
          }

          .social-btn button.google-btn, .social-btn button.facebook-btn {
              font-size: 18px;
          }
      }
  </style>
</head>
<body>

<div class="login-form">
  <h2>Login with</h2>

  <div class="social-btn">
    <button id="google-sign-in" class="google-btn">
      <i class="fa fa-google" aria-hidden="true"></i>
      Google
    </button>
    <button id="facebook-sign-in" class="facebook-btn">
      <i class="fa fa-facebook" aria-hidden="true"></i>
      Facebook
    </button>
  </div>
</div>

<script src="https://www.gstatic.com/firebasejs/8.2.6/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.6/firebase-auth.js"></script>
<script>
    function sendErrorMessage(error) {
        window.ReactNativeWebView.postMessage(
            JSON.stringify({
                "type": "error",
                "data": undefined,
                "error": error
            })
        );
    }

    function sendMessage(type, data) {
        window.ReactNativeWebView.postMessage(
            JSON.stringify({
                "type": type,
                "data": data,
                "error": undefined
            })
        );
    }

    var firebaseConfig = {
        apiKey: '...',
        authDomain: '...',
        databaseURL: '...',
        projectId: '...',
        storageBucket: '...',
        messagingSenderId: '...',
        appId: '...'
    };

    firebase.initializeApp(firebaseConfig);

    function signIn(providerName) {
        sendMessage("event", "click-on-login");

        if (!firebase.auth().currentUser) {
            var provider;
            if (providerName === 'google') {
                provider = new firebase.auth.GoogleAuthProvider();
            } else if (providerName === 'facebook') {
                provider = new firebase.auth.FacebookAuthProvider();
            } else {
                sendErrorMessage("provider does not exist");
                throw Error("provider does not exist");
            }
            firebase.auth().signInWithRedirect(provider);
        }
    }

    function initApp() {
        firebase.auth().signOut();
        firebase.auth().getRedirectResult()
            .then(function (result) {
                sendMessage("user", result);
            })
            .catch(function (error) {
                sendErrorMessage(error);
            });
    }

    window.onload = function () {
        initApp();
    };

    document.getElementById('google-sign-in').addEventListener('click', function () {
        signIn('google')
    }, false);
    document.getElementById('facebook-sign-in').addEventListener('click', function () {
        signIn('facebook')
    }, false);
</script>
</body>
</html>
	<html lang="ro">
	<head>
	<title>Login</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans"/>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<style type="text/css">
	body {
	background-color: #fbfbfb;
	}

	.login-form {
	font-family: arial;
	color: #333;
	}

	.login-form {
	width: 500px;
	margin: 0 auto;
	padding: 20px 30px 20px;
	border: 1px solid #ddd;
	border-radius: 5px;
	box-sizing: border-box;
	background-color: #ffffff;
	}

	.login-form h2 {
	text-align: center;
	font-size: 35px;
	margin: 10px 0px 40px;
	}

	.login-form input {
	width: 100%;
	border: 1px solid #ddd;
	padding: 5px 10px;
	height: 45px;
	margin: 0px 0px 20px;
	border-radius: 4px;
	box-sizing: border-box;
	font-size: 17px;
	}

	.login-form button {
	margin: 10px auto 30px;
	display: table;
	font-size: 20px;
	padding: 10px 30px;
	background-color: #4CAF50;
	border: none;
	color: #fff;
	border-radius: 4px;
	cursor: pointer;
	}

	.login-form button:hover {
	opacity: 0.8;
	}

	.login-form input[type="checkbox"] {
	height: 16px;
	width: 16px;
	margin-right: 5px;
	float: left;
	}

	.login-form .forget-psw {
	float: right;
	}

	.login-form .forget-psw a {
	color: #2196F3;
	text-decoration: none;
	}

	.social-btn button.google-btn, .social-btn button.facebook-btn {
	width: 100%;
	font-size: 18px;
	margin: 0px 0px 10px;
	}

	.social-btn button.google-btn {
	background-color: #DB4437;
	}

	.social-btn button.facebook-btn {
	background-color: #3f68be;
	}

	.social-btn {
	border-top: 1px solid #ddd;
	padding-top: 30px;
	margin-top: 30px;
	}

	.social-btn button i {
	margin-right: 5px;
	font-size: 20px;
	}

	@media (max-width: 767px) {
	.login-form {
	width: 90%;
	padding: 20px 15px 20px;
	}

	.social-btn button.google-btn, .social-btn button.facebook-btn {
	font-size: 18px;
	}
	}
	</style>
	</head>
	<body>

	<div class="login-form">
	<h2>Login with</h2>

	<div class="social-btn">
	<button id="google-sign-in" class="google-btn">
	<i class="fa fa-google" aria-hidden="true"></i>
	Google
	</button>
	<button id="facebook-sign-in" class="facebook-btn">
	<i class="fa fa-facebook" aria-hidden="true"></i>
	Facebook
	</button>
	</div>
	</div>

	<script src="https://www.gstatic.com/firebasejs/8.2.6/firebase-app.js"></script>
	<script src="https://www.gstatic.com/firebasejs/8.2.6/firebase-auth.js"></script>
	<script>
	function sendErrorMessage(error) {
	window.ReactNativeWebView.postMessage(
	JSON.stringify({
	"type": "error",
	"data": undefined,
	"error": error
	})
	);
	}

	function sendMessage(type, data) {
	window.ReactNativeWebView.postMessage(
	JSON.stringify({
	"type": type,
	"data": data,
	"error": undefined
	})
	);
	}

	var firebaseConfig = {
	apiKey: '...',
	authDomain: '...',
	databaseURL: '...',
	projectId: '...',
	storageBucket: '...',
	messagingSenderId: '...',
	appId: '...'
	};

	firebase.initializeApp(firebaseConfig);

	function signIn(providerName) {
	sendMessage("event", "click-on-login");

	if (!firebase.auth().currentUser) {
	var provider;
	if (providerName === 'google') {
	provider = new firebase.auth.GoogleAuthProvider();
	} else if (providerName === 'facebook') {
	provider = new firebase.auth.FacebookAuthProvider();
	} else {
	sendErrorMessage("provider does not exist");
	throw Error("provider does not exist");
	}
	firebase.auth().signInWithRedirect(provider);
	}
	}

	function initApp() {
	firebase.auth().signOut();
	firebase.auth().getRedirectResult()
	.then(function (result) {
	sendMessage("user", result);
	})
	.catch(function (error) {
	sendErrorMessage(error);
	});
	}

	window.onload = function () {
	initApp();
	};

	document.getElementById('google-sign-in').addEventListener('click', function () {
	signIn('google')
	}, false);
	document.getElementById('facebook-sign-in').addEventListener('click', function () {
	signIn('facebook')
	}, false);
	</script>
	</body>
	</html>