bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'showable-password' into 'develop'

Browse source 
Create ShowablePassword component

See merge request soapbox-pub/soapbox-fe!916
This commit is contained in:
Alex Gleason 2021-12-15 15:07:33 +00:00
commit 7f3d7fbc29
10 changed files with 121 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
app/soapbox/components/showable_password.js Normal file
View file

Binary file not shown.

66
app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_form-test.js.snap
View file

@ -25,19 +25,48 @@ exports[`<LoginForm /> renders for Mastodon 1`] = `
/>
</div>
<div
className="input password user_password"
className="input required showable-password password user_password"
>
<input
aria-label="Password"
autoCapitalize="off"
autoComplete="off"
autoCorrect="off"
className="password"
name="password"
placeholder="Password"
required={true}
type="password"
/>
<button
aria-label="Show password"
className="icon-button"
disabled={false}
onClick={[Function]}
onKeyDown={[Function]}
onKeyPress={[Function]}
onKeyUp={[Function]}
onMouseDown={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tabIndex="0"
title="Show password"
>
<div
style={Object {}}
>
<div
className="svg-icon"
>
<svg
id={
Object {
"process": [Function],
}
}
/>
</div>
</div>
</button>
</div>
<p
className="hint subtle-hint"
@ -89,19 +118,48 @@ exports[`<LoginForm /> renders for Pleroma 1`] = `
/>
</div>
<div
className="input password user_password"
className="input required showable-password password user_password"
>
<input
aria-label="Password"
autoCapitalize="off"
autoComplete="off"
autoCorrect="off"
className="password"
name="password"
placeholder="Password"
required={true}
type="password"
/>
<button
aria-label="Show password"
className="icon-button"
disabled={false}
onClick={[Function]}
onKeyDown={[Function]}
onKeyPress={[Function]}
onKeyUp={[Function]}
onMouseDown={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tabIndex="0"
title="Show password"
>
<div
style={Object {}}
>
<div
className="svg-icon"
>
<svg
id={
Object {
"process": [Function],
}
}
/>
</div>
</div>
</button>
</div>
<p
className="hint subtle-hint"

33
app/soapbox/features/auth_login/components/__tests__/__snapshots__/login_page-test.js.snap
View file

@ -28,19 +28,48 @@ exports[`<LoginPage /> renders correctly on load 1`] = `
/>
</div>
<div
className="input password user_password"
className="input required showable-password password user_password"
>
<input
aria-label="Password"
autoCapitalize="off"
autoComplete="off"
autoCorrect="off"
className="password"
name="password"
placeholder="Password"
required={true}
type="password"
/>
<button
aria-label="Show password"
className="icon-button"
disabled={false}
onClick={[Function]}
onKeyDown={[Function]}
onKeyPress={[Function]}
onKeyUp={[Function]}
onMouseDown={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tabIndex="0"
title="Show password"
>
<div
style={Object {}}
>
<div
className="svg-icon"
>
<svg
id={
Object {
"process": [Function],
}
}
/>
</div>
</div>
</button>
</div>
<p
className="hint subtle-hint"

BIN
app/soapbox/features/auth_login/components/login_form.js
View file

Binary file not shown.

BIN
app/soapbox/features/auth_login/components/registration_form.js
View file

Binary file not shown.

BIN
app/soapbox/features/security/index.js
View file

Binary file not shown.

BIN
app/soapbox/features/security/mfa_form.js
View file

Binary file not shown.

2
app/soapbox/locales/pl.json
View file

@ -424,6 +424,8 @@
"follow_request.authorize": "Autoryzuj",
"follow_request.reject": "Odrzuć",
"forms.copy": "Kopiuj",
"forms.hide_password": "Ukryj hasło",
"forms.show_password": "Pokaż hasło",
"getting_started.open_source_notice": "{code_name} jest oprogramowaniem o otwartym źródle. Możesz pomóc w rozwoju lub zgłaszać błędy na GitLabie tutaj: {code_link} (v{code_version}).",
"group.detail.archived_group": "Zarchiwizowana grupa",
"group.members.empty": "Ta grupa nie ma żadnych członków.",

1
app/styles/about.scss
View file

@ -97,6 +97,7 @@ $fluid-breakpoint: $maximum-width + 20px;
}
.input {
flex: 1;
margin-bottom: 0;
margin-right: 10px;

25
app/styles/forms.scss
View file

@ -608,6 +608,31 @@ code {
margin-bottom: 14px;
font-weight: bold;
}
.showable-password {
position: relative;
input {
padding-right: 36px;
}
.icon-button {
position: absolute;
top: 0;
right: 0;
height: 41px;
width: 36px;
padding: 0;
margin: 0;
background: transparent;
color: var(--primary-text-color);
.svg-icon {
height: 20px;
width: 20px;
}
}
}
}
.block-icon {