Skip to content

Commit bc2b654

Browse files
ddraykoddrayko
committed
style: align account creation flow with new login split layout
1 parent 561068e commit bc2b654

2 files changed

Lines changed: 115 additions & 93 deletions

File tree

‎public/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717

1818
<div id="app"></div>
1919

20-
<script src="/js/app.js?v=5"></script>
21-
<script src="/js/admin.js?v=5"></script>
20+
<script src="/js/app.js?v=6"></script>
21+
<script src="/js/admin.js?v=6"></script>
2222
</body>
2323
</html>

‎public/js/app.js‎

Lines changed: 113 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -690,44 +690,48 @@ function renderLoginPage() {
690690
function renderRegisterPage() {
691691
const app = $('#app');
692692
app.innerHTML = html`
693-
<div class="auth-page">
694-
<div class="auth-card">
695-
<div class="auth-logo">
693+
<div class="login-page">
694+
<div class="login-left">
695+
<div class="login-left-top">
696696
<img src="https://img.zero-host.org/assets/picto.png" alt="ZeroHost" />
697-
<span class="auth-logo-text">Zero<span class="auth-logo-accent">Host</span></span>
697+
<span>| Dashboard</span>
698698
</div>
699-
<h1 class="auth-title">Create account</h1>
700-
<p class="auth-subtitle">Start hosting for free</p>
701-
<form id="register-form">
702-
<div class="auth-error"></div>
703-
<div class="form-group">
704-
<label for="reg-email">Email</label>
705-
<input type="email" id="reg-email" placeholder="your@email.com" required autocomplete="email" />
706-
</div>
707-
<div class="form-group">
708-
<label for="reg-username">Username</label>
709-
<input type="text" id="reg-username" placeholder="myusername" required autocomplete="username" />
710-
</div>
711-
<div class="form-group">
712-
<label for="reg-password">Password</label>
713-
<input type="password" id="reg-password" placeholder="At least 8 characters" required autocomplete="new-password" />
714-
</div>
715-
<div class="consent-group">
716-
<label class="custom-checkbox">
717-
<input type="checkbox" id="reg-rgpd-consent" required />
718-
<span class="checkmark"></span>
719-
</label>
720-
<label for="reg-rgpd-consent">
721-
I agree to the privacy policy and consent to the processing of my personal data (email, username, IP address) for account management purposes. <span style="color:var(--accent-red)">*</span>
722-
</label>
723-
</div>
724-
<button type="submit" class="btn btn-primary btn-full" id="register-btn">
725-
Create Account
726-
</button>
699+
</div>
700+
<div class="login-right">
701+
<div class="login-card">
702+
<h1 class="auth-title">Create account</h1>
703+
<p class="auth-subtitle">Start hosting for free</p>
704+
<form id="register-form">
705+
<div class="auth-error"></div>
706+
<div class="form-group">
707+
<label for="reg-email">Email</label>
708+
<input type="email" id="reg-email" placeholder="your@email.com" required autocomplete="email" />
709+
</div>
710+
<div class="form-group">
711+
<label for="reg-username">Username</label>
712+
<input type="text" id="reg-username" placeholder="myusername" required autocomplete="username" />
713+
</div>
714+
<div class="form-group">
715+
<label for="reg-password">Password</label>
716+
<input type="password" id="reg-password" placeholder="At least 8 characters" required autocomplete="new-password" />
717+
</div>
718+
<div class="consent-group">
719+
<label class="custom-checkbox">
720+
<input type="checkbox" id="reg-rgpd-consent" required />
721+
<span class="checkmark"></span>
722+
</label>
723+
<label for="reg-rgpd-consent">
724+
I agree to the privacy policy and consent to the processing of my personal data (email, username, IP address) for account management purposes. <span style="color:var(--accent-red)">*</span>
725+
</label>
726+
</div>
727+
<button type="submit" class="btn btn-primary btn-full" id="register-btn">
728+
Create Account
729+
</button>
727730
728-
</form>
729-
<div class="auth-footer">
730-
Already have an account? <a href="/login" id="go-login">Sign in</a>
731+
</form>
732+
<div class="auth-footer">
733+
Already have an account? <a href="/login" id="go-login">Sign in</a>
734+
</div>
731735
</div>
732736
</div>
733737
</div>
@@ -918,36 +922,44 @@ async function handleRegister(e) {
918922
async function renderVerifyEmail(token) {
919923
const app = $('#app');
920924
app.innerHTML = html`
921-
<div class="auth-page">
922-
<div class="auth-card" style="text-align:center;">
923-
<div class="auth-logo">
925+
<div class="login-page">
926+
<div class="login-left">
927+
<div class="login-left-top">
924928
<img src="https://img.zero-host.org/assets/picto.png" alt="ZeroHost" />
925-
<span class="auth-logo-text">Zero<span class="auth-logo-accent">Host</span></span>
929+
<span>| Dashboard</span>
926930
</div>
927-
<div style="margin:24px 0 16px;">
928-
<span class="spinner" style="width:48px;height:48px;"></span>
931+
</div>
932+
<div class="login-right">
933+
<div class="login-card" style="text-align:center;">
934+
<div style="margin:0 auto 24px;width:fit-content;">
935+
<span class="spinner" style="width:48px;height:48px;"></span>
936+
</div>
937+
<h1 class="auth-title">Verifying your email...</h1>
929938
</div>
930-
<h1 class="auth-title">Verifying your email...</h1>
931939
</div>
932940
</div>
933941
`;
934942
initIcons();
935943

936944
if (!token) {
937945
app.innerHTML = html`
938-
<div class="auth-page">
939-
<div class="auth-card" style="text-align:center;">
940-
<div class="auth-logo">
946+
<div class="login-page">
947+
<div class="login-left">
948+
<div class="login-left-top">
941949
<img src="https://img.zero-host.org/assets/picto.png" alt="ZeroHost" />
942-
<span class="auth-logo-text">Zero<span class="auth-logo-accent">Host</span></span>
943-
</div>
944-
<div style="margin:24px 0 16px;">
945-
<i data-lucide="x-circle" style="width:48px;height:48px;color:var(--accent-red);"></i>
950+
<span>| Dashboard</span>
946951
</div>
947-
<h1 class="auth-title">Invalid Link</h1>
948-
<p class="auth-subtitle">This verification link is invalid. Please try registering again.</p>
949-
<div style="margin-top:24px;">
950-
<a href="/signup" class="btn btn-primary">Create Account</a>
952+
</div>
953+
<div class="login-right">
954+
<div class="login-card" style="text-align:center;">
955+
<div style="margin:0 auto 24px;width:fit-content;">
956+
<i data-lucide="x-circle" style="width:48px;height:48px;color:var(--accent-red);"></i>
957+
</div>
958+
<h1 class="auth-title">Invalid Link</h1>
959+
<p class="auth-subtitle">This verification link is invalid. Please try registering again.</p>
960+
<div style="margin-top:24px;">
961+
<a href="/signup" class="btn btn-primary">Create Account</a>
962+
</div>
951963
</div>
952964
</div>
953965
</div>
@@ -961,19 +973,23 @@ async function renderVerifyEmail(token) {
961973

962974
if (data.alreadyVerified) {
963975
app.innerHTML = html`
964-
<div class="auth-page">
965-
<div class="auth-card" style="text-align:center;">
966-
<div class="auth-logo">
976+
<div class="login-page">
977+
<div class="login-left">
978+
<div class="login-left-top">
967979
<img src="https://img.zero-host.org/assets/picto.png" alt="ZeroHost" />
968-
<span class="auth-logo-text">Zero<span class="auth-logo-accent">Host</span></span>
980+
<span>| Dashboard</span>
969981
</div>
970-
<div style="margin:24px 0 16px;">
971-
<i data-lucide="check-circle" style="width:48px;height:48px;color:var(--accent-green);"></i>
972-
</div>
973-
<h1 class="auth-title">Already Verified</h1>
974-
<p class="auth-subtitle">Your email was already verified. You can sign in below.</p>
975-
<div style="margin-top:24px;">
976-
<a href="/login" class="btn btn-primary">Sign In</a>
982+
</div>
983+
<div class="login-right">
984+
<div class="login-card" style="text-align:center;">
985+
<div style="margin:0 auto 24px;width:fit-content;">
986+
<i data-lucide="check-circle" style="width:48px;height:48px;color:var(--accent-green);"></i>
987+
</div>
988+
<h1 class="auth-title">Already Verified</h1>
989+
<p class="auth-subtitle">Your email was already verified. You can sign in below.</p>
990+
<div style="margin-top:24px;">
991+
<a href="/login" class="btn btn-primary">Sign In</a>
992+
</div>
977993
</div>
978994
</div>
979995
</div>
@@ -991,19 +1007,23 @@ async function renderVerifyEmail(token) {
9911007
showToast('Email verified successfully!', 'success');
9921008
} catch (err) {
9931009
app.innerHTML = html`
994-
<div class="auth-page">
995-
<div class="auth-card" style="text-align:center;">
996-
<div class="auth-logo">
1010+
<div class="login-page">
1011+
<div class="login-left">
1012+
<div class="login-left-top">
9971013
<img src="https://img.zero-host.org/assets/picto.png" alt="ZeroHost" />
998-
<span class="auth-logo-text">Zero<span class="auth-logo-accent">Host</span></span>
999-
</div>
1000-
<div style="margin:24px 0 16px;">
1001-
<i data-lucide="x-circle" style="width:48px;height:48px;color:var(--accent-red);"></i>
1014+
<span>| Dashboard</span>
10021015
</div>
1003-
<h1 class="auth-title">Verification Failed</h1>
1004-
<p class="auth-subtitle">${escapeHtml(err.message)}</p>
1005-
<div style="margin-top:24px;">
1006-
<a href="/signup" class="btn btn-primary">Create Account</a>
1016+
</div>
1017+
<div class="login-right">
1018+
<div class="login-card" style="text-align:center;">
1019+
<div style="margin:0 auto 24px;width:fit-content;">
1020+
<i data-lucide="x-circle" style="width:48px;height:48px;color:var(--accent-red);"></i>
1021+
</div>
1022+
<h1 class="auth-title">Verification Failed</h1>
1023+
<p class="auth-subtitle">${escapeHtml(err.message)}</p>
1024+
<div style="margin-top:24px;">
1025+
<a href="/signup" class="btn btn-primary">Create Account</a>
1026+
</div>
10071027
</div>
10081028
</div>
10091029
</div>
@@ -1185,25 +1205,27 @@ async function renderChangeEmailVerify(token) {
11851205
function renderVerificationSent(email) {
11861206
const app = $('#app');
11871207
app.innerHTML = html`
1188-
<div class="auth-page">
1189-
<div class="auth-card" style="text-align:center;">
1190-
<div class="auth-logo">
1208+
<div class="login-page">
1209+
<div class="login-left">
1210+
<div class="login-left-top">
11911211
<img src="https://img.zero-host.org/assets/picto.png" alt="ZeroHost" />
1192-
<span class="auth-logo-text">Zero<span class="auth-logo-accent">Host</span></span>
1193-
</div>
1194-
<div style="margin:24px 0 16px;">
1195-
<i data-lucide="mail-check" style="width:48px;height:48px;color:var(--accent-orange);"></i>
1212+
<span>| Dashboard</span>
11961213
</div>
1197-
<h1 class="auth-title">Check your inbox</h1>
1198-
<p class="auth-subtitle" style="max-width:360px;margin:0 auto;">
1199-
We sent a verification email to <strong>${escapeHtml(email)}</strong>.
1200-
Click the link in the email to activate your account.
1201-
</p>
1202-
<div style="margin-top:8px;">
1214+
</div>
1215+
<div class="login-right">
1216+
<div class="login-card" style="text-align:center;">
1217+
<div style="margin:0 auto 24px;width:fit-content;">
1218+
<i data-lucide="mail-check" style="width:48px;height:48px;color:var(--accent-orange);"></i>
1219+
</div>
1220+
<h1 class="auth-title">Check your inbox</h1>
1221+
<p class="auth-subtitle" style="max-width:360px;margin:0 auto 8px;">
1222+
We sent a verification email to <strong>${escapeHtml(email)}</strong>.
1223+
Click the link in the email to activate your account.
1224+
</p>
12031225
<p style="font-size:0.8rem;color:var(--text-muted);">Can't find it? Check your spam folder.</p>
1204-
</div>
1205-
<div style="margin-top:24px;">
1206-
<a href="/login" class="btn btn-primary" id="go-to-login-after-register">Go to Sign In</a>
1226+
<div style="margin-top:24px;">
1227+
<a href="/login" class="btn btn-primary" id="go-to-login-after-register">Go to Sign In</a>
1228+
</div>
12071229
</div>
12081230
</div>
12091231
</div>

0 commit comments

Comments
 (0)