r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

Convert user account pages to use Button

Browse source
This commit is contained in:
Andrew Nicolaou 2020-04-26 11:40:00 +02:00
parent 428fee266b
commit 0d8aeedd4a
6 changed files with 28 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
client/common/Icon.jsx
View file

@ -7,6 +7,7 @@ import lodash from 'lodash';
const icons = { const icons = {
github: require('../images/github.svg'), github: require('../images/github.svg'),
google: require('../images/google.svg'), google: require('../images/google.svg'),
plusIcon: require('../images/plus-icon.svg'),
}; };
/* /*

15
client/modules/User/components/APIKeyForm.jsx
View file

@ -2,12 +2,12 @@ import PropTypes from 'prop-types';
import React from 'react'; import React from 'react';
import InlineSVG from 'react-inlinesvg'; import InlineSVG from 'react-inlinesvg';
import Button from '../../../common/Button';
import Icon from '../../../common/Icon';
import CopyableInput from '../../IDE/components/CopyableInput'; import CopyableInput from '../../IDE/components/CopyableInput';
import APIKeyList from './APIKeyList'; import APIKeyList from './APIKeyList';
const plusIcon = require('../../../images/plus-icon.svg');
export const APIKeyPropType = PropTypes.shape({ export const APIKeyPropType = PropTypes.shape({
id: PropTypes.object.isRequired, id: PropTypes.object.isRequired,
token: PropTypes.object, token: PropTypes.object,
@ -81,14 +81,15 @@ class APIKeyForm extends React.Component {
type="text" type="text"
value={this.state.keyLabel} value={this.state.keyLabel}
/> />
<button <Button
className="api-key-form__create-button"
disabled={this.state.keyLabel === ''} disabled={this.state.keyLabel === ''}
type="submit" type="submit"
label="Create new key"
> >
<InlineSVG src={plusIcon} className="api-key-form__create-icon" /> <Icon name={Icon.names.plusIcon} />
Create <span>Create</span>
</button> </Button>
</form> </form>
{ {

13
client/modules/User/components/AccountForm.jsx
View file

@ -1,6 +1,7 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React from 'react'; import React from 'react';
import { domOnlyProps } from '../../../utils/reduxFormUtils'; import { domOnlyProps } from '../../../utils/reduxFormUtils';
import Button from '../../../common/Button';
function AccountForm(props) { function AccountForm(props) {
const { const {
@ -44,11 +45,10 @@ function AccountForm(props) {
<span className="form__status"> Confirmation sent, check your email.</span> <span className="form__status"> Confirmation sent, check your email.</span>
) : ) :
( (
<button <Button
className="form__action"
onClick={handleInitiateVerification} onClick={handleInitiateVerification}
>Resend confirmation email >Resend confirmation email
</button> </Button>
) )
} }
</p> </p>
@ -92,12 +92,11 @@ function AccountForm(props) {
/> />
{newPassword.touched && newPassword.error && <span className="form-error">{newPassword.error}</span>} {newPassword.touched && newPassword.error && <span className="form-error">{newPassword.error}</span>}
</p> </p>
<input <Button
type="submit" type="submit"
disabled={submitting || invalid || pristine} disabled={submitting || invalid || pristine}
value="Save All Settings" >Save All Settings
aria-label="updateSettings" </Button>
/>
</form> </form>
); );
} }

6
client/modules/User/pages/AccountView.jsx
View file

@ -23,8 +23,10 @@ function SocialLoginPanel(props) {
<p className="account__social-text"> <p className="account__social-text">
Use your GitHub or Google account to log into the p5.js Web Editor. Use your GitHub or Google account to log into the p5.js Web Editor.
</p> </p>
<SocialAuthButton service={SocialAuthButton.services.github} /> <div className="account__social-stack">
<SocialAuthButton service={SocialAuthButton.services.google} /> <SocialAuthButton service={SocialAuthButton.services.github} />
<SocialAuthButton service={SocialAuthButton.services.google} />
</div>
</React.Fragment> </React.Fragment>
); );
} }

9
client/styles/components/_account.scss
View file

@ -20,3 +20,12 @@
.account__social-text { .account__social-text {
padding-bottom: #{15 / $base-font-size}rem; padding-bottom: #{15 / $base-font-size}rem;
} }
.account__social-stack {
display: flex;
}
.account__social-stack > * {
margin-right: #{15 / $base-font-size}rem;
}

15
client/styles/components/_api-key.scss
View file

@ -17,21 +17,6 @@
color: getThemifyVariable('heading-text-color'); color: getThemifyVariable('heading-text-color');
} }
} }
.api-key-form__create-button {
display: flex;
justify-content: center;
align-items: center;
}
.api-key-form__create-icon {
display: flex;
}
.api-key-form__create-button .isvg {
padding-right: 10px;
}
.api-key-list { .api-key-list {
display: block; display: block;
max-width: 900px; max-width: 900px;