Sessão 8

server/services/cities/get.js

@@ -0,0 +1,4 @@
+
+_out.json(
+    _db.query("SELECT uid, nome as name FROM cidade")
+)

server/services/cities/options.js

@@ -0,0 +1,2 @@
+
+_out.json(_val.map().set("result", true))

server/services/register.options.js

@@ -0,0 +1,2 @@
+
+_out.json(_val.map().set("result", true))

server/setup/001-grupo.js

@@ -0,0 +1,6 @@
+
+_group.createIfNotExists(
+    _val.map()
+        .set("name", "Usuário Comum")
+        .set("code", "user")
+)

server/setup/_schema-form-3-pessoa.js

@@ -175,3 +175,33 @@ _form.createComponentIfNotExists(
 	.set("x", 1)
 	.set("y", 2)
 )
+_form.createComponentIfNotExists(
+	"262e9f17-3d70-4067-b28d-bafc98f56d80",
+	_val.init()
+	.set("colspan", 0)
+	.set("displayname", "Usu\u00E1rio")
+	.set("firebase", "")
+	.set("group_id", 0)
+	.set("height", 0)
+	.set("max", 0)
+	.set("min", 0)
+	.set("name", "usuario_id")
+	.set("notnull", false)
+	.set("primarykey", false)
+	.set("properties", "{\"ALLOW_USER_LOGGED\":{\"default\":\"false\",\"type\":\"BOOLEAN\",\"value\":\"false\"},\"GROUPS\":{\"default\":\"\",\"type\":\"STRING\",\"value\":\"\"},\"GROUPS_MODE\":{\"default\":\"all|exclude|only\",\"type\":\"CHOICE\",\"value\":\"all\"},\"USERS_MODE\":{\"default\":\"all|exclude|only\",\"type\":\"CHOICE\",\"value\":\"all\"},\"USERS\":{\"default\":\"\",\"type\":\"STRING\",\"value\":\"\"}}")
+	.set("rowspan", 0)
+	.set("tdheight", 0)
+	.set("tdwidth", 0)
+	.set("type", "user")
+	.set("uid", "13867837-920d-44b8-8511-9b9123720bea")
+	.set("user_id", 0)
+	.set("whenedit", true)
+	.set("whenexport", true)
+	.set("whenfilter", true)
+	.set("whennew", true)
+	.set("whenresult", true)
+	.set("whenview", true)
+	.set("width", 0)
+	.set("x", 1)
+	.set("y", 6)
+)

website/src/pages/Login/index.js

@@ -1,9 +1,76 @@
 import React, { useEffect, useState} from 'react';
 
+import { Form, Input, Button, Checkbox } from 'antd';
+
+import './index.less';
+
+const layout = {
+    labelCol: { span: 8 },
+    wrapperCol: { span: 16 },
+};
+const tailLayout = {
+    wrapperCol: { offset: 8, span: 16 },
+};
+
 export default ()=> {
+    const onFinish = (values) => {
+        console.log('Success:', values);
+    };
+
+    const onFinishFailed = (errorInfo) => {
+        console.log('Failed:', errorInfo);
+    };
+    
     return (
-        <div>
+        <div className="login">
             <h1>Login</h1>
+            <div className="login__form">
+                <Form
+                    {...layout}
+                    name="basic"
+                    initialValues={{
+                        remember: true,
+                    }}
+                    onFinish={onFinish}
+                    onFinishFailed={onFinishFailed}
+                    >
+                    <Form.Item
+                        label="Usuário"
+                        name="username"
+                        rules={[
+                        {
+                            required: true,
+                            message: 'Por favor preencha o seu usuário.',
+                        },
+                        ]}
+                    >
+                        <Input />
+                    </Form.Item>
+
+                    <Form.Item
+                        label="Senha"
+                        name="password"
+                        rules={[
+                        {
+                            required: true,
+                            message: 'Por favor preencha o seu senha.',
+                        },
+                        ]}
+                    >
+                        <Input.Password />
+                    </Form.Item>
+
+                    <Form.Item {...tailLayout} name="remember" valuePropName="checked">
+                        <Checkbox>Relembrar o acesso.</Checkbox>
+                    </Form.Item>
+
+                    <Form.Item {...tailLayout}>
+                        <Button type="primary" htmlType="submit">
+                        Entrar
+                        </Button>
+                    </Form.Item>
+                </Form>
+            </div>
         </div>
     );
 };

