From 93ba1053e521b93da95084ddaf97edad89ec1e5f Mon Sep 17 00:00:00 2001 From: Nuno Martinho Date: Thu, 15 Apr 2021 00:39:24 +0000 Subject: [PATCH] Login & Register Pages --- dbs/myapp.mv.db | Bin 73728 -> 73728 bytes website/src/App.js | 71 +++--- website/src/App.less | 300 +------------------------ website/src/pages/Login/index.js | 81 +++++++ website/src/pages/Login/index.less | 3 + website/src/pages/Register/index.js | 112 +++++++++ website/src/pages/Register/index.less | 0 website/src/pages/dashboard/index.js | 0 website/src/pages/dashboard/index.less | 0 9 files changed, 229 insertions(+), 338 deletions(-) create mode 100644 website/src/pages/Login/index.js create mode 100644 website/src/pages/Login/index.less create mode 100644 website/src/pages/Register/index.js create mode 100644 website/src/pages/Register/index.less create mode 100644 website/src/pages/dashboard/index.js create mode 100644 website/src/pages/dashboard/index.less diff --git a/dbs/myapp.mv.db b/dbs/myapp.mv.db index 2ddf9cc7c6717797bf69243862bddc48844810b0..cb3336fcf46c1026cce7c782d60b776fee3a179b 100644 GIT binary patch delta 3170 zcmcIm3rrMO6rFjqC;|&8A|OR}5yjRmotd58o!R(_rm-=`#Aq~WtJe9gpdbqNV;c)i zjZG^}(Pv$0sI8c^v84Vc3bi!_HSv?i4^zNrx=voPEiWuq-MmV(v_p_>Z>gnag(XYej8i|^ z)RQ|UjvxrJXcRS&Bwpvyc+w_Anv}VQ9N1K2$heL(hD=-)Tpv;u#HoSd`aJy2VgW0Q zv;^zN$zW-W=4HyvpnQ>*FmX)+m}=Ilr>#r`Q}%1=uf3EE#(K4>i|l4V7i;goeK#It zwriyy&K?Rfr@K4!m5O z1a6Ij4{F(%^HfqA0e3LNwO6)$n*_SQgm-qW2i-l|YORI@54|vVw+B323oCbbQe8i+ zgXi{G(ua1D7t}GbXlLNX02Uf96a2T1~;{}%W*!BMUAC;8TFBtxECdp%F} zEvW8ia^4qxChL5i@L=m!aQZ4NIaNI8wC(%g7UR0$RjH>lw)LHCf3Uru$xAzelgQFu z7D$u-h{m=7a-{#*A@kGjVH_U}AwhSyp$P5!DQ#=zDlf$Do6A@hIqE+`hT+qkAXHL)#oqhLQm}*(XFJ@)YgW18#lAWdrf=bvs zgRl~@r6ncH^BoS!7-+5cW63ZHvgD#M5@ZjJyC-{i4s$@!KeC8PD$58s6gVC;SQV5g zC^|7%&Zvx{U}1L1JZ^`Rw#%34 zR#ZFgF>UwYHz~AB#z;^Y57HH;NMRjOH?bnFN?|>btXN31ipv?b+a*Qq=A(#Ecn5wH z%?S#2F^$;gB6iS{9D-WopN9vGMa_auDk_l|yQ2yMnhkd`PR1#E6jnh^#ROPoNrXK; zgEI9#CwPvbZAB{TJ8Z?`Qa8h>qPHN0)GH5fG%I~7kI3VdM`e*(VZPq0v=n_Ftilxp zF@Km*P5-+pykbN_!M&(5tkRJ(tTI>`zVEFAWL$p@SeVX#Y`|88>oHO-P^4|LDxv_r z<3edITYy4lRTUK!W@2O*-i8}O_K4b5Uy`?Jab*GT}WBM<@ j=_sl?K>f90i#1nErlo^KM4AqpOf5rU8Mz)|Zf@Jcn{|%#X`TT+<*{o=P zdFWxr^U)MVsky110W|fBSWHn9o!j)##MEI zt_LWwIumpqLsP0VJzb~_S#ZT^G&cWSIIb&GIl7#w|-#XaWg9jWW z@s;`u=wf|4Xy}iQG>ifbW6{qIqkN5r&qsT^ee!YGw*da}jzat|xA99fwsGFn#=V>A z9?yNYYow0KTaQe|k1b6n`C#HKO3dQYA@zPpdf z(|bab*wStmXm9gPi#rAAG0nGrh<((Z^sqar%^QxyqN@!fz0Et1Is;$xv}3(Ki1=U9 zd=Kqw{s6SxMN?W*JT2%F%4tdVv{bfZndqgDpWbMdv>c;7t(7;>*48v{M(g^U_P~?T zYM?J#(_d{pKw%Q>EXiu0<47iFNJu`YaU|>A6q4V4;z;g#f+GWJeMnv|btFG4g!#6a zHbx`QygBN;kIJM5>G`iOS(s&~r$~&IU>Qx1v=hAc%%3>vMV#~#yYpR?145tqZkW)O z@8Y|(quoh<1-*36Z)7l=h1NlwY&%UpegUxASW%g$ib2^R2dP6*SmA%lfb*7Jyy1 ztS#58Xkcx(X8#cb#z|V7&{Mg1O_kLM6nIIN@llian&|zTbwxef1d)|>Vw;M?5P>46 zLn8t;88Rf)O`U)`%gH1ZL}Jy6ixO5<#6dyjkY;r%`#YCCag4A zjaX$3Mq|XVW{x))me?#PCd0)Qh2tcs5aS5cL^rf|hgWq)kqOnhN*>JVs!7@b)7UC!hp^YBtWQ< z9z!EQddvh&@+8PeIza+tO{^#wJC^Y;GH~DFU#u?8W?4xK<`1Rq$|KoVqIcyH+?7YiYL$6*uhNiP;Z$J>kLM*h z)%3rs!mCH;!ynycSS8A^MwH>(!3sb}_tk)f>HNnAY;~j_YeB_B`=60C9H3R%I4J(5 zYM!wi$J@@mY+EP3g?$8yS6qx}t`c1`$nT { return ( -
- -
-
- - - -
- - }> - Home - - }> - About - - - - - -
- - - - - - - -
-

