Skip to content

Commit 185bebc

Browse files
leozhang2018leozhang2018
committed
Supports show password.
Signed-off-by: leozhang2018 <[email protected]>
1 parent bb9c15b commit 185bebc

File tree

6 files changed

+89
-26
lines changed

6 files changed

+89
-26
lines changed

‎custom-web/static/css/main.css‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,39 @@ a {
123123
text-align: left;
124124
}
125125

126+
.login .login-inner-form .form-group .input--suffix {
127+
position: relative;
128+
font-size: 14px;
129+
display: inline-block;
130+
width: 100%;
131+
}
132+
133+
.login .login-inner-form .form-group .input__suffix{
134+
position: absolute;
135+
top: 0;
136+
right: 5px;
137+
height: 100%;
138+
color: #c0c4cc;
139+
text-align: center;
140+
}
141+
142+
.login .login-inner-form .form-group .input__suffix .input__suffix-inner{
143+
pointer-events: all;
144+
padding-right: 10px;
145+
}
146+
147+
.login .login-inner-form .form-group .input__suffix .input__suffix-inner .iconfont{
148+
height: 100%;
149+
width: 25px;
150+
text-align: center;
151+
line-height: 38px;
152+
cursor: pointer;
153+
}
154+
155+
.login .login-inner-form .form-group .input__suffix .input__suffix-inner .iconfont:hover{
156+
color: #909399;
157+
}
158+
126159
.login .login-inner-form .error-text {
127160
margin-bottom: 5px;
128161
color: #f56c6c;

‎custom-web/static/js/main.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ var dex = new Vue({
1111
password: "",
1212
},
1313
showRegistration:false,
14-
showLoginError:false
14+
showLoginError:false,
15+
showPassword:false
1516
},
1617
methods: {
1718
async login() {

‎custom-web/templates/header.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
<link href="{{ url .ReqPath "static/css/bootstrap.css" }}" rel="stylesheet">
2727
<link href="{{ url .ReqPath "static/css/main.css" }}" rel="stylesheet">
2828
<link href="{{ url .ReqPath "theme/styles.css" }}" rel="stylesheet">
29-
<link rel="stylesheet" href="//at.alicdn.com/t/font_1282370_mbsho89kty9.css"
29+
<link rel="stylesheet" href="//at.alicdn.com/t/font_1282370_pa5gn2t532.css"
3030
media="all" onload="this.media='all'" />
3131
<title>登录</title>
3232
</head>

‎custom-web/templates/index.html‎

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:200,300,400,500,600,700" />
4343
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:200,300,400,500,600,700"
4444
media="all" onload="this.media='all'" /> -->
45-
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1282370_mbsho89kty9.css"
45+
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1282370_pa5gn2t532.css"
4646
media="all" onload="this.media='all'" />
4747
<link href="../static/css/bootstrap.css" rel="stylesheet" />
4848
<link href="../static/css/main.css" rel="stylesheet" />
@@ -83,17 +83,24 @@
8383
<label for="password"
8484
>密码</label
8585
>
86-
<input
87-
required
88-
v-model="loginForm.password"
89-
id="password"
90-
name="password"
91-
type="password"
92-
class="form-control"
93-
placeholder="请输入密码"
94-
value=""
95-
autofocus
96-
/>
86+
<div class="input--suffix">
87+
<input
88+
required
89+
v-model="loginForm.password"
90+
id="password"
91+
name="password"
92+
:type="showPassword?'text':'password'"
93+
class="form-control"
94+
placeholder="请输入密码"
95+
value=""
96+
autofocus
97+
/>
98+
<span class="input__suffix">
99+
<span class="input__suffix-inner">
100+
<i @click="showPassword = !showPassword" class="iconfont iconview"></i>
101+
</span>
102+
</span>
103+
</div>
97104
</div>
98105
<p v-if="showLoginError" class="text-left error-text">用户名或密码不正确</p>
99106
<button

‎custom-web/templates/login.html‎

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -29,17 +29,24 @@
2929
<label for="password"
3030
>密码</label
3131
>
32-
<input
33-
required
34-
v-model="loginForm.password"
35-
id="password"
36-
name="password"
37-
type="password"
38-
class="form-control"
39-
placeholder="请输入密码"
40-
value=""
41-
autofocus
42-
/>
32+
<div class="input--suffix">
33+
<input
34+
required
35+
v-model="loginForm.password"
36+
id="password"
37+
name="password"
38+
:type="showPassword?'text':'password'"
39+
class="form-control"
40+
placeholder="请输入密码"
41+
value=""
42+
autofocus
43+
/>
44+
<span class="input__suffix">
45+
<span class="input__suffix-inner">
46+
<i @click="showPassword = !showPassword" class="iconfont iconview"></i>
47+
</span>
48+
</span>
49+
</div>
4350
</div>
4451
<p v-if="showLoginError" class="text-left error-text">用户名或密码不正确</p>
4552
<button

‎custom-web/templates/password.html‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,22 @@
1111
</div>
1212
<div class="form-group">
1313
<label for="password">密码</label>
14-
<input required id="password" name="password" type="password" class="form-control" placeholder="请输入密码" {{ if .Invalid }} autofocus {{ end }}/>
14+
<div class="input--suffix">
15+
<input
16+
required
17+
id="password"
18+
name="password"
19+
:type="showPassword?'text':'password'"
20+
class="form-control"
21+
placeholder="请输入密码"
22+
{{ if .Invalid }} autofocus {{ end }}
23+
/>
24+
<span class="input__suffix">
25+
<span class="input__suffix-inner">
26+
<i @click="showPassword = !showPassword" class="iconfont iconview"></i>
27+
</span>
28+
</span>
29+
</div>
1530
</div>
1631
{{ if .Invalid }}
1732
<p class="text-left error-text">{{ .UsernamePrompt }}或密码不正确</p>

0 commit comments

Comments
 (0)