From 9d1a1cc0f263c9c3ca252dc21034018332aad678 Mon Sep 17 00:00:00 2001
From: Aldarien <aldarien85@gmail.com>
Date: Fri, 25 Nov 2022 20:52:59 -0300
Subject: [PATCH] UI

---
 ui/common/Controller/Emails.php               |  18 +
 ui/common/Controller/Home.php                 |  14 +
 ui/resources/routes/01_emails.php             |  10 +
 ui/resources/routes/99_home.php               |   4 +
 ui/resources/views/emails/base.blade.php      |  14 +
 ui/resources/views/emails/mailboxes.blade.php | 156 +++++++
 ui/resources/views/emails/messages.blade.php  | 428 ++++++++++++++++++
 ui/resources/views/home.blade.php             |  57 +++
 ui/resources/views/layout/base.blade.php      |   5 +
 ui/resources/views/layout/body.blade.php      |   7 +
 .../views/layout/body/footer.blade.php        |   4 +
 .../layout/body/footer/scripts.blade.php      |   6 +
 .../layout/body/footer/scripts/main.blade.php |  38 ++
 .../views/layout/body/header.blade.php        |   5 +
 .../views/layout/body/header/navbar.blade.php |   5 +
 ui/resources/views/layout/head.blade.php      |  11 +
 .../views/layout/head/styles.blade.php        |   3 +
 ui/setup/settings/03_urls.php                 |   2 +-
 18 files changed, 786 insertions(+), 1 deletion(-)
 create mode 100644 ui/common/Controller/Emails.php
 create mode 100644 ui/common/Controller/Home.php
 create mode 100644 ui/resources/routes/01_emails.php
 create mode 100644 ui/resources/routes/99_home.php
 create mode 100644 ui/resources/views/emails/base.blade.php
 create mode 100644 ui/resources/views/emails/mailboxes.blade.php
 create mode 100644 ui/resources/views/emails/messages.blade.php
 create mode 100644 ui/resources/views/home.blade.php
 create mode 100644 ui/resources/views/layout/base.blade.php
 create mode 100644 ui/resources/views/layout/body.blade.php
 create mode 100644 ui/resources/views/layout/body/footer.blade.php
 create mode 100644 ui/resources/views/layout/body/footer/scripts.blade.php
 create mode 100644 ui/resources/views/layout/body/footer/scripts/main.blade.php
 create mode 100644 ui/resources/views/layout/body/header.blade.php
 create mode 100644 ui/resources/views/layout/body/header/navbar.blade.php
 create mode 100644 ui/resources/views/layout/head.blade.php
 create mode 100644 ui/resources/views/layout/head/styles.blade.php

