fix auth registration and access management ui
This commit is contained in:
lix-2026
@@ -24,7 +24,7 @@ pub fn AuthPage() -> impl IntoView {
|
||||
<input type="hidden" name="action" value="auth:signIn" />
|
||||
<input type="hidden" name="provider" value="password" />
|
||||
<input type="hidden" name="flow" value="signIn" data-auth-flow />
|
||||
<label class="mnote-auth-field">
|
||||
<label class="mnote-auth-field" data-auth-field="account">
|
||||
<span data-auth-account-label>"邮箱或用户名"</span>
|
||||
<input
|
||||
id="account"
|
||||
@@ -35,6 +35,28 @@ pub fn AuthPage() -> impl IntoView {
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<label class="mnote-auth-field" data-auth-field="email" hidden>
|
||||
<span>"邮箱"</span>
|
||||
<input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
autocomplete="email"
|
||||
placeholder="请输入邮箱"
|
||||
/>
|
||||
</label>
|
||||
<label class="mnote-auth-field" data-auth-field="username" hidden>
|
||||
<span>"用户名"</span>
|
||||
<input
|
||||
id="username"
|
||||
name="username"
|
||||
type="text"
|
||||
autocomplete="username"
|
||||
placeholder="请输入用户名"
|
||||
minlength="2"
|
||||
maxlength="32"
|
||||
/>
|
||||
</label>
|
||||
<label class="mnote-auth-field">
|
||||
<span>"密码"</span>
|
||||
<input
|
||||
@@ -76,6 +98,11 @@ const AUTH_SCRIPT: &str = r#"
|
||||
var form = root.querySelector('form[data-auth-mode="convex-password"]');
|
||||
var flowInput = root.querySelector('[data-auth-flow]');
|
||||
var accountInput = root.querySelector('#account');
|
||||
var emailInput = root.querySelector('#email');
|
||||
var usernameInput = root.querySelector('#username');
|
||||
var accountField = root.querySelector('[data-auth-field="account"]');
|
||||
var emailField = root.querySelector('[data-auth-field="email"]');
|
||||
var usernameField = root.querySelector('[data-auth-field="username"]');
|
||||
var accountLabel = root.querySelector('[data-auth-account-label]');
|
||||
var title = root.querySelector('#mnote-auth-title');
|
||||
var subtitle = root.querySelector('.mnote-auth-heading p');
|
||||
@@ -104,10 +131,20 @@ const AUTH_SCRIPT: &str = r#"
|
||||
if (subtitle) subtitle.textContent = isSignUp ? '创建账号后进入你的工作区' : '登录后进入你的工作区';
|
||||
submit.textContent = isSignUp ? '注册并登录' : '登录';
|
||||
switcher.textContent = isSignUp ? '已有账号？登录' : '没有账号？注册';
|
||||
if (accountLabel) accountLabel.textContent = isSignUp ? '邮箱' : '邮箱或用户名';
|
||||
if (accountLabel) accountLabel.textContent = '邮箱或用户名';
|
||||
if (accountField) accountField.hidden = isSignUp;
|
||||
if (emailField) emailField.hidden = !isSignUp;
|
||||
if (usernameField) usernameField.hidden = !isSignUp;
|
||||
if (accountInput) {
|
||||
accountInput.placeholder = isSignUp ? '请输入邮箱' : '请输入邮箱或用户名';
|
||||
accountInput.autocomplete = isSignUp ? 'email' : 'username';
|
||||
accountInput.required = !isSignUp;
|
||||
accountInput.placeholder = '请输入邮箱或用户名';
|
||||
accountInput.autocomplete = 'username';
|
||||
}
|
||||
if (emailInput) {
|
||||
emailInput.required = isSignUp;
|
||||
}
|
||||
if (usernameInput) {
|
||||
usernameInput.required = isSignUp;
|
||||
}
|
||||
quickLogin.hidden = isSignUp;
|
||||
var passwordInput = root.querySelector('#password');
|
||||
@@ -115,69 +152,42 @@ const AUTH_SCRIPT: &str = r#"
|
||||
setMessage('', '');
|
||||
}
|
||||
|
||||
function accountMap() {
|
||||
try {
|
||||
return JSON.parse(window.localStorage.getItem('mnote.auth.accountEmailByName') || '{}') || {};
|
||||
} catch (_) {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
function rememberAccount(email, name) {
|
||||
var normalizedEmail = String(email || '').trim();
|
||||
var normalizedName = String(name || '').trim();
|
||||
if (!normalizedEmail || !normalizedName || normalizedName.indexOf('@') !== -1) return;
|
||||
try {
|
||||
var map = accountMap();
|
||||
map[normalizedName.toLowerCase()] = normalizedEmail;
|
||||
window.localStorage.setItem('mnote.auth.accountEmailByName', JSON.stringify(map));
|
||||
} catch (_) {}
|
||||
}
|
||||
|
||||
function resolveAccountEmail(account) {
|
||||
var normalized = String(account || '').trim();
|
||||
if (normalized.indexOf('@') !== -1) return normalized;
|
||||
var mapped = accountMap()[normalized.toLowerCase()];
|
||||
return String(mapped || normalized).trim();
|
||||
}
|
||||
|
||||
function defaultNameFromEmail(email) {
|
||||
return String(email || '').split('@')[0].trim();
|
||||
}
|
||||
|
||||
function buildPayload(flow, account, password) {
|
||||
var email = flow === 'signIn' ? resolveAccountEmail(account) : String(account || '').trim();
|
||||
var name = defaultNameFromEmail(email);
|
||||
function buildPayload(flow, values) {
|
||||
var accountValue = String(values.account || '').trim();
|
||||
var emailValue = String(values.email || '').trim();
|
||||
var usernameValue = String(values.username || '').trim();
|
||||
var payload = {
|
||||
action: 'auth:signIn',
|
||||
args: {
|
||||
provider: 'password',
|
||||
params: {
|
||||
email: email,
|
||||
password: password,
|
||||
password: values.password,
|
||||
flow: flow
|
||||
}
|
||||
}
|
||||
};
|
||||
if (name) {
|
||||
payload.args.params.name = name;
|
||||
if (flow === 'signUp') {
|
||||
payload.args.params.email = emailValue;
|
||||
payload.args.params.name = usernameValue;
|
||||
} else {
|
||||
payload.args.params.account = accountValue;
|
||||
if (accountValue.indexOf('@') !== -1) payload.args.params.email = accountValue;
|
||||
if (accountValue) payload.args.params.name = accountValue.indexOf('@') === -1 ? accountValue : accountValue.split('@')[0];
|
||||
}
|
||||
return payload;
|
||||
}
|
||||
|
||||
async function requestAuth(flow, account, password) {
|
||||
async function requestAuth(flow, values) {
|
||||
var response = await fetch('/api/auth', {
|
||||
method: 'POST',
|
||||
headers: { 'content-type': 'application/json' },
|
||||
credentials: 'include',
|
||||
body: JSON.stringify(buildPayload(flow, account, password))
|
||||
body: JSON.stringify(buildPayload(flow, values))
|
||||
});
|
||||
var data = await response.json().catch(function () { return {}; });
|
||||
if (!response.ok || data.error) {
|
||||
throw new Error(data.error || '登录失败，请重试');
|
||||
}
|
||||
var params = buildPayload(flow, account, password).args.params;
|
||||
rememberAccount(params.email, params.name);
|
||||
return data;
|
||||
}
|
||||
|
||||
@@ -188,20 +198,18 @@ const AUTH_SCRIPT: &str = r#"
|
||||
form.addEventListener('submit', async function (event) {
|
||||
event.preventDefault();
|
||||
var account = String((accountInput || {}).value || '').trim();
|
||||
var email = String((emailInput || {}).value || '').trim();
|
||||
var username = String((usernameInput || {}).value || '').trim();
|
||||
var password = String((root.querySelector('#password') || {}).value || '');
|
||||
var flow = flowInput.value === 'signUp' ? 'signUp' : 'signIn';
|
||||
if (!account || !password) {
|
||||
if ((flow === 'signIn' && !account) || (flow === 'signUp' && (!email || !username)) || !password) {
|
||||
setMessage('请完整填写信息', 'error');
|
||||
return;
|
||||
}
|
||||
if (flow === 'signUp' && account.indexOf('@') === -1) {
|
||||
setMessage('注册时请填写邮箱；登录时可输入邮箱或已记住的用户名', 'error');
|
||||
return;
|
||||
}
|
||||
setBusy(true);
|
||||
setMessage(flow === 'signUp' ? '正在创建账号...' : '正在登录...', 'info');
|
||||
try {
|
||||
await requestAuth(flow, account, password);
|
||||
await requestAuth(flow, { account: account, email: email, username: username, password: password });
|
||||
setMessage('登录成功，正在进入工作区...', 'success');
|
||||
window.location.assign('/');
|
||||
} catch (error) {
|
||||
@@ -226,8 +234,7 @@ const AUTH_SCRIPT: &str = r#"
|
||||
setBusy(true);
|
||||
setMessage('正在登录测试账号...', 'info');
|
||||
try {
|
||||
await requestAuth('signIn', email, password);
|
||||
rememberAccount(email, username);
|
||||
await requestAuth('signIn', { account: email, password: password });
|
||||
setMessage('登录成功，正在进入工作区...', 'success');
|
||||
window.location.assign('/');
|
||||
return;
|
||||
@@ -236,8 +243,7 @@ const AUTH_SCRIPT: &str = r#"
|
||||
}
|
||||
|
||||
try {
|
||||
await requestAuth('signUp', email, password);
|
||||
rememberAccount(email, username);
|
||||
await requestAuth('signUp', { email: email, username: username, password: password });
|
||||
setMessage('测试账号已创建，正在进入工作区...', 'success');
|
||||
window.location.assign('/');
|
||||
} catch (error) {
|
||||
|
||||
Reference in New Issue
Block a user