From 8fa2d70e9e9c238926f8683577beb88257cb3678 Mon Sep 17 00:00:00 2001 From: Phie <phie@phie.ovh> Date: Wed, 5 Jun 2019 14:41:59 +0200 Subject: [PATCH] adding toggle password to be able to see it Signed-off-by: Phie <phie@phie.ovh> --- core/css/guest.css | 9 +++++++++ core/js/dist/login.js | Bin 604114 -> 604539 bytes core/js/dist/login.js.map | Bin 2423518 -> 2424709 bytes core/src/components/login/LoginForm.vue | 15 ++++++++++++++- 4 files changed, 23 insertions(+), 1 deletion(-) diff --git a/core/css/guest.css b/core/css/guest.css index 75fc2d93ea8..4d7df8b8996 100644 --- a/core/css/guest.css +++ b/core/css/guest.css @@ -228,6 +228,15 @@ input[type='email'] { border: none; font-weight: normal; } +input[type='password'].password-with-toggle, input[type='text'].password-with-toggle { + width: 219px; + padding-right: 40px; +} +.toggle-password { + position: absolute; + top: 17px; + right: 20px; +} input.login { width: 260px; height: 50px; diff --git a/core/js/dist/login.js b/core/js/dist/login.js index 5c0401a951b8461798792176e7d966e40b6ca594..72bdae25f967588352610f96edfc1e9fc8ea1883 100644 GIT binary patch delta 465 zcmccgUgh^Em4+6^7N!>F7M2#)7Pc1l7LF~P_l0D13KENp%kzs;Jo5@lOF}9OQmvF= zLfh{Najs^pFUe0&&q)n{s<TQf%}XxH%+J%%tcI&pvbD7>$;d3$gK34EW{+LiR;eVl zqD09Gmn_U2rCOcoRmz;9+wX~RUSe}9E=erOOm@xzx&`4(-SW(m3|)vTm2?tIN{WiD zs!KpVNyT)}_G8kVEQ|&^se18c8cGUEnmTzJN{LE3)hI?o4AX_XLTCC~9ZmzG;*$J= zfTH|@#B`uDKp~(r{k$=!XgF#JX_RQz*4FAo0}am1O$Qncby9IrGSEf-&U%@-iRr-b zEXmMNO3p7zRnk#P1czv`KExos;<9ulpc&KOsB@}pe=Wo5%F3RYYGG<>k-FVniF39n E08H$v{r~^~ delta 93 zcmV-j0HXi<@+8vlB!GkggaU*Egam{Iga(8Mgb1_=-x9a{5(%mSmm?(!RkwN-3DO1@ zVRUqIb2@u;d2nSqB5+}Ib9ZlYWFohY90>#gw{so|W(5Z@W;ZuuV_~=8BMF-oU^XDa diff --git a/core/js/dist/login.js.map b/core/js/dist/login.js.map index a1397169b030bd71301a3d3daae64973626165b3..71f2b50df32c9b84d29e1f1d950260c5b47066bb 100644 GIT binary patch delta 5932 zcmd5ATWniNRW932Gu>p<rrRcIn;Pe~PVr6rPMow!_TKAf9OuzCNz+CwUdMGDzwPT+ zN^4fIDyT(^sKl)JScw%M@BytB3G<Nn;s*(_fY7Q4v}ivl;)@^nKmwI>X6|*8X8UA? zP;@e$Gc)I$Iq$h2{^Pdc%?Gy)cZVG>tVLgs-Ts!d_jZ?U;0Ia9@BexrA1#%tx#C(V zn=h*u>iIbJ9y5eH)LbHwj?eSO8#j*`0QLZU3g88Ry#Ox)v;ph`Xm8#;M&9c*xSEp| z@)LtIASqI*8WK~oBuQda3P^TWP&|(l1(qBzNy?H}5|<?({*$CMy*@;G4i;oUjHIUV z<TS2?X?2L4=q(}M1Nek2%_Dw+AIsyh<J}fmiAqa|TjmQz`u!m?(55mTWqNOjL@(#6 zelgzS8U?OudRh#_n1m5HD$>SI1jsuF!tche05$@|E+Dr>sX_z8#PZ@LoJDDEm<&e8 zB8xDQ60#Tq2KA&Y`e3Ya`q4U!IQO#u`H~E@B%3_K=j9yVt*(g?*t9XjXjD12DuYZw zi5jdV<ZytNk&qKc&~HHo1xr#c7i3s*1tvN*RJjDAe%?w>%vUe54QgH%1As+Qr4me# zmRm!*w7EUQg%vGGJ7dvkqi8y9mA)}f4mY;u8i^;8^mu`aO=D1mQ)rHY#<(RNB6U(l zOMr=7fDxtTPL?hD#Q^<+jhz1M(_F2x?qfQ2C4HR8BACkCx{W416GrFD`BZ3|{dv__ zeS-StpIv<p)W9Rvheqk9f3uU7vt?I^U6`pZot$Qq1dK=^T>|C7SY8uB50dBsM;Y-t z%3L?hw%wFEh_T(~=I*B9{v?yV^qzzCwU_fdHg`J7iDTt*kohn77ZzcXi#uqRhMZ*l zWryxrXyEmA`gJFnZg_x46y{vEB{9d62s&u3=4T$As{5JTEyr}>77Gx=b2A^amdH-? z^aH^-5^)w~JsC;M>L`~|m!%D5&d7P%C6Pm&jzvbzi}5Mt>6ctY+?V3G3jL9b^tbEh zcnHw?2ss&qNQ|*SEPx77!@4Ky&h*F-%b<_w2Gz7&c0Wm(cip6?kyMy+#4;*l6rvOZ z6s4$pYctH1M>e=l=eaMBfx=MnEchL>TZ!N~ERd01K<N=C$e=_m6QFu$XSrHf+CZII zr=D3=PzoMal@YFE^IGP(B3Sj=u84v{Z}^C%Ve?@M-GJJFwsG47OdoaG1-}qebOczk ztjgte?(bMQz(c`rK>D1*Z0k_iW+b&TR@qYbob&O~mFonXlpYGNy+Fk!(+4Bui+<gs zoJqg90BjvFqF60=XBO6-q=m&eN%(d2R)ijJY*zgaa6~Agk~Ggqang#E+3<@{b0z6q z3yoD;=XepWtw>OJY`Et_YY%3Ltv$e4Sy*O^x}WdJoNZXOvGQE^5M%IZ((|s$li6M- z#3-Y7AE-5+i&}1bkUdq=xy0<h!tQuUi~)a^K%Ml>vF8=Sf_;H*t)~)#d38nW4KRV_ z=9u5n${8|xO81&8C~94fGg)`h#eh5Cr|->LSk5TP8Tf%NrX{i588Sf4XUNeb`p$DK zL|pR1L)#`>`7cd>c!oH;%2{w$CF$RcK#(YsmHzV#aqmftQrlT_q`wA@8m1h`Jae#` z7!C1?6M*(^L#90<@V#-Cywh3O-m9_p%GMR)N-x)VOy+56f-HAhAho0D?4On1n;;{k zptW1;7TPmO-fB<fc^bCTyOU(9KLu>@$mlwX!Hz1@2uu)Zr5#hG@02Ic_f#N4FeJn| zr523aV74e-RNSa8WvxsjQ{+halkDp5Oc7tZo_3t{-&5rBt}>Z;mH5{FyCPVgeryr^ zzpH@*GWm*8cg9xA!@6Hr^dQ<wdB(>7I^VI}s#o`HkzQBGsiB9H6Z(<9XIBS6f1{AT z-7V;2&*<$_!4H&mHDsyPO9qu^Vy+X)U>mqa=$k-jSHgaFiC7h@P~szIdk!ik7PWQ$ z*4Tik1A;j@sfFLiW~^>n_L0Sq9u}Jr-mJNS=Z)4->JO||0eY;IwA)WU)8)X-p`?7y z8J4P48u61~b>-?l{!-%kD@F5=xVkYxxkkObabhbqx)>l;Vv%vT4|)UoL4b@ll9?c@ z6=GO%`{N4B7904iQ`S6?G?WW|Y`1LuS-A1ZzY1>!iEOCT_k-j}FIIWfgI=mrOjb$S zqz{55(xG_>D`yqD5+VZ!JSm<iD_|bX(=Phe5E0xLSp_cyHphazON0U%c36X&I*`XE zykWt4GD-@XB+R1~dOt)?8dCJ7X>#;1nw6Ohsp{{$BAuAVhW{a^7BFudw$(VHE3EGM z*iE90^y}=mm*wsl!>qC2WrbUAlON=TI;C(aRgT1#1|(3#D)uCHKzd+YVqH*q*8WTv zoD7qbqJCdp*?7%@tgF1`k9hAAeJe~%hBSRIOoj~}`catlxmr7-xI=sS?#d2&fZAB= zLaj68xWP^%Gi3OHN2`a+BKFxSua(}KA$CKV{%nRA&pr=%jaiZQMaXbxLNh3O{hFID zMaYj$1qdCGH<~T_AexoDoc6GudaeWupx}6(+Gok7MyiZ2OWzW9OA*#w$Iy04Hphx> zI0qwqECPdtBt=0Z&gE4<?hX}TL>3rA(jqP`sM>A?bv$R8!K3Hcp@IjWx8V!$&l|P# zk1nCgMkB;lbI^6bR`4g#-g&&oIVZ3Ly306Oa`0~|3oh0KtzbaJQJ}2iR8ZVS-s-Qg zC;;b#rHV4jTBqoUb_U%kCl}#`1)N5ex(A<_=cPp#<O2wYooDR|<6+azVh7H`N7?Xh zDyYAN>|W<;u%%cGFWX^6wb<w%=SZNxrm%N$L9TA20bhS2lCS7hZ%Fe5U_Zc10386G z051b{0UQ802+$312;dcf!vIGBdH{L>`T&js90NEG&<}6|zzFbZ029DKQ<@k4HQpAD zd)#hMoPO{NVX&FLDFhAe8fw)<C;uXhHvfK02$SA%6}~V|teSRzb^O}fLhm6RJycDq z>qGn-WOJ4ZUpCOOO8@?bX<*f4d^MI%#!|y2HJ2aG7vq(9Rt1VXK3J~7wpbcIUbYs7 zbkeJ)$<^$ts{fr$W)jBnQZWWQ=ak`OCYpe+p6dFbIhHHN&7#p9jj738wqykc9q>tX zxKv4)Pp_J+lhpd5&_n<54WXm?=eLD)I~{*lAg{E(qmCQRI!`lw|K~za^K<VC%X=C- z1vL(yHeTHlD0yX2T~C&V^^+}X#)*lEZ3ItmJF}`j>WI;-#%rp1i~P0KEX}SQ-sg&^ zOYx^9p^IXsAKl-7yxIJ=@L=C`NsX$>n1U)E-?HX*v#pxMsHzrA<5$5pVDwef_-mES z?u#{l`#oXGK)de<-9pqXUfoHVD{GtaMEafI2@~|xI|mQa>%SBR#GUFK6qrApzIN@J jc=@&1pc%{yL^Vn1Proae4sSDP%bwS+H9PMJzYhNgi;u|j delta 5157 zcmdT|TWnlc71g9Ej!zvwn$)o!Cl2;)i0YeoUY<wl#69=UjOXF8J&7NAG@z;Njy>;( z$McY)5eO(BC{Y#B6Q~LT@lh#KY1P0$zYs|M$VY{MA3!P}@Ppuket=NLYwvyT9Xm;# zq>hBd$DVuddF*q}-fOSD&wS-SH!L6i?S|#;Q}(@Hk8AwKcOCsVx~(JcX6?WElej!+ z3BGcB&;qgt<Oz_yAWwpP2BZySA4q%i_8@z!(^6?JkFxhHN`y~w=LPjV=Ummf&aKX% zx~_2_SC_aSe>hKyFP>z5{RIsgoT;#y(s&qqBC<P;-ADGjpeLd6Ic$uH`bjp_lfxMv zXpi$nY+e$#pjmu;l0DT{q!mh{;}nZ`W-0-7)m*bEetec$_eQvT;k8LN&=_40sZrcs zTu(+9a7PJE4M9VBT~qz=+(?Jj2<P!KJn`E{zv+?&I=NMI$?rl=j?S-;w&XPFD9P4} zrp}@!V~iT(Jf(RzgD_NlV~n}%wMvMz*5L`ZDrjIV&U3jSwW=54!(0H($9YlwYm5!e zl`heMd|p$hpcQw|bMS%tv>A<7<GY%X`&UO%cV^Vkjb}G?=LL7L0}b?6tI5#vP^}&x z%&Hh`WMLNAjAx9sTN}hiQ&o0!igulWCvF%$4{#`oe_NS)<bg*MQ#N))xp$AWq^VtM zD~hk#c5A1~L+o^ZS9Y@FQFpWxI-pmS>}+wO;0zIl$VO}HVfyf_NhhwA0@Pk!Q5Vp3 z9x$EDS1bD^9>|ZP&%uthSH>l@$hY?PLjJBH*BxwVuuw)MaxM`OB+EG^1k>V<gPrcG znb<-9c@yG*lZBU^pg9iTa!2P>h(`m0)oOq+o2Uh7KP~7vafl0);k@Zj=<`4ykp)Dc zD_R#nb+UuD*6OgyjFtxE64=2#ky<`Tp;cQTWj>5ao)%4wsrwSLttkGiv7_y#5{Yr~ z*9rEdcur^PWCl);J~1(B0%*th$sjIF4;t$JKK?K}+FY!!G47F;#_%p_)oDU3MQzo$ z^=_Y$2gGRJg^@Em8hMbb)Y-B!7_<_dk;j*qG3_!EiX%x84}EG2Q6S%Cq24_npZI;0 zJtJ;<ST<lfqrM(MGUPRQq7Pa?DdQPT4Xsv0SR!CH=S9rNtc^{tzXmQW;fy)bBDLy# zJsD6Tt#E#>)r{CO7n=vL=y*mej+t+b!GPKt18eHB^VDe~<Sw3RU|Iq~Hn|-l#G{YS z68=@hds!zVK9J80lD&_rGuug(f@b?Vi6E>a>Ze(EV^`X9+kyN@l)XstCF5#QU50ZL zD>+2_^X%B}HZh91)^zD3ZGueOvIBTDH%qxxy!kwHA2*@(5^lAo#mRH`=`{#)g1s<c zPDqaGsJW!A!wV5YD<Y1ITNCW?A#>!6!I05=hVd53tclZSn4`Op1z79rfqE1mpmVpl zdWMa=Jg$%=?J1~VA~H`={|3}Dlr_V^X*$1a+{@yO%0@)TS@!KusAt^mg{q|awD`wa zw$$m$8p$3H;ucpXnTutNg2w9=Z%nf5?Fryc***ROn`|W9QiB6h3|1@9r*pfJZ`?&0 zs9;n-AM@&xtSHW%c{#5L(MHrgt5<`o75G}<7jzriQeP>+L!XarE3X!5?XBX<NF$F? zT?r>={`SI}+)iD5iL=Z1Wv;)#82)&9sT}@)$xFTBmd?I<%*1VrN0F9lx*2rDqmIV^ znna1P&14Hz-xGdz{5}dnK$&B9OvpJ%V>=YI2C)(_AF8Ji=m15gS(4(mpPkU}W!6X9 zQ3eZ?Ek#2Cb|SbdMTNjNMU*Ow;(CC6&X$7P17^-OS?rG`sBX$>qws=3y#wQY9AFC} zGekCl5YTi;dq%xyUV2)o?t#Y@H>cQh-8JMIJ>_>y6N}}=FQ?cCU8$O1UR4b0`$3Qm zc3IuN?R+PG8)Oyc(r}=kdkf-nh`9$x(?LozYD6Cotm;G~W0FRk;;j(ti)^umJnZ9; zMo*Y&wz5&*X6RB^t7=(kR;(n@0%kb?#R6TwHpQ32EV|!tDJ8<9_%O^ydYmaqszq=N za=BGJ9bwA&JXHyWsk(Q2@j51JZBA=!!i^GOlhG4Jxp+~eBJ5d9LcAJbhkMbX<Sfb% z#=R;leimWj#=VQWz_F{acvUKTi87|2R#_r+$Q!wjc>W@_T%vcNX*yqBPLwG=p-Z1_ z$VM!iaGPoc>mD04df<7EDy{O2?Nc4_=hN(2)jY3hY&>Q`Gfmz?BAz=Z4o2CqWlgxF z>{P>P<h&)idSrZnG|n&3aayzDILolsjs#-eUI>AYsYp)C;{qhG&Z!zY(5ab_tT+A` zWrICio4{EqpIh|IFxwR~#w4ORPP5Bu+JM$$>@X|7Gs8}Gdf;yY40Q~!6`T0o4ExD& z24WG898VVgKo5FeOMCq2+1VU)fZtZr;zzUW5`d~_jvaC*a}+?46g;Q64sH)|U8f1@ zjR4kmp$t4xBgP?Lz^+(cd|{6DH!>c)pho85#}}{4e@#N0$q-FXK`jFs0fAuK^SH%x zbx;pFmhfZIF8>pWS*g~#h&Eou#j|={N1!g$j1H`>0nX61sXM4bi`%Jd;36R~r)870 zlv}TPG@5D^Ju!B0qN<bDilGQ^0u*9;(zmIjF%sJNnmlABMRC4Vg(n`mBH}SNb#y}~ zWEHg1HXUH~DEAkA`B&bLF_5P~IzaY=bb@q&bc6JOJPmRH<RHj1AiW@mK>9%XK?Xn$ zgA9Tk0XYgX1ab`IvmnDDBhB|?%0ExHSzmU$mzU$>>Ice+=0{&wf|gcO{1=M1S-Yl0 zn7I0y(k6W0Qu>>Rzo}F#;`29^uI9|^O1fS2-+|YUzOO9p5!dc0*Tma*l(yy%-&B(O ugzp`tyW_>-e7sbu<ccdV4ma1|Q6?>xE8^8(D+A)aUn$+qKfJ4aFY;gCrP!(f diff --git a/core/src/components/login/LoginForm.vue b/core/src/components/login/LoginForm.vue index dc9ef779f98..5574d65a059 100644 --- a/core/src/components/login/LoginForm.vue +++ b/core/src/components/login/LoginForm.vue @@ -65,7 +65,8 @@ <p class="groupbottom" :class="{shake: invalidPassword}"> - <input type="password" + <input :type="passwordInputType" + class="password-with-toggle" name="password" id="password" ref="password" @@ -75,6 +76,9 @@ required> <label for="password" class="infield">{{ t('Password') }}</label> + <a href="#" @click.stop.prevent="togglePassword" class="toggle-password"> + <img :src="OC.imagePath('core', 'actions/toggle.svg')"/> + </a> </p> <div id="submit-wrapper"> @@ -162,6 +166,7 @@ timezoneOffset: (-new Date().getTimezoneOffset() / 60), user: this.username, password: '', + passwordInputType: 'password', } }, computed: { @@ -186,6 +191,14 @@ } }, methods: { + togglePassword () { + if(this.passwordInputType === 'password'){ + this.passwordInputType = 'text' + } + else{ + this.passwordInputType = 'password' + } + }, updateUsername () { this.$emit('update:username', this.user) }, -- GitLab