diff --git a/ui/common/Controller/Emails.php b/ui/common/Controller/Emails.php
new file mode 100644
index 0000000..a7c7efa
--- /dev/null
+++ b/ui/common/Controller/Emails.php
@@ -0,0 +1,18 @@
+<?php
+namespace ProVM\Common\Controller;
+
+use Psr\Http\Message\ResponseInterface;
+use Psr\Http\Message\ServerRequestInterface;
+use Slim\Views\Blade as View;
+
+class Emails
+{
+    public function __invoke(ServerRequestInterface $request, ResponseInterface $response, View $view): ResponseInterface
+    {
+        return $view->render($response, 'emails.mailboxes');
+    }
+    public function messages(ServerRequestInterface $request, ResponseInterface $response, View $view, string $mailbox): ResponseInterface
+    {
+        return $view->render($response, 'emails.messages', ['mailbox_id' => $mailbox]);
+    }
+}
\ No newline at end of file
diff --git a/ui/common/Controller/Home.php b/ui/common/Controller/Home.php
new file mode 100644
index 0000000..903d545
--- /dev/null
+++ b/ui/common/Controller/Home.php
@@ -0,0 +1,14 @@
+<?php
+namespace ProVM\Common\Controller;
+
+use Psr\Http\Message\ResponseInterface;
+use Psr\Http\Message\ServerRequestInterface;
+use Slim\Views\Blade as View;
+
+class Home
+{
+    public function __invoke(ServerRequestInterface $request, ResponseInterface $response, View $view): ResponseInterface
+    {
+        return $view->render($response, 'home');
+    }
+}
\ No newline at end of file
diff --git a/ui/resources/routes/01_emails.php b/ui/resources/routes/01_emails.php
new file mode 100644
index 0000000..a5d9f2d
--- /dev/null
+++ b/ui/resources/routes/01_emails.php
@@ -0,0 +1,10 @@
+<?php
+use ProVM\Common\Controller\Emails;
+
+$app->group('/emails', function($app) {
+    $app->group('/mailbox/{mailbox}', function ($app) {
+        $app->get('[/]', [Emails::class, 'messages']);
+    });
+    $app->get('/mailboxes', Emails::class);
+    $app->get('[/]', Emails::class);
+});
diff --git a/ui/resources/routes/99_home.php b/ui/resources/routes/99_home.php
new file mode 100644
index 0000000..f989a1e
--- /dev/null
+++ b/ui/resources/routes/99_home.php
@@ -0,0 +1,4 @@
+<?php
+use ProVM\Common\Controller\Home;
+
+$app->get('[/]', Home::class);
\ No newline at end of file
diff --git a/ui/resources/views/emails/base.blade.php b/ui/resources/views/emails/base.blade.php
new file mode 100644
index 0000000..f4e4d40
--- /dev/null
+++ b/ui/resources/views/emails/base.blade.php
@@ -0,0 +1,14 @@
+@extends('layout.base')
+
+@section('page_title')
+    Emails
+    @hasSection('emails_title')
+        -
+        @yield('emails_title')
+    @endif
+@endsection
+
+@section('page_content')
+    <h1>Emails</h1>
+    @yield('emails_content')
+@endsection
\ No newline at end of file
diff --git a/ui/resources/views/emails/mailboxes.blade.php b/ui/resources/views/emails/mailboxes.blade.php
new file mode 100644
index 0000000..fea91fd
--- /dev/null
+++ b/ui/resources/views/emails/mailboxes.blade.php
@@ -0,0 +1,156 @@
+@extends('emails.base')
+
+@section('emails_content')
+    <h3>Mailboxes</h3>
+    <div id="mailboxes" class="ui list"></div>
+@endsection
+
+@push('page_scripts')
+    <script type="text/javascript">
+        class Mailbox {
+            id
+            name
+            registered
+
+            constructor(props) {
+                this.name = props.name
+                this.registered = props.registered
+                if (props.registered) {
+                    this.id = props.id
+                }
+            }
+            draw() {
+                const name = $('<td></td>')
+                const register = $('<td></td>')
+                if (this.registered) {
+                    name.append(
+                        $('<a></a>').attr('href', '{{$urls->base}}/emails/mailbox/' + this.id).html(this.name)
+                    )
+                    register.append(
+                        $('<a></a>').attr('href', '{{$urls->base}}/emails/mailbox/' + this.id).append(
+                            $('<i></i>').addClass('ui big green check circle icon')
+                        )
+                    ).append(
+                        $('<button></button>').addClass('ui mini circular red icon button').append(
+                            $('<i></i>').addClass('remove icon')
+                        ).click(() => {
+                            this.unregister()
+                        })
+                    )
+                } else {
+                    name.html(this.name)
+                    register.append(
+                        $('<button></button>').addClass('ui mini circular icon button').append(
+                            $('<i></i>').addClass('save icon')
+                        ).click(() => {
+                            this.register()
+                        })
+                    )
+                }
+                return $('<tr></tr>').append(name).append(register)
+            }
+            register() {
+                const uri = '/mailboxes/register'
+                const data = {
+                    mailboxes: [this.name]
+                }
+                return Send.post({
+                    uri,
+                    data
+                }).then(response => {
+                    response.mailboxes.forEach(mb => {
+                        if (mb.name === this.name && mb.created) {
+                            this.id = mb.id
+                            this.registered = true
+                            mailboxes.draw().table()
+                        }
+                    })
+                })
+            }
+            unregister() {
+                const uri = '/mailboxes/unregister'
+                const data = {
+                    mailboxes: [this.id]
+                }
+                return Send.delete({
+                    uri,
+                    data
+                }).then(response => {
+                    response.mailboxes.forEach(mb => {
+                        if (mb.id === this.id && mb.removed) {
+                            this.id = null
+                            this.registered = false
+                            mailboxes.draw().table()
+                        }
+                    })
+                })
+            }
+        }
+        const mailboxes = {
+            div_id: '',
+            mailboxes: [],
+            get: function() {
+                this.draw().loading()
+                return Send.get('/mailboxes').then(response => {
+                    response.mailboxes.forEach(mb => {
+                        this.mailboxes.push(new Mailbox(mb))
+                    })
+                    this.draw().table()
+                })
+            },
+            draw: function() {
+                return {
+                    loading: () => {
+                        const parent = $(this.div_id)
+                        parent.html('')
+                        parent.append(
+                            $('<div></div>').addClass('ui segment').append(
+                                $('<p></p>').html('&nbsp;')
+                            ).append(
+                                $('<div></div>').addClass('ui active dimmer').append(
+                                    $('<div></div>').addClass('ui indeterminate elastic loader')
+                                )
+                            ).append(
+                                $('<p></p>').html('&nbsp;')
+                            )
+                        )
+                    },
+                    table: () => {
+                        const parent = $(this.div_id)
+                        parent.html('')
+                        return parent.append(
+                            $('<table></table>').addClass('ui table').append(
+                                this.draw().head()
+                            ).append(
+                                this.draw().body()
+                            )
+                        )
+                    },
+                    head: () => {
+                        return $('<thead></thead>').append(
+                            $('<tr></tr>').append(
+                                $('<th></th>').html('Mailbox')
+                            ).append(
+                                $('<th></th>').html('Registered')
+                            )
+                        )
+                    },
+                    body: () => {
+                        const body = $('<tbody></tbody>')
+                        this.mailboxes.forEach(mb => {
+                            body.append(mb.draw())
+                        })
+                        return body
+                    }
+                }
+            },
+            setup: function() {
+                this.get()
+            }
+        }
+        $().ready(() => {
+            mailboxes.div_id = '#mailboxes'
+            mailboxes.setup()
+        })
+    </script>
+@endpush
\ No newline at end of file
diff --git a/ui/resources/views/emails/messages.blade.php b/ui/resources/views/emails/messages.blade.php
new file mode 100644
index 0000000..a16c0f3
--- /dev/null
+++ b/ui/resources/views/emails/messages.blade.php
@@ -0,0 +1,428 @@
+@extends('emails.base')
+
+@section('emails_content')
+    <h3>Messages - <span id="name"></span><span id="count"></span></h3>
+    <div id="messages" class="ui basic segment"></div>
+@endsection
+
+@push('page_scripts')
+    <script type="text/javascript">
+        class Message
+        {
+            id
+            uid
+            subject
+            date
+            from
+            states = {
+                attachments: false,
+                valid: false,
+                downloaded: false
+            }
+
+            constructor({id, uid, subject, date_time, from, states}) {
+                this.set().id(id)
+                    .set().uid(uid)
+                    .set().subject(subject)
+                    .set().date(date_time)
+                    .set().from(from)
+                    .set().states(states)
+            }
+            get() {
+                return {
+                    id: () => {
+                        return this.id
+                    },
+                    uid: () => {
+                        return this.uid
+                    },
+                    subject: () => {
+                        return this.subject
+                    },
+                    date: () => {
+                        return this.date
+                    },
+                    from: () => {
+                        return this.from
+                    },
+                    states: () => {
+                        return this.states
+                    }
+                }
+            }
+            set() {
+                return {
+                    id: id => {
+                        this.id = id
+                        return this
+                    },
+                    uid: uid => {
+                        this.uid = uid
+                        return this
+                    },
+                    subject: subject => {
+                        this.subject = subject
+                        return this
+                    },
+                    date: date => {
+                        this.date = date
+                        return this
+                    },
+                    from: from => {
+                        this.from = from
+                        return this
+                    },
+                    states: states => {
+                        const map_keys = {
+                            has_attachments: 'attachments',
+                            valid_attachments: 'valid',
+                            downloaded_attachments: 'downloaded'
+                        }
+                        Object.keys(states).forEach(k => {
+                            this.states[map_keys[k]] = states[k]
+                        })
+                        return this
+                    }
+                }
+            }
+            has() {
+                return {
+                    attachments: () => {
+                        return this.states.attachments
+                    },
+                    valid: () => {
+                        return this.states.valid
+                    },
+                    downloaded: () => {
+                        return this.states.downloaded
+                    }
+                }
+            }
+            doesHave() {
+                return {
+                    attachments: () => {
+                        this.states.attachments = true
+                        return this
+                    },
+                    valid: () => {
+                        this.states.valid = true
+                        return this
+                    },
+                    downloaded: () => {
+                        this.states.downloaded = true
+                        return this
+                    }
+                }
+            }
+
+            draw() {
+                const format = Intl.DateTimeFormat('es-CL', {dateStyle: 'full', timeStyle: 'short'})
+                let date = new Date()
+                try {
+                    date = new Date(this.get().date())
+                } catch (e) {
+                    console.debug(e)
+                }
+                return $('<tr></tr>').append(
+                    $('<td></td>').html(this.get().subject())
+                ).append(
+                    $('<td></td>').html(format.format(date))
+                ).append(
+                    $('<td></td>').html(this.get().from())
+                ).append(
+                    $('<td></td>').html($('<i></i>').addClass(this.has().attachments() ? 'green check circle icon' : 'red times circle icon'))
+                ).append(
+                    $('<td></td>').html($('<i></i>').addClass(this.has().valid() ? 'green check circle icon' : 'red times circle icon'))
+                ).append(
+                    $('<td></td>').html($('<i></i>').addClass(this.has().downloaded() ? 'green check circle icon' : 'red times circle icon'))
+                ).append(
+                    $('<td></td>').append(
+                        (this.has().attachments() && this.has().valid() && !this.has().downloaded()) ?
+                        $('<button></button>').addClass('ui mini green circular icon button').append(
+                            $('<i></i>').addClass('paperclip icon')
+                        ).click(() => {
+                            this.download().attachments(this.get().uid())
+                        }) : ''
+                    )
+                )
+            }
+
+            download() {
+                return {
+                    attachments: uid => {
+                        const uri = '/emails/attachment'
+                        const data = {
+                            mailbox: '{{$mailbox_id}}',
+                            messages: [
+                                uid
+                            ],
+                            extension: 'pdf'
+                        }
+                        return Send.post({
+                            uri,
+                            data
+                        }).then(response => {
+                            if (response.attachments_count > 0) {
+                                alert('Grabbed Attachments')
+                            }
+                        })
+                    }
+                }
+            }
+        }
+        const messages = {
+            id: {
+                results: '',
+                name: '',
+                count: ''
+            },
+            page: 1,
+            current: 0,
+            shown: 10,
+            total: null,
+            visible: [],
+            get: function() {
+                return {
+                    mailbox: () => {
+                        this.draw().loader()
+                        const uri = '/mailbox/{{$mailbox_id}}'
+                        return Send.get(uri).then(response => {
+                            $(this.id.name).html(response.mailbox.name)
+                        })
+                    },
+                    messages: () => {
+                        const uri = '/messages/valid'
+                        const data = {
+                            mailboxes: ['{{$mailbox_id}}']
+                        }
+                        return Send.post({
+                            uri,
+                            data
+                        }).then(response => {
+                            if (this.total === null) {
+                                $(this.id.count).html(' (' + response.total + ')')
+                                this.total = response.total
+                            }
+                            this.visible = []
+                            response.messages.forEach(m => {
+                                this.visible.push(new Message(m))
+                            })
+                            if (this.total > 0) {
+                                $(this.id.results).html('').append(
+                                    this.draw().table()
+                                )
+                            } else {
+                                $(this.id.results).html('').append(
+                                    this.draw().empty()
+                                )
+                            }
+                        })
+                    }
+                }
+            },
+            draw: function() {
+                const columns = 8
+                return {
+                    loader: () => {
+                        $(this.id.results).html('').append(
+                            $('<div></div>').addClass('ui segment').append(
+                                $('<p></p>').html('&nbsp;')
+                            ).append(
+                                $('<div></div>').addClass('ui active dimmer').append(
+                                    $('<div></div>').addClass('ui indeterminate elastic loader')
+                                )
+                            ).append(
+                                $('<p></p>').html('&nbsp;')
+                            )
+                        )
+                    },
+                    table: () => {
+                        return $('<table></table>').addClass('ui table').append(
+                            this.draw().head()
+                        ).append(
+                            this.draw().body()
+                        ).append(
+                            this.draw().footer()
+                        )
+                    },
+                    head: () => {
+                        const values = []
+                        for (let i = 0; i < 10; i ++) {
+                            const v = {
+                                name: (i + 1) * 10,
+                                value: (i + 1) * 10
+                            }
+                            if ((i + 1) * 10 === this.shown) {
+                                v['selected'] = true
+                            }
+                            values.push(v)
+                        }
+                        const dropdown = $('<div></div>').addClass('ui scrolling dropdown').append(
+                            $('<i></i>').addClass('dropdown icon')
+                        ).append(
+                            $('<div></div>').addClass('text').html(this.shown)
+                        ).dropdown({
+                            values,
+                            onChange: (value, text, $choice) => {
+                                if (value === this.shown) {
+                                    return
+                                }
+                                this.shown = parseInt(value)
+                                // Trigger pending transition
+                                $choice.parent().parent().dropdown('hide')
+                                this.get()
+                            }
+                        })
+                        return $('<thead></thead>').append(
+                            $('<tr></tr>').append(
+                                $('<th></th>').addClass('right aligned').attr('colspan', columns).append(
+                                    dropdown
+                                ).append(
+                                    $('<span></span>').addClass('ui basic label').html((this.current + 1) + ' - ' + Math.min(this.shown + this.current, this.total ?? 99999999))
+                                ).append(
+                                    $('<button></button>').addClass('ui mini circular icon button').append(
+                                        $('<i></i>').addClass('left chevron icon')
+                                    ).click(() => {
+                                        this.prev()
+                                    })
+                                ).append(
+                                    $('<button></button>').addClass('ui mini circular icon button').append(
+                                        $('<i></i>').addClass('right chevron icon')
+                                    ).click(() => {
+                                        this.next()
+                                    })
+                                )
+                            )
+                        ).append(
+                            $('<tr></tr>').append(
+                                $('<th></th>').html('#')
+                            ).append(
+                                $('<th></th>').html('Subject')
+                            ).append(
+                                $('<th></th>').html('Date')
+                            ).append(
+                                $('<th></th>').html('From')
+                            ).append(
+                                $('<th></th>').html('Has Attachments')
+                            ).append(
+                                $('<th></th>').html('Valid Attachments')
+                            ).append(
+                                $('<th></th>').html('Downloaded Attachments')
+                            ).append(
+                                $('<th></th>')
+                            )
+                        )
+                    },
+                    body: () => {
+                        const tbody = $('<tbody></tbody>')
+                        this.visible.forEach((m, i) => {
+                            const row = m.draw()
+                            row.prepend(
+                                $('<td></td>').html(i + this.current + 1)
+                            )
+                            tbody.append(row)
+                        })
+                        return tbody
+                    },
+                    footer: () => {
+                        const pages = this.lastPage()
+                        const paging = $('<div></div>').addClass('ui right floated pagination menu')
+                        if (this.page !== 1) {
+                            paging.append(
+                                $('<a></a>').addClass('icon item').append(
+                                    $('<i></i>').addClass('step backward icon')
+                                ).click(() => {
+                                    this.first()
+                                })
+                            )
+                        }
+                        for (let i = 0; i < pages; i ++) {
+                            const page = $('<a></a>').addClass('item').html(i + 1).click(() => {
+                                this.goto(i + 1)
+                            })
+                            if (i + 1 === this.page) {
+                                page.addClass('active')
+                            }
+                            paging.append(page)
+                        }
+                        if (this.page !== this.lastPage()) {
+                            paging.append(
+                                $('<a></a>').addClass('icon item').append(
+                                    $('<i></i>').addClass('step forward icon')
+                                ).click(() => {
+                                    this.last()
+                                })
+                            )
+                        }
+                        return $('<tfoot></tfoot>').append(
+                            $('<tr></tr>').append(
+                                $('<th></th>').attr('colspan', columns).append(paging)
+                            )
+                        )
+                    },
+                    empty: () => {
+                        return $('<div></div>').addClass('ui message').html('No messages found.')
+                    }
+                }
+            },
+            lastPage: function() {
+                let pages = Math.floor(this.total / this.shown)
+                if (this.total / this.shown > pages) {
+                    pages ++
+                }
+                return pages
+            },
+            first: function() {
+                if (this.current === 0) {
+                    return
+                }
+                this.page = 1
+                this.current = 0
+                this.get()
+            },
+            next: function() {
+                if (this.current + this.shown >= this.total) {
+                    return
+                }
+                this.page ++
+                this.current += this.shown
+                this.get()
+            },
+            goto: function(page) {
+                if (this.page === page) {
+                    return
+                }
+                this.page = page
+                this.current = (this.page - 1) * this.shown
+                this.get()
+            },
+            prev: function() {
+                if (this.current < this.shown) {
+                    return
+                }
+                this.page --
+                this.current -= this.shown
+                this.get()
+            },
+            last: function() {
+                if (this.page === this.lastPage()) {
+                    return
+                }
+                this.page = this.lastPage()
+                this.current = (this.page - 1) * this.shown
+                this.get()
+            },
+            setup: function() {
+                this.get().mailbox().then(() => {
+                    this.get().messages()
+                })
+            }
+        }
+        $().ready(() => {
+            messages.id.results = '#messages'
+            messages.id.name = '#name'
+            messages.id.count = '#count'
+            messages.setup()
+        })
+    </script>
+@endpush
\ No newline at end of file
diff --git a/ui/resources/views/home.blade.php b/ui/resources/views/home.blade.php
new file mode 100644
index 0000000..d5f0851
--- /dev/null
+++ b/ui/resources/views/home.blade.php
@@ -0,0 +1,57 @@
+@extends('layout.base')
+
+@section('page_content')
+    <h1>Registered Mailboxes</h1>
+    <div id="mailboxes"></div>
+@endsection
+
+@push('page_scripts')
+    <script type="text/javascript">
+        const mailboxes = {
+            div_id: '',
+            mailboxes: [],
+            get: function() {
+                const uri = '/mailboxes/registered'
+                this.draw().loading()
+                return Send.get(uri).then(response => {
+                    this.mailboxes = response.mailboxes
+                    this.draw().list()
+                })
+            },
+            draw: function() {
+                return {
+                    loading: () => {
+                        const parent = $(this.div_id)
+                        parent.html('')
+                        parent.append(
+                            $('<div></div>').addClass('ui segment').append(
+                                $('<p></p>').html('&nbsp;')
+                            ).append(
+                                $('<div></div>').addClass('ui active dimmer').append(
+                                    $('<div></div>').addClass('ui indeterminate elastic loader')
+                                )
+                            ).append(
+                                $('<p></p>').html('&nbsp;')
+                            )
+                        )
+                    },
+                    list: () => {
+                        const parent = $(this.div_id)
+                        parent.html('')
+                        const list = $('<div></div>').addClass('ui list')
+                        this.mailboxes.forEach(mb => {
+                            list.append(
+                                $('<a></a>').addClass('item').attr('href', '{{$urls->base}}/emails/mailbox/' + mb.id).html(mb.name)
+                            )
+                        })
+                        parent.append(list)
+                    }
+                }
+            }
+        }
+        $().ready(() => {
+            mailboxes.div_id = '#mailboxes'
+            mailboxes.get()
+        })
+    </script>
+@endpush
\ No newline at end of file
diff --git a/ui/resources/views/layout/base.blade.php b/ui/resources/views/layout/base.blade.php
new file mode 100644
index 0000000..fb96b37
--- /dev/null
+++ b/ui/resources/views/layout/base.blade.php
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<html lang="es">
+@include('layout.head')
+@include('layout.body')
+</html>
\ No newline at end of file
diff --git a/ui/resources/views/layout/body.blade.php b/ui/resources/views/layout/body.blade.php
new file mode 100644
index 0000000..3bf15cc
--- /dev/null
+++ b/ui/resources/views/layout/body.blade.php
@@ -0,0 +1,7 @@
+<body>
+@include('layout.body.header')
+<div class="ui container">
+    @yield('page_content')
+</div>
+@include('layout.body.footer')
+</body>
\ No newline at end of file
diff --git a/ui/resources/views/layout/body/footer.blade.php b/ui/resources/views/layout/body/footer.blade.php
new file mode 100644
index 0000000..3dc6d22
--- /dev/null
+++ b/ui/resources/views/layout/body/footer.blade.php
@@ -0,0 +1,4 @@
+<footer>
+</footer>
+
+@include('layout.body.footer.scripts')
\ No newline at end of file
diff --git a/ui/resources/views/layout/body/footer/scripts.blade.php b/ui/resources/views/layout/body/footer/scripts.blade.php
new file mode 100644
index 0000000..108afea
--- /dev/null
+++ b/ui/resources/views/layout/body/footer/scripts.blade.php
@@ -0,0 +1,6 @@
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.9.0/semantic.min.js" integrity="sha512-kcjXjSNAMuKRYv8VAk/rMsHzGC/M/thh4QRZAE3SM2HPAQs77N0aOVh35IpJAtLxFpzfHeYzFHf9upgnNFfQUQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+@include('layout.body.footer.scripts.main')
+
+@stack('page_scripts')
\ No newline at end of file
diff --git a/ui/resources/views/layout/body/footer/scripts/main.blade.php b/ui/resources/views/layout/body/footer/scripts/main.blade.php
new file mode 100644
index 0000000..e6a57e3
--- /dev/null
+++ b/ui/resources/views/layout/body/footer/scripts/main.blade.php
@@ -0,0 +1,38 @@
+<script type="text/javascript">
+    const Send = {
+        base_url: '{{$urls->api}}',
+        base: function({method, uri, data = null, dataType = 'json', contentType = 'application/json'}) {
+            const url = this.base_url + '/' + uri.replace(/^\//g, '')
+            const options = {
+                method,
+                url,
+                crossDomain: true,
+                headers: {
+                    'Authorization': [
+                        'Bearer {{$api_key}}'
+                    ]
+                },
+                dataType
+            }
+            if (method.toLowerCase() !== 'get' && data !== null) {
+                if (!(typeof data === 'string' || data instanceof String)) {
+                    options['data'] = JSON.stringify(data)
+                }
+                options['contentType'] = contentType
+            }
+            return $.ajax(options)
+        },
+        get: function(uri, dataType = 'json') {
+            return this.base({method: 'get', uri, dataType})
+        },
+        post: function({uri, data, dataType = 'json', contentType = 'application/json'}) {
+            return this.base({method: 'post', uri, data, dataType, contentType})
+        },
+        put: function({uri, data, dataType = 'json', contentType = 'application/json'}) {
+            return this.base({method: 'put', uri, data, dataType, contentType})
+        },
+        delete: function({uri, data, dataType = 'json', contentType = 'application/json'}) {
+            return this.base({method: 'delete', uri, data, dataType, contentType})
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/ui/resources/views/layout/body/header.blade.php b/ui/resources/views/layout/body/header.blade.php
new file mode 100644
index 0000000..42dc14f
--- /dev/null
+++ b/ui/resources/views/layout/body/header.blade.php
@@ -0,0 +1,5 @@
+<header>
+    <div class="ui container">
+        @include('layout.body.header.navbar')
+    </div>
+</header>
\ No newline at end of file
diff --git a/ui/resources/views/layout/body/header/navbar.blade.php b/ui/resources/views/layout/body/header/navbar.blade.php
new file mode 100644
index 0000000..92fa22b
--- /dev/null
+++ b/ui/resources/views/layout/body/header/navbar.blade.php
@@ -0,0 +1,5 @@
+<nav class="ui menu">
+    <a class="item" href="{{$urls->base}}">Inicio</a>
+    <a class="item" href="{{$urls->base}}/emails/mailboxes">Register Mailboxes</a>
+</nav>
+<br />
diff --git a/ui/resources/views/layout/head.blade.php b/ui/resources/views/layout/head.blade.php
new file mode 100644
index 0000000..50bfaa0
--- /dev/null
+++ b/ui/resources/views/layout/head.blade.php
@@ -0,0 +1,11 @@
+<head>
+    <meta charset="utf-8" />
+    <title>
+        Emails
+        @hasSection('page_title')
+            -
+            @yield('page_title')
+        @endif
+    </title>
+    @include('layout.head.styles')
+</head>
\ No newline at end of file
diff --git a/ui/resources/views/layout/head/styles.blade.php b/ui/resources/views/layout/head/styles.blade.php
new file mode 100644
index 0000000..8b8ae7f
--- /dev/null
+++ b/ui/resources/views/layout/head/styles.blade.php
@@ -0,0 +1,3 @@
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.9.0/semantic.min.css" integrity="sha512-PwhgdrueUt7iVICnZMjYcbiLalCztrVfzUIYXekIK8hZu4DQP141GrKh6fUHmNERWi4bGdBXIZqtBZnsSzHEMg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+@stack('page_styles')
\ No newline at end of file
diff --git a/ui/setup/settings/03_urls.php b/ui/setup/settings/03_urls.php
index b0ca32d..71f5383 100644
--- a/ui/setup/settings/03_urls.php
+++ b/ui/setup/settings/03_urls.php
@@ -1,7 +1,7 @@
 <?php
 return [
     'urls' => function() {
-        $arr = ['base' => '/'];
+        $arr = ['base' => $_SERVER['REQUEST_SCHEME'] . '://' . $_SERVER['HTTP_HOST']];
         $arr['api'] = 'http://localhost:8080';
         return (object) $arr;
     }