rushilwiz/compass
1
0
Fork 0
mirror of https://github.com/cssgunc/compass.git synced 2025-04-06 20:50:17 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Basic api handling

Browse Source
This commit is contained in:
pmoharana-cmd 2024-04-23 09:40:03 -04:00
parent c71d5d4026
commit 3fd0a545e7
3 changed files with 91 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
compass/.gitignore vendored
View File

@ -33,3 +33,6 @@ yarn-error.log*
# typescript # typescript
*.tsbuildinfo *.tsbuildinfo
next-env.d.ts next-env.d.ts
# environment variables
.env

9
compass/app/api/health/route.ts Normal file
View File

@ -0,0 +1,9 @@
import { NextResponse } from "next/server";
interface ResponseData {
message: string;
}
export async function GET() {
return NextResponse.json({ message: "Hello World!" }, { status: 200 });
}

151
compass/app/page.tsx
View File

@ -1,86 +1,93 @@
// pages/index.tsx // pages/index.tsx
"use client"; "use client";
import Button from '@/components/Button'; import Button from "@/components/Button";
import Input from '@/components/Input' import Input from "@/components/Input";
import InlineLink from '@/components/InlineLink'; import InlineLink from "@/components/InlineLink";
import Paper from '@/components/auth/Paper'; import Paper from "@/components/auth/Paper";
// import { Metadata } from 'next' // import { Metadata } from 'next'
import Image from 'next/image'; import Image from "next/image";
import {ChangeEvent, useState} from "react"; import { ChangeEvent, useState } from "react";
// export const metadata: Metadata = { // export const metadata: Metadata = {
// title: 'Login', // title: 'Login',
// } // }
export default function Page() { export default function Page() {
const [email, setEmail] = useState(""); const [email, setEmail] = useState("");
const [password, setPassword] = useState(""); const [password, setPassword] = useState("");
const [error, setError] = useState(""); const [error, setError] = useState("");
const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => { const testFetch = () => {
setEmail(event.currentTarget.value); const result = fetch("/api/health");
console.log("email " + email); console.log(result);
};
const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setEmail(event.currentTarget.value);
console.log("email " + email);
};
const handlePasswordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setPassword(event.currentTarget.value);
console.log("password " + password);
};
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
event.preventDefault();
// Priority: Incorrect combo > Missing email > Missing password
if (password.trim().length === 0) {
setError("Please enter your password.");
} }
// This shouldn't happen, <input type="email"> already provides validation, but just in case.
const handlePasswordChange = (event: React.ChangeEvent<HTMLInputElement>) => { if (email.trim().length === 0) {
setPassword(event.currentTarget.value); setError("Please enter your email.");
console.log("password " + password)
} }
// Placeholder for incorrect email + password combo.
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => { if (email === "incorrect@gmail.com" && password) {
event.preventDefault(); setError("Incorrect password.");
// Priority: Incorrect combo > Missing email > Missing password
if (password.trim().length === 0) {
setError("Please enter your password.")
}
// This shouldn't happen, <input type="email"> already provides validation, but just in case.
if (email.trim().length === 0) {
setError("Please enter your email.")
}
// Placeholder for incorrect email + password combo.
if (email === "incorrect@gmail.com" && password) {
setError("Incorrect password.")
}
} }
};
return (
<>
return ( <Paper>
<> <form className="mb-0 m-auto mt-6 space-y-4 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8 bg-white max-w-xl">
<Paper> <Image
<form className="mb-0 m-auto mt-6 space-y-4 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8 bg-white max-w-xl"> src="/logo.png"
<Image alt="Compass Center logo."
src="/logo.png" width={100}
alt='Compass Center logo.' height={91}
width={100} />
height={91} <h1 className="font-bold text-xl text-purple-800">Login</h1>
/> <div className="mb-4">
<h1 className='font-bold text-xl text-purple-800'>Login</h1> <Input
<div className="mb-4"> type="email"
<Input type='email' title="Email" placeholder="janedoe@gmail.com" onChange={handleEmailChange} /> title="Email"
</div> placeholder="janedoe@gmail.com"
<div className="mb-6"> onChange={handleEmailChange}
<Input type='password' title="Password" onChange={handlePasswordChange} /> />
</div> </div>
<div className="flex flex-col items-left space-y-4"> <div className="mb-6">
<InlineLink href="/forgot_password"> <Input
Forgot password? type="password"
</InlineLink> title="Password"
<Button onClick={handleClick}> onChange={handlePasswordChange}
Login />
</Button> </div>
<div className="text-center text-red-600" hidden={!error}> <div className="flex flex-col items-left space-y-4">
<p>{error}</p> <InlineLink href="/forgot_password">Forgot password?</InlineLink>
</div> <Button onClick={handleClick}>Login</Button>
<div className="text-center text-red-600" hidden={!error}>
</div> <p>{error}</p>
</form> </div>
<p className="text-center mt-6 text-gray-500 text-xs"> </div>
&copy; 2024 Compass Center </form>
</p> <p className="text-center mt-6 text-gray-500 text-xs">
</Paper> &copy; 2024 Compass Center
</> </p>
); </Paper>
}; </>
);
}