Skip to content

Commit

Permalink
Update Styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@Octo8080X
Octo8080X committed Jan 5, 2024
1 parent 2cf5bb2 commit 2358c93
Show file tree
Hide file tree
Showing 5 changed files with 186 additions and 167 deletions.
84 changes: 43 additions & 41 deletions routesTemplate/create.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,47 +107,49 @@ export function getCreateComponent(
) {
return (
<div style={styles.block}>
<div>
<h2>Custom Create Account</h2>
</div>
<div>
<form action={paths.createPath} method="post">
<input type="hidden" name="csrf" value={state.csrf.getTokenStr()} />
<div style={styles.row}>
{data?.errors?.length > 0 && (
<ul>
{data.errors.map((error) => <li>{error}</li>)}
</ul>
)}
</div>
<div style={styles.row}>
<label for={resourceIdentifierName} style={styles.label}>
{pascalCase(resourceIdentifierName)}
</label>
<input
type="text"
id={resourceIdentifierName}
name={resourceIdentifierName}
style={styles.textbox}
value={data?.identifier}
/>
</div>
<div style={styles.row}>
<label for="password" style={styles.label}>Password</label>
<input
type="password"
id={PASSWORD}
name={PASSWORD}
style={styles.textbox}
/>
</div>
<div style={styles.row}>
<button type="submit" style={styles.button}>CREATE</button>
</div>
</form>
</div>
<div>
<a href={paths.loginPath} style={styles.link}>LOGIN</a>
<div style={styles.container}>
<div style={styles.centering}>
<h2>Custom Create Account</h2>
</div>
<div>
<form action={paths.createPath} method="post">
<input type="hidden" name="csrf" value={state.csrf.getTokenStr()} />
<div style={styles.row}>
{data?.errors?.length > 0 && (
<ul>
{data.errors.map((error) => <li>{error}</li>)}
</ul>
)}
</div>
<div style={styles.row}>
<label for={resourceIdentifierName} style={styles.label}>
{pascalCase(resourceIdentifierName)}
</label>
<input
type="text"
id={resourceIdentifierName}
name={resourceIdentifierName}
style={styles.textbox}
value={data?.identifier}
/>
</div>
<div style={styles.row}>
<label for="password" style={styles.label}>Password</label>
<input
type="password"
id={PASSWORD}
name={PASSWORD}
style={styles.textbox}
/>
</div>
<div style={{...styles.row, ...styles.centering}}>
<button type="submit" style={styles.button}>Create</button>
</div>
</form>
</div>
<div style={styles.centering}>
<a href={paths.loginPath} style={styles.link}>Login</a>
</div>
</div>
</div>
);
Expand Down
84 changes: 43 additions & 41 deletions routesTemplate/login.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,47 +93,49 @@ export function getLoginComponent(
) {
return (
<div style={styles.block}>
<div>
<h2>Custom Login</h2>
</div>
<div>
<form action={paths.loginPath} method="post">
<input type="hidden" name="csrf" value={state.csrf.getTokenStr()} />
<div style={styles.row}>
{data?.errors?.length > 0 && (
<ul>
{data.errors.map((error) => <li>{error}</li>)}
</ul>
)}
</div>
<div style={styles.row}>
<label for={resourceIdentifierName} style={styles.label}>
{pascalCase(resourceIdentifierName)}
</label>
<input
type="text"
id={resourceIdentifierName}
name={resourceIdentifierName}
style={styles.textbox}
value={data?.identifier}
/>
</div>
<div style={styles.row}>
<label for="password" style={styles.label}>Password</label>
<input
type="password"
id={PASSWORD}
name={PASSWORD}
style={styles.textbox}
/>
</div>
<div style={styles.row}>
<button type="submit" style={styles.button}>Login</button>
</div>
</form>
</div>
<div>
<a href={paths.createPath} style={styles.link}>Create Account</a>
<div style={styles.container}>
<div style={styles.centering}>
<h2>Custom Login</h2>
</div>
<div>
<form action={paths.loginPath} method="post">
<input type="hidden" name="csrf" value={state.csrf.getTokenStr()} />
<div style={styles.row}>
{data?.errors?.length > 0 && (
<ul>
{data.errors.map((error) => <li>{error}</li>)}
</ul>
)}
</div>
<div style={styles.row}>
<label for={resourceIdentifierName} style={styles.label}>
{pascalCase(resourceIdentifierName)}
</label>
<input
type="text"
id={resourceIdentifierName}
name={resourceIdentifierName}
style={styles.textbox}
value={data?.identifier}
/>
</div>
<div style={styles.row}>
<label for="password" style={styles.label}>Password</label>
<input
type="password"
id={PASSWORD}
name={PASSWORD}
style={styles.textbox}
/>
</div>
<div style={{...styles.row, ...styles.centering}}>
<button type="submit" style={styles.button}>Login</button>
</div>
</form>
</div>
<div style={styles.centering}>
<a href={paths.createPath} style={styles.link}>Create Account</a>
</div>
</div>
</div>
);
Expand Down
84 changes: 43 additions & 41 deletions src/routes/create.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,47 +106,49 @@ export function getCreateComponent(
) {
return (
<div style={styles.block}>
<div>
<h2>Create Account</h2>
</div>
<div>
<form action={paths.createPath} method="post">
<input type="hidden" name="csrf" value={state.csrf.getTokenStr()} />
<div style={styles.row}>
{data?.errors?.length > 0 && (
<ul>
{data.errors.map((error) => <li>{error}</li>)}
</ul>
)}
</div>
<div style={styles.row}>
<label for={resourceIdentifierName} style={styles.label}>
{pascalCase(resourceIdentifierName)}
</label>
<input
type="text"
id={resourceIdentifierName}
name={resourceIdentifierName}
style={styles.textbox}
value={data?.identifier}
/>
</div>
<div style={styles.row}>
<label for="password" style={styles.label}>Password</label>
<input
type="password"
id={PASSWORD}
name={PASSWORD}
style={styles.textbox}
/>
</div>
<div style={styles.row}>
<button type="submit" style={styles.button}>CREATE</button>
</div>
</form>
</div>
<div>
<a href={paths.loginPath} style={styles.link}>LOGIN</a>
<div style={styles.container}>
<div style={styles.centering}>
<h2>Create Account</h2>
</div>
<div>
<form action={paths.createPath} method="post">
<input type="hidden" name="csrf" value={state.csrf.getTokenStr()} />
<div style={styles.row}>
{data?.errors?.length > 0 && (
<ul>
{data.errors.map((error) => <li>{error}</li>)}
</ul>
)}
</div>
<div style={styles.row}>
<label for={resourceIdentifierName} style={styles.label}>
{pascalCase(resourceIdentifierName)}
</label>
<input
type="text"
id={resourceIdentifierName}
name={resourceIdentifierName}
style={styles.textbox}
value={data?.identifier}
/>
</div>
<div style={styles.row}>
<label for="password" style={styles.label}>Password</label>
<input
type="password"
id={PASSWORD}
name={PASSWORD}
style={styles.textbox}
/>
</div>
<div style={{...styles.row, ...styles.centering}}>
<button type="submit" style={styles.button}>Create</button>
</div>
</form>
</div>
<div style={styles.centering}>
<a href={paths.loginPath} style={styles.link}>Login</a>
</div>
</div>
</div>
);
Expand Down
84 changes: 43 additions & 41 deletions src/routes/login.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,47 +92,49 @@ export function getLoginComponent(
) {
return (
<div style={styles.block}>
<div>
<h2>Login</h2>
</div>
<div>
<form action={paths.loginPath} method="post">
<input type="hidden" name="csrf" value={state.csrf.getTokenStr()} />
<div style={styles.row}>
{data?.errors?.length > 0 && (
<ul>
{data.errors.map((error) => <li>{error}</li>)}
</ul>
)}
</div>
<div style={styles.row}>
<label for={resourceIdentifierName} style={styles.label}>
{pascalCase(resourceIdentifierName)}
</label>
<input
type="text"
id={resourceIdentifierName}
name={resourceIdentifierName}
style={styles.textbox}
value={data?.identifier}
/>
</div>
<div style={styles.row}>
<label for="password" style={styles.label}>Password</label>
<input
type="password"
id={PASSWORD}
name={PASSWORD}
style={styles.textbox}
/>
</div>
<div style={styles.row}>
<button type="submit" style={styles.button}>Login</button>
</div>
</form>
</div>
<div>
<a href={paths.createPath} style={styles.link}>Create Account</a>
<div style={styles.container}>
<div style={styles.centering}>
<h2>Login</h2>
</div>
<div>
<form action={paths.loginPath} method="post">
<input type="hidden" name="csrf" value={state.csrf.getTokenStr()} />
<div style={styles.row}>
{data?.errors?.length > 0 && (
<ul>
{data.errors.map((error) => <li>{error}</li>)}
</ul>
)}
</div>
<div style={styles.row}>
<label for={resourceIdentifierName} style={styles.label}>
{pascalCase(resourceIdentifierName)}
</label>
<input
type="text"
id={resourceIdentifierName}
name={resourceIdentifierName}
style={styles.textbox}
value={data?.identifier}
/>
</div>
<div style={styles.row}>
<label for="password" style={styles.label}>Password</label>
<input
type="password"
id={PASSWORD}
name={PASSWORD}
style={styles.textbox}
/>
</div>
<div style={{...styles.row, ...styles.centering}}>
<button type="submit" style={styles.button}>Login</button>
</div>
</form>
</div>
<div style={styles.centering}>
<a href={paths.createPath} style={styles.link}>Create Account</a>
</div>
</div>
</div>
);
Expand Down
17 changes: 14 additions & 3 deletions src/utils/style.ts
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,19 @@
export const styles = {
block: { padding: "10px", backgroundColor: "#EEE" },
block: { display: "block" },
container: {
maxWidth: "300px",
margin: "auto",
backgroundColor: "#EEE",
padding: "10px",
position: "absolute",
top: "40%",
left: "50%",
transform: "translate(-50%, -40%)"
},
row: { marginBottom: "5px" },
label: { float: "left", width: "100px" },
textbox: { border: "1px solid #CCC", borderRadius: "4px" },
button: { border: "1px solid #CCC", borderRadius: "4px", padding: "2px" },
textbox: { border: "1px solid #CCC", borderRadius: "4px" },
button: { border: "1px solid #CCC", borderRadius: "4px", paddingTop: "4px", paddingBottom: "4px", paddingRight: "12px", paddingLeft: "12px", },
link: { color: "#88D", textDecoration: "underline" },
centering: { textAlign: "center" },
};

0 comments on commit 2358c93

Please sign in to comment.