From 337f0df12ac4185e23352dc21fad32bda8b159fd Mon Sep 17 00:00:00 2001 From: Clement Michaud Date: Sun, 11 Nov 2018 22:27:43 -0800 Subject: [PATCH] First design of second factor page. --- client-react/src/App.tsx | 4 +- client-react/src/first-factor/index.tsx | 91 ---------------- .../first-factor/first-factor.module.css | 39 +++++++ .../src/pages/first-factor/first-factor.tsx | 83 ++++++++++++++ .../second-factor/second-factor.module.css | 37 +++++++ .../src/pages/second-factor/second-factor.tsx | 103 ++++++++++++++++++ client-react/src/pendrive.png | Bin 0 -> 6721 bytes client-react/src/second-factor/index.tsx | 7 -- .../form-template.module.css} | 39 +------ client-react/src/templates/form-template.tsx | 30 +++++ 10 files changed, 295 insertions(+), 138 deletions(-) delete mode 100644 client-react/src/first-factor/index.tsx create mode 100644 client-react/src/pages/first-factor/first-factor.module.css create mode 100644 client-react/src/pages/first-factor/first-factor.tsx create mode 100644 client-react/src/pages/second-factor/second-factor.module.css create mode 100644 client-react/src/pages/second-factor/second-factor.tsx create mode 100644 client-react/src/pendrive.png delete mode 100644 client-react/src/second-factor/index.tsx rename client-react/src/{first-factor/index.module.css => templates/form-template.module.css} (54%) create mode 100644 client-react/src/templates/form-template.tsx diff --git a/client-react/src/App.tsx b/client-react/src/App.tsx index 3ae8e141..51f9dbbc 100644 --- a/client-react/src/App.tsx +++ b/client-react/src/App.tsx @@ -2,8 +2,8 @@ import React, { Component } from 'react'; import './App.css'; import { BrowserRouter as Router, Route, Link } from "react-router-dom"; -import { FirstFactor } from './first-factor'; -import { SecondFactor } from './second-factor'; +import { FirstFactor } from './pages/first-factor/first-factor'; +import { SecondFactor } from './pages/second-factor/second-factor'; class App extends Component { render() { diff --git a/client-react/src/first-factor/index.tsx b/client-react/src/first-factor/index.tsx deleted file mode 100644 index 24005a82..00000000 --- a/client-react/src/first-factor/index.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import React, { Component } from "react"; - -import TextField from '@material-ui/core/TextField'; -import Button from '@material-ui/core/Button'; - -import FormControlLabel from '@material-ui/core/FormControlLabel'; -import Checkbox from '@material-ui/core/Checkbox'; - -import logo from '../logo.svg'; -import styles from "./index.module.css" - -interface State { - rememberMe: boolean; -} - -export class FirstFactor extends Component { - constructor(props: any) { - super(props) - this.state = { - rememberMe: false - } - } - - toggleRememberMe = () => { - this.setState({ - rememberMe: !(this.state.rememberMe) - }) - } - - render() { - return ( -
-
-

Sign in

-
-
-
-
-
- - -
-
- - -
-
-
-
-
- - } - label="Remember me" - /> -
- -
-
- -
-
-
-
-
- logo -
Powered by Authelia
-
-
- ) - } -} \ No newline at end of file diff --git a/client-react/src/pages/first-factor/first-factor.module.css b/client-react/src/pages/first-factor/first-factor.module.css new file mode 100644 index 00000000..ea6e40bb --- /dev/null +++ b/client-react/src/pages/first-factor/first-factor.module.css @@ -0,0 +1,39 @@ +.main { + padding: 2em 3em 2em 3em; +} + +.field { + width: 100%; + margin-bottom: 20px; +} + +.field .input { + width: 100%; +} + +.controls { + display: inline-block; + width: 100%; + font-size: 0.875rem; +} + +.controls .rememberMe { + float: left; +} + +.controls .resetPassword { + padding: 12px 0px; + float: right; +} + +.controls .resetPassword a { + color: black; +} + +.buttons { + margin-top: 20px; +} + +.buttons button { + width: 100%; +} \ No newline at end of file diff --git a/client-react/src/pages/first-factor/first-factor.tsx b/client-react/src/pages/first-factor/first-factor.tsx new file mode 100644 index 00000000..1f91e842 --- /dev/null +++ b/client-react/src/pages/first-factor/first-factor.tsx @@ -0,0 +1,83 @@ +import React, { Component } from "react"; + +import TextField from '@material-ui/core/TextField'; +import Button from '@material-ui/core/Button'; + +import FormControlLabel from '@material-ui/core/FormControlLabel'; +import Checkbox from '@material-ui/core/Checkbox'; + +import FormTemplate from '../../templates/form-template'; + +import styles from "./first-factor.module.css" + +interface State { + rememberMe: boolean; +} + +export class FirstFactor extends Component { + constructor(props: any) { + super(props) + this.state = { + rememberMe: false + } + } + + toggleRememberMe = () => { + this.setState({ + rememberMe: !(this.state.rememberMe) + }) + } + + render() { + return ( + +
+
+
+ + +
+
+ + +
+
+
+
+
+ + } + label="Remember me" + /> +
+ +
+
+ +
+
+
+ + ) + } +} \ No newline at end of file diff --git a/client-react/src/pages/second-factor/second-factor.module.css b/client-react/src/pages/second-factor/second-factor.module.css new file mode 100644 index 00000000..4568c8ea --- /dev/null +++ b/client-react/src/pages/second-factor/second-factor.module.css @@ -0,0 +1,37 @@ +.main { + text-align: center; + padding: 2em 3em 2em 3em; + min-height: 350px; +} + +.authenticate { + margin: 1em; +} + +.authenticate hr { + width: 100%; +} + +.authenticate .u2f img { + width: 128px; + margin-top: 1em; +} + +.authenticate .totpField { + margin: 1em 0em; +} + + + +.register { + margin: 1em; +} + +.register .buttons { + margin: 2em 0em; +} + +.register .buttons button { + margin: 0.8em 0em; + width: 100%; +} \ No newline at end of file diff --git a/client-react/src/pages/second-factor/second-factor.tsx b/client-react/src/pages/second-factor/second-factor.tsx new file mode 100644 index 00000000..93608958 --- /dev/null +++ b/client-react/src/pages/second-factor/second-factor.tsx @@ -0,0 +1,103 @@ +import React, { Component } from "react"; + +import TextField from '@material-ui/core/TextField'; + +import BottomNavigation from '@material-ui/core/BottomNavigation'; +import BottomNavigationAction from '@material-ui/core/BottomNavigationAction'; +import RestoreIcon from '@material-ui/core/Icon'; +import FavoriteIcon from '@material-ui/core/Icon'; +import Button from '@material-ui/core/Button'; + +import FormTemplate from '../../templates/form-template'; + +import styles from './second-factor.module.css'; +import pendrive from '../../pendrive.png' + +interface State { + mode: number; +} + +export class SecondFactor extends Component { + constructor(props: any) { + super(props); + this.state = { + mode: 0 + } + } + + onMenuChanged(event: any, value: number) { + this.setState({mode: value}); + } + + renderInner() { + const registerDevice = ( +
+
Register a new device
+
+ + +
+
+ ) + + const authenticate = ( +
+
+ Touch your security key +
+ usb key +
+
+ + + + + + + + +
or
+
+ Provide a one-time password +
+ + +
+
+
+ ) + + if (this.state.mode == 0) { + return authenticate; + } + else if (this.state.mode == 1) { + return registerDevice; + } + } + + render() { + return ( + +
+ {this.renderInner()} +
+ + } /> + } /> + + + ) + } +} \ No newline at end of file diff --git a/client-react/src/pendrive.png b/client-react/src/pendrive.png new file mode 100644 index 0000000000000000000000000000000000000000..fa49178c326631167ec642aaacc117c38b31f6bf GIT binary patch literal 6721 zcmYj0cRbba_va4owYNlZGooSNP}U_QA;hPFjO=I_A@eN_J7wjPk;R>;VR z$X=mHWZd7o&-e4k@4jC5^*qlx=Q+gJU`;0Wjzk14Kr2 zu=aZFj1G8jZ37D;`U@gDMxbk^E62`y1F$Uo{bPtXm}F7lP9NPfKIWI5ef;dboWRe| zPsZ(%ySIb=6(^a?UM^`1YJw^rtlsTWbmwuD!;DB%b?}U>BPr*-HV6K#5krRGRm-9 z$5_1ZA<|iRr?ly@qMTxS>fxa+^Is{+QLIMv;nu^Cs@f0Sh(FC4!V~br!kfBEZX+*{ zHOSF!r@C}H-*t$0jdvz?rRP)_dEd^zHNn17;yph+{<1yNp8ny&YUrP$!f&m$&faQ- zAc7`7BkRo?vc6c z0<-nnd#{u&*2GL*ml!r6UHJCpQ)_R~1i&ocb>33(%f-Sy%Dq-rJL0 z%@@6di!&emRP?wh&j9{X!HRK`*zEHZLr1WJJNeDrs=LCzEX`f>yHz_vejtT^zF*1RtrrIo!F_j4Ef`}>UWp5OND z%&DkR;*N>KSKkW|;8xV4j<=vLmqxSq{0(^y$l#;1`Hm7N;tw=?Z!xr_Q!{J!c!R9kXI2heg$7akcGqZIWikBl#xb5=fi-~bD7xU63(VmHW@61}0@z^5Y`d16 zBInALloRu$7ARjPII^BJ*y$eRb@E^U_|8YaN@Zm=eRtgK{lFYhgeJ;9oU)FHE!|r} zfYO>$5hL^4^$~qiS3OvjaPV20UZB!)$8~;xeF4w{l$#E|&pJv@J}-PZs(Gw)=s2sA zPR^6@i;?ms6N?dZ8$`)vh9g+G+ASBjX`4Z01G@W`zM9BtUsz|_0Ybmz_%Bg z=-&eGg^sBfIJf^!QW$D$Wdic^O&KzW)3u4U$=<+sR1wX=N`n_e<(GQW*S3YYy(%gE z_{8ElEVLe|+wsvM_3M#lp!_JanT4r&~g{&YS{q zoh-`(%lKCcZ#fcz#0ezBU1vxjW>WtG=haEQjXe%SF$6>DFzU1DzlGE~4( zhMMsykhrj~KbP;wKD5voof-m^e?VNDGSlX+hC}AIfF=sZZcvz0po6dwei8?USd?DF z8bcAea+)fbC7bFc3Mv1O3bfLKYzIy`R?J_naT0r;zKiwfp@Gay9Sf*+V7c* zFzh}-vJ3Hgj)g7lU{lAgk~ItYowK!JeRr&%r26<#O}>VFuri-fzQmQvE5wFxH574& z_*>d({ACwCO>Dlswg`ES&B{&75%ILC6eix!AV*^T+b)+ z+%)H219+3$`~Bphr&tR8ZE4>`@2kE$mP}xA zymwFSeM!4NGH)*S;Auj6N*b6Cac;GnYM3m?&DHM|+AIG8CJIB;#h`qTK@PBJ3#@mS zbLe-Z`A#?5`60`T(P%@U>z1*J(_S# zYgCtd=6Vgx`gd}#HC+PIUhMG?Rbm-7k=V4*%db{Np7C;ilZvDb= zM*NJzAU~sQx8`u2efkcd){^(Mz_C6`9Vol-Sd<|4=T8ob-h$it`P;=HRS`1A7^$Al z0q-azOA(NelC1-k7-k6buuY}g$@RIp zxu&Fo-lin?-o{@dm+s%7HOaQ&pq8ur*DhG$u*@mn#9qlAG0Zt0x;RA_TbFF(smm*N z?C2|+n#7<1LJ{?Ql+e69EO?VvKduclW$g2-nCaW2KbdH=jnDL==|%Z*2U!i}0z^$| zKV45=t@+`N-BW-XzK*!k#X#e0nBYLd9JCFLFP;mZpwEt8Rp@q#ZBoQ+93jL%Y_Ij; z414O{YoM$z0yIhNi%NK=?YWL4sXzLrxP3Qs^3b*YML+iscO1T6bK46bllZKYfyC4> z!GdJ-^v3Jo5f(ZadbUBg=QDO!lV(3nHB9JT+hI;vx=pz!11@IPwGd&rPx;LDuyA+0 zmctth9HnC3uVR*}g-=Yl4TvhfO#_2`$1K5LmUGIBJMkoymH62Lj7#esIe#hBYulnQ z!hy+K{>TRdIj@2+a{hx)C3}DT3J%)(&K50AkWspF(ljjlgQ+IaM6loaAl=Ne7Kp?5 z?3a2%TQaPpFYwI+DcYD}K}y;d#B(zhh_t?$H0jDc5!r8%-STGv(ZmlH zv&h{B-W1yotL@6l5B$Si)165L0hnVSWf)*{&qxjw3FM)oE)P%Ju6R#&N{K~Nb8QZN-qYz|vO-mLsyEF+fxTnYxL*hnRK;E<^ZiEGB zV%WRPATK42hRR7%&K!u3>BOROB7tpUhKm2d@daQS_aAtI8Kz7vQR-Zsk#sE03C-I8 z`?$)V!4*Ot+WAn9;}@i$JL?q+J{Cz~LkFPP;4fSu(zswT#`dVQOq8S>!|>hmoZ)-8 zvpX_dYFAjqMOR;aI$Qi22|9mX>H7gmEB5pNnJ=RU8owsWHtH{zCfF=8U?GIFJUjtO z2RZd==uh>J(~$_yvwV|tBEI8+?$f;^doMdS+(?yZY#^xd&ohAF$7c?=UpO4)WWyDC z1v32x{PQ*d!C05C-wKN*?%%=?hs~PRp?>ZqAbMl}#0PPwUH@xlx9aGVckHaLphgmp zU5tzo7!<&xa|1f9D^sM-66_tD_>qy*9k{+BKW#)5JZ@ zSk%{1(0J3zGu-RrzcVrMH_%!Oq#p7};J-07ff-2%&AsPoK6x+ha*gp3-&yU-Rbfj0 z#&aBSJNce?(_0DU56it^q|8TkW+;>s?WQP4s(Vsjg)TprT+giAdcZ2Ax*Lw&t5`RP ztb~=Lo(%-M?=P^OU$))WZSf;#of$7O0=MJWAH1RG08J~SIJuABO^XxCcuJktTMWVr zx!d3UKmc22YEz8y4^6kqfz2AL%Rt)ZLq4`oH2h{j=|ek`N7E@XzzPyb>F za`=~KcBnb=Ux_QOo9aVtbwmm$^WWN3o|=$yW`Gma&FqRXeX0JRM=VArth_PEv^m0Z zZ%YVE=@%N2Ieu{UeAZnaH5+VJU?%1at9ZRIpiZ;x!3no0%*PKZf#GLi(O?4WHFo5Q zO*X2JP}pEd@!}t#$<%Yt6N;3cB7JOvdW>vB`q($4MIs0*55jDIG8U7icszzp3lM|{ zIpG+0ffsJkjQ=f^o}-@QBVxhlP;0CGuZp_R=}yd0V&;e{a)U~*8{&n5Pior#)?a6q zr8qqtjq|^9Jo zkA?3=_dTW*qx%9Al;Y1BOjY1W9;caR==IuQSK?0pQ771S(E+ohhms)NWyqFe?>Fy3 zD7tW3ey6f~$pw^A{)a~@(kF~zptCz`uoOdS>WG|c{GHu9bcua z{wKB<>n3XrgTl%T;F5SQ)LNsT4J_ius^t=gme@3}KWB%dBV=Z}mvz}LJnVPzZ#sxIxN~XFm=e zHO34vL006>;`3t7bf2`v3-p)ICaDBuPX}KWv1A=`0O?Pm-&(upwy%79F}cH5N8>3a+)j#c~M@;4^; zel2p;mu926lT>dB?fg!N{onTUckx@K|Hm5j4}$C;8E|VoSA5#oXshz=Kh1<3DM+ znhU?B4KnR#LM(ToSY&Q`z=q%Yu|sIAo8ViMiwf&|;{7topfa z4aZU83gzvkeJ7Snoh6?$qiUR)^uve+l>t2a(-k^s8=vm}U1I=?I4iVsm^u^KGs*>_ zI^JfHU{Eu6$0g*Rm;a!VKPpXOCvQs><=8c@opO75p~y#M)0`9_*VIyk;5z=_xN# z0`rF>TNg^_vy9Qe@yV@_{%%meZk5Ymw=|#hb73}Zr`4j>J&nQ7TP3JRhS`vNI@`F@ zEA@`RpIDB&0n|c2vjHP%9}^y!9(0<{PCU)nmcsLBW-b>)Ym>NPWc$3!@-t`Z3(?Uc~|8Bkcn?o$f%jiPGZuY^-4TJSAHUDY;9WdQ0P%W;CJ^udUzzN36 z8*YrqSFs)O#c85>vKm#vy<%txeX3rG5(1yk>=xLtM>|D|AEc5+T0ICh@|QYd+H87 zjlmioUFGWVML!nJ_6-iTR_3ngm-6Eh|tbr$7LQ8W2Lkt z`-_$g-k>v$M-(nx#CvAze%M+ws&KJ=zsG8RTudEgJ;;^}c+R;O6PjnHY^f7%fuZFD zic8B6RuXc?g{APQ=AQ?R^CWG*8!&QHm9qzndFPepCoGd&r?ewaQ5%!xE&Ilh0%q5| z+Q%vw45D@BqOYLNmZZW!B<-)6sGImFezP><92Yn2CI-1)K;ZmjLG8=?Q(29>xdhRO zI89X`A@}bcu88ytKQY0|S0nNUm!;@J3!juEA>>jk+2Ec#qw512AjhgDBskIZoPdqU zP+hTpII$>hE}4s^5U{FLMGDv-Seu>X7ni{jkOeEWJjs6DjOc3*_7h9HbqPLknhlngQJ`( zU5QxCx4p}o3U%`ln(tLWj{kZ+xq^Z$wl>BUPap7J)kS@R>X(CT!*`VYVjv zWIH}tg9jL^D!TOP|+c&KR|ifYSVbz>1=5IeJrRsbi_F;8LNFXCfQvvi+lO~bKPXh?#Q(@ zk0x7rUqBv{e4MNJ_I*hnO5(#z_=ik>T2sxqc6)h>FTXtMRsUY}J9I((E-q>({gFu%7jo0_>I8H0YfRO8S#q;8YL$e+j(RPv7q;Gw3T&=i! zpzd(R`zonJfnR@gi~qS$dw6NQxMI&EmZT@2RGg>O=p0T9x)1t)$FZZ`3K-~~(0QS4 Hcm4kWRQYbi literal 0 HcmV?d00001 diff --git a/client-react/src/second-factor/index.tsx b/client-react/src/second-factor/index.tsx deleted file mode 100644 index 01271f2b..00000000 --- a/client-react/src/second-factor/index.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React, { Component } from "react"; - -export class SecondFactor extends Component { - render() { - return
second factor
- } -} \ No newline at end of file diff --git a/client-react/src/first-factor/index.module.css b/client-react/src/templates/form-template.module.css similarity index 54% rename from client-react/src/first-factor/index.module.css rename to client-react/src/templates/form-template.module.css index 22a85274..977874e9 100644 --- a/client-react/src/first-factor/index.module.css +++ b/client-react/src/templates/form-template.module.css @@ -12,55 +12,18 @@ text-align: center; } -/* MAIN */ +/* FRAME */ .frame { box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px; background-color: white; border-radius: 5px; - padding: 0.5em 3em 3em 3em; } .innerFrame { width: 100%; } -.field { - width: 100%; - margin: 20px 0px; -} - -.field .input { - width: 100%; -} - -.controls { - display: inline-block; - width: 100%; - font-size: 0.875rem; -} - -.controls .rememberMe { - float: left; -} - -.controls .resetPassword { - padding: 12px 0px; - float: right; -} - -.controls .resetPassword a { - color: black; -} - -.buttons { - margin-top: 20px; -} - -.buttons button { - width: 100%; -} - /* FOOTER */ .footer { diff --git a/client-react/src/templates/form-template.tsx b/client-react/src/templates/form-template.tsx new file mode 100644 index 00000000..f5890d8f --- /dev/null +++ b/client-react/src/templates/form-template.tsx @@ -0,0 +1,30 @@ +import React, { Component } from "react"; + +import logo from '../logo.svg'; +import styles from "./form-template.module.css" + +interface Props { + title: string; +} + +export default class FormTemplate extends Component { + render() { + const children = this.props.children; + return ( +
+
+

{this.props.title}

+
+
+
+ {children} +
+
+
+ logo +
Powered by Authelia
+
+
+ ) + } +} \ No newline at end of file