Skip to content

Commit

Permalink
Stub out login page.
Browse files Browse the repository at this point in the history
  • Loading branch information
timothy-b committed Nov 14, 2024
1 parent e954439 commit c24ae06
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 0 deletions.
2 changes: 2 additions & 0 deletions packages/client2/src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { h, render } from 'preact';
import { LocationProvider, Route, Router } from 'preact-iso';
import { Header } from './components/Header.jsx';
import { Home } from './pages/Home/index.jsx';
import { Login } from './pages/Login/Login';
import { Status } from './pages/Status/Status';
import { NotFound } from './pages/_404.jsx';
import './style.css';
Expand All @@ -17,6 +18,7 @@ export function App() {
<main>
<Router>
<Route path="/" component={Home} />
<Route path="/login" component={Login} />
<Route path="/status" component={Status} />
<Route default component={NotFound} />
</Router>
Expand Down
61 changes: 61 additions & 0 deletions packages/client2/src/pages/Login/Login.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import { styled } from "goober";
import type { FunctionalComponent, h } from "preact";
import { useCallback, useState } from "preact/hooks";

const LoginContainer = styled('div')`
display: flex;
flex-direction: column;
align-items: center;
`;

interface ILogin {
onSuccess?: () => void;
onFail?: () => void;
}

// TODO: wire up auth
export const Login: FunctionalComponent<ILogin> = ({ onSuccess, onFail }) => {
//const { setAuthHeader } = useContext(authContext);

const [username, setUsername] = useState<string>('');
const [password, setPassword] = useState<string>('');

const handleUsernameChange: h.JSX.GenericEventHandler<HTMLInputElement> = useCallback(
(event) => setUsername((event.target as HTMLInputElement).value),
[]
);
const handlePasswordChange: h.JSX.GenericEventHandler<HTMLInputElement> = useCallback(
(event) => setPassword((event.target as HTMLInputElement).value),
[]
);

// const handleSubmit: h.JSX.MouseEventHandler<HTMLButtonElement> = useCallback(async () => {
// // const encoded = Buffer.from(`${username}:${password}`).toString('base64');
// const encoded = btoa(`${username}:${password}`);
// const result = await getConfig(encoded);
// if (!result) {
// return onFail?.();
// }
// setAuthHeader(encoded);
// }, [username, password, onFail, setAuthHeader]);

const handleSubmit: h.JSX.MouseEventHandler<HTMLButtonElement> = useCallback(async () => {
const encoded = btoa(`${username}:${password}`);

console.log(encoded);
}, [username, password, onFail]);

return (
<LoginContainer>
<h1>Login</h1>

<label>Username</label>
<input type="text" onChange={handleUsernameChange} />

<label>Password</label>
<input type="password" onChange={handlePasswordChange} />

<button onClick={handleSubmit}>Submit</button>
</LoginContainer>
);
}
1 change: 1 addition & 0 deletions packages/client2/src/pages/Status/Status.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ const StatusWrapper = styled('div')`
width: 100%;
`;

// TODO: show cool stuff here
export const Status: FunctionalComponent = () => {
return (
<StatusWrapper>
Expand Down

0 comments on commit c24ae06

Please sign in to comment.