Commit 3b746e8c authored by Pon Kattera's avatar Pon Kattera
Browse files

Permissions page improvements

parent cd8d95a0
......@@ -148,6 +148,11 @@ $themes: (
}
body, h1, h2, h3, h4, h5, h6 {
font-family: $font-primary;
}
// Utility classes to be used with @extend
.link {
......
......@@ -54,7 +54,7 @@ class Keys extends Component {
return (
<span>
<div className="row">
<div className="column small-12">{auths}</div>
<div>{auths}</div>
</div>
</span>
);
......
......@@ -89,26 +89,24 @@ class ShowKey extends Component {
);
return (
<div>
<div className="row">
<div className="column">
<br />
<h5>Public {this.props.authTypeName} Key</h5>
{qrIcon}
<span>{pubkey}</span>
<div className="ShowKey">
<div className="column">
<div className="row key__public">
<div className="column">
<br />
<h5>Public {this.props.authTypeName} Key</h5>
{qrIcon}
<span>{pubkey}</span>
</div>
</div>
</div>
<div className="row">
<div className="column">
<div className="row key__private">
<br />
<h5>Private {this.props.authTypeName} Key</h5>
</div>
</div>
<div className="row">
<div className="column small-10">
<input type="text" value={wif ? wif : '·'.repeat(44)} />
</div>
<div className="column small-2">
<h5>Your Private {this.props.authTypeName} Key</h5>
<input
className="key__input"
type="text"
value={wif ? wif : ''.repeat(44)}
/>
{wif ? null : (
<a onClick={showLogin} className="hollow button">
Reveal
......@@ -116,7 +114,6 @@ class ShowKey extends Component {
)}
</div>
</div>
<hr />
</div>
);
}
......
......@@ -99,74 +99,249 @@ class UserKeys extends Component {
});
return (
<div className="UserKeys row">
<div style={{ paddingBottom: 10 }} className="column small-12">
<h3>Posting Key</h3>
<span className="secondary">
{tt(
'userkeys_jsx.posting_key_is_required_it_should_be_different'
)}
</span>
<Keys
account={account}
authType="posting"
onKey={onKey.Posting}
/>
<div className="UserKeys">
<div className="UserKeys__intro">
<p className="UserKeys__p">
Any password or key is more likely to get compromised
the more it is used. That's why Steem uses a
hierarchical key system to keep you safe. You are issued
with four keys which have different permissions. For
example, the Posting Key (which is intended to be used
frequently) has a limited set of permissions for social
actions that require less security. You'll need to be
more careful with your Active Key since it has
permissions to perform wallet related actions.
</p>
<p className="UserKeys__p">
Please take note of your Steem Keys listed below.
Ideally, use a Password Manager (like 1Password or
LastPass) or store an offline copy safely (on a piece of
paper or on a file on a USB drive).
</p>
<a
className="UserKeys__link"
href="https://steemit.com/steem/@steemitblog/steem-basics-understanding-private-keys-part-1"
>
Learn more about Steem keys
</a>
</div>
<hr />
<div style={{ paddingBottom: 10 }} className="column small-12">
<h3>Active Key</h3>
<span className="secondary">
{tt(
'userkeys_jsx.the_active_key_is_used_to_make_transfers_and_place_orders'
)}
</span>
<Keys
account={account}
authType="active"
onKey={onKey.Active}
/>
<div className="key">
<div className="key__title-container">
<h3>Posting Key</h3>
</div>
<div className="key__content-container">
<div className="key__col">
<p className="key__description">
This key should be used for social networking
actions, like posting, commenting and voting.
This key has a limited set of permissions and it
is not able to be used for monetary actions. So
you can't lose money if someone else gets access
to this key.
</p>
<p className="key__description">
Use this key to log in to other Steem-powered
social networks like Steemit, Busy and eSteem.
Store this key safely.
</p>
<Keys
account={account}
authType="posting"
onKey={onKey.Posting}
/>
</div>
<div className="key__col permissions">
<h5 className="permissions__h5">
Posting Key permissions
</h5>
<p className="permissions__p">
Use your Posting Key to:
</p>
<ul className="permissions__list">
<li className="permissions__li">
Publish a post or comment
</li>
<li className="permissions__li">
Edit a post or comment
</li>
<li className="permissions__li">
Upvote or downvote
</li>
<li className="permissions__li">
Resteem content
</li>
<li className="permissions__li">
Follow people
</li>
<li className="permissions__li">
Mute accounts
</li>
</ul>
</div>
</div>
</div>
<hr />
<div style={{ paddingBottom: 10 }} className="column small-12">
<h3>Owner Key</h3>
<span className="secondary">
{tt(
'userkeys_jsx.the_owner_key_is_required_to_change_other_keys'
)}
<br />
{tt(
'userkeys_jsx.the_private_key_or_password_should_be_kept_offline'
)}
</span>
<Keys
account={account}
authType="owner"
onKey={onKey.Owner}
/>
<div className="key">
<div className="key__title-container">
<h3>Active Key</h3>
</div>
<div className="key__content-container">
<div className="key__col">
<p className="key__description">
This key has additional permissions for more
sensitive monetary-related actions, like
transferring and exchanging tokens.
</p>
<p className="key__description">
When performing a wallet related action, you may
be prompted to authenticate with your Active
key. You should only enter your Active Key into
apps which you trust because anyone with access
to this key can take your tokens. Do yourself a
favor and store this key safely to avoid losing
tokens in the future.
</p>
<Keys
account={account}
authType="active"
onKey={onKey.Active}
/>
</div>
<div className="key__col permissions">
<h5 className="permissions__h5">
Active Key permissions
</h5>
<p className="permissions__p">
Use your Active Key to:
</p>
<ul className="permissions__list">
<li className="permissions__li">
Transfer tokens
</li>
<li className="permissions__li">
Power STEEM up or down
</li>
<li className="permissions__li">
SBD conversion
</li>
<li className="permissions__li">
Vote for witnesses
</li>
<li className="permissions__li">
Place an order on an exchange
</li>
<li className="permissions__li">
Certain profile changes
</li>
<li className="permissions__li">
Publish a Witness price feed
</li>
<li className="permissions__li">
Create a new user
</li>
</ul>
</div>
</div>
</div>
<div className="key">
<div className="key__title-container">
<h3>Owner Key</h3>
</div>
<div className="key__content-container">
<div className="key__col">
<p>
{tt(
'userkeys_jsx.the_owner_key_is_required_to_change_other_keys'
)}
&nbsp;This key has additional permissions to
recover your account or change your other keys.
It's the most important key and should be
securely stored offline.
</p>
<Keys
account={account}
authType="owner"
onKey={onKey.Owner}
/>
</div>
<div className="key__col permissions">
<h5 className="permissions__h5">
Owner Key permissions
</h5>
<p className="permissions__p">
Use your Owner Key to:
</p>
<ul className="permissions__list">
<li className="permissions__li">
Set Owner and Active keys
</li>
<li className="permissions__li">
Recover your account
</li>
<li className="permissions__li">
Decline voting rights
</li>
</ul>
</div>
</div>
</div>
<hr />
<div style={{ paddingBottom: 10 }} className="column small-12">
<h3>Memo Key</h3>
<span className="secondary">
{tt(
'userkeys_jsx.the_memo_key_is_used_to_create_and_read_memos'
)}
</span>
<Keys
account={account}
authType="memo"
onKey={onKey.Memo}
/>
<div className="key">
<div className="key__title-container">
<h3>Memo Key</h3>
</div>
<div className="key__content-container">
<div className="key__col">
<p>
{tt(
'userkeys_jsx.the_memo_key_is_used_to_create_and_read_memos'
)}
</p>
<Keys
account={account}
authType="memo"
onKey={onKey.Memo}
/>
</div>
<div className="key__col permissions">
<h5 className="permissions__h5">
Memo Key permissions
</h5>
<p className="permissions__p">
Use your Memo Key to:
</p>
<ul className="permissions__list">
<li className="permissions__li">
Send an encrypted message
</li>
<li className="permissions__li">
View an encrypted message
</li>
</ul>
</div>
</div>
</div>
<hr style={{ 'margin-top': '4em' }} />
<h3>Legacy wif display for reference</h3>
<div className="column small-12">
{wifQrs && <span>{wifQrs}</span>}
<div className="public-keys">
<div className="public-keys__container">
<div className="public-keys__intro">
<h3 className="public-keys__h3">Public Keys</h3>
<p className="public-keys__description">
Each Steem Key has a public and private key to
encrypt and decrypt data. Below are your public
keys. They are publicly associated with your
username and can be used to look up your
transactions on the blockchain with a block
explorer like{' '}
<a href="https://steemd.com">steemd.com</a>.
Your public keys are not required for login on
Steemit.com and you don't need to store these
safely.
</p>
</div>
<div>{wifQrs && <span>{wifQrs}</span>}</div>
</div>
</div>
</div>
);
......
.UserKeys {
max-width: 1200px;
margin: 0 auto;
@include MQ(M) {
padding: 0 24px;
}
h3, h5 {
font-weight: bold;
}
h3 {
@include font-size(24px);
margin-bottom: 0;
}
h5 {
@include font-size(18px);
margin-bottom: 12px;
}
&__intro {
margin-bottom: 2em;
padding: 16px;
max-width: 780px;
@include MQ(M) {
padding: 0;
}
}
&__p {
@include font-size(16px);
}
&__link {
@include font-size(16px);
font-weight: bold;
}
.hoverBackground {
transition: 0.2s all ease-in-out;
&:hover {
......@@ -13,3 +47,119 @@
@extend .e-btn-hollow;
}
}
.key {
margin-bottom: 2em;
@include themify($themes) {
border: themed('border');
background: themed('moduleBackgroundColor');
}
&__description {
@include font-size(16px);
line-height: 1.4;
&--last {
margin-bottom: 0;
}
}
&__title-container {
padding: 16px;
@include MQ(FL) {
padding: 18px 24px;
}
@include themify($themes) {
border-bottom: themed('border');
}
}
&__content-container {
@include MQ(FL) {
display: flex;
justify-content: space-between;
}
}
&__col {
padding: 16px;
@include MQ(FL) {
padding: 24px;
}
&:nth-child(1) {
@include MQ(FL) {
padding-right: 50px;
}
}
&:nth-child(2) {
@include themify($themes) {
border-left: themed('border');
flex: 0 0 360px;
}
}
}
&__public {
display: none;
}
.button {
margin: 12px 0 0 0;
text-transform: capitalize;
font-weight: bold;
}
&__input {
@include MQ(FL) {
min-width: 600px;
max-width: 680px;
}
}
}
.permissions {
&__h5 {
margin-bottom: 16px;
}
&__p {
margin-bottom: 4px;
@include font-size(15px);
}
&__li {
padding: 2px;
@include font-size(15px);
}
}
.ShowKey {
}
.UserKeys .public-keys {
margin: 6em 0 0;
padding: 64px 0;
width: 100vw;
position: relative;
margin-left: -50vw;
left: 50%;
@include themify($themes) {
border-top: themed('border');
background: themed('backgroundColorEmphasis');
}
&__container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 16px;
}
&__intro {
padding: 16px;
@include MQ(M) {
padding: 24px 24px 0 16px;
}
}
&__h3 {
margin-bottom: 12px;
}
&__description {
@include font-size(16px);
margin-bottom: 0;
max-width: 780px;
}
}
......@@ -54,6 +54,13 @@
.WalletSubMenu {
> li > a {
transition: 0.2s all ease-in-out;
padding: 1em 1em 1em 0;
@include font-size(16px);
@include MQ(M) {
@include font-size(18px);
padding: 1em 1.5em 1em 0;
}
@include themify($themes) {
color: themed('textColorSecondary');
}
......
......@@ -62,7 +62,7 @@
"order_placed": "Order placed: %(order)s",
"password": "Password",
"payouts": "Payouts",
"permissions": "Permissions",
"permissions": "Keys & Permissions",
"phishy_message":
"Link expanded to plain text; beware of a potential phishing attempt",
"post": "Post",
......@@ -536,7 +536,7 @@
"the_private_key_or_password_should_be_kept_offline":
"The private key or password for the owner key should be kept offline as much as possible.",
"the_memo_key_is_used_to_create_and_read_memos":
"The memo key is used to create and read memos."
"This key can be used to send and view encrypted memos on the Steem blockchain."
},
"suggestpassword_jsx": {
"APP_NAME_cannot_recover_passwords_keep_this_page_in_a_secure_location":
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment