feat: login page

.eslintrc

@@ -11,6 +11,11 @@
         "ecmaVersion": "latest",
         "sourceType": "module"
     },
+    "globals": {
+        "describe": "readonly",
+        "it": "readonly",
+        "expect": "readonly"
+    },
     "plugins": ["@typescript-eslint", "prettier"],
     "rules": {
         "linebreak-style": ["error", "unix"],

__tests__/pages/login.js

@@ -0,0 +1,39 @@
+import LoginPage from '../../src/pages/login';
+import { render, fireEvent } from '@testing-library/react';
+
+describe('LoginPage', () => {
+    it('should render without throwing an error', function () {
+        const { container } = render(<LoginPage />);
+        expect(container).toMatchSnapshot();
+    });
+    it('should render username input', () => {
+        const { getByLabelText } = render(<LoginPage />);
+        expect(getByLabelText('Username')).toBeInTheDocument();
+        expect(getByLabelText('Username')).toHaveAttribute('type', 'text');
+    });
+    it('should render password input', () => {
+        const { getByLabelText } = render(<LoginPage />);
+        expect(getByLabelText('Password')).toBeInTheDocument();
+        expect(getByLabelText('Password')).toHaveAttribute('type', 'password');
+    });
+    it('should render the `Login` button', () => {
+        const { getByText } = render(<LoginPage />);
+        expect(getByText('Log in')).toBeInTheDocument();
+    });
+    it('should accept valid username that takes only alphanumeric characters and underscore', () => {
+        const { getByLabelText } = render(<LoginPage />);
+        const usernameInput = getByLabelText('Username');
+        usernameInput.value = 'John_doe';
+        expect(usernameInput.value).toBe('John_doe');
+    });
+    it('should not accept invalid username that doesnt take only alphanumeric characters and underscore', () => {
+        const { getByLabelText } = render(<LoginPage />);
+        const input = getByLabelText('Username');
+        fireEvent.change(input, { target: { value: 'valid_username' } });
+        expect(input).toHaveStyle('border-color: `#65a30d');
+
+        // Invalid input
+        fireEvent.change(input, { target: { value: 'invalid-username' } });
+        expect(input).toHaveStyle('border-color: `#ef4444`');
+    });
+});

src/pages/_app.js

@@ -1,5 +1,16 @@
 import '@/styles/global.css';
+import { Footer } from '@/components/Footer/Footer';
+import { Navbar } from '@/components/Navbar/Navbar';
 
 export default function MyApp({ Component, pageProps }) {
-    return <Component {...pageProps} />;
+    return (
+        <div>
+            <title>URL Shortener</title>
+            <Navbar />
+            <div className="bg-gray-900 flex flex-col justify-center items-center h-container">
+                <Component {...pageProps} />
+            </div>
+            <Footer />
+        </div>
+    );
 }

src/pages/dashboard/index.js

@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+import CopyIcon from '../../../public/assets/icons/copy';
+import AddIcon from '../../../public/assets/icons/add';
+import ReloadIcon from '../../../public/assets/icons/reload';
+
+const Dashboard = () => {
+    const [url, getUrl] = useState('');
+    const [shortUrl, setUrl] = useState('');
+
+    function generateRandomString() {
+        const randomString = Math.random().toString(36).substring(2, 7);
+        return randomString;
+    }
+
+    return (
+        <div className="flex flex-col justify-center items-center space-y-4 w-[90%] max-w-3xl md:w-[80%] lg:w-[80%] h-screen">
+            <h1 className="text-4xl text-white font-semibold">URL Shortener</h1>
+            <div className="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-1 m-4 w-[100%]">
+                <input
+                    type="text"
+                    placeholder="Enter the URL"
+                    className="w-full md:w-[80%] bg-gray-200 md:rounded-l-2xl p-4 md:rounded-none"
+                    value={url}
+                    onChange={(e) => {
+                        getUrl(e.target.value);
+                    }}
+                />
+                <button
+                    className="w-full md:w-auto bg-gray-200 md:rounded-r-2xl px-4 md:px-8 py-4 hover:bg-gray-300 mt-2 md:mt-0 md:rounded-none"
+                    onClick={() => {
+                        const randomString = generateRandomString();
+                        setUrl(`https://rds.li/${randomString}`);
+                    }}
+                >
+                    Generate
+                </button>
+            </div>
+            <div className="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-1 m-4 w-[98%]">
+                <input
+                    type="text"
+                    placeholder="Copy the URL"
+                    className="w-full md:w-[80%] bg-gray-200 md:rounded-l-2xl p-4 md:rounded-none"
+                    disabled
+                    value={shortUrl}
+                />
+                <div className="flex flex-row justify-center items-center space-x-1">
+                    <button
+                        className="w-full md:w-auto bg-gray-200  px-4 md:px-8 py-3 hover:bg-gray-300 mt-2 md:mt-0 md:rounded-none"
+                        onClick={() => {
+                            const randomString = generateRandomString();
+                            setUrl(`https://rds.li/${randomString}`);
+                        }}
+                    >
+                        <ReloadIcon />
+                    </button>
+                    <button
+                        className="w-full md:w-auto bg-gray-200 px-4 md:px-8 py-3 hover:bg-gray-300 mt-2 md:mt-0 md:rounded-none"
+                        onClick={() => {
+                            setUrl('');
+                        }}
+                    >
+                        <AddIcon />
+                    </button>
+                    <button
+                        className="w-full md:w-auto bg-gray-200 md:rounded-r-2xl px-4 md:px-8 py-3 hover:bg-gray-300 mt-2 md:mt-0 md:rounded-none"
+                        onClick={() => {
+                            navigator.clipboard.writeText(shortUrl);
+                        }}
+                    >
+                        <CopyIcon />
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Dashboard;

src/pages/index.tsx

@@ -1,85 +1,6 @@
-import React, { useState } from 'react';
-import { Footer } from '@/components/Footer/Footer';
-import { Navbar } from '@/components/Navbar/Navbar';
-import CopyIcon from './../../public/assets/icons/copy';
-import AddIcon from './../../public/assets/icons/add';
-import ReloadIcon from './../../public/assets/icons/reload';
+import React from 'react';
+import Dashboard from './dashboard';
 
 export default function Home() {
-    const [url, getUrl] = useState('');
-    const [shortUrl, setUrl] = useState('');
-
-    function generateRandomString() {
-        const randomString = Math.random().toString(36).substring(2, 7);
-        return randomString;
-    }
-
-    return (
-        <div>
-            <title>URL Shortener</title>
-            <Navbar />
-            <div className="bg-gray-900 flex flex-col justify-center items-center h-[86vh]">
-                <div className="flex flex-col justify-center items-center space-y-4 w-[90%] max-w-3xl md:w-[80%] lg:w-[80%]">
-                    <h1 className="text-4xl text-white font-semibold">URL Shortener</h1>
-                    <div className="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-1 m-4 w-[100%]">
-                        <input
-                            type="text"
-                            placeholder="Enter the URL"
-                            className="w-full md:w-[80%] bg-gray-200 md:rounded-l-2xl p-4 md:rounded-none"
-                            value={url}
-                            onChange={(e) => {
-                                getUrl(e.target.value);
-                            }}
-                        />
-                        <button
-                            className="w-full md:w-auto bg-gray-200 md:rounded-r-2xl px-4 md:px-8 py-4 hover:bg-gray-300 mt-2 md:mt-0 md:rounded-none"
-                            onClick={() => {
-                                const randomString = generateRandomString();
-                                setUrl(`https://rds.li/${randomString}`);
-                            }}
-                        >
-                            Generate
-                        </button>
-                    </div>
-                    <div className="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-1 m-4 w-[98%]">
-                        <input
-                            type="text"
-                            placeholder="Copy the URL"
-                            className="w-full md:w-[80%] bg-gray-200 md:rounded-l-2xl p-4 md:rounded-none"
-                            disabled
-                            value={shortUrl}
-                        />
-                        <div className="flex flex-row justify-center items-center space-x-1">
-                            <button
-                                className="w-full md:w-auto bg-gray-200  px-4 md:px-8 py-3 hover:bg-gray-300 mt-2 md:mt-0 md:rounded-none"
-                                onClick={() => {
-                                    const randomString = generateRandomString();
-                                    setUrl(`https://rds.li/${randomString}`);
-                                }}
-                            >
-                                <ReloadIcon />
-                            </button>
-                            <button
-                                className="w-full md:w-auto bg-gray-200 px-4 md:px-8 py-3 hover:bg-gray-300 mt-2 md:mt-0 md:rounded-none"
-                                onClick={() => {
-                                    setUrl('');
-                                }}
-                            >
-                                <AddIcon />
-                            </button>
-                            <button
-                                className="w-full md:w-auto bg-gray-200 md:rounded-r-2xl px-4 md:px-8 py-3 hover:bg-gray-300 mt-2 md:mt-0 md:rounded-none"
-                                onClick={() => {
-                                    navigator.clipboard.writeText(shortUrl);
-                                }}
-                            >
-                                <CopyIcon />
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <Footer />
-        </div>
-    );
+    return <Dashboard />;
 }

src/pages/login/index.js

@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+
+const LoginPage = () => {
+    const [isValid, setIsValid] = useState(null);
+    const handleChange = (event) => {
+        const inputValue = event.target.value;
+        const regex = /^[a-zA-Z0-9_]+$/; // Alphanumeric characters and underscores
+
+        if (regex.test(inputValue)) {
+            setIsValid(true);
+        } else {
+            setIsValid(false);
+        }
+    };
+    return (
+        <div className="flex flex-col w-screen items-center justify-center px-6 py-8 mx-auto h-screen lg:py-0">
+            <div className="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white">
+                URL Shortener
+            </div>
+            <div className="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
+                <div className="p-6 space-y-4 md:space-y-6 sm:p-4">
+                    <form className="space-y-4 md:space-y-6" action="#">
+                        <div>
+                            <label
+                                htmlFor="username"
+                                className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+                            >
+                                Username
+                            </label>
+                            <input
+                                type="text"
+                                name="username"
+                                id="username"
+                                onChange={handleChange}
+                                className={`bg-gray-50  text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 ${
+                                    isValid && 'border-2 border-green-500'
+                                }
+                                ${isValid !== null && !isValid && 'border-2 border-red-500'}`}
+                                placeholder="John_doe"
+                                required={true}
+                            />
+                        </div>
+                        <div>
+                            <label
+                                htmlFor="password"
+                                className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+                            >
+                                Password
+                            </label>
+                            <input
+                                type="password"
+                                name="password"
+                                id="password"
+                                placeholder="••••••••"
+                                className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                                required={true}
+                            />
+                        </div>
+                        <div className="flex items-center justify-between">
+                            <div className="flex items-start">
+                                <div className="flex items-center h-5">
+                                    <input
+                                        id="remember"
+                                        aria-describedby="remember"
+                                        type="checkbox"
+                                        className="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800"
+                                        required=""
+                                    />
+                                </div>
+                                <div className="ml-3 text-sm">
+                                    <label htmlFor="remember" className="text-gray-500 dark:text-gray-300">
+                                        Remember me
+                                    </label>
+                                </div>
+                            </div>
+                            <a
+                                href="#"
+                                className="text-sm font-medium text-gray-500 hover:underline dark:text-primary-500"
+                            >
+                                Forgot password?
+                            </a>
+                        </div>
+                        <button
+                            type="submit"
+                            className="w-full bg-gray-200 hover:bg-gray-300 text-dark focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 text-center "
+                        >
+                            Log in
+                        </button>
+                        <p className="text-sm font-light text-gray-500 dark:text-gray-400">
+                            Don’t have an account yet?{' '}
+                            <a href="#" className="font-medium text-primary-600 hover:underline dark:text-primary-500">
+                                Sign up
+                            </a>
+                        </p>
+                    </form>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default LoginPage;

src/styles/global.css

@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.h-container {
+    height: calc(100vh - (82px + 6vh));
+}