Working change between time and password prompt

client/src/App.css

@@ -1,3 +1,8 @@
+html, body, #root {
+  height: 100%;
+  width: 100%;
+}
+
 .navbar {
   position: fixed;
   bottom: 0;
@@ -17,7 +22,33 @@
 
 .login {
   transition: backdrop-filter;
+  height: 100%;
 }
+
 .login.active {
   backdrop-filter: blur(15px);
+}
+
+.login .time {
+  transition: bottom, height, opacity;
+  height: 100%;
+  opacity: 1;
+  bottom: 0;
+}
+.login .time.active {
+  bottom: 100%;
+  height: 0;
+  opacity: 0;
+}
+
+
+.login .user {
+  opacity: 0;
+  transition: opacity, height;
+  height: 0;
+}
+
+.login .user.active {
+  opacity: 1;
+  height: 100%;
 }

client/src/ui/system/login.js

@@ -1,12 +1,70 @@
 import React from 'react';
 import "../../App.css";
+//import MT from 'mousetrap';
 
-function Login(props){
-    return (
-        <div className="login">
-            Press ENTER to open login
-        </div>
-    )
+class Login extends React.Component{
+    constructor(p){
+        super(p)
+        this.state = {
+            login: false
+        };
+    }
+    componentDidMount(){
+        let loginPage = document.getElementById("loginPage");
+
+        let time = loginPage.getElementsByClassName("time")[0];
+        let user = loginPage.getElementsByClassName("user")[0];
+
+        let cl = this;
+        function showLogin(e) {
+            document.removeEventListener("keydown", showLogin);
+            console.log("Showing login");
+            cl.setState({login: true});
+
+            setTimeout(()=>{
+                console.log("Hiding login");
+                cl.setState({login: false});
+                document.addEventListener("keydown", showLogin);
+            }, 30000)
+        }
+
+        document.addEventListener("keydown", showLogin);
+    }
+    render(props){
+        if (this.state.login) {
+            return (
+                <div id="loginPage" className="login active">
+                    <div className="time active">
+                        00:00
+                    </div>
+                    <div className="user active">
+                        <div className="avatar-holder">
+                            <img className="avatar" alt="avatar" />
+                        </div>
+                        <div className="password-holder">
+                            <input type="password" className="password" />
+                        </div>
+                    </div>
+                </div>
+            );
+        }
+        return (
+            <div id="loginPage" className="login">
+                <div className="time">
+                    20:48
+                    Press ENTER to open login
+                </div>
+                <div className="user">
+                    <div className="avatar-holder">
+                        <img className="avatar" alt="avatar" />
+                    </div>
+                    <div className="password-holder">
+                        <input type="password" className="password" />
+                    </div>
+                </div>
+            </div>
+        );
+    }
 }
 
 export default Login;