andyburke/autonomous.contact
1
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: switch how tabs work in an effort to make downstream stuff

Browse source 
easier
This commit is contained in:
Andy Burke 2026-02-23 11:49:23 -08:00
parent 7c4649924e
commit 873773bc91
14 changed files with 846 additions and 947 deletions
Download patch file Download diff file Expand all files Collapse all files

186
public/signup_login_wall.html
View file

@ -5,7 +5,7 @@
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
position: fixed;
top: 0;
left: 0;
right: 0;
@ -18,13 +18,11 @@
#auth-container {
width: 95%;
min-height: 25rem;
position: relative;
background: hsl(from var(--bg) h s calc(l/1.1) / 0.5);
max-width: 40em;
margin: 0 auto;
border-radius: calc( var(--border-radius) * 2);
overflow: hidden;
transition: all 0.33s ease;
animation: zoomsettle 0.4s ease;
@ -41,15 +39,6 @@
}
}
#login-tab .tab-content {
min-height: 17rem;
overflow: hidden;
}
#signup-tab .tab-content {
min-height: 21rem;
}
body[data-user] #signup-login-wall {
visibility: hidden;
opacity: 0;
@ -58,7 +47,7 @@
#signup-login-wall form {
width: 100%;
padding: 1.5rem 1.5rem 0 1.5rem;
padding: 0.5rem 1.5rem 0;
}
</style>
@ -66,96 +55,93 @@
<!-- #include "./files/settings/signup_pitch.html" or "./files/settings/signup_pitch.md" or "./signup_pitch.default.md" -->
<div class="tabs">
<div id="signup-tab" class="tab">
<input
type="radio"
name="signup-login-tabs"
id="signup-tab-input"
class="tab-switch"
checked="checked"
/>
<label for="signup-tab-input" class="tab-label">
<div class="label">Sign Up</div>
</label>
<div class="tab-content">
<form data-smart="true" data-method="POST" id="signup-form" action="/api/users">
<input
type="radio"
name="signup-login-tabs"
id="signup-tab-input"
class="tabswitch"
checked="checked"
/>
<label for="signup-tab-input" class="tablabel">
<div class="label">Sign Up</div>
</label>
<div id="signup-tab" class="panel">
<form data-smart="true" data-method="POST" id="signup-form" action="/api/users">
<script>
{
const form = document.currentScript.closest("form");
form.on_reply = (response) => {
const user = response.user;
APP.login( user );
};
}
</script>
<div>
<input id="signup-username" type="text" name="username" required />
<label class="placeholder" for="signup-username">username</label>
</div>
<div>
<input id="signup-password" type="password" name="password" required />
<label class="placeholder" for="signup-password">password</label>
</div>
<div>
<script>
{
const form = document.currentScript.closest("form");
form.on_reply = (response) => {
const user = response.user;
APP.login( user );
};
}
</script>
<div>
<input id="signup-username" type="text" name="username" required />
<label class="placeholder" for="signup-username">username</label>
</div>
<div>
<input id="signup-password" type="password" name="password" required />
<label class="placeholder" for="signup-password">password</label>
</div>
<div>
<script>
APP.on( 'load', () => {
const query = new URL(document.location.toString())
.searchParams;
const invite_code = query.get("invite_code");
if (typeof invite_code === "string" && invite_code.length) {
document.getElementById("signup-invite-code").value =
decodeURIComponent(invite_code);
APP.on( 'load', () => {
const query = new URL(document.location.toString())
.searchParams;
const invite_code = query.get("invite_code");
if (typeof invite_code === "string" && invite_code.length) {
document.getElementById("signup-invite-code").value =
decodeURIComponent(invite_code);
document.getElementById("signup-tab-input").checked = true;
}
});
</script>
<input
id="signup-invite-code"
type="text"
name="invite_code"
required
/>
<label class="placeholder" for="signup-invite-code">invite code</label>
</div>
<button id="signup-submit" type="submit" class="primary">Sign Up</button>
</form>
</div>
</div>
<div id="login-tab" class="tab">
<input
type="radio"
name="signup-login-tabs"
id="login-tab-input"
class="tab-switch"
/>
<label for="login-tab-input" class="tab-label">
<div class="label">Log In</div>
</label>
<div class="tab-content">
<form data-smart="true" data-method="POST" id="login-form" action="/api/auth">
<script>
{
const form = document.currentScript.closest("form");
form.on_reply = (response) => {
const user = response.user;
APP.login( user );
};
}
document.getElementById("signup-tab-input").checked = true;
}
});
</script>
<div>
<input id="login-username" type="text" name="username" required />
<label class="placeholder" for="login-username">username</label>
</div>
<div>
<input id="login-password" type="password" name="password" required />
<label class="placeholder" for="login-password">password</label>
</div>
<div>
<button id="login-submit" type="submit" class="primary">Log In</button>
</div>
</form>
</div>
<input
id="signup-invite-code"
type="text"
name="invite_code"
required
/>
<label class="placeholder" for="signup-invite-code">invite code</label>
</div>
<button id="signup-submit" type="submit" class="primary">Sign Up</button>
</form>
</div>
<input
type="radio"
name="signup-login-tabs"
id="login-tab-input"
class="tabswitch"
/>
<label for="login-tab-input" class="tablabel">
<div class="label">Log In</div>
</label>
<div id="login-tab" class="panel">
<form data-smart="true" data-method="POST" id="login-form" action="/api/auth">
<script>
{
const form = document.currentScript.closest("form");
form.on_reply = (response) => {
const user = response.user;
APP.login( user );
};
}
</script>
<div>
<input id="login-username" type="text" name="username" required />
<label class="placeholder" for="login-username">username</label>
</div>
<div>
<input id="login-password" type="password" name="password" required />
<label class="placeholder" for="login-password">password</label>
</div>
<div>
<button id="login-submit" type="submit" class="primary">Log In</button>
</div>
</form>
</div>
</div>
</div>