登录而不离开

2026年9月7日 authdesignsvelte

小质量生活改变今天。直到现在,点击日志在发送你去一个分离的登录页面,这意味着丢失你的地方在无论什么你正在读。日志在一个帖子的中途因为你想评论,而且网站在后来扔了你回到前页。粗鲁,诚实地。

所以登录而且注册现在在页面上打开在一个小对话框。日志在,盒子关闭,侧边栏翻转到你的账户,而且帖子你正在读没有移动像素。对话框是同样的磨砂玻璃作为网站的其余,所以它看起来像它成长了出来的页面而不是被订对上。

The login dialog open over the front page, frosted like the rest of the site

部分我最关心的是什么没有改变。完整的登录而且注册页面仍然存在而且仍然工作。侧边栏链接保持他们的真实地址,而且一点脚本只是拦截点击在对话框中打开。没脚本,没对话框,而且一切表现像在之前。同样的对于实际登录逻辑:对话框有没登录代码它自己,它提交给确切的相同服务器动作满页面使用。一个登录实现,两个前门。

有趣的皱纹是什么发生在成功。服务器回答一个成功登录与一个重定向,因为那是什么满页面需要。但对话框必须不跟随它,跟随它是确切的行为我移除。所以对话框的提交处理器抓住结果而且,在重定向,把它作为成功信号而不是一个目的地:

return async ({ result }: { result: ActionResult }) => {
    if (result.type === 'redirect') {
        open = false;
        await invalidateAll();
        return;
    }
    if (result.type === 'failure') {
        loginResult = result.data as typeof loginResult;
    }
};

invalidateAll是什么使侧边栏更新到位:它告诉应用重新读一切它知道,包括谁登录了,没导航任何地方。错误密码停留在盒子里也,与错误显示内联,所以一个打字不花费你的读位置。

错误值得承认来自在审查:我的点击处理器抓住每点击在登录链接,包括ctrl-点击以及中间-点击。有人谁ctrl-点击链接正在说开这个在一个新标签,而劫持那进对话框在当前页面是那小的不敬意那制造一个网站感觉关闭。处理器现在步骤旁边对于任何修改或非主要点击以及让浏览器做确切被问的。

细节那重要但没一个将注意:它是一个当地对话框元素,所以逃脱关闭它为自由,点击昏暗的背景关闭它,焦点移进盒子当它打开而且回到打开它的链接当它关闭。而且每字符串在它存在在所有三个语言,因为那是规则现在的房子。

一个更多的错误为诚实帐户:第一个版本打开盒子在页面的顶部左边角而不是中心。一个对话框元素中心它自己出的盒子,但那网站的CSS重置零所有边距,而那安静杀了浏览器的自己的边距自动中心。一个规则在共享对话框组件带回了它,为这对话框以及每其他一个在网站。

小功能,一个晚上,而且网站停止投掷人出他们的读为问谁他们是。

0 条评论

登录 后即可评论。

登录

忘记密码?

还没有账号?