website/src/pages/Login/index.less

@@ -0,0 +1,6 @@
+
+.login {
+    &__form {
+        max-width: 600px;
+    }
+}

website/src/pages/Register/index.js

@@ -1,9 +1,147 @@
 import React, { useEffect, useState} from 'react';
 
+import { Form, Input, Button, Select } from 'antd';
+
+import _service from '@netuno/service-client';
+
+import './index.less';
+
+const layout = {
+    labelCol: { span: 8 },
+    wrapperCol: { span: 16 },
+};
+const tailLayout = {
+    wrapperCol: { offset: 8, span: 16 },
+};
+
 export default ()=> {
+    const [ cities, setCities ] = useState([]);
+    useEffect(() => {
+        _service({
+            url: "cities",
+            success: (response) => {
+                if (response.json) {
+                    setCities(response.json);
+                }
+            },
+            fail: (e) => {
+                console.log("Service Error", e);
+            }
+        });
+    }, []);
+
+    const onFinish = (values) => {
+        console.log('Success:', values);
+    };
+
+    const onFinishFailed = (errorInfo) => {
+        console.log('Failed:', errorInfo);
+    };
+
     return (
-        <div>
-            <h1>Register</h1>
+        <div className="register">
+            <h1>Criar Conta</h1>
+            <div className="register__form">
+                <Form
+                    {...layout}
+                    name="basic"
+                    initialValues={{
+                        remember: true,
+                    }}
+                    onFinish={onFinish}
+                    onFinishFailed={onFinishFailed}
+                    >
+                    <Form.Item
+                        label="Nome"
+                        name="name"
+                        rules={[
+                        {
+                            required: true,
+                            message: 'Por favor preencha o seu nome.',
+                        },
+                        ]}
+                    >
+                        <Input />
+                    </Form.Item>
+                    <Form.Item
+                        label="Sobrenome"
+                        name="surname"
+                        rules={[
+                        {
+                            required: true,
+                            message: 'Por favor preencha o seu nome.',
+                        },
+                        ]}
+                    >
+                        <Input />
+                    </Form.Item>
+                    <Form.Item
+                        label="E-mail"
+                        name="email"
+                        rules={[
+                            {
+                                type: 'email',
+                                message: 'Por favor preencha um e-mail válido.',
+                            },
+                            {
+                                required: true,
+                                message: 'Por favor preencha o seu e-mail.',
+                            },
+                        ]}
+                    >
+                        <Input />
+                    </Form.Item>
+                    <Form.Item
+                        label="Usuário"
+                        name="username"
+                        rules={[
+                        {
+                            required: true,
+                            message: 'Por favor preencha o seu usuário.',
+                        },
+                        ]}
+                    >
+                        <Input />
+                    </Form.Item>
+                    <Form.Item
+                        label="Senha"
+                        name="password"
+                        rules={[
+                        {
+                            required: true,
+                            message: 'Por favor preencha o seu senha.',
+                        },
+                        ]}
+                    >
+                        <Input.Password />
+                    </Form.Item>
+
+                    
+                    <Form.Item
+                        label="Cidade"
+                        name="city_uid"
+                        rules={[
+                            {
+                                required: true,
+                                message: 'Por favor preencha a sua cidade.',
+                            },
+                        ]}
+                    >
+                        <Select allowClear>
+                            {
+                                cities.map(({ uid, name })=> 
+                                    <Select.Option value={uid}>{name}</Select.Option>
+                                )
+                            }
+                        </Select>
+                    </Form.Item>
+                    <Form.Item {...tailLayout}>
+                        <Button type="primary" htmlType="submit">
+                        Enviar
+                        </Button>
+                    </Form.Item>
+                </Form>
+            </div>
         </div>
     );
 };

website/src/pages/Register/index.less

@@ -0,0 +1,6 @@
+
+.register {
+    &__form {
+        max-width: 600px;
+    }
+}