Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-08 02:52:39 -05:00
Code Issues Activity

Refactored profile page for free/paid member

Browse source 
no issue

- Updates profile page for free/paid member to render newsletter based on context
- Disable editing email field till we have the full flow for it
This commit is contained in:
Rish 2020-05-22 15:43:15 +05:30
parent 7cc028ba0d
commit dd2ad02e68
2 changed files with 10 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
ghost/portal/src/components/common/InputField.js
View file

@ -1,6 +1,6 @@
import React from 'react';
const Styles = ({style = {}}) => {
const Styles = ({disabled, style = {}} = {}) => {
return {
input: {
display: 'block',
@ -11,7 +11,7 @@ const Styles = ({style = {}}) => {
border: '1px solid #c5d2d9',
color: 'inherit',
textDecoration: 'none',
background: '#fff',
background: disabled ? '#ececec' : '#fff',
borderRadius: '9px',
fontSize: '14px',
marginBottom: '12px',
@ -27,8 +27,8 @@ const Styles = ({style = {}}) => {
};
};
function InputField({name, id, label, type, value, placeholder, onChange, style}) {
const Style = Styles({style});
function InputField({name, id, label, type, value, placeholder, disabled, onChange, style}) {
const Style = Styles({disabled, style});
id = id || `input-${name}`;
return (
<>
@ -39,6 +39,7 @@ function InputField({name, id, label, type, value, placeholder, onChange, style}
name={name}
placeholder={placeholder}
value={value}
disabled={disabled}
onChange={e => onChange(e, name)}
style={Style.input}
aria-label={label}

13
ghost/portal/src/components/pages/AccountProfilePage.js
View file

@ -33,7 +33,7 @@ export default class AccountProfilePage extends React.Component {
renderAccountFooter() {
return (
<div style={{display: 'flex', padding: '0 24px', marginTop: '42px', color: this.context.brandColor, fontWeight: 'bold', fontSize: '13px', alignItems: 'center'}}>
<div style={{display: 'flex', padding: '0 24px', marginTop: '12px', color: this.context.brandColor, fontWeight: 'bold', fontSize: '13px', alignItems: 'center'}}>
<div style={{cursor: 'pointer', color: 'red'}} role='button'> Delete Account </div>
<div style={{display: 'flex', flexGrow: 1, justifyContent: 'flex-end'}}>
<ActionButton
@ -123,17 +123,14 @@ export default class AccountProfilePage extends React.Component {
value: this.state.email,
placeholder: 'Email...',
label: 'Email',
name: 'email'
name: 'email',
disabled: true
}
};
const field = fields[fieldName];
return (
<InputField
label = {field.label}
type={field.type}
name={field.name}
placeholder={field.placeholder}
value={field.value}
{...field}
onChange={(e, fieldName) => this.handleInput(e, fieldName)}
/>
);
@ -159,7 +156,7 @@ export default class AccountProfilePage extends React.Component {
}
const label = subscribed ? 'You are subscribed to email newsletters' : 'You are not subscribed to email newsletters';
return (
<div style={{padding: '0 24px', display: 'flex', alignItems: 'center'}}>
<div style={{padding: '0 24px', display: 'flex', alignItems: 'center', marginBottom: '20px'}}>
<div style={{flexGrow: 1}}>
<div style={{
marginBottom: '3px',