// views/front/login.jsx

/** @jsx h */
import { h } from "../../deps.ts"

function Login(props){
  
  return(
    <html>
      <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>{props.config.siteTitle} | {props.config.pageTitle}</title>
        <link href="/images/siteLogo.png" rel="icon" />
        <link href="/styles/base.css" rel="stylesheet" />
        <link href="/fonts/setup.css" rel="stylesheet" />
        <script src="/scripts/jquery.js"></script>
        <link rel='stylesheet' href='/styles/front/login.css' />
      </head>
      <body>
        <section class="Login">
          <div class="wrapper">
            <div class="title">ផ្ទៀងផ្ទាត់​ពាក្យ​សំងាត់​ចូល​គណនី​</div>
            <form action="/login" method="post">
              <a>Email:</a><input type="email" name="email" />
              <a>ពាក្យ​សំងាត់ៈ</a><input type="password" name="password" />
              <a></a><input type="submit" value="បញ្ជូន" />
              <a></a><div class="info">{props.config.message}</div>
            </form>
          </div>
          <a class="signup" href="/signup">ចុះ​ឈ្មោះ​ចុះ​ផ្សាយព័ត៌មាន (signup)</a>
        </section>
      </body>
    </html>
  )
}

export default Login

 

/* 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;
    border-bottom: 1px solid grey;
}

.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);
}

 

GitHub: https://github.com/Sokhavuth/khmerweb-deno

Deno Deploy: https://khmerweb-blog.deno.dev/login