Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: format #23

Merged
merged 1 commit into from
Jun 1, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 35 additions & 27 deletions app/src/index.tsx
Original file line number Diff line number Diff line change
@@ -1,37 +1,45 @@
import { render } from 'solid-js/web';
import { Router, Route } from '@solidjs/router';
import { render } from "solid-js/web";
import { Router, Route } from "@solidjs/router";
import "./index.css";

import Login from './pages/login';
import Dashboard from './pages/dashboard';
import Page403 from './pages/403';
import AddAccount from './pages/account/addAccount';
import AddTenant from './pages/tenant/addTenant';
import { isVerifiedAccount } from './service/auth';
import Login from "./pages/login";
import Dashboard from "./pages/dashboard";
import Page403 from "./pages/403";
import AddAccount from "./pages/account/addAccount";
import AddTenant from "./pages/tenant/addTenant";
import { isVerifiedAccount } from "./service/auth";

const root = document.getElementById('root');
const root = document.getElementById("root");

if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
throw new Error(
'Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?',
);
throw new Error(
"Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?",
);
}

render(
() => (
<Router>
<Route path="/" component={Login} />
<Route path="/dashboard/" component={Dashboard} load={async () => await checkAuth()} />
<Route path="*403" component={Page403} />
<Route path="/account/add" component={AddAccount} />
<Route path="/tenant/add" component={AddTenant} load={async () => await checkAuth()} />
</Router>
),
document.getElementById('root')!,
)
() => (
<Router>
<Route path="/" component={Login} />
<Route
path="/dashboard/"
component={Dashboard}
load={async () => await checkAuth()}
/>
<Route path="*403" component={Page403} />
<Route path="/account/add" component={AddAccount} />
<Route
path="/tenant/add"
component={AddTenant}
load={async () => await checkAuth()}
/>
</Router>
),
document.getElementById("root")!,
);

async function checkAuth() {
if (! await isVerifiedAccount()) {
window.location.href = '/403';
}
}
if (!(await isVerifiedAccount())) {
window.location.href = "/403";
}
}
32 changes: 17 additions & 15 deletions app/src/pages/403.test.tsx
Original file line number Diff line number Diff line change
@@ -1,33 +1,35 @@
import { suite } from "uvu";
import * as assert from "uvu/assert";

import { render, fireEvent, waitFor } from '@solidjs/testing-library';
import { isInDocument, hasStyle } from 'solid-dom-testing';
import { render, fireEvent, waitFor } from "@solidjs/testing-library";
import { isInDocument, hasStyle } from "solid-dom-testing";

import Page403 from "./403";

const test = suite<ReturnType<typeof render>>('<Page403 />');
const test = suite<ReturnType<typeof render>>("<Page403 />");

test.before.each((context) => {
const returnValue = render(() => <Page403 />);
Object.getOwnPropertyNames(returnValue).forEach((name) => {
// @ts-expect-error
context[name] = returnValue[name];
});
const returnValue = render(() => <Page403 />);
Object.getOwnPropertyNames(returnValue).forEach((name) => {
// @ts-expect-error
context[name] = returnValue[name];
});
});

test.after.each(({ unmount }) => unmount());

test('page render 403 title', ({ getByText }) => {
assert.ok(isInDocument(getByText('403 Forbidden')));
test("page render 403 title", ({ getByText }) => {
assert.ok(isInDocument(getByText("403 Forbidden")));
});

test('page render 403 message', ({ getByText }) => {
assert.ok(isInDocument(getByText('You are not allowed to access this page.')));
test("page render 403 message", ({ getByText }) => {
assert.ok(
isInDocument(getByText("You are not allowed to access this page.")),
);
});

test('page render 403 contact message', ({ getByText }) => {
assert.ok(isInDocument(getByText('Please contact the administrator.')));
test("page render 403 contact message", ({ getByText }) => {
assert.ok(isInDocument(getByText("Please contact the administrator.")));
});

test.run();
test.run();
33 changes: 17 additions & 16 deletions app/src/pages/403.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,19 @@
const Page403 = () => {
return (
return (
// tailwindcss
// use class not use className
<div class="bg-gray-100 h-screen">
<h1 class="text-2xl font-bold text-center pt-10">403 Forbidden</h1>
<div class="flex justify-center items-center h-full">
<div class="bg-white p-5 rounded-lg shadow-lg">
<h2 class="text-xl font-semibold">
You are not allowed to access this page.
</h2>
<p class="text-gray-500">Please contact the administrator.</p>
</div>
</div>
</div>
);
};

// tailwindcss
// use class not use className
<div class="bg-gray-100 h-screen">
<h1 class="text-2xl font-bold text-center pt-10">403 Forbidden</h1>
<div class="flex justify-center items-center h-full">
<div class="bg-white p-5 rounded-lg shadow-lg">
<h2 class="text-xl font-semibold">You are not allowed to access this page.</h2>
<p class="text-gray-500">Please contact the administrator.</p>
</div>
</div>
</div>
);
}

export default Page403;
export default Page403;
40 changes: 20 additions & 20 deletions app/src/pages/account/addAccount.test.tsx
Original file line number Diff line number Diff line change
@@ -1,41 +1,41 @@
import { suite } from "uvu";
import * as assert from "uvu/assert";

import { render, fireEvent, waitFor } from '@solidjs/testing-library';
import { isInDocument, hasStyle } from 'solid-dom-testing';
import { render, fireEvent, waitFor } from "@solidjs/testing-library";
import { isInDocument, hasStyle } from "solid-dom-testing";

import AddAccount from './addAccount';
import AddAccount from "./addAccount";

const test = suite<ReturnType<typeof render>>('<AddAccount />');
const test = suite<ReturnType<typeof render>>("<AddAccount />");

test.before.each((context) => {
const returnValue = render(() => <AddAccount />);
Object.getOwnPropertyNames(returnValue).forEach((name) => {
// @ts-expect-error
context[name] = returnValue[name];
});
const returnValue = render(() => <AddAccount />);
Object.getOwnPropertyNames(returnValue).forEach((name) => {
// @ts-expect-error
context[name] = returnValue[name];
});
});

test.after.each(({ unmount }) => unmount());

test('form render name input', ({ getByLabelText }) => {
assert.ok(isInDocument(getByLabelText('Name')));
test("form render name input", ({ getByLabelText }) => {
assert.ok(isInDocument(getByLabelText("Name")));
});

test('form render email input', ({ getByLabelText }) => {
assert.ok(isInDocument(getByLabelText('Email')));
test("form render email input", ({ getByLabelText }) => {
assert.ok(isInDocument(getByLabelText("Email")));
});

test('form render role select', ({ getByLabelText }) => {
assert.ok(isInDocument(getByLabelText('Role')));
test("form render role select", ({ getByLabelText }) => {
assert.ok(isInDocument(getByLabelText("Role")));
});

test('form render add account button', ({ getByText }) => {
assert.ok(isInDocument(getByText('Register Account')));
test("form render add account button", ({ getByText }) => {
assert.ok(isInDocument(getByText("Register Account")));
});

test('form render reset button', ({ getByText }) => {
assert.ok(isInDocument(getByText('Reset')));
test("form render reset button", ({ getByText }) => {
assert.ok(isInDocument(getByText("Reset")));
});

test.run();
test.run();
138 changes: 83 additions & 55 deletions app/src/pages/account/addAccount.tsx
Original file line number Diff line number Diff line change
@@ -1,61 +1,89 @@
import { Account } from "../../schema/account";
const AddAccount = () => {
// tailwindcssのクラス名
// solidjsではclassではなくclassNameを使う
// tailwindcssのクラス名
// solidjsではclassではなくclassNameを使う

// テナントアカウントの追加フォーム
// baseAccountObjのプロパティを入力するフォーム
// テナントアカウントの追加フォーム
// baseAccountObjのプロパティを入力するフォーム

// ログインユーザーのアカウント情報から取得する
// id uid
// email
// name
// createdAt
// updatedAt
// ログインユーザーのアカウント情報から取得する
// id uid
// email
// name
// createdAt
// updatedAt

// テナントアカウントの追加フォーム
return (
<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
<div class="px-4 py-6 sm:px-0">
<div class="border-4 border-dashed border-gray-200 rounded-lg h-auto py-6">
<div class="flex flex-col items-center justify-center h-full">
<h2 class="text-2xl font-bold text-gray-900">Add Account</h2>
<form class="mt-4 w-96">
<div class="mb-4">
<label class="block text-gray-700 text-sm font-bold mb-2" for="name">
Name
</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="name" type="text" placeholder="Name" />
</div>
<div class="mb-4">
<label class="block text-gray-700 text-sm font-bold mb-2" for="email">
Email
</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="email" type="email" placeholder="Email" />
</div>
<div class="mb-4">
<label class="block text-gray-700 text-sm font-bold mb-2" for="role">
Role
</label>
<select class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="role">
<option>admin</option>
<option>readOnly</option>
</select>
</div>
<div class="flex items-center justify-between">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
Register Account
</button>
<button class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="reset">
Reset
</button>
</div>
</form>
</div>
</div>
</div>
</div>
);
}
// テナントアカウントの追加フォーム
return (
<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
<div class="px-4 py-6 sm:px-0">
<div class="border-4 border-dashed border-gray-200 rounded-lg h-auto py-6">
<div class="flex flex-col items-center justify-center h-full">
<h2 class="text-2xl font-bold text-gray-900">Add Account</h2>
<form class="mt-4 w-96">
<div class="mb-4">
<label
class="block text-gray-700 text-sm font-bold mb-2"
for="name"
>
Name
</label>
<input
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
id="name"
type="text"
placeholder="Name"
/>
</div>
<div class="mb-4">
<label
class="block text-gray-700 text-sm font-bold mb-2"
for="email"
>
Email
</label>
<input
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
id="email"
type="email"
placeholder="Email"
/>
</div>
<div class="mb-4">
<label
class="block text-gray-700 text-sm font-bold mb-2"
for="role"
>
Role
</label>
<select
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
id="role"
>
<option>admin</option>
<option>readOnly</option>
</select>
</div>
<div class="flex items-center justify-between">
<button
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
type="button"
>
Register Account
</button>
<button
class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
type="reset"
>
Reset
</button>
</div>
</form>
</div>
</div>
</div>
</div>
);
};

export default AddAccount;
export default AddAccount;
Loading