// routes/login.tsx

/** @jsx h */
import { h } from "preact";
import { setting } from 'setting';
import { Handlers, PageProps } from "$fresh/server.ts";
import Login from '../components/front/login.tsx';


export const handler: Handlers = {
  async GET(req, ctx) {
    return await ctx.render({ "setting":setting() });
  },
}


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

// components/front/login.tsx

/** @jsx h */
import { h } from "preact"
import { PageProps } from "$fresh/server.ts";
import Base from "../base.tsx"

function LoginJsx(props: PageProps){

  return(
      <section class="Login" >
          <link rel="stylesheet" href="/styles/front/login.css" />
          <div class="wrapper">
              <div class="title">ផ្ទៀងផ្ទាត់​ពាក្យ​សំងាត់​ចូល​គណនី​</div>
              <form action="/login" method="post" >
                  <a>Email:</a><input type="email" name="email" value="guest@khmerweb.app" 
                      required />
                  <a>ពាក្យ​សំងាត់ៈ</a><input type="password" name="password" 
                      value="rdagfyhows"  required />
                  <a></a><input type="submit" value="បញ្ជូន" />
                  <a></a><div class="info">{props.data.setting.message}</div>
              </form>
        </div>
      </section>
  )
}

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

/* 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);
}

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

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