implemented stripe for the cloud instance

pages/register.tsx

@@ -5,7 +5,7 @@ import SubmitButton from "@/components/SubmitButton";
 import { signIn } from "next-auth/react";
 import Image from "next/image";
 
-const EmailProvider = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
+const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
 
 type FormData = {
   name: string;
@@ -21,14 +21,14 @@ export default function Register() {
   const [form, setForm] = useState<FormData>({
     name: "",
     username: "",
-    email: EmailProvider ? "" : undefined,
+    email: emailEnabled ? "" : undefined,
     password: "",
     passwordConfirmation: "",
   });
 
   async function registerUser() {
     const checkHasEmptyFields = () => {
-      if (EmailProvider) {
+      if (emailEnabled) {
         return (
           form.name !== "" &&
           form.username !== "" &&
@@ -78,7 +78,7 @@ export default function Register() {
           if (form.email) await sendConfirmation();
 
           toast.success(
-            EmailProvider
+            emailEnabled
               ? "User Created! Please check you email."
               : "User Created!"
           );
@@ -95,7 +95,7 @@ export default function Register() {
 
   return (
     <>
-      <div className="p-5 mx-auto my-10 flex flex-col gap-3 justify-between sm:w-[28rem] w-80 bg-slate-50 rounded-md border border-sky-100">
+      <div className="p-2 mx-auto my-10 flex flex-col gap-3 justify-between sm:w-[28rem] w-80 bg-slate-50 rounded-md border border-sky-100">
         <div className="flex flex-col gap-2 sm:flex-row justify-between items-center mb-5">
           <Image
             src="/linkwarden.png"
@@ -105,7 +105,7 @@ export default function Register() {
             className="h-12 w-fit"
           />
           <div className="text-center sm:text-right">
-            <p className="text-3xl font-bold text-sky-500">Get started</p>
+            <p className="text-3xl text-sky-500">Get started</p>
             <p className="text-md font-semibold text-sky-400">
               Create a new account
             </p>
@@ -140,7 +140,7 @@ export default function Register() {
           />
         </div>
 
-        {EmailProvider ? (
+        {emailEnabled ? (
           <div>
             <p className="text-sm text-sky-500 w-fit font-semibold mb-1">
               Email
@@ -156,29 +156,29 @@ export default function Register() {
           </div>
         ) : undefined}
 
-        <div className="flex item-center gap-5">
-          <div>
+        <div className="flex item-center gap-2">
+          <div className="w-full">
             <p className="text-sm text-sky-500 w-fit font-semibold  mb-1">
               Password
             </p>
 
             <input
               type="password"
-              placeholder="***********"
+              placeholder="••••••••••••••"
               value={form.password}
               onChange={(e) => setForm({ ...form, password: e.target.value })}
               className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
             />
           </div>
 
-          <div>
+          <div className="w-full">
             <p className="text-sm text-sky-500 w-fit font-semibold mb-1">
               Confirm Password
             </p>
 
             <input
               type="password"
-              placeholder="***********"
+              placeholder="••••••••••••••"
               value={form.passwordConfirmation}
               onChange={(e) =>
                 setForm({ ...form, passwordConfirmation: e.target.value })