Copyright nuno kappa

-
- -
+ +
+ + Home + Login + Register + +
+ + + + + + + + + + + + + +
+

Plataforma Social

+ Desenvolvimento de demonstração. +
+ ); -} - - - - -export default App; +}; \ No newline at end of file diff --git a/website/src/App.less b/website/src/App.less index acdb1ce..d627071 100644 --- a/website/src/App.less +++ b/website/src/App.less @@ -1,298 +1,4 @@ -@import '../node_modules/sal.js/dist/sal.css'; - -@import "./defaults.less"; - -html, -body { - background-color: @site-background; - font-family: @primaryFont; -} - -.ant-layout { - padding-top: @header-size; - background-color: @page-background; - min-height: 100vh; - - @media only screen and (max-width: @header-mobile-width) { - padding-top: @header-size-mobile; - } -} - -.ant-layout-header { - padding: 0 calc((100% - @header-desktop-width) / 2); - position: fixed; - display: flex; - flex-direction: row; - z-index: 1000; - top: 0; - width: 100%; - height: @header-size; - line-height: @header-size; - background: transparent; - - &:before { - background: @header-background; - content: ""; - position: absolute; - left: 0; - top: 0; - z-index: 2; - width: 100%; - height: 100%; - } - - &:after { - width: 100%; - height: 20px; - content: ""; - position: absolute; - z-index: 1; - left: 0; - bottom: 0; - box-shadow: 0 0px 10px 7px rgba(0, 0, 0, 0.35); - border-radius: 50%; - } - - >*:not(.menu-burger-open) { - z-index: 3; - } - - &.header-burger-open .menu { - z-index: 0; - } - - .logo { - padding: 0 10px; - display: block; - width: @logo-width; - height: auto; - - a { - img { - width: auto; - height: 50px; - } - } - - @media only screen and (max-width: @header-mobile-width) { - width: 55%; - max-width: 400px; - } - } - - .menu-languages { - line-height: @header-line-height; - background-color: transparent; - color: @header-menu-color; - border-bottom: none; - display: flex; - - .ant-menu-submenu-title:hover { - color: @header-menu-color-hover !important; - } - - li { - margin-bottom: 20px !important; - display: inline; - - &:hover { - border-color: @header-menu-color-hover !important; - } - } - } - - .menu { - display: flex; - width: 100%; - line-height: @header-line-height; - - @media only screen and (max-width: @header-mobile-width) { - display: none; - } - - ul { - background-color: transparent; - margin-left: auto; - border-bottom: none; - border-right: none; - - li { - display: inline; - - &:hover { - a { - color: @header-menu-color-hover; - } - - border-color: @header-menu-color-hover !important; - } - - a { - color: @header-menu-color; - font-size: 1.2em; - } - - &.ant-menu-submenu-horizontal::after { - content: '>'; - color: rgba(0, 0, 0, 0.65); - transform: rotate(90deg); - position: absolute; - right: -20px; - top: 2px; - font-weight: 600; - } - } - } - - &-languages { - margin-left: 0 !important; - - @media screen and (max-width: @header-mobile-width) { - margin-right: 85px; - margin-left: auto !important; - } - } - } - - .menu-burger-button { - position: absolute; - width: auto; - height: auto; - top: 18px; - right: calc(@header-size / 4); - - @media only screen and (min-width: @header-mobile-width) { - display: none; - } - - .burger { - height: calc(@header-size-mobile / 2); - } - } - - .menu-burger { - @media only screen and (min-width: @header-mobile-width) { - display: none; - } - } -} - -.ant-menu-sub, -.ant-menu-submenu-popup { - border-radius: 2px !important; -} - -.header-burger-open { - .menu { - display: block; - position: fixed; - width: 100%; - height: calc(100% - @header-size); - top: @header-size; - left: 0; - right: 0; - z-index: 9998; - background-color: @mobile-menu-background; - padding: @mobile-menu-padding-vertical @mobile-menu-padding-horizontal; - overflow: auto; - margin-top: 0; - - @media only screen and (max-width: @header-mobile-width) { - height: calc(100% - @header-size-mobile); - top: @header-size-mobile; - } - } -} - -.burger .burger-lines, -.burger .burger-lines:after, -.burger .burger-lines:before { - background-color: @header-menu-color; -} - - -.ant-layout-content { - background-color: @page-background; - z-index: 2; -} - -.ant-layout-footer { - z-index: 1; - width: 100%; - padding: 40px 0 20px; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), - 0 1px 1px 0 rgba(0, 0, 0, .14), - 0 2px 1px -1px rgba(0, 0, 0, .12); - background: @footer-background; - - @media only screen and (max-width: 800px) { - text-align: center; - padding: 30px 0 10px; - } - - h1 { - color: @footer-color; - font-size: 25px; - padding: 0 10px; - - margin: 0 calc((100% - 1200px) / 2); - - @media only screen and (max-width: 800px) { - width: 100%; - margin: 0 auto; - font-size: 20px; - } - } - - .line { - height: 20px; - opacity: .5; - border: 0; - border-radius: 50%; - border-bottom: 2px solid @primary-color; - width: 100%; - } - - - .links-bar, - .copyright { - padding: 0 10px; - display: inline-block; - width: 50%; - font-size: .875em; - - a { - color: @footer-color; - text-decoration: underline; - } - - @media screen and (min-width: 1200px) { - width: calc(50% - calc((100% - 1200px) / 2)); - } - - @media only screen and (max-width: 800px) { - display: block; - width: 100%; - margin: 20px auto !important; - font-size: 12px; - text-align: center; - } - } - - .links-bar { - margin: 20px auto; - - @media screen and (min-width: 1200px) { - margin-left: calc((100% - 1200px) / 2); - } - } - - .copyright { - color: @footer-color; - text-align: right; - - @media screen and (min-width: 1200px) { - margin-right: calc((100% - 1200px) / 2); - } - } +main { + padding: 50px; + min-height: calc(100vh - 150px) !important; } \ No newline at end of file diff --git a/website/src/pages/Login/index.js b/website/src/pages/Login/index.js new file mode 100644 index 0000000..651ab85 --- /dev/null +++ b/website/src/pages/Login/index.js @@ -0,0 +1,81 @@ +import React, { useState, useEffect } from "react"; + +import { Form, Input, Button, Checkbox } from 'antd'; +import { UserOutlined, LockOutlined } from '@ant-design/icons'; + + +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('Received values of form: ', values); + }; + + return ( +
+

Login

+
+
+ + } placeholder="Username" /> + + + } + type="password" + placeholder="Password" + /> + + + + Remember me + + + + Forgot password + + + + + + Or register now! + +
+
+
+ ); +}; \ No newline at end of file diff --git a/website/src/pages/Login/index.less b/website/src/pages/Login/index.less new file mode 100644 index 0000000..35f3241 --- /dev/null +++ b/website/src/pages/Login/index.less @@ -0,0 +1,3 @@ +.login { + max-width: 400px; +} \ No newline at end of file diff --git a/website/src/pages/Register/index.js b/website/src/pages/Register/index.js new file mode 100644 index 0000000..be22247 --- /dev/null +++ b/website/src/pages/Register/index.js @@ -0,0 +1,112 @@ +import { Form, Input, InputNumber, Button } from 'antd'; +const layout = { + labelCol: { + span: 8, + }, + wrapperCol: { + span: 16, + }, +}; +/* eslint-disable no-template-curly-in-string */ + +const validateMessages = { + required: '${label} is required!', + types: { + email: '${label} is not a valid email!', + number: '${label} is not a valid number!', + }, + number: { + range: '${label} must be between ${min} and ${max}', + }, +}; + +export default () => { + + const onFinish = (values) => { + console.log(values); + }; + + return ( +
+
+
+ + + + + + + + + + + + + + ({ + validator(_, value) { + if (!value || getFieldValue('password') === value) { + return Promise.resolve(); + } + return Promise.reject(new Error('The two passwords that you entered do not match!')); + }, + }), + ]} + > + + + + + +
+
+
+ ); + + +} \ No newline at end of file diff --git a/website/src/pages/Register/index.less b/website/src/pages/Register/index.less new file mode 100644 index 0000000..e69de29 diff --git a/website/src/pages/dashboard/index.js b/website/src/pages/dashboard/index.js new file mode 100644 index 0000000..e69de29 diff --git a/website/src/pages/dashboard/index.less b/website/src/pages/dashboard/index.less new file mode 100644 index 0000000..e69de29