Merge pull request #19 from lucyjemutai/loginPage

login-page

pages/auth/login.js

@@ -1,9 +1,76 @@
-import React from 'react'
+import React, { useState } from 'react';
+import Image from 'next/image';
 
 function Login() {
+  const [emailOrId, setEmailOrId] = useState('');
+  const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+
+  const handleLogin = () => {
+    console.log(`Logging in with email/ID: ${emailOrId} and password: ${password}`);
+  };
+
   return (
-    <div>Login</div>
-  )
+    <div style={{ display: 'flex', height: '100vh' }}>
+      <div style={{ flex: 1, padding: '20px', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+        <div style={{ backgroundColor: '#1651B6', padding: '10px', marginBottom: '20px', color: 'white' }}>
+          <h2 style={{ fontSize: '24px' }}>Welcome to the Kenya National Health Data Dictionary</h2>
+        </div>
+        <br></br>
+        <div style={{ marginBottom: '20px', textAlign: 'center' }}>
+          <form>
+            <label style={{ display: 'block', marginBottom: '10px', fontSize: '18px' }}>
+              <span style={{ marginBottom: '5px', display: 'block' }}>Email address or ID number:</span>
+              <input
+                type="text"
+                value={emailOrId}
+                onChange={(e) => setEmailOrId(e.target.value)}
+                style={{ width: '300px', padding: '8px', fontSize: '16px' }}
+              />
+            </label>
+            <br />
+            <label style={{ display: 'block', marginBottom: '10px', fontSize: '18px' }}>
+              <span style={{ marginBottom: '5px', display: 'block' }}>Password:</span>
+              <input
+                type={showPassword ? 'text' : 'password'}
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                style={{ width: '300px', padding: '8px', fontSize: '16px' }}
+              />
+            </label>
+            <br />
+            <label style={{ display: 'flex', alignItems: 'center', marginBottom: '10px', fontSize: '16px' }}>
+              <input
+                type="checkbox"
+                onChange={() => setShowPassword(!showPassword)}
+                style={{ marginRight: '5px' }}
+              />
+              Show Password
+            </label>
+            <br />
+            <button
+              type="button"
+              onClick={handleLogin}
+              style={{ backgroundColor: '#1651B6', color: 'white', padding: '10px', borderRadius: '5px', fontSize: '18px' }}
+            >
+              Login
+            </button>
+          </form>
+        </div>
+        <div style={{ position: 'absolute', bottom: '10px', left: '10px', fontSize: '16px' }}>
+          Don’t have an account? <a href="#">Sign up</a>
+        </div>
+      </div>
+
+      <div style={{ flex: 1, overflow: 'hidden' }}>
+        <Image
+          src={"/assets/images/pic.png"}
+          width={1000}
+          height={700}
+        />
+      </div>
+    </div>
+  );
 }
 
-export default Login
+export default Login;

pages/index.js

@@ -90,10 +90,7 @@ export default function Home() {
               marginBottom={"5px"}
               color={"#fff"}
             >
-              {" "}
-              Welcome to the <br />
-              Kenya National Health <br />
-              Data Dictionary{" "}
+            Kenya National Health Terminology Services
             </Typography>
             <Typography
               variant="h4"
@@ -110,7 +107,7 @@ export default function Home() {
               healthcare activities in Kenya.
             </Typography>
           </Box>
-          <Box width={"100%"} sx={{ display: "flex" }} noValidate>
+          <Box width={"30%"} sx={{ display: "flex" }} noValidate>
             <TextField
               onChange={(e) => setSearchTerm(e.target.value)}
               sx={{
@@ -120,7 +117,7 @@ export default function Home() {
               }}
               id="searchTerm"
               name="searchTerm"
-              label="Search any concept, institution, domain, sub-domain etc."
+              label="Search the Terminology Services"
               variant="outlined"
               color={"info"}
             />