From 68f765da28b22106f6ff8b85caa24f86deb9fdca Mon Sep 17 00:00:00 2001 From: marykatefain Date: Fri, 7 Aug 2020 20:17:13 +0000 Subject: [PATCH] Multi-Factor Auth with OTP --- app/soapbox/actions/auth.js | Bin 8838 -> 9434 bytes app/soapbox/actions/mfa.js | Bin 0 -> 4686 bytes app/soapbox/actions/settings.js | Bin 2844 -> 2865 bytes .../__snapshots__/login_form-test.js.snap | 5 +- .../__snapshots__/login_page-test.js.snap | 4 +- .../components/__tests__/login_page-test.js | Bin 505 -> 1838 bytes .../__tests__/otp_auth_form-test.js | Bin 0 -> 755 bytes .../auth_login/components/login_form.js | Bin 2474 -> 1861 bytes .../auth_login/components/login_page.js | Bin 492 -> 1653 bytes .../auth_login/components/otp_auth_form.js | Bin 0 -> 3032 bytes .../public_layout/components/header.js | Bin 1796 -> 3793 bytes app/soapbox/features/security/index.js | Bin 11398 -> 13582 bytes app/soapbox/features/security/mfa_form.js | Bin 0 -> 11447 bytes app/soapbox/features/ui/index.js | Bin 20523 -> 20602 bytes .../features/ui/util/async-components.js | Bin 5812 -> 5939 bytes app/styles/about.scss | 43 +++++++++- app/styles/application.scss | 1 + app/styles/components/buttons.scss | 2 +- app/styles/components/mfa_form.scss | 81 ++++++++++++++++++ app/styles/components/tabs-bar.scss | 4 +- app/styles/themes.scss | 9 ++ package.json | 1 + yarn.lock | 14 +++ 23 files changed, 154 insertions(+), 10 deletions(-) create mode 100644 app/soapbox/actions/mfa.js create mode 100644 app/soapbox/features/auth_login/components/__tests__/otp_auth_form-test.js create mode 100644 app/soapbox/features/auth_login/components/otp_auth_form.js create mode 100644 app/soapbox/features/security/mfa_form.js create mode 100644 app/styles/components/mfa_form.scss diff --git a/app/soapbox/actions/auth.js b/app/soapbox/actions/auth.js index a8d6d5f0fcf54f4a92e90dceb1f39349dc9f1bb4..8beb9c1eb5ed2f34858584de221663b8d48dbca4 100644 GIT binary patch delta 212 zcmZp3z2&(fh+i_lq#!J{C^M~6BRM}MRYxH=Eit|%KRY#VvLJUmFOa97oROH5lbV;F zI$4lUZ1O`+Zx^^4D}-_#E(I_EnPQ~?HVY;K(;r__Spbw%F9F)AK6xV0FhL&0$?aS+ zlh^XNPY&Wg&y|^`ppjZslwYJbd7*@`q=K!jt%5qpwxZO+(#)dN6m?C7YM`-`;!Y$cF33cYBocEm?_TE5<{>JoUq<1_^7hP+eP>Mh`;>X2>>)!2{_5D8q2KkL%6zLGT2npmx|Yre z)K$+%?{do0MJ3(4jem1{@Ac@ao_AeJX9T*c=c9KyUFl+n?x9L!oMb5+5RTt=B`O{c zk&iG=($~^j!21lKK)5PWu=YurN95EJUJ>?jgwX=7zpx_!+-SW6{+pw#(IIhOtO#z4 zOlFMLLfYg%Yfk5mlOGWoLy;53aaN_cbWVq8zOeBdO05EwIT=RigMlW8CZkKh8P2^l zdO4!~6^XHiv-c5>Y-$2dvZcw-)ZEVtJEqyNP*G%sF%4E6?xOxYuV&|V(vBA98U3nI ziRJpxQo(fcm*g1r^fA;&UHMfUqp~A~DOWtlX0Fyzax@ExCUGjB+bI57nsG<2D1%1VnUn_^CIJGIT=#*VT9+l9x($}iZUqdOCYAni`t^6RhUo7@66>avE#J@YITE~fBM4QR>;lOHPy6teAwYBa zi?dpz0VIcl_y;y9!J&q`=0syP6!`3m^} delta 12 TcmdleHb-p35~j^NnJPE{A&~^W diff --git a/app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_form-test.js.snap b/app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_form-test.js.snap index 6c34feba79..646a96d498 100644 --- a/app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_form-test.js.snap +++ b/app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_form-test.js.snap @@ -3,11 +3,8 @@ exports[` renders correctly 1`] = `
-
+
diff --git a/app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_page-test.js.snap b/app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_page-test.js.snap index 35adf1d297..69885fe7bc 100644 --- a/app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_page-test.js.snap +++ b/app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_page-test.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` renders correctly 1`] = ` +exports[` renders correctly on load 1`] = ` renders correctly 1`] = ` `; -exports[` renders correctly 2`] = `null`; +exports[` renders correctly on load 2`] = `null`; diff --git a/app/soapbox/features/auth_login/components/__tests__/login_page-test.js b/app/soapbox/features/auth_login/components/__tests__/login_page-test.js index f0e3d7901c1b3b9089de0cf94c8a336b4c29e2fc..27393c6c31271e2f9a2cd735a8455bbdb4be025e 100644 GIT binary patch literal 1838 zcmb7F$!^;)5WVLs<|Y|%B|AwkN)w<6QXoY()V&3PKuKeZjYKje6~{3A?;UEj+!k;T zhRES8Z{95CrIOmh4`iu@rIsal+MT_N6W%=C$rTq*Y=!M}5QK#j#foHu+7?nWw0JGa zOrWq+C}sM(uu>!JT3aKTO5{gq(bzc0LZLSMF7BBEX5h9gE6b7s-MzErosbN|5L$Fw zh+|``#F@G8SH*jaE*ew(z=jgI6@TibmP=tmR@s~kPBJv9<_Y@Vmw|-v%A0~efy*n{ zo&Y4cqy%qRn)`zgASFMR0J-EZ2O|9a%>3;2nC@#hmzRZ3Xr=(uvVZWuPO<~E0N z$zqLf71ubXF$^g-d4#T)eAmNWt?LJ8tIX%5AQ-XjEt)y{c0&@%f$~UgTxlM8 z)J73UyNuSWNV-OjPJ>w_WkQ;3OboXeiK-~3@J`6H_!T#Om@aqMkvmtF7QXAo{^AH3 zvadsgR=%R>vp=7m9b}JMOC5O!w7Y9<*#iJmDYuR=i_@GH1&S5McB9Zlo|RU4e+Sj! z>p(WcM-`#b6SxN2BCe&|6i6Nzq|(uWNTI#em!aw6f7YQM%ht7Z7zo>z)rLc?(E>`|_AP&Ga z04it5LVd2n+99yQ6Q8ab_^k#+|$f@kpDg1B@4VII8fY3)~IOsc!N F-*2e{C-DFP delta 47 zcmZ3-_mg?Tw#m|rs-l@C8tO%dyMCB1BQwlA9^c&K8_LaC3;cns8*f z)}WydWHw&ElJy9?sytZb=62g93^ZF|>d=Q~iznqk1-Q?$4XJsG#eZF^>m(Pn5)84| zbClw`DY82h9guAp3?Xj;Xp(HnBs>LT>pjMlem59Q0R~JU2z#A_gJ#(jA#=zUszrC@tTV72LV^^-T(jq literal 0 HcmV?d00001 diff --git a/app/soapbox/features/auth_login/components/login_form.js b/app/soapbox/features/auth_login/components/login_form.js index 1b669063b1d003362d51f4266bcdd2dc4810beaf..0a964f44925eabfa5da498c2a64aa9b0681bd51a 100644 GIT binary patch delta 54 zcmZ1_e3Wm(@6F+iI*gO2vPetnC}bA<WF+RL8_2~MsGB`Rdhx2PAgBS9;$0h!m{iu1bmC! z#AnD`_#i?qcK7V+#-BO#G~Hj-_f!4%IPe7LW2cd8f~$m zT`>9@>yEx>sU|yEQCDb-nl8FYV-T9CtG(gIHeDh)!tY{f;EX{pF6wWbbW8O}O;6k~5WVMD%q@<@dhb9`QE4S4DiHKmRh2iM?7B_t)OP4rQT}_!&L<1>wAt~S zulHs~)s3+p9#Iq?N^5FJZTL(OqcsTc5V zUAJEBDtu@yel(OwqkfTpqbA6vA>klt* z#y39%8Bd@cP=H%K_vwsicILPxI+W3F8(fya9hB&c!xwxPUn8LtV$XS~Mf2o^$FJtW zn#Ms6F8qc33Rsr_)ObEv_#Qn=$u&D8vvPMvNTv7ZP>RaoS<+_|6OU0fiKS>O45L#CF z)b48KsjpWyzEfJVV5ZUm`jCT~42s+cFUW-j$+E!3kjSEMt%m#EPZ}p4rt*{aR-t1t zE5Nn2;%|HyTsbw)R0!}*aV=^*1I3?3)#CRox-6MT+Q&?FDTYbVh!W+@a%eZadGibP zIizV2BUXOWEyHJ;+*R#^+#N{e8bR|x(=l=qxg2<#K&?YNl-rO_e~gt2d_~cagnMDh z7+ZlkK8rKUUPsC@?hmLLTNMW|Qae@0#u;YW7`D%N5z1z0t+9(FG>Rn*MsCs3!aC%V z8glT7n7ge3@ZgC@i8 zX@=9qnO!E=|2TwVW_;9_H#Yv>3=7AWak8{dv=mdbldy3Dr`=sNePaYdQ!6S~BrI-m zW`~Z03N>bvj+gV%^(IfZDQvIkJOoN2@MY}9Ykd@FR`YKD?3Xy>z+A=~60hib1M)8N TxHk36(aO77h9P3yp+5Nsw~Qla delta 56 zcmey$^M-lCt;vauHj_6pCQWu=m7JW&EIN4utEOyGYDsBPo`Q`}etKq}TYgclg1((K Mmx4kq7gsG808ph8aR2}S diff --git a/app/soapbox/features/auth_login/components/otp_auth_form.js b/app/soapbox/features/auth_login/components/otp_auth_form.js new file mode 100644 index 0000000000000000000000000000000000000000..21655f49298694278d36a84e8ab9ceaa8e54e3ee GIT binary patch literal 3032 zcma)8-*4kK41UjF!KbqWG!E`Hiw}3`ZCHWcT3n003`3yAbfV3cJW1{~2=c#=l>9?+ zuG{sYt!0uTzwaYySvT4^_=;lZpftLM#PI*gPcs=_onWVxLVA6U4HgEA_BA$>>Mydo zQ?9y!U$m)(b69*qYsDUKpukcp>>lkTmL#V!)LmV-PHZcDYz^LON<*Q#$ZjEflSM-| zi(PLt204Lt&F^Src^odYS~Oezx}^G~R(2^`cZfYobi2bBeAB+h*!qb8s_;%V?FdbO zLy5vsVs=>)5O(x>G`e{{HfTF28+u+iJ|LSJ0c{=B0Wu5u1hn)t1Fq^;7x*hdwt^GL zVg*U1_flo0#Hz3v8EkfBu{n@Q;(-@!>Kk72PG`Q0*XpY|5CUCwP^Sc*Yto|p#ifz7^;qzr)D-ctcvJ8D(xAl}?~D$^g>d zYf(tGUqLA<&>#*ee)V&-9jiB$M_l{?kfop%Au^ zwh^Sg*tBfb?#i$(#m4EsQLP|~YMr4(eKv#<5RZRIrlEaOb5h4sG`EBc3Vrw zSK|wHZgh80_zC)gZ(yj1x-KVGN}Dl^mP0b$+z~v2NS=d1RA0CubHdP}&jW_w=`aCO z_K)tG&ok1$O4BGc2$x%QPb`EqT-uZEH2|zZP79y|v9BZTMn^jDEY9<6$Bd?4EF<{W zw@if=T_Q_Dkj0kKD4{86F)N7Etc#iFklZOELKYsNWZp5%33?>oD8`wV&>U(x`M9NMWTk|+I0oEN<`( z{~IYYPpqHH8-J|u+lGdg;i0+k!=C0>5NCe!b;f!O@R6K6Y#-B~R$^Y;^zKP58JK)NY zOnDN-tC&_s-fax>+mPQzs)Scfv?lW8;rS8nd9Ng}yiA^AE)VZ7&(=#SesVN{Bh=^{ zc_@(+;FGJo*U@qvSYhP&$M22S$bXVEXWv|pXP1aB#>-$L`C@8BDL^J@H|0K8_u zX$-#Qr>wTm!9)IxeU39@zynY%j=(}pd;*TjWD@pX%@{8x%4G>_0K0X|MYlyv| zZ=H!KC-satO>^zO{4O$GZ(HZIf8Ro0s^iwnaL>riMY%*C^+0&pkKgm`Um5bX0ssI2 literal 0 HcmV?d00001 diff --git a/app/soapbox/features/public_layout/components/header.js b/app/soapbox/features/public_layout/components/header.js index 9f018cc3cfb80790940115277d8d1e044ad33889..70c20dcaaaa8959688eb477b6c441cfc7c91a4c1 100644 GIT binary patch literal 3793 zcmd5?x#XEUMF^V!3ggcH$YQ>D0M(IvR*vS*S^X1wh9xNB_OM;0q)b zcXI1V(qdou_S;=Z7Ns^0en*iyI2c_(WcYjZb|IUi8d9wk((x%&SQ*T!=RxhZC@LrR zIsRsJ`Q@cVJJOcj@v5YA$LHs4D}y(h;wn_5bXI{q>8#RDX>d}*om7w0Bz5J`tTJ5; zig)@!s$aAz+61i@nT}V60oTb zbQZyP-632J2XyK26Mj>_z(ISO6~|vq z;(vDKH6il-h-p{uJeFh7Zi!FtE9bPD6d(XwlFn}Lm4;+%$nYQ)enM--1KJCa>MtVZ zt#WyPThHE=BoP@d$c=SSv<9%9c!=u-K$>fd8>m5M8;ElGaCAh6#EYW~wh&eB+MuLy z!}<}NE*7Wd5JHsqPB{Fc8B$A;EdPY<75E?pMevg30bLwX4VD)aTT*&LrQ^d+*s9n& zEi$PdHgFKR#WpNH`^IgvgLiF{#>F_1<>K7{(jv`;weS%|h6eE2p~@@_ojdBjdcoK* zex^#DHZgO(HI-uq~RkG zS=v%in-XnXlsvi(k}d4S$jYK=k}s)nU$w~wg8;N9P~wCkVS6p;W5j-Z#B*QEW#W#g z;&_x|4|kVi+zym@*}Fb1la$ks(HL#QQW2#O(1;V7r8LPcCK(krX;rsdh>C;Q8T`AF zv_qnfQ4An7jIrqMxqIRoSk=!Eg_t2VD6x@h$zrD;QEkBcoy6*ofm^ik%$4rGd0qxl zXA?|@&I7jbZ)p6`5a|fe z^@i`&b}mxacBSEI@8|ryVS39kSpu32ZR3+}`?Z}b-4wZ0;)%8ab=t2qFt*Xr&&lYj zr_GFx@a9c_2ymInkv;9d704)IxS@dkAAxXjw=54u)DGPgqVDOw&e$7n7!ESSe2)5) zw37Za{jX7CmIh7HGxxQ!@XDq?Ll0^vRdhu_)9^lDiJ_&>LN>v0^z(8}DKvfNw;nB} G)8b#1!KT>& delta 67 zcmV-J0KEUv9fS_BoB@+T17DN011^*912L1`2VawX2qO<5eIPv`bZBXFE^u;haC4LP Z2se}Y3lOu&3O)h>FOzW&FSBh8WC2NN7rOue diff --git a/app/soapbox/features/security/index.js b/app/soapbox/features/security/index.js index f69c31f6d1d8c1c0c81251d1c256b74a101a9362..b13305dd1525e7ded96864e239ee92b8f72c4162 100644 GIT binary patch delta 1494 zcmbtU&2AJ&5S9s1;x+5YGDa8)wpL*^Gh(+F5D>9uO%jJh91IRW2MbxIccy2j?cM1~ zcMtJmjgUBSBbR=KJU}8pfloQ*kT(dgkQYd*XJ+joATCHFjk>CQ|e;?EDtY zw7yNX7BPfUjKNWYCIhk8^~E?5F^je84y@m7&iq3{rv2!#VsbsC51H0H9xBMnNJ6^! zQD1WrtL`|Y=JtuN);Ok-8ur1DXgp+PR2zm&zms8#JNc~Qwa!&9L0 zkXq)gn1zNrH=zD5%H)fHnbpSf&B|FhZE&nZIa{7pwQP>+Ra@yQO*Qk{=0@Yn7i=$Y zeZWGBl7bmF+6RBm$(hfwSC5nRkRDvEzgaM^>$7I7_2rS({JzxkeVidJQ`<^6ks?tZ z>?0_`rU{#xR&tAuxFY!-f-)r(N7Q}apt_z%Y%^WS6ppqs6KKA8YbxC*j?l@SqM^=K z8_JuE1XNQpt(cTu^}K>W<`EnZL}k!l1(sX0nw1E};67k2n(gUFlY}Ygmvu;yY9`P2 zU<0emT|^9an6It2*@`)AoHt*eYTc;{eRn)gwVi|Gm@!QVR}a`vDVHoLVl6Z-TQFj% z@!E*{yXJ6y(JN_?0-2y{DDH$Lsft|3ZZ6J;U0cWe3(a{R>rwlt$>#6n%jRYC(kJLQ zPtTp{?;p7cZn9g|&4Yfw4J@m55ZM@%2 zit9x<8p?;tA5o?5(J|{g`O_3b@$2BDAmV_^i6z%bla8$htoD8L=Jfeb@#tmd>BXgM z>!mOmbgLM*x|SpKDm>n0y=z%dN8n>AcW|NdIp_E=lw1Bk+V#rv7xe3I(KpSd<(bS} LZe2VG8&Llb5%cqw delta 47 zcmV+~0MP%AYKB>`WC4?u0q2vo0xPp812GAc;tmzF5f6g_v#Ai&5tB0xCX=}iF0=0^ F9}Tnk5kCL` diff --git a/app/soapbox/features/security/mfa_form.js b/app/soapbox/features/security/mfa_form.js new file mode 100644 index 0000000000000000000000000000000000000000..572579d530ff4180a1f4ea34624db7473834bad8 GIT binary patch literal 11447 zcmds7TW{M&7Jk>SnC(L-6&8i&QI)bylzL%ovrTQM#UcmHG`1r};Jzf`@vz!7Bn$&FW&iEk$q>^Y>-W z7b(O@c;ZMmjtt2-1I>74h-xP9^EA7D%y^-N&hR`I^rEJz7itho71)blyfOE;%S9S; z&HOH3;lXccZjr|2Hqj)$KPjV0C1`;^X|xtbQD2oe8yKU;c9VXw7mpR?GBTt!lQ*Rhsgb&4>Wv()>4A?;klgYsE(F9rW4B!Bzl-Xa z4IdyYN|RzzC}Qg@cC6T>53gemG#a2aX9YBB&lxaw1(?R1@O4%_T_jm4==FGM7;SRgefSs}(i^3`M6tew7i|n1zqyX%-@q@%{$76faM-ApC z6VgD(d?oC8Ei4=aVIJVpEHQDp3X&C%mkO~RoHaq$0t-3S;sw2z*#TB^yo(bY(Tb}h zfu_r>#Zv?40B@I~YmtQlUyHW}+5z4!MHlb43apxU78J!pnupS~ehF@PTq)KZxWATW z=NnQ#CbBNp?=>^cTkrEch&q_+L4S?WE?z)+n&%X!$QLt!xLTiG=Z`G74Wh)?E8XSY zi`?bC{Aq$ZMrqY#h_IT^{IL=qCf3cB1S(Eud?P)L+(n^z>qF}1t_OSh*NW*?$bJMb z0|k?*2icVf1bh=k&;k};&?B3_V$#@^bW6FVsT%X)@h_6$M~^%Xj>fZT=vfkbpGMNu zwdbGOabhUfz_=8Ie~~$fb{gy_2uAtGup!!L@Kc>)3|29)#NMp~3Iz;~o+n|!>Im z6jE)9DPvtsoX`mkrXu?}q0kU|pU#-!;)j6<;7?_MEqtyhMmRJQm$Au2F$aY_yWx)2 zjHXA}Fw!}3*^hj9Q0z=f&GlO;H3EDXQ-m)w?amf)wE7Hi92)j-kX{UlLh{;^(&?b1 z73p5!j8uX)*Lp{o7CfIa0-hZ4(;G@52{wBGw3MIyN& zW8;4xh=;$OnF(2E~qI4ZicUc#*wSSt0(LIxy%|8H;xo0x$v2k1DEJ%=A*E8TBH$R*( zWw`{4G8?BNb7o^cIRmFx6NPgR<&+QFrOrK;A`&t88in25`}O)gGYO3CXu)=}`N0tr zTYGidT1cK(d6cQ*&MhV9-ape4!StRpEg2IJ=~!2>1f#kzWcN|PARuah$*b9f)~|dx z~drZrmp=d|&6;&xhg}G+a6m;4xmV$+JDVDUzCeg~8 zdzBE*7mUvpm`cD75tcJa#-TlU5}T zE8Qwyh|-XgQcOq8hWm3uxpSbiNz zJ7QZZLZi$nI_ki4C{J&i3Nin41s>%hDEu4MYYV)6DR~nV+D}_GpO^rwL7nkn1xQf3?#b0%N`=Jp&-`Y;X+%fk92L8g=YqEeGQiRMoEbY> zckcvyHB0^9GcX$2X^mV&=6`J3kbKskW&*f=hmbr6SKmflZ7eeoCGvz)8`VX>FWWEclRr6<0OHXN-prpsWzSS3{CPauA zs-MExUB1Bchs%rl6#z|ltV{S6^HSzc-ymbH?q;8quUay@*(!i{9~HQsMDShWCijdw zF7;kqVr&l>)2)wZZDOcce5`e)f{iJ5TWKwM9jFtxS38*j zpW49EM^GQNyUw9DmZ^Y_w4Mr)RWR;n%@uJ>}cg z5tfIYsrzFj$I!C844dy{UvKXwCNt~v4tL~9kyd_^f=`GNfeT`uw*oDgZC)N|Rn<+5 z0->|7M7hG4>hORW-2k~iC$yhbV3TVc?1+6R=nD^-DBHcTEIVT~Szg((-!7%MrA%G6 zvt+Y|ZnNz+R9i}v{fV8;^&~Lx-B4)AJ9G(c>QAR+k9)qWAlH#dP;8|odlYtxB-+Nu z*qV3xArf`7*zx|ZwZo8vR=&GC7u9jUp}=Nl+oL^7|DF$&D2}4_V;?Mkm!r=COuf!Q zXkMqfP1|gK0)zVVoil^S4Oa-2A0>96*#@d>OF+#vGNg9TRFSFfsDx+Zd}#bB{ZX?l zYW8%2PY`1+(05JOYp=x^Wkl=U$u=)7^y?eW8m-DDL?P)~ICgIKVSdm0n$C*gQ0rMy z9BM!-il?i&QHYUiXq4^rswX7OCMKrXf#M1FsP9Vp%CV!R%zvvGJ1Usz+J8ljWxQZd YtyNuFE|j;Fd0)fHH_p&`JX9|I8@DBLMgRZ+ literal 0 HcmV?d00001 diff --git a/app/soapbox/features/ui/index.js b/app/soapbox/features/ui/index.js index 7ca9f788f8c6a17b9d2594e969db6aca3302fc9f..f4a4be41383bb6b2951c8a331026e6aad066b26c 100644 GIT binary patch delta 54 zcmZ3zfbrJ?#tn6xtO^RgX^ERFI1_j#r%K35B$k$B=;x*-sw*Vt=N9DWrRJ5`R)bWW I6iu=M029y?g#Z8m delta 19 bcmeyhfN}K##tn6xn>#t9cs8qx1zQ0CRb2;1 diff --git a/app/soapbox/features/ui/util/async-components.js b/app/soapbox/features/ui/util/async-components.js index 48f36a954c534077f4f22332d1ab92379feebb2f..e6c468ea0699c8ef50ae81279b9d39a7e4b6b9b6 100644 GIT binary patch delta 74 zcmdm@yIF6;7O}||f`aV6X^C$6MY)p$I82RFlS_*-ODgqq(-Py;fPzX2TKejGdip?A Nj4r3HY0Xv31pvLG7>ED> delta 7 Ocmdn2w?%iu7BK(~#sfV7 diff --git a/app/styles/about.scss b/app/styles/about.scss index 27a02f0119..77d93917e4 100644 --- a/app/styles/about.scss +++ b/app/styles/about.scss @@ -34,6 +34,7 @@ $small-breakpoint: 960px; flex-wrap: nowrap; padding: 14px 0; box-sizing: border-box; + position: relative; @media screen and (max-width: 1024px) { padding: 14px 20px; @@ -1712,7 +1713,40 @@ $small-breakpoint: 960px; .header, .container { position: relative; - z-index: 1; + } + + .otp-form-overlay__container { + z-index: 9998; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: flex; + align-items: center; + justify-content: center; + background: rgba($base-overlay-background, 0.7); + + .otp-form-overlay__form { + @include standard-panel-shadow; + border-radius: 10px; + z-index: 9999; + margin: 0 auto; + max-width: 800px; + position: relative; + padding: 20px; + background-color: var(--background-color); + display: flex; + flex-direction: column; + + .simple_form { + padding: 30px 50px 50px; + } + + .otp-form-overlay__close { + align-self: flex-end; + } + } } } @@ -1725,3 +1759,10 @@ $small-breakpoint: 960px; bottom: 0; right: 0; } + +h1.otp-login { + font-size: 16px; + line-height: 24px; + font-weight: 800; + padding: 10px 0; +} diff --git a/app/styles/application.scss b/app/styles/application.scss index b040685c9e..dee4df0ba6 100644 --- a/app/styles/application.scss +++ b/app/styles/application.scss @@ -72,3 +72,4 @@ @import 'components/video-player'; @import 'components/audio-player'; @import 'components/profile_hover_card'; +@import 'components/mfa_form'; diff --git a/app/styles/components/buttons.scss b/app/styles/components/buttons.scss index fd664d06dc..49070ad6ca 100644 --- a/app/styles/components/buttons.scss +++ b/app/styles/components/buttons.scss @@ -102,7 +102,7 @@ button { &:focus, &:hover { border-color: var(--brand-color); - color: var(--primary-text-color); + color: var(--background-color); } &:disabled { diff --git a/app/styles/components/mfa_form.scss b/app/styles/components/mfa_form.scss new file mode 100644 index 0000000000..80e16da1eb --- /dev/null +++ b/app/styles/components/mfa_form.scss @@ -0,0 +1,81 @@ +.security-settings-panel { + margin: 20px; + + h1.security-settings-panel__setup-otp { + font-size: 20px; + line-height: 1.25; + color: var(--primary-text-color); + font-weight: 600; + } + + h2.security-settings-panel__setup-otp { + display: block; + font-size: 16px; + line-height: 1.5; + color: var(--primary-text-color--faint); + font-weight: 400; + } + + div { + display: block; + margin: 10px 0; + } + + .security-warning { + color: var(--primary-text-color); + padding: 15px 20px; + font-size: 14px; + background-color: var(--warning-color--faint); + margin: 5px 20px; + border-radius: 8px; + margin: 20px auto; + } + + .backup_codes { + margin: 20px; + font-weight: bold; + padding: 15px 20px; + font-size: 14px; + background-color: var(--brand-color--faint); + border-radius: 8px; + margin: 20px; + text-align: center; + position: relative; + min-height: 125px; + + .backup_code { + margin: 5px auto; + } + + .loading-indicator { + position: absolute; + } + } + + .security-settings-panel__setup-otp__buttons { + margin: 20px; + display: flex; + justify-content: space-between; + + .button { + min-width: 182px; + } + } + + div.confirm-key { + display: block; + font-size: 16px; + line-height: 1.5; + color: var(--primary-text-color--faint); + font-weight: 400; + margin: 0 0 20px 20px; + } +} + +form.otp-auth { + .error-box { + width: 100%; + text-align: center; + color: $error-red; + } +} diff --git a/app/styles/components/tabs-bar.scss b/app/styles/components/tabs-bar.scss index 02dac4e2b8..76920534b3 100644 --- a/app/styles/components/tabs-bar.scss +++ b/app/styles/components/tabs-bar.scss @@ -255,9 +255,9 @@ display: block; margin-right: 30px; border: 0; - height: 50px; + height: 40px; overflow: hidden; - padding: 10px 0; + padding: 13px 0 0; box-sizing: border-box; filter: brightness(0%) grayscale(100%) invert(100%); & span {display: none !important;} diff --git a/app/styles/themes.scss b/app/styles/themes.scss index 1a717e2436..13d952b17a 100644 --- a/app/styles/themes.scss +++ b/app/styles/themes.scss @@ -30,12 +30,14 @@ body { --accent-color: hsl(var(--accent-color_hsl)); --primary-text-color: hsl(var(--primary-text-color_hsl)); --background-color: hsl(var(--background-color_hsl)); + --warning-color: hsla(var(--warning-color_hsl)); // Meta-variables --brand-color_hsl: var(--brand-color_h), var(--brand-color_s), var(--brand-color_l); --accent-color_hsl: var(--accent-color_h), var(--accent-color_s), var(--accent-color_l); --primary-text-color_hsl: var(--primary-text-color_h), var(--primary-text-color_s), var(--primary-text-color_l); --background-color_hsl: var(--background-color_h), var(--background-color_s), var(--background-color_l); + --warning-color_hsl: var(--warning-color_h), var(--warning-color_s), var(--warning-color_l); --accent-color_h: calc(var(--brand-color_h) - 15); --accent-color_s: 86%; --accent-color_l: 44%; @@ -51,6 +53,7 @@ body { calc(var(--accent-color_l) + 3%) ); --primary-text-color--faint: hsla(var(--primary-text-color_hsl), 0.6); + --warning-color--faint: hsla(var(--warning-color_hsl), 0.5); } body.theme-mode-light { @@ -69,6 +72,9 @@ body.theme-mode-light { --background-color_h: 0; --background-color_s: 0%; --background-color_l: 94.9%; + --warning-color_h: 0; + --warning-color_s: 100%; + --warning-color_l: 66%; // Modifiers --brand-color--hicontrast: hsl( @@ -94,6 +100,9 @@ body.theme-mode-dark { --background-color_h: 0; --background-color_s: 0%; --background-color_l: 20%; + --warning-color_h: 0; + --warning-color_s: 100%; + --warning-color_l: 66%; // Modifiers --brand-color--hicontrast: hsl( diff --git a/package.json b/package.json index 9682ef3094..ad53a512de 100644 --- a/package.json +++ b/package.json @@ -100,6 +100,7 @@ "postcss-object-fit-images": "^1.1.2", "prop-types": "^15.5.10", "punycode": "^2.1.0", + "qrcode.react": "^1.0.0", "rails-ujs": "^5.2.3", "react": "^16.13.1", "react-dom": "^16.13.1", diff --git a/yarn.lock b/yarn.lock index c6908bd86a..4968718442 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9320,6 +9320,20 @@ q@^1.1.2: resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7" integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc= +qr.js@0.0.0: + version "0.0.0" + resolved "https://registry.yarnpkg.com/qr.js/-/qr.js-0.0.0.tgz#cace86386f59a0db8050fa90d9b6b0e88a1e364f" + integrity sha1-ys6GOG9ZoNuAUPqQ2baw6IoeNk8= + +qrcode.react@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/qrcode.react/-/qrcode.react-1.0.0.tgz#7e8889db3b769e555e8eb463d4c6de221c36d5de" + integrity sha512-jBXleohRTwvGBe1ngV+62QvEZ/9IZqQivdwzo9pJM4LQMoCM2VnvNBnKdjvGnKyDZ/l0nCDgsPod19RzlPvm/Q== + dependencies: + loose-envify "^1.4.0" + prop-types "^15.6.0" + qr.js "0.0.0" + qs@6.7.0: version "6.7.0" resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"