JSFiddle - React, Tailwind, and code Playground

by sj82516

HTML

<h2>註冊</h2>
<lable for="account">電子郵件</lable>
<input id="account" type="text">
<lable for="pwd">密碼</lable>
<input id="pwd" type="password">
<lable for="name">姓名</lable>
<input id="name" type="text">
<lable for="age">年齡</lable>
<input id="age" type="number">
<button type="submit" id="registerSmtBtn">Signup</button>

<h2>登入</h2>
<lable for="accountL"></lable>
<input id="accountL" type="text">
<lable for="pwdL"></lable>
<input id="pwdL" type="password">
<button type="submit" id="loginSmtBtn">Login</button>

<h2>登出</h2>
<button id="signoutSmtBtn">Signout</button>

<h2>取得現在使用者資料</h2>
<h4 id="userInfo">使用者資料</h4>
<button id="userInfoBtn">Get</button>

<h2>刪除使用者姓名</h2>
<button id="delUserInfoBtn">Get</button>


<h2>增加Post</h2>
<label>標題</label>
<input id="postTitle" type="text">
<label>內文</label>
<input id="postContent" type="text">
<label>限制年齡</label>
<input id="postLimitAge" type="number">
<button type="submit" id="postSmtBtn">Signup</button>

<h2>取得現在使用者所有Post</h2>
<h4 id="postList">使用者Post</h4>
<button id="postListBtn">Get</button>

<script src="https://www.gstatic.com/firebasejs/3.5.2/firebase.js"></script>

JavaScript

// Initialize Firebase
  var config = {
    apiKey: "AIzaSyASwAnakbaqQB578LGHHbPCht7I_FqjNHs",
    authDomain: "test-35b46.firebaseapp.com",
    databaseURL: "https://test-35b46.firebaseio.com",
    storageBucket: "test-35b46.appspot.com",
    messagingSenderId: "558722894017"
  };
firebase.initializeApp(config);
var database = firebase.database();

//Email/Pwd註冊
var loginUser;
var account = document.getElementById("account");
var pwd = document.getElementById("pwd");
var registerSmtBtn = document.getElementById("registerSmtBtn");
var age = document.getElementById("age");
var name = document.getElementById("name");
registerSmtBtn.addEventListener("click", function(){
		console.log(account.value);
    firebase.auth().createUserWithEmailAndPassword(account.value, pwd.value).then(function(){
    	//登入成功後，取得登入使用者資訊
    	loginUser = firebase.auth().currentUser;
      console.log("登入使用者為",loginUser);
      firebase.database().ref('users/' + loginUser.uid).set({
        email: loginUser.email,
        name: name.value,
        age : age.value
      }).catch(function(error){
      	console.error("寫入使用者資訊錯誤",error);
      });
    }).catch(function(error) {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMsg = error.message;
    console.log(errorMsg);
  });
},false);

//登入
var accountL = document.getElementById("accountL");
var pwdL = document.getElementById("pwdL");
var loginSmtBtn = document.getElementById("loginSmtBtn");
loginSmtBtn.addEventListener("click",function(){
	firebase.auth().signInWithEmailAndPassword(accountL.value, pwdL.value).catch(function(error) {
  	// Handle Errors here.
  	var errorCode = error.code;
  	var errorMessage = error.message;
  	console.log(errorMessage);
  })
},false);

var loginUser;
firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
  	loginUser = user;
    console.log("User is logined", user)
  } else {
  	loginUser = null;
    console.log("User is not logined yet.");
  }
});

var signoutSmtBtn =...