Mail (メール送信) 画面の例、shadcn/ui + esbuild + Express.js

id: 169, 2024-10-05

概要:

nodemailer メール送信 + shadcn/ui 画面

Gmail 経由する場合です。

[ 公開日: 2024/10/05 ]

構成

Express.js
shadcnUI
esbuild
bun
React
typescript

作成したコード

https://github.com/kuc-arc-f/bun_32shadcn/tree/main/example/mail_test

example/mail_test/src/routes/mailRouter.ts
https://github.com/kuc-arc-f/bun_32shadcn/blob/main/example/mail_test/src/routes/mailRouter.ts

....


router.post("/send", async function(req: any, res: any) {
  const retObj = {ret: 500, message: ""};
  try {
    if(!req.body){
      throw new Error("nothing, body");
    }
    const body = req.body;
    console.log(req.body);
    const transporter = nodemailer.createTransport({
      service: "gmail",
      auth: {
        user: process.env.GOOGLE_MAIL_USER,     // 送信者のメールアドレス
        pass: process.env.GOOGLE_MAIL_PASSWORD  // 送信者のメールパスワードまたはアプリパスワード
      }
    });
    // メールのオプション
    const mailOptions = {
      from: process.env.GOOGLE_MAIL_USER,
      to: body.to_mail,
      subject: body.subject,
      text: body.mail_body,
    };
    //Send-mail
    try {
      const info = await transporter.sendMail(mailOptions);
      console.log("Email sent: " + info.response);
    } catch (error) {
      console.error("Error sending email:", error);
      throw new Error("Error sending email:");
    }
    retObj.ret = 200;
    return res.json(retObj)
  } catch (error) {
    console.error(error);
    res.sendStatus(500);
  }
});

mail 送信画面, 内部API経由エンドポイントのPOST通信します。
example/mail_test/src/client/MailTest.tsx
https://github.com/kuc-arc-f/bun_32shadcn/blob/main/example/mail_test/src/client/MailTest.tsx


....

export default function Page() {
  //
  const procSend = async function(){
    //location.reload();
    try {
      console.log("#procSend");
      const values = ClientUtil.getInputValue("form1"); 
      const mail_body = ClientUtil.getElementValue("mail_body");
      values.mail_body = mail_body;
      //console.log("mail_body=", mail_body);
      console.log(values);
      //return;
      const json = await HttpCommon.post(values, "/api/mail/send");
      console.log(json);
      if(json.ret !== 200){
        alert("Error, send-mail");
      }else{
        alert("OK");
        location.href = "/";
      }
    } catch (e) {
      console.error(e);
    } 
  }
  //
  return (
  <div className="">
    <Head />
    <div className="flex items-center justify-center min-h-screen">
      <Card className="w-[550px] my-4" id="form1">
        <CardHeader>
          <CardTitle className="text-4xl text-gray-700 font-bold my-2">
          MailTest
          </CardTitle>
          <hr className="my-2" />
          <CardDescription>to_mail , Subject ,mail_body input please 
          </CardDescription>
        </CardHeader>
        <CardContent>
          <form>
            <div className="grid w-full items-center gap-4">
              <div className="flex flex-col space-y-1.5">
                <Label htmlFor="email">to_mail :</Label>
                <Input id="to_mail" name="to_mail" 
                placeholder="test@example.com" />
                <Label htmlFor="email">Subject :</Label>
                <Input id="subject" name="subject" placeholder="test-Subject" />
                <Label>mail_body:</Label>
                <Textarea id="mail_body" name="mail_body"
                rows= {6}
                placeholder="your message here." />
              </div>
            </div>
          </form>
        </CardContent>
        <CardFooter className="">
          <Button onClick={()=>procSend()} 
            className="w-full">Send</Button>
        </CardFooter>
      </Card>
    </div>

  </div>
  )
}

Mail (メール送信) 画面の例、shadcn/ui + esbuild + Express.js

概要:

構成

関連

作成したコード