zrb 0.0.51__py3-none-any.whl → 0.0.53__py3-none-any.whl

zrb/builtin/generator/fastapp/template/src/kebab-app-name/src/module/auth/entity/user/model.py

@@ -4,8 +4,10 @@ from module.auth.schema.user import (
     User, UserData, UserResult, UserLogin
 )
 from module.auth.entity.user.repo import UserRepo
-from module.auth.schema.token import TokenData
-from module.auth.core import TokenUtil
+from module.auth.schema.token import (
+    AccessTokenData, RefreshTokenData, TokenResponse
+)
+from module.auth.core import AccessTokenUtil, RefreshTokenUtil
 from module.auth.entity.permission.model import PermissionModel
 
 
@@ -18,16 +20,20 @@ class UserModel(
         self,
         repo: UserRepo,
         permission_model: PermissionModel,
-        token_util: TokenUtil,
-        expire_seconds: int,
+        access_token_util: AccessTokenUtil,
+        access_token_expire_seconds: int,
+        refresh_token_util: RefreshTokenUtil,
+        refresh_token_expire_seconds: int,
         guest_user: User,
         admin_user: Optional[User] = None,
         admin_user_password: str = ''
     ):
         self.repo = repo
         self.permission_model = permission_model
-        self.token_util = token_util
-        self.expire_seconds = expire_seconds
+        self.access_token_util = access_token_util
+        self.access_token_expire_seconds = access_token_expire_seconds
+        self.refresh_token_util = refresh_token_util
+        self.refresh_token_expire_seconds = refresh_token_expire_seconds
         self.guest_user = guest_user
         self.admin_user = admin_user
         self.admin_user_pasword = admin_user_password
@@ -116,21 +122,44 @@ class UserModel(
             return False
         return id == self.admin_user.id
 
-    async def create_token(self, user_login: UserLogin) -> str:
+    async def create_auth_token(self, user_login: UserLogin) -> TokenResponse:
         user = await self._get_user_by_user_login(user_login)
-        return self._get_token(user)
+        return TokenResponse(
+            access_token=self._get_access_token(user),
+            refresh_token=self._get_refresh_token(user),
+            token_type='bearer'
+        )
 
-    async def refresh_token(self, auth_token_str: str) -> str:
-        user = await self._get_user_by_token(auth_token_str)
-        return self._get_token(user)
+    async def refresh_auth_token(
+        self, refresh_token: str, access_token: str
+    ) -> TokenResponse:
+        access_token_data = self.access_token_util.decode(
+            access_token, parse_expired_token=True
+        )
+        refresh_token_data = self.refresh_token_util.decode(refresh_token)
+        if access_token_data.user_id != refresh_token_data.user_id:
+            raise ValueError('Unmatch refresh and access token')
+        user = await self.get_by_id(refresh_token_data.user_id)
+        return TokenResponse(
+            access_token=self._get_access_token(user),
+            refresh_token=self._get_refresh_token(user),
+            token_type='bearer'
+        )
 
-    def _get_token(self, user: User) -> str:
-        token_data = TokenData(
+    def _get_access_token(self, user: User) -> str:
+        access_token_data = AccessTokenData(
             user_id=user.id,
             username=user.username,
-            expire_seconds=self.expire_seconds
+            expire_seconds=self.access_token_expire_seconds
         )
-        return self.token_util.encode(token_data)
+        return self.access_token_util.encode(access_token_data)
+
+    def _get_refresh_token(self, user: User) -> str:
+        refresh_token_data = RefreshTokenData(
+            user_id=user.id,
+            expire_seconds=self.refresh_token_expire_seconds
+        )
+        return self.refresh_token_util.encode(refresh_token_data)
 
     async def _get_user_by_user_login(self, user_login: UserLogin) -> User:
         if user_login.identity == '':
@@ -146,7 +175,3 @@ class UserModel(
         ):
             return self.admin_user
         return await self.repo.get_by_user_login(user_login)
-
-    async def _get_user_by_token(self, token: str) -> User:
-        token_data = self.token_util.decode(token)
-        return await self.get_by_id(token_data.user_id)

zrb/builtin/generator/fastapp/template/src/kebab-app-name/src/module/auth/entity/user/rpc.py

@@ -1,11 +1,11 @@
-from typing import Any, Mapping
+from typing import Any, Mapping, List, Union
 from logging import Logger
 from core.messagebus import Publisher
 from core.rpc import Caller, Server
 from core.repo import SearchFilter
 from module.auth.component.model.user_model import user_model
 from module.auth.schema.user import UserData, UserLogin
-from module.auth.schema.token import TokenData
+from module.auth.schema.token import AccessTokenData
 
 
 def register_rpc(
@@ -32,20 +32,28 @@ def register_rpc(
 
     @rpc_server.register('auth_is_user_authorized')
     async def is_user_having_permission(
-        id: str, *permission_names: str
+        id: str, permission_name: Union[str, List[str]]
     ) -> Mapping[str, bool]:
         '''
         Used by RPC Authenticator
         '''
-        return await user_model.is_authorized(id, *permission_names)
+        if isinstance(permission_name, str):
+            return await user_model.is_authorized(id, permission_name)
+        return await user_model.is_authorized(id, *permission_name)
 
     @rpc_server.register('auth_create_token')
-    async def create_token(login_data: Mapping[str, str]) -> str:
-        return await user_model.create_token(UserLogin(**login_data))
+    async def create_token(login_data: Mapping[str, str]) -> Mapping[str, str]:
+        result = await user_model.create_auth_token(UserLogin(**login_data))
+        return result.dict()
 
     @rpc_server.register('auth_refresh_token')
-    async def refresh_token(token: str) -> str:
-        return await user_model.refresh_token(token)
+    async def refresh_token(
+        refresh_token: str, access_token: str
+    ) -> Mapping[str, str]:
+        result = await user_model.refresh_auth_token(
+            refresh_token, access_token
+        )
+        return result.dict()
 
     @rpc_server.register('auth_get_user')
     async def get(
@@ -77,7 +85,7 @@ def register_rpc(
         data: Mapping[str, Any],
         user_token_data: Mapping[str, Any]
     ) -> Mapping[str, Any]:
-        user_token_data = TokenData(**user_token_data)
+        user_token_data = AccessTokenData(**user_token_data)
         data['created_by'] = user_token_data.user_id
         data['updated_by'] = user_token_data.user_id
         row = await user_model.insert(
@@ -91,7 +99,7 @@ def register_rpc(
         data: Mapping[str, Any],
         user_token_data: Mapping[str, Any]
     ) -> Mapping[str, Any]:
-        user_token_data = TokenData(**user_token_data)
+        user_token_data = AccessTokenData(**user_token_data)
         data['updated_by'] = user_token_data.user_id
         row = await user_model.update(
             id=id, data=UserData(**data)
@@ -103,6 +111,6 @@ def register_rpc(
         id: str,
         user_token_data: Mapping[str, Any]
     ) -> Mapping[str, Any]:
-        user_token_data = TokenData(**user_token_data)
+        user_token_data = AccessTokenData(**user_token_data)
         row = await user_model.delete(id=id)
         return row.dict()

zrb/builtin/generator/fastapp/template/src/kebab-app-name/src/module/auth/schema/request.py

@@ -0,0 +1,10 @@
+from typing import List
+from pydantic import BaseModel
+
+
+class RefreshTokenRequest(BaseModel):
+    access_token: str
+
+
+class IsAuthorizedRequest(BaseModel):
+    permission_names: List[str]

zrb/builtin/generator/fastapp/template/src/kebab-app-name/src/module/auth/schema/token.py

@@ -1,12 +1,18 @@
 from pydantic import BaseModel
 
 
-class TokenData(BaseModel):
+class AccessTokenData(BaseModel):
     user_id: str
     username: str
     expire_seconds: int
 
 
+class RefreshTokenData(BaseModel):
+    user_id: str
+    expire_seconds: int
+
+
 class TokenResponse(BaseModel):
     access_token: str
+    refresh_token: str
     token_type: str

zrb/builtin/generator/fastapp/template/src/kebab-app-name/src/requirements.txt

@@ -9,6 +9,7 @@ pydantic==1.10.6
 psycopg2-binary==2.9.6
 python-jose==3.3.0
 uvicorn==0.20.0
+watchfiles==0.19.0
 python-multipart==0.0.6
 
 # for testing

zrb/builtin/generator/fastapp/template/src/kebab-app-name/src/template.env

@@ -7,10 +7,14 @@ APP_MAX_NOT_READY=10
 
 PUBLIC_BRAND=PascalAppName
 PUBLIC_TITLE=PascalAppName
-PUBLIC_AUTH_TOKEN_COOKIE_KEY=auth_token
+PUBLIC_AUTH_ACCESS_TOKEN_COOKIE_KEY=access_token
+PUBLIC_AUTH_REFRESH_TOKEN_COOKIE_KEY=refresh_token
+
+APP_AUTH_ACCESS_TOKEN_EXPIRE_SECONDS=300
+APP_AUTH_ACCESS_TOKEN_TYPE=jwt
+APP_AUTH_REFRESH_TOKEN_EXPIRE_SECONDS=21600
+APP_AUTH_REFRESH_TOKEN_TYPE=jwt
 
-APP_AUTH_TOKEN_EXPIRE_SECONDS=300
-APP_AUTH_TOKEN_TYPE=jwt
 APP_AUTH_JWT_TOKEN_SECRET_KEY=Alch3mist
 APP_AUTH_JWT_TOKEN_ALGORITHM=HS256
 

zrb/builtin/generator/fastapp_crud/add.py

@@ -5,15 +5,16 @@ from ....task.decorator import python_task
 from ....task.cmd_task import CmdTask
 from ....task.resource_maker import ResourceMaker
 from ....runner import runner
+from ....helper import util
+from ....helper.codemod.add_import_module import add_import_module
+from ....helper.codemod.append_code_to_function import append_code_to_function
+from ....helper.file.text import read_text_file_async, write_text_file_async
 from .._common.input import (
     project_dir_input, app_name_input, module_name_input, entity_name_input,
     plural_entity_name_input, main_column_name_input
 )
 from .._common.helper import validate_project_dir
-from ....helper import util
-from ....helper.codemod.add_import_module import add_import_module
-from ....helper.codemod.append_code_to_function import append_code_to_function
-from ....helper.file.text import read_text_file_async, write_text_file_async
+from .add_navigation import create_add_navigation_task
 
 import asyncio
 import os
@@ -128,26 +129,11 @@ prepare_codemod = CmdTask(
     ]
 )
 
-
-nav_file_path = '{{input.project_dir}}/src/{{util.to_kebab_case(input.app_name)}}/src/frontend/src/lib/config/navData.ts' # noqa
-var_name = 'navData'
-title = '{{util.to_pascal_case(input.entity_name)}}'
-url = '{{util.to_kebab_case(input.module_name)}}/{{util.to_kebab_case(input.entity_name)}}' # noqa
-permission = ''
-add_navigation = CmdTask(
-    name='add-navigation',
-    inputs=[
-        project_dir_input,
-        app_name_input,
-        module_name_input,
-        entity_name_input,
-    ],
+add_navigation = create_add_navigation_task(
     upstreams=[
         copy_resource,
         prepare_codemod,
-    ],
-    retry=0,
-    cmd=f'node {codemod_dir}/dist/addNav.js "{nav_file_path}" "{var_name}" "{title}" "{url}" "{permission}"' # noqa
+    ]
 )
 
 

zrb/builtin/generator/fastapp_crud/add_navigation.py

@@ -0,0 +1,32 @@
+from typing import List
+from ....task.task import Task
+from ....task.cmd_task import CmdTask
+from .._common.input import (
+    project_dir_input, app_name_input, module_name_input, entity_name_input,
+)
+
+import os
+
+current_dir = os.path.dirname(__file__)
+codemod_dir = os.path.join(current_dir, 'nodejs', 'codemod')
+
+nav_config_file_path = '{{input.project_dir}}/src/{{util.to_kebab_case(input.app_name)}}/src/frontend/src/lib/config/navData.ts' # noqa
+nav_var_name = 'navData'
+nav_title = '{{util.to_pascal_case(input.entity_name)}}'
+nav_url = '/{{util.to_kebab_case(input.module_name)}}/{{util.to_kebab_case(input.entity_name)}}' # noqa
+nav_permission = '{{util.to_snake_case(input.module_name)}}:{{util.to_snake_case(input.entity_name)}}:get' # noqa
+
+
+def create_add_navigation_task(upstreams: List[Task]) -> Task:
+    return CmdTask(
+        name='add-navigation',
+        inputs=[
+            project_dir_input,
+            app_name_input,
+            module_name_input,
+            entity_name_input,
+        ],
+        upstreams=upstreams,
+        retry=0,
+        cmd=f'node {codemod_dir}/dist/addNav.js "{nav_config_file_path}" "{nav_var_name}" "{nav_title}" "{nav_url}" "{nav_permission}"' # noqa
+    )

zrb/builtin/generator/fastapp_crud/template/src/kebab-app-name/src/frontend/src/routes/kebab-module-name/kebab-entity-name/+page.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+    import axios from 'axios';
+	import { onMount } from 'svelte';
+	import { ensureAccessToken } from '$lib/auth/helper';
+	import { getErrorMessage } from '$lib/error/helper';
+
+    let limit: number = 5;
+    let pageIndex: number = 0;
+    let count: number = 0;
+    let keyword: string = '';
+    let isAlertVisible: boolean = false;
+    let errorMessage: string = '';
+
+    let limitOptions: Array<number> = [5, 10, 30, 50, 100];
+    let pageIndexes: Array<number> = [];
+    let rows: Array<any> = [];
+    
+    onMount(async() => {
+        await loadRows();
+    });
+
+    async function loadRows() {
+        const accessToken = await ensureAccessToken();
+        try {
+            const encodedKeyword = encodeURIComponent(keyword);
+            const offset = limit * pageIndex
+            const response = await axios.get(
+                `/api/v1/kebab-module-name/kebab-plural-entity-name?limit=${limit}&offset=${offset}&keyword=${encodedKeyword}`,
+                {headers: {Authorization: `Bearer ${accessToken}`}}
+            );
+            if (response?.status == 200 && response?.data) {
+                count = response.data.count;
+                rows = response.data.data;
+                pageIndexes = [];
+                for (let i = 0; i*limit < count; i++)  {
+                    pageIndexes.push(i);
+                }
+                return;
+            }
+            errorMessage = 'Unknown error';
+        } catch(error) {
+            console.error(error);
+            errorMessage = getErrorMessage(error);
+        }
+        isAlertVisible = true;
+    }
+
+    async function onPaginationClick(index: number) {
+        pageIndex = index;
+        await loadRows();
+    }
+</script>
+
+<h1 class="text-3xl">Book</h1>
+<div class="overflow-x-auto">
+
+    <div class="flex items-center mb-5 mt-5">
+        <label for="limit" class="mr-2">Row per page:</label>
+        <select id="limit" class="select select-bordered mr-2" bind:value={limit} on:change={loadRows}>
+            {#each limitOptions as limitOption}
+                {#if limitOption == limit }
+                    <option selected>{limitOption}</option>
+                {:else}
+                    <option>{limitOption}</option>
+                {/if}
+            {/each}
+        </select>
+        <input type="text" placeholder="Search..." class="input input-bordered mr-2" bind:value={keyword} />
+        <button class="btn btn-primary btn-square" on:click={loadRows}>
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+            </svg>
+        </button>
+        <a class="btn ml-5" href="./new">New</a>
+    </div>
+
+    <div class="alert alert-error shadow-lg mt-5 mb-5 {isAlertVisible? 'visible': 'hidden'}">
+        <div>
+            <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+            <span>{errorMessage}</span>
+        </div>
+    </div>
+
+    <table class="table w-full">
+        <!-- head -->
+        <thead>
+            <tr>
+                <th></th>
+                <th>Human readable column name</th>
+                <!-- DON'T DELETE: insert new column header here-->
+                <th></th>
+            </tr>
+        </thead>
+        <tbody>
+            {#each rows as row}
+                <tr>
+                    <th>{row.id}</th>
+                    <td>{row.snake_column_name}</td>
+                    <!-- DON'T DELETE: insert new column here-->
+                    <td>
+                        <a class="btn" href="./detail/{row.id}">Detail</a>
+                        <a class="btn" href="./update/{row.id}">Update</a>
+                        <a class="btn btn-accent" href="./delete/{row.id}">Delete</a>
+                    </td>
+                </tr>
+            {/each}
+        </tbody>
+    </table>
+
+    <div class="btn-group justify-center w-full">
+        {#each pageIndexes as pageIndexOption}
+            {#if pageIndexOption == pageIndex}
+                <button class="btn btn-disabled">{pageIndexOption + 1}</button>
+            {:else}
+                <button class="btn" on:click={async () => await onPaginationClick(pageIndexOption)}>
+                    {pageIndexOption + 1}
+                </button>
+            {/if}
+        {/each}
+    </div>
+</div>

zrb/builtin/generator/fastapp_crud/template/src/kebab-app-name/src/frontend/src/routes/kebab-module-name/kebab-entity-name/delete/[id]/+page.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+    import axios from 'axios';
+	import { onMount } from 'svelte';
+    import { goto } from '$app/navigation';
+	import { ensureAccessToken } from '$lib/auth/helper';
+    import { getErrorMessage } from '$lib/error/helper';
+
+    export let data: {id?: string} = {};
+
+    let row: any = {};
+    let isAlertVisible: boolean = false;
+    let errorMessage: string = '';
+ 
+    onMount(async() => {
+        await loadRow();
+    });
+
+    async function loadRow() {
+        const accessToken = await ensureAccessToken();
+        try {
+            const response = await axios.get(
+                `/api/v1/kebab-module-name/kebab-plural-entity-name/${data.id}`,
+                {headers: {Authorization: `Bearer ${accessToken}`}}
+            );
+            if (response?.status == 200 && response?.data) {
+                row = response.data;
+                return;
+            }
+            errorMessage = 'Unknown error';
+        } catch(error) {
+            console.error(error);
+            errorMessage = getErrorMessage(error);
+        }
+        isAlertVisible = true;
+    }
+
+    async function onDeleteClick() {
+        const accessToken = await ensureAccessToken();
+        try {
+            const response = await axios.delete(
+                `/api/v1/kebab-module-name/kebab-plural-entity-name/${data.id}`,
+                {headers: {Authorization: `Bearer ${accessToken}`}}
+            );
+            if (response?.status == 200 && response?.data) {
+                await goto('../../');
+                return;
+            }
+            errorMessage = 'Unknown error';
+        } catch(error) {
+            console.error(error);
+            errorMessage = getErrorMessage(error);
+        }
+        isAlertVisible = true;
+    }
+</script>
+<h1 class="text-3xl">Book</h1>
+
+<form class="max-w-md mx-auto bg-gray-100 p-6 rounded-md mt-5 mb-5">
+  <h2 class="text-xl font-bold mb-4">Delete Book {data.id}</h2>
+    <div class="mb-4">
+        <label class="block text-gray-700 font-bold mb-2" for="kebab-column-name">Human readable column name</label>
+        <span id="kebab-column-name">{row.snake_column_name}</span>
+    </div>
+    <!-- DON'T DELETE: insert new field here-->
+    <a href="#top" class="btn btn-accent" on:click={onDeleteClick}>Delete</a>
+    <a href="../../" class="btn">Cancel</a>
+
+    <div class="alert alert-error shadow-lg mt-5 {isAlertVisible? 'visible': 'hidden'}">
+        <div>
+            <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+            <span>{errorMessage}</span>
+        </div>
+    </div>
+
+</form>

zrb/builtin/generator/fastapp_crud/template/src/kebab-app-name/src/frontend/src/routes/kebab-module-name/kebab-entity-name/delete/[id]/+page.ts

@@ -0,0 +1,5 @@
+export async function load({ params }) {
+    return {
+        id: params?.id
+    };
+}

zrb/builtin/generator/fastapp_crud/template/src/kebab-app-name/src/frontend/src/routes/kebab-module-name/kebab-entity-name/detail/[id]/+page.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+    import axios from 'axios';
+	import { onMount } from 'svelte';
+	import { ensureAccessToken } from '$lib/auth/helper';
+    import { getErrorMessage } from '$lib/error/helper';
+
+    export let data: {id?: string} = {};
+
+    let row: any = {};
+    let isAlertVisible: boolean = false;
+    let errorMessage: string = '';
+ 
+    onMount(async() => {
+        await loadRow();
+    });
+
+    async function loadRow() {
+        const accessToken = await ensureAccessToken();
+        try {
+            const response = await axios.get(
+                `/api/v1/kebab-module-name/kebab-plural-entity-name/${data.id}`,
+                {headers: {Authorization: `Bearer ${accessToken}`}}
+            );
+            if (response?.status == 200 && response?.data) {
+                row = response.data;
+                return;
+            }
+            errorMessage = 'Unknown error';
+        } catch(error) {
+            console.error(error);
+            errorMessage = getErrorMessage(error);
+        }
+        isAlertVisible = true;
+    }
+</script>
+<h1 class="text-3xl">Book</h1>
+
+<form class="max-w-md mx-auto bg-gray-100 p-6 rounded-md mt-5 mb-5">
+  <h2 class="text-xl font-bold mb-4">Show Book {data.id}</h2>
+    <div class="mb-4">
+        <label class="block text-gray-700 font-bold mb-2" for="kebab-column-name">Human readable column name</label>
+        <span id="kebab-column-name">{row.snake_column_name}</span>
+    </div>
+    <!-- DON'T DELETE: insert new field here-->
+    <a href="../../" class="btn btn-primary">Show others</a>
+
+    <div class="alert alert-error shadow-lg mt-5 {isAlertVisible? 'visible': 'hidden'}">
+        <div>
+            <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+            <span>{errorMessage}</span>
+        </div>
+    </div>
+
+</form>

zrb/builtin/generator/fastapp_crud/template/src/kebab-app-name/src/frontend/src/routes/kebab-module-name/kebab-entity-name/detail/[id]/+page.ts

@@ -0,0 +1,5 @@
+export async function load({ params }) {
+    return {
+        id: params?.id
+    };
+}

zrb/builtin/generator/fastapp_crud/template/src/kebab-app-name/src/frontend/src/routes/kebab-module-name/kebab-entity-name/new/+page.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+    import axios from 'axios';
+    import { goto } from '$app/navigation';
+	import { ensureAccessToken } from '$lib/auth/helper';
+    import { getErrorMessage } from '$lib/error/helper';
+
+    let row: any = {}
+    let isAlertVisible: boolean = false;
+    let isSaving: boolean = false;
+    let errorMessage: string = '';
+
+    async function onSaveClick() {
+        isSaving = true
+        const accessToken = await ensureAccessToken();
+        try {
+            const response = await axios.post(
+                '/api/v1/kebab-module-name/kebab-plural-entity-name', row, {headers: {Authorization: `Bearer ${accessToken}`}}
+            );
+            if (response?.status == 200) {
+                await goto('../');
+                return;
+            }
+            errorMessage = 'Unknown error';
+        } catch(error) {
+            console.error(error);
+            errorMessage = getErrorMessage(error);
+        }
+        isAlertVisible = true;
+        isSaving = false;
+    }
+</script>
+
+<h1 class="text-3xl">Book</h1>
+
+<form class="max-w-md mx-auto bg-gray-100 p-6 rounded-md mt-5 mb-5">
+  <h2 class="text-xl font-bold mb-4">New Book</h2>
+    <div class="mb-4">
+        <label class="block text-gray-700 font-bold mb-2" for="kebab-column-name">Human readable column name</label>
+        <input type="text" class="input w-full" id="kebab-column-name" placeholder="Human readable column name" bind:value={row.snake_column_name}>
+    </div>
+    <!-- DON'T DELETE: insert new field here-->
+    <a href="#top" class="btn btn-primary {isSaving ? 'btn-disabled': '' }" on:click={onSaveClick}>Save</a>
+    <a href="../" class="btn">Cancel</a>
+
+    <div class="alert alert-error shadow-lg mt-5 {isAlertVisible? 'visible': 'hidden'}">
+        <div>
+            <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+            <span>{errorMessage}</span>
+        </div>
+    </div>
+
+</form>