Skip to content

Commit 78b03fe

Browse files
Spl0itableSpl0itable
committed
login UI
1 parent 5888fb2 commit 78b03fe

5 files changed

Lines changed: 193 additions & 123 deletions

File tree

‎css/no-inline.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,8 @@ html .nm-hidden { display: none; }
9696
.nm-h-78 { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--text-dim); }
9797
.nm-h-79 { accent-color: var(--primary); cursor: pointer; }
9898
.nm-h-80 { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--text-dim); margin-top: 6px; margin-left: 20px; }
99+
.nm-h-81 { margin: 40px auto 20px; }
100+
.nm-h-82 { flex: 0 1 auto; }
99101

100102
/* app.js */
101103
.nm-app-1 { padding: 8px 12px; color: var(--text-dim); }

‎css/styles-components.css‎

Lines changed: 42 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,6 @@ html.nym-needs-setup #setupModal {
66
display: flex;
77
}
88

9-
#nostrLoginModal {
10-
z-index: 10002;
11-
}
12-
139
#devNsecModal {
1410
z-index: 10002;
1511
}
@@ -88,6 +84,48 @@ html.nym-needs-setup #setupModal {
8884
text-align: center;
8985
}
9086

87+
.setup-tabs {
88+
display: flex;
89+
gap: 4px;
90+
margin-bottom: 20px;
91+
border-bottom: 1px solid var(--glass-border);
92+
}
93+
94+
.setup-tab {
95+
flex: 1;
96+
padding: 12px 10px;
97+
background: none;
98+
border: none;
99+
border-radius: var(--radius-xs) var(--radius-xs) 0 0;
100+
color: var(--text-dim);
101+
cursor: pointer;
102+
transition: all var(--transition);
103+
position: relative;
104+
font-family: var(--font-sans);
105+
font-size: 14px;
106+
font-weight: 500;
107+
}
108+
109+
.setup-tab:hover {
110+
color: var(--text);
111+
}
112+
113+
.setup-tab.active {
114+
color: var(--primary);
115+
background: rgb(from var(--primary) r g b / 0.06);
116+
}
117+
118+
.setup-tab.active::after {
119+
content: '';
120+
position: absolute;
121+
bottom: -1px;
122+
left: 0;
123+
right: 0;
124+
height: 2px;
125+
background: var(--primary);
126+
border-radius: 2px 2px 0 0;
127+
}
128+
91129
.modal-close {
92130
position: absolute;
93131
top: 14px;

‎index.html‎

Lines changed: 76 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1013,79 +1013,6 @@ <h2>Report User/Content</h2>
10131013
</div>
10141014
</div>
10151015

1016-
<!-- Nostr Login Modal (easter egg via ASCII art click) -->
1017-
<div class="modal" id="nostrLoginModal">
1018-
<div class="modal-content nm-h-1">
1019-
<button class="modal-close" data-action="nostrLoginCloseAndCancel">&#x2715;</button>
1020-
<div class="modal-header">Login with Nostr</div>
1021-
<div class="modal-body">
1022-
<div class="nm-h-21">
1023-
Login with your Nostr identity to sync settings across devices.
1024-
</div>
1025-
1026-
<!-- Browser Extension Option (hidden for NymchatApp shell) -->
1027-
<div id="nostrLoginExtensionOption" class="nm-h-22">
1028-
<button class="send-btn nm-h-23" id="nostrLoginExtensionBtn" data-action="nostrLoginWithExtension">
1029-
Login with Browser Extension
1030-
</button>
1031-
<div class="form-hint nm-h-24">Use Alby, nos2x, or another NIP-07 extension</div>
1032-
</div>
1033-
1034-
<div id="nostrLoginDivider" class="nm-h-25">
1035-
or
1036-
</div>
1037-
1038-
<!-- Remote Signer Option (NIP-46 Nostr Connect) -->
1039-
<div id="nostrLoginRemoteSignerOption" class="nm-h-22">
1040-
<button class="send-btn nm-h-23" id="nostrLoginRemoteSignerBtn" data-action="nostrLoginStartRemoteSigner">
1041-
Login with Remote Signer
1042-
</button>
1043-
<div class="form-hint nm-h-24">Use Amber, or another NIP-46 compatible remote signer</div>
1044-
1045-
<!-- Remote signer connection UI (hidden until initiated) -->
1046-
<div id="nostrLoginRemoteSignerConnect" class="nm-hidden nm-h-26">
1047-
<div class="nm-h-27">
1048-
<div id="nostrLoginRemoteSignerStatus" class="nm-h-28">
1049-
Waiting for remote signer...
1050-
</div>
1051-
<div id="nostrLoginRemoteSignerQR" class="nm-h-29"></div>
1052-
</div>
1053-
<div class="form-group nm-h-30">
1054-
<label class="form-label">Connection String</label>
1055-
<div class="nm-h-31">
1056-
<input type="text" class="form-input nm-h-32" id="nostrLoginBunkerURI" readonly>
1057-
<button class="icon-btn nm-h-33" data-action="nostrLoginCopyBunkerURI" title="Copy">Copy</button>
1058-
</div>
1059-
<div class="form-hint">Scan the QR code or copy this connection string into your remote signer app</div>
1060-
</div>
1061-
<div class="nm-h-34">
1062-
<button class="icon-btn nm-h-16" data-action="nostrLoginCancelRemoteSigner">Cancel</button>
1063-
</div>
1064-
</div>
1065-
</div>
1066-
1067-
<div id="nostrLoginDivider2" class="nm-h-25">
1068-
or
1069-
</div>
1070-
1071-
<!-- Paste nsec Option -->
1072-
<div class="form-group nm-h-3">
1073-
<label class="form-label">Paste your nsec</label>
1074-
<input type="password" class="form-input" id="nostrLoginNsecInput" placeholder="nsec1..." autocomplete="off">
1075-
<div id="nostrLoginError" class="nm-hidden nm-h-20"></div>
1076-
<div class="form-hint">Your private key stays local and is never sent to any server</div>
1077-
</div>
1078-
</div>
1079-
<div class="modal-actions">
1080-
<button class="icon-btn" data-action="nostrLoginCloseAndCancel">Cancel</button>
1081-
<button class="send-btn" id="nostrLoginSubmitBtn" data-action="nostrLoginWithNsec">Login</button>
1082-
</div><br/>
1083-
<div class="nm-h-35">
1084-
By logging in, you agree to our <a href="static/tos.html" target="_blank" rel="noopener" class="nm-secondary">Terms of Service</a> and <a href="static/pp.html" target="_blank" rel="noopener" class="nm-secondary">Privacy Policy</a>.
1085-
</div>
1086-
</div>
1087-
</div>
1088-
10891016
<!-- Relay Stats Modal -->
10901017
<div class="modal" id="relayStatsModal">
10911018
<div class="modal-content relay-stats-content">
@@ -1256,6 +1183,7 @@ <h2>Report User/Content</h2>
12561183
<!-- Initial Setup Modal -->
12571184
<div class="modal" id="setupModal">
12581185
<div class="modal-content setup-modal-content">
1186+
<button class="modal-close nm-hidden" id="setupCloseBtn" data-action="closeModal" data-modal-id="setupModal">&#x2715;</button>
12591187
<div class="modal-header setup-modal-header">
12601188
<pre class="logo-ascii setup-logo nm-pointer" data-action="openNostrLogin" title="Login with Nostr">
12611189
##\ ##\
@@ -1273,8 +1201,12 @@ <h2>Report User/Content</h2>
12731201
</div>
12741202
<div class="modal-body">
12751203
<div class="setup-invite-banner nm-hidden" id="setupInviteBanner"></div>
1204+
<div class="setup-tabs" id="setupTabs">
1205+
<button type="button" class="setup-tab active" data-action="switchSetupTab" data-setup-tab="signup">Sign up</button>
1206+
<button type="button" class="setup-tab" data-action="switchSetupTab" data-setup-tab="login">Login</button>
1207+
</div>
1208+
<div class="setup-tab-panel" id="setupSignupPanel">
12761209
<div class="form-group" id="nymGroup">
1277-
<div data-action="openNostrLogin" class="nm-h-50">Login with nsec private key or extension? Click here</div><br/>
12781210
<label class="form-label">Choose Your Nickname <span class="nm-h-2">(optional)</span></label>
12791211
<input type="text" class="form-input" id="nymInput" placeholder="Leave empty for random nickname"
12801212
maxlength="20" data-on-input="updateFieldCharCount" data-char-count="nymInputCharCount">
@@ -1330,11 +1262,79 @@ <h2>Report User/Content</h2>
13301262
<div class="input-char-count" id="setupBioCharCount">0/150</div>
13311263
<div class="form-hint">Short bio shown on your profile (max 150 characters)</div>
13321264
</div>
1265+
</div>
1266+
1267+
<!-- Login panel (switches in place of the sign up fields) -->
1268+
<div class="setup-tab-panel nm-hidden" id="setupLoginPanel">
1269+
<div class="nm-h-21">
1270+
Login with your Nostr identity to sync settings across devices.
1271+
</div>
1272+
1273+
<!-- Browser Extension Option (hidden for NymchatApp shell) -->
1274+
<div id="nostrLoginExtensionOption" class="nm-h-22">
1275+
<button class="send-btn nm-h-23" id="nostrLoginExtensionBtn" data-action="nostrLoginWithExtension">
1276+
Login with Browser Extension
1277+
</button>
1278+
<div class="form-hint nm-h-24">Use Alby, nos2x, or another NIP-07 extension</div>
1279+
</div>
1280+
1281+
<div id="nostrLoginDivider" class="nm-h-25">
1282+
or
1283+
</div>
1284+
1285+
<!-- Remote Signer Option (NIP-46 Nostr Connect) -->
1286+
<div id="nostrLoginRemoteSignerOption" class="nm-h-22">
1287+
<button class="send-btn nm-h-23" id="nostrLoginRemoteSignerBtn" data-action="nostrLoginStartRemoteSigner">
1288+
Login with Remote Signer
1289+
</button>
1290+
<div class="form-hint nm-h-24">Use Amber, or another NIP-46 compatible remote signer</div>
1291+
1292+
<!-- Remote signer connection UI (hidden until initiated) -->
1293+
<div id="nostrLoginRemoteSignerConnect" class="nm-hidden nm-h-26">
1294+
<div class="nm-h-27">
1295+
<div id="nostrLoginRemoteSignerStatus" class="nm-h-28">
1296+
Waiting for remote signer...
1297+
</div>
1298+
<div id="nostrLoginRemoteSignerQR" class="nm-h-29"></div>
1299+
</div>
1300+
<div class="form-group nm-h-30">
1301+
<label class="form-label">Connection String</label>
1302+
<div class="nm-h-31">
1303+
<input type="text" class="form-input nm-h-32" id="nostrLoginBunkerURI" readonly>
1304+
<button class="icon-btn nm-h-33" data-action="nostrLoginCopyBunkerURI" title="Copy">Copy</button>
1305+
</div>
1306+
<div class="form-hint">Scan the QR code or copy this connection string into your remote signer app</div>
1307+
</div>
1308+
<div class="nm-h-34">
1309+
<button class="icon-btn nm-h-16" data-action="nostrLoginCancelRemoteSigner">Cancel</button>
1310+
</div>
1311+
</div>
1312+
</div>
1313+
1314+
<div id="nostrLoginDivider2" class="nm-h-25">
1315+
or
1316+
</div>
1317+
1318+
<!-- Paste nsec Option -->
1319+
<div class="form-group nm-h-3">
1320+
<label class="form-label">Paste your nsec</label>
1321+
<input type="password" class="form-input" id="nostrLoginNsecInput" placeholder="nsec1..." autocomplete="off">
1322+
<div id="nostrLoginError" class="nm-hidden nm-h-20"></div>
1323+
<div class="form-hint">Your private key stays local and is never sent to any server</div>
1324+
</div>
1325+
1326+
<div class="modal-actions nm-h-81">
1327+
<button class="send-btn nm-h-82" id="nostrLoginSubmitBtn" data-action="nostrLoginWithNsec">Login</button>
1328+
</div>
1329+
<div class="nm-h-35">
1330+
By logging in, you agree to our <a href="static/tos.html" target="_blank" rel="noopener" class="nm-secondary">Terms of Service</a> and <a href="static/pp.html" target="_blank" rel="noopener" class="nm-secondary">Privacy Policy</a>.
1331+
</div>
1332+
</div>
13331333
</div>
1334-
<div class="modal-actions nm-h-7">
1334+
<div class="modal-actions nm-h-7" id="setupSignupActions">
13351335
<button class="send-btn" id="enterNymBtn" data-action="initializeNym">Enter</button>
13361336
</div>
1337-
<span class="nm-dim">By entering, you agree to our <a href="static/tos.html"
1337+
<span class="nm-dim" id="setupSignupTos">By entering, you agree to our <a href="static/tos.html"
13381338
target="_blank" rel="noopener" class="nm-secondary">Terms of Service</a> and <a
13391339
href="static/pp.html" target="_blank" rel="noopener" class="nm-secondary">Privacy
13401340
Policy</a>.</span>

0 commit comments

Comments
 (0)