refactor

packages/components/src/icons/SemanticIcons.ts

@@ -1,8 +1,10 @@
-import { IconDefinition, faUser, faEnvelope } from '@fortawesome/free-solid-svg-icons'
+import { IconDefinition, faUser, faEnvelope, faAsterisk } from '@fortawesome/free-solid-svg-icons'
 
 // Semantic, shared definitions for reused icons.
+// The alias names might make more sense and allow bulk update.
 
 export const iconEnvelope : IconDefinition = faEnvelope;
+export const iconPasswordField : IconDefinition = faAsterisk;
 export const iconUser : IconDefinition = faUser;
 
 

packages/fakeyou/src/v2/view/_icons/AsteriskIcon.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faAsterisk } from '@fortawesome/free-solid-svg-icons'
-
-export function AsteriskIcon() {
-  return (
-      <FontAwesomeIcon icon={faAsterisk} />
-  );
-}
-

packages/fakeyou/src/v2/view/_icons/UserIcon.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faUser } from '@fortawesome/free-solid-svg-icons'
-
-export function UserIcon() {
-  return (
-      <FontAwesomeIcon icon={faUser} />
-  );
-}

packages/fakeyou/src/v2/view/login/LoginPage.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { SessionWrapper } from '@storyteller/components/src/session/SessionWrapper';
 import { useHistory } from "react-router-dom";
 import { CreateSession, CreateSessionIsError, CreateSessionIsSuccess } from '@storyteller/components/src/session/CreateSession';
-import { iconUser, iconEnvelope } from '@storyteller/components/src/icons/SemanticIcons';
+import { iconUser, iconEnvelope, iconPasswordField } from '@storyteller/components/src/icons/SemanticIcons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 interface Props {
@@ -90,7 +90,7 @@ function LoginPage(props: Props) {
           <div className="control has-icons-left has-icons-right">
             <input className="input" type="password" placeholder="Password" value={password} onChange={handlePasswordChange} />
             <span className="icon is-small is-left">
-              <FontAwesomeIcon icon={iconEnvelope} />
+              <FontAwesomeIcon icon={iconPasswordField} />
             </span>
           </div>
           {/*<p className="help"></p>*/}

packages/fakeyou/src/v2/view/signup/SignupComponent.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
-import { AsteriskIcon } from '../_icons/AsteriskIcon';
-import { EnvelopeIcon } from '../_icons/EnvelopeIcon';
 import { Link } from 'react-router-dom';
 import { Mode } from '../../../AppMode';
 import { SessionWrapper } from '@storyteller/components/src/session/SessionWrapper';
-import { UserIcon } from '../_icons/UserIcon';
 import { CreateAccount, CreateAccountIsError, CreateAccountIsSuccess } from '../../api/user/CreateAccount';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { iconEnvelope, iconPasswordField, iconUser } from '@storyteller/components/src/icons/SemanticIcons';
 
 enum FieldTriState {
   EMPTY_FALSE,
@@ -305,7 +304,7 @@ class SignupComponent extends React.Component<Props, State> {
             <div className="control has-icons-left has-icons-right">
               <input className={usernameInputClass} type="text" placeholder="Username" value={this.state.username} onChange={this.handleUsernameChange} />
               <span className="icon is-small is-left">
-                <UserIcon />
+                <FontAwesomeIcon icon={iconUser} />
               </span>
             </div>
             <p className={usernameHelpClass}>{this.state.usernameInvalidReason}</p>
@@ -316,7 +315,7 @@ class SignupComponent extends React.Component<Props, State> {
             <div className="control has-icons-left has-icons-right">
               <input className={emailInputClass} type="email" placeholder="Email" value={this.state.email} onChange={this.handleEmailChange} />
               <span className="icon is-small is-left">
-                <EnvelopeIcon />
+                <FontAwesomeIcon icon={iconEnvelope} />
               </span>
             </div>
             <p className={emailHelpClass}>{this.state.emailInvalidReason}</p>
@@ -327,7 +326,7 @@ class SignupComponent extends React.Component<Props, State> {
             <div className="control has-icons-left has-icons-right">
               <input className={passwordInputClass} type="password" placeholder="Password" value={this.state.password} onChange={this.handlePasswordChange} />
               <span className="icon is-small is-left">
-                <AsteriskIcon />
+                <FontAwesomeIcon icon={iconPasswordField} />
               </span>
             </div>
             <p className={passwordHelpClass}>{this.state.passwordInvalidReason}</p>
@@ -338,7 +337,7 @@ class SignupComponent extends React.Component<Props, State> {
             <div className="control has-icons-left has-icons-right">
               <input className={passwordConfirmationInputClass} type="password" placeholder="Password confirmation" value={this.state.passwordConfirmation} onChange={this.handlePasswordConfirmationChange} />
               <span className="icon is-small is-left">
-                <AsteriskIcon />
+                <FontAwesomeIcon icon={iconPasswordField} />
               </span>
             </div>
             <p className={passwordConfirmationHelpClass}>

packages/storyteller/src/pages/login/LoginPage.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { SessionWrapper } from '@storyteller/components/src/session/SessionWrapper';
 import { useHistory } from "react-router-dom";
-import { iconEnvelope, iconUser } from '@storyteller/components/src/icons/SemanticIcons';
+import { iconEnvelope, iconPasswordField, iconUser } from '@storyteller/components/src/icons/SemanticIcons';
 import { CreateSession, CreateSessionIsError, CreateSessionIsSuccess } from '@storyteller/components/src/session/CreateSession';
 
 interface Props {
@@ -90,7 +90,7 @@ function LoginPage(props: Props) {
           <div className="control has-icons-left has-icons-right">
             <input className="input" type="password" placeholder="Password" value={password} onChange={handlePasswordChange} />
             <span className="icon is-small is-left">
-              <FontAwesomeIcon icon={iconEnvelope} />
+              <FontAwesomeIcon icon={iconPasswordField} />
             </span>
           </div>
           {/*<p className="help"></p>*/}