Fresh를 사용한 블로그 엔진: 로그인 페이지 구축

// routes/login.jsx

/** @jsx h */
import { h } from "preact";
import VLogin from '../components/front/login.jsx';
import CLogin from "../controllers/front/login.js";


export const handler = {
  async GET(req, ctx){
      return await CLogin.getForm(req, ctx);
  },  

  async POST(req, ctx){
      //return await CLogin.checkUser(req, ctx);
  },
}


export default function Template(props){
    return (
        <VLogin data={props.data} />
    )
}

// controllers/front/login.js

import { setCookie, getCookies, deleteCookie } from "cookies";
import { setting, secret_key, myredis } from 'setting';
import { create, verify, getNumericDate } from "jwt";
import userdb from "../../models/user.ts";
import { bcrypt } from "bcrypt";


class Login{
    async getForm(req, ctx){
        const cookies = getCookies(req.headers);

        if((cookies)&&(cookies.session_id)){
            const jwt = await myredis.get(cookies.session_id);
            try{
                const payload = await verify(jwt, secret_key, "HS512");
                if(payload.user){
                    return new Response(undefined, { headers: {location: `/admin/post`}, status: 302 });
                }
            }catch(error){
                console.log(error);
                const config = setting();
                config.page_title = "Login Page";
                const resp = new Response();
                deleteCookie(resp.headers, "session_id");
                return await ctx.render({"setting": config});
            }
        }   

        const config = setting();
        config.page_title = "Login Page";
        return await ctx.render({"setting": config});
    }
}

export default new Login();

// components/front/login.jsx

/** @jsx h */
import { h } from "preact";
import Base from "../base.jsx";

function LoginJsx(props){

  return(
      <section class="Login" >
          <link rel="stylesheet" href="/styles/front/login.css" />
          <div class="wrapper">
              <div class="title">Login into the Dashboard</div>
              <form action="/login" method="post" >
                  <a>Email:</a><input type="email" name="email" value="[email protected]" 
                      required />
                  <a>Password:</a><input type="password" name="password" 
                      value="rdagfyhows"  required />
                  <a></a><input type="submit" value="Submit" />
                  <a></a><div class="info">{props.data.setting.message}</div>
              </form>
        </div>
      </section>
  )
}

export default function Login(props){
  props.data.page = LoginJsx
  return(
    <Base data={props.data} />
  )
}

// components/base.jsx

/** @jsx h */
import { h } from "preact";


export default function Base(props){
    const Page = props.data.page
    return(
        <html>
          <head>
            <meta charSet="UTF-8"/>
            <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
            <title>{props.data.setting.site_title} | {props.data.setting.page_title}</title>
            <link href="/styles/base.css" rel="stylesheet" />
            <link href="/fonts/setup.css" rel="stylesheet" />
            <script src="/scripts/jquery.js"></script>
          </head>
          <body>
            <Page data={props.data} />
          </body>
        </html>
    )
  }

/* static/styles/front/login.css */

.Login{
    width: 400px;
    margin: 100px auto 0;
}

.Login .wrapper{
    background: var(--background-light);
    margin-bottom: 10px;
}

.Login .title{
    text-align: center;
    font: 20px/1.5 StardosStencil, Limonf3;
    padding: 5px;
    background: var(--background-dark);
    color: white;
}

.Login form{
    padding: 20px;
    display: grid;
    grid-template-columns: 20% auto;
    grid-gap: 5px;
    align-items: center;
}

.Login form a{
    text-align: right;
    color: black;
}

.Login form input{
    font: var(--body-font);
    padding: 2px 5px;
}

.Login form .info{
    text-align: center;
    font: var(--body-font);
}

Reference

이 문제에 관하여(Fresh를 사용한 블로그 엔진: 로그인 페이지 구축), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/sokhavuth/blog-engine-with-fresh-building-login-page-4j6k

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다

Fresh를 사용한 블로그 엔진: 로그인 페이지 구축

목차

Sokhavuth TIN ・ 8월 9일 ・ 2분 읽기

Reference

좋은 웹페이지 즐겨찾기