feat: Add client-side login and signup component using Supabase for email/password and Google OAuth authentication.
This commit is contained in:
@@ -1,9 +1,11 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { FormEvent, useEffect, useState } from "react";
|
import { FormEvent, useEffect, useState } from "react";
|
||||||
|
import Link from "next/link";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
import {
|
import {
|
||||||
ArrowRight,
|
ArrowRight,
|
||||||
|
ChevronLeft,
|
||||||
Chrome,
|
Chrome,
|
||||||
Cloud,
|
Cloud,
|
||||||
CloudRain,
|
CloudRain,
|
||||||
@@ -136,6 +138,15 @@ export function LoginClient({ nextPath }: LoginClientProps) {
|
|||||||
<div className="absolute bottom-[-10%] right-[-10%] h-[30vw] w-[30vw] rounded-full bg-indigo-500/20 blur-[100px]" />
|
<div className="absolute bottom-[-10%] right-[-10%] h-[30vw] w-[30vw] rounded-full bg-indigo-500/20 blur-[100px]" />
|
||||||
|
|
||||||
<div className="relative mx-4 w-full max-w-[420px] rounded-[2rem] border border-white/10 bg-white/5 p-8 shadow-2xl backdrop-blur-xl">
|
<div className="relative mx-4 w-full max-w-[420px] rounded-[2rem] border border-white/10 bg-white/5 p-8 shadow-2xl backdrop-blur-xl">
|
||||||
|
<Link
|
||||||
|
href="/"
|
||||||
|
className="group absolute left-6 top-6 rounded-full border border-white/10 bg-white/5 p-2 text-slate-400 transition-all hover:bg-white/10 hover:text-white active:scale-90"
|
||||||
|
title="返回首页"
|
||||||
|
aria-label="返回首页"
|
||||||
|
>
|
||||||
|
<ChevronLeft className="h-5 w-5 transition-transform group-hover:-translate-x-0.5" />
|
||||||
|
</Link>
|
||||||
|
|
||||||
<div className="mb-8 flex flex-col items-center">
|
<div className="mb-8 flex flex-col items-center">
|
||||||
<div className="mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-tr from-blue-500 to-indigo-400 shadow-lg shadow-blue-500/20">
|
<div className="mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-tr from-blue-500 to-indigo-400 shadow-lg shadow-blue-500/20">
|
||||||
<Cloud className="h-10 w-10 text-white" />
|
<Cloud className="h-10 w-10 text-white" />
|
||||||
@@ -231,10 +242,6 @@ export function LoginClient({ nextPath }: LoginClientProps) {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p className="mt-3 text-center text-[11px] text-slate-500">
|
|
||||||
登录后跳转到: <code>{nextPath}</code>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
{!supabaseReady ? (
|
{!supabaseReady ? (
|
||||||
<p className="mt-3 text-center text-sm text-rose-300">
|
<p className="mt-3 text-center text-sm text-rose-300">
|
||||||
Supabase 未配置,无法使用登录
|
Supabase 未配置,无法使用登录
|
||||||
|
|||||||
Reference in New Issue
Block a user