Files
formbricks/apps/web/components/auth/PasswordResetForm.tsx
Matti Nannt 27d63c01e1 Introducing the new Formbricks (#210)
### New Formbricks Release: Complete Rewrite, New Features & Enhanced UI 🚀

We're thrilled to announce the release of the new Formbricks, a complete overhaul of our codebase, packed with powerful features and an improved user experience.

#### What's New:

1. **Survey Builder**: Design and customize your in-product micro-surveys with our intuitive survey builder.
2. **Trigger Micro-Surveys**: Set up micro-surveys to appear at specific points within your app, allowing you to gather feedback when it matters most.
3. **JavaScript SDK**: Our new JavaScript SDK makes integration a breeze - just embed it once and you're ready to go.
4. **No-Code Events**: Set up events and triggers without writing a single line of code, making it accessible for everyone on your team.
5. **Revamped UI**: Enjoy an entirely new user interface that enhances usability and provides a smooth, delightful experience.

This release marks a major step forward for Formbricks, enabling you to better understand your users and build an outstanding product experience.

Please update your Formbricks integration to take advantage of these exciting new features, and let us know in the Discord if you have any questions or feedback!

Happy surveying! 🎉
2023-03-29 23:34:29 +02:00

71 lines
2.2 KiB
TypeScript

"use client";
import { forgotPassword } from "@/lib/users/users";
import { Button } from "@formbricks/ui";
import { XCircleIcon } from "@heroicons/react/24/solid";
import { useRouter } from "next/navigation";
import { useState } from "react";
export const PasswordResetForm = ({}) => {
const router = useRouter();
const [error, setError] = useState<string>("");
const handleSubmit = async (e) => {
e.preventDefault();
try {
await forgotPassword(e.target.elements.email.value);
router.push("/auth/forgot-password/email-sent");
} catch (e) {
setError(e.message);
}
};
return (
<>
{error && (
<div className="absolute top-10 rounded-md bg-red-50 p-4">
<div className="flex">
<div className="flex-shrink-0">
<XCircleIcon className="h-5 w-5 text-red-400" aria-hidden="true" />
</div>
<div className="ml-3">
<h3 className="text-sm font-medium text-red-800">An error occurred when logging you in</h3>
<div className="mt-2 text-sm text-red-700">
<p className="space-y-1 whitespace-pre-wrap">{error}</p>
</div>
</div>
</div>
</div>
)}
<form onSubmit={handleSubmit} className="space-y-6">
<div>
<label htmlFor="email" className="block text-sm font-medium text-slate-800">
Email address
</label>
<div className="mt-1">
<input
id="email"
name="email"
type="email"
autoComplete="email"
required
className="focus:border-brand focus:ring-brand block w-full rounded-md border-slate-300 shadow-sm sm:text-sm"
/>
</div>
</div>
<div>
<Button type="submit" className="w-full justify-center">
Send password reset email
</Button>
<div className="mt-3 text-center">
<Button variant="secondary" href="/auth/login" className="w-full justify-center">
Back to login
</Button>
</div>
</div>
</form>
</>
);
};