Some more design work on the control page of the server

tigomiddelkoop · tigomiddelkoop · commit 802cdc19471f · 2020-07-11T17:25:36.000+02:00
diff --git a/src/Types/Auth/forgotPasswordTypes.d.ts b/src/Types/Auth/forgotPasswordTypes.d.ts
@@ -3,4 +3,5 @@ declare interface ForgotPasswordTypes {
     loginBarColor: string,
     loginHidden: boolean,
     emptyEmail: boolean | undefined,
+
 }
diff --git a/src/Types/Auth/lockedScreenTypes.d.ts b/src/Types/Auth/lockedScreenTypes.d.ts
@@ -0,0 +1,3 @@
+declare interface LockedScreenTypes {
+    emptyPassword: boolean | undefined,
+}
diff --git a/src/Types/Forms/LockedScreenValues.d.ts b/src/Types/Forms/LockedScreenValues.d.ts
@@ -0,0 +1,3 @@
+declare interface LockedScreenValuesTypes {
+    password: string | null,
+}
diff --git a/src/components/ProjectSpecific/Dashboard/DashboardSubtitle.tsx b/src/components/ProjectSpecific/Dashboard/DashboardSubtitle.tsx
@@ -5,7 +5,9 @@ export default class DashboardSubtitle extends React.Component<{}, any> {
 
     render() {
         return (
-            <p className={"md:inline-block md:align-bottom leading-4 text-sm font-light"}>{this.props.children}</p>
+            <div className={"ml-2 flex flex-col-reverse leading-4 text-sm font-light"}>
+                <p className={""}>{this.props.children}</p>
+            </div>
         )
     }
 }
diff --git a/src/components/ProjectSpecific/Drawer/Drawer.tsx b/src/components/ProjectSpecific/Drawer/Drawer.tsx
@@ -15,6 +15,7 @@ import {Link} from 'react-router-dom';
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import Time from "../../Time";
 import Version from "../../Version";
+import {faPowerOff} from "@fortawesome/free-solid-svg-icons/faPowerOff";
 
 export default class Drawer extends React.Component<any, { signoutDropdown: boolean, hidden: boolean }> {
     state = {
@@ -95,12 +96,12 @@ export default class Drawer extends React.Component<any, { signoutDropdown: bool
                         </div>
                     </div>
                     <div className={"flex"}>
-                        <Link className={"self-center md:mr-2 mr-4"} to={"/lockscreen"}><FontAwesomeIcon
-                            className={"text-2xl md:text-xl hover:text-white"}
-                            icon={faLock}/></Link>
-                        <Link className={"self-center text-2xl md:text-xl"} to={"/login"}><FontAwesomeIcon
-                            className={"text-2xl md:text-xl hover:text-red-700"}
-                            icon={faSignOutAlt}/></Link>
+                        {/*<Link className={"self-center px-2 mr-1 py-2 hover:bg-gray-700 hover:text-red-700 rounded"} to={"/lockscreen"}><FontAwesomeIcon*/}
+                        {/*    className={"text-2xl md:text-xl hover:text-white"}*/}
+                        {/*    icon={faLock}/></Link>*/}
+                        {/*<Link className={"self-center px-2 py-2 hover:bg-gray-700 hover:text-red-700 rounded"} to={"/login"}><FontAwesomeIcon*/}
+                        {/*    className={"text-2xl md:text-xl"}*/}
+                        {/*    icon={faSignOutAlt}/></Link>*/}
                     </div>
                 </div>
                 <a href={"https://systemmanager.io"} referrerPolicy={"_blank"}
diff --git a/src/css/tailwind.scss b/src/css/tailwind.scss
@@ -10,19 +10,19 @@ html {
 }
 
 .serverbooting {
-  -webkit-animation: blinker 2s linear infinite;
-          animation: blinker 2s linear infinite;
+  -webkit-animation: blinker 0.5s linear infinite;
+          animation: blinker 0.5s linear infinite;
 }
 
 @-webkit-keyframes blinker {
   50% {
-    opacity: 0;
+    background-color: #c53030;
   }
 }
 
 @keyframes blinker {
   50% {
-    opacity: 0;
+    background-color: #c53030;
   }
 }
 
diff --git a/src/pages/auth/Locked.tsx b/src/pages/auth/Locked.tsx
@@ -5,43 +5,47 @@ import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import Time from "../../components/Time";
 import Version from "../../components/Version";
 
-interface IProps {
-}
+export default class Locked extends React.Component<any, LockedScreenTypes> {
 
-export default class Locked extends React.Component<IProps, ForgotPasswordTypes> {
-
-    private loginValues: ForgotPasswordValuesTypes = {
-        email: null,
+    private loginValues: LockedScreenValuesTypes = {
+        password: null,
     };
 
-    public state: ForgotPasswordTypes = {
-        loginText: "Forgot Password",
-        loginBarColor: "gray",
-        emptyEmail: false,
-        loginHidden: false,
+    public state: LockedScreenTypes = {
+        emptyPassword: false,
     };
 
     unlock = (): void => {
         const emptyString = /^$/;
-        this.setState({emptyEmail: false});
+        this.setState({emptyPassword: false});
         let valueEmpty: boolean = false;
-        if (this.loginValues.email == null || emptyString.test(this.loginValues.email)) {
-            this.setState({emptyEmail: true});
+        if (this.loginValues.password == null || emptyString.test(this.loginValues.password)) {
+            this.setState({emptyPassword: true});
             valueEmpty = true;
         }
         if (valueEmpty) return;
+
     }
 
-    handleChange = (name: "email") => (event: any) => {
+    handleChange = (name: "password") => (event: any) => {
+
+        // const emptyString = /^$/;
+        // this.setState({emptyPassword: false});
+        // if (this.loginValues.password == null || emptyString.test(this.loginValues.password)) {
+        //     this.setState({emptyPassword: true});
+        // }
         this.loginValues[name] = event.target.value;
     };
 
     render() {
 
         return (
             <div
-                className=" min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
-                <div className="max-w-md w-full">
+                className={`min-h-screen flex items-center justify-center  py-12 px-4 sm:px-6 lg:px-8`}>
+                {/*<div className={"absolute top-0 text-white py-3 px-4"}><h1 className={"text-6xl"}>1 SERVER OFFLINE</h1></div>*/}
+                <div className={"absolute top-0 bg-gray-800 rounded left-0 text-gray-600 py-3 px-4"}><p className={""}>1
+                    SERVER OFFLINE</p></div>
+                <div className="bg-gray-800 rounded-lg p-4 max-w-md w-full">
                     <div>
                         <img className="mx-auto h-32 rounded-full w-32"
                              src="https://genericdevelopment.nl/static/media/profilepicture.66f5dc0f.png"
@@ -53,29 +57,32 @@ export default class Locked extends React.Component<IProps, ForgotPasswordTypes>
                     </div>
                     <div className={"mt-8"}>
                         <input type="hidden" name="remember" value="true"/>
-                        <div className="rounded-md shadow-sm">
+                        <div className="rounded-md border-red-700 shadow-sm">
                             <div>
-                                <input aria-label="Password" name="password" type="password" required
+                                <input onChange={this.handleChange("password")}
+                                       aria-label="Password" name="password" type="password" required
                                        className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm sm:leading-5"
                                        placeholder="Password"/>
                             </div>
-                        </div>
 
+                        </div>
+                        <p className={`${this.state.emptyPassword ? "block" : "hidden"} text-xs text-red-700`}>You can
+                            not have any empty password field</p>
                         <div className="mt-6 flex">
-                            <Link to={"/dashboard/overview"} type="submit"
+                            <button onClick={this.unlock.bind(this)} type="submit"
                                     className="group text-center relative flex-1 justify-center py-2 px-4 border border-transparent text-sm leading-5 font-medium rounded-l-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition duration-150 ease-in-out">
                                 Unlock
-                            </Link>
+                            </button>
                             <Link to={"/login"} type="submit"
-                                    className="group relative flex justify-center py-2 px-4 border border-transparent text-sm leading-5 font-medium rounded-r-md text-white bg-red-600 hover:bg-red-500 focus:outline-none focus:border-red-700 focus:shadow-outline-red active:bg-red-700 transition duration-150 ease-in-out">
+                                  className="group relative flex justify-center py-2 px-4 border border-transparent text-sm leading-5 font-medium rounded-r-md text-white bg-red-600 hover:bg-red-500 focus:outline-none focus:border-red-700 focus:shadow-outline-red active:bg-red-700 transition duration-150 ease-in-out">
                                 <FontAwesomeIcon className={"self-center text-2xl md:text-xl hover:text-red-700"}
                                                  icon={faSignOutAlt}/>
                             </Link>
                         </div>
                     </div>
                 </div>
                 <div className={"absolute bottom-0 left-0 text-gray-600 py-3 px-4"}>
-                    <Time /> <Version/>
+                    <Time/> <Version/>
                 </div>
             </div>
         );
diff --git a/src/pages/dashboard/servers/control.tsx b/src/pages/dashboard/servers/control.tsx
diff --git a/tailwind.css b/tailwind.css

Original file line number	Diff line number	Diff line change
`@@ -3,4 +3,5 @@ declare interface ForgotPasswordTypes {`
`3`	`3`	`loginBarColor: string,`
`4`	`4`	`loginHidden: boolean,`
`5`	`5`	`emptyEmail: boolean \| undefined,`
	`6`	`+`
`6`	`7`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+declare interface LockedScreenTypes {`
	`2`	`+ emptyPassword: boolean \| undefined,`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+declare interface LockedScreenValuesTypes {`
	`2`	`+ password: string \| null,`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,9 @@ export default class DashboardSubtitle extends React.Component<{}, any> {`
`5`	`5`
`6`	`6`	`render() {`
`7`	`7`	`return (`
`8`		`- <p className={"md:inline-block md:align-bottom leading-4 text-sm font-light"}>{this.props.children}</p>`
	`8`	`+ <div className={"ml-2 flex flex-col-reverse leading-4 text-sm font-light"}>`
	`9`	`+ <p className={""}>{this.props.children}</p>`
	`10`	`+ </div>`
`9`	`11`	`)`
`10`	`12`	`}`
`11`	`13`	`}`
Original file line number	Diff line number	Diff line change
`@@ -10,19 +10,19 @@ html {`
`10`	`10`	`}`
`11`	`11`
`12`	`12`	`.serverbooting {`
`13`		`- -webkit-animation: blinker 2s linear infinite;`
`14`		`- animation: blinker 2s linear infinite;`
	`13`	`+ -webkit-animation: blinker 0.5s linear infinite;`
	`14`	`+ animation: blinker 0.5s linear infinite;`
`15`	`15`	`}`
`16`	`16`
`17`	`17`	`@-webkit-keyframes blinker {`
`18`	`18`	`50% {`
`19`		`- opacity: 0;`
	`19`	`+ background-color: #c53030;`
`20`	`20`	`}`
`21`	`21`	`}`
`22`	`22`
`23`	`23`	`@keyframes blinker {`
`24`	`24`	`50% {`
`25`		`- opacity: 0;`
	`25`	`+ background-color: #c53030;`
`26`	`26`	`}`
`27`	`27`	`}`
`28`	`28`