[#915] Add Spanish translation to account linking flow

Author: catarak

client/modules/IDE/components/ErrorModal.jsx

@@ -16,10 +16,14 @@ class ErrorModal extends React.Component {
   }
 
   oauthError() {
+    const { t, service } = this.props;
+    const serviceLabels = {
+      github: 'GitHub',
+      google: 'Google'
+    };
     return (
       <p>
-        {'There was a problem linking your GitHub account to your p5.js Web Editor account.'}
-        {' Your GitHub account has already been linked to another p5.js Web Editor account.'}
+        {t('ErrorModal.LinkMessage', { serviceauth: serviceLabels[service] })}
       </p>
     );
   }
@@ -63,7 +67,12 @@ class ErrorModal extends React.Component {
 ErrorModal.propTypes = {
   type: PropTypes.string.isRequired,
   closeModal: PropTypes.func.isRequired,
-  t: PropTypes.func.isRequired
+  t: PropTypes.func.isRequired,
+  service: PropTypes.string
+};
+
+ErrorModal.defaultProps = {
+  service: ''
 };
 
 export default withTranslation()(ErrorModal);

client/modules/User/components/SocialAuthButton.jsx

@@ -14,17 +14,6 @@ const authUrls = {
   google: '/auth/google'
 };
 
-const linkLabels = {
-  github: {
-    connect: 'Connect GitHub Account',
-    unlink: 'Unlink GitHub Account'
-  },
-  google: {
-    connect: 'Connect Google Account',
-    unlink: 'Unlink Google Account'
-  }
-};
-
 const icons = {
   github: GithubIcon,
   google: GoogleIcon
@@ -35,6 +24,11 @@ const services = {
   google: 'google'
 };
 
+const servicesLabels = {
+  github: 'GitHub',
+  google: 'Google'
+};
+
 const StyledButton = styled(Button)`
   width: ${remSize(300)};
 `;
@@ -43,37 +37,38 @@ function SocialAuthButton({
   service, linkStyle, isConnected, t
 }) {
   const ServiceIcon = icons[service];
-  const labels = {
-    github: t('SocialAuthButton.Github'),
-    google: t('SocialAuthButton.Google')
-  };
+  const serviceLabel = servicesLabels[service];
+  const loginLabel = t('SocialAuthButton.Login', { serviceauth: serviceLabel });
+  const connectLabel = t('SocialAuthButton.Connect', { serviceauth: serviceLabel });
+  const unlinkLabel = t('SocialAuthButton.Unlink', { serviceauth: serviceLabel });
+  const ariaLabel = t('SocialAuthButton.LogoARIA', { serviceauth: service });
   const dispatch = useDispatch();
   if (linkStyle) {
     if (isConnected) {
       return (
         <StyledButton
-          iconBefore={<ServiceIcon aria-label={t('SocialAuthButton.LogoARIA', { serviceauth: service })} />}
+          iconBefore={<ServiceIcon aria-label={ariaLabel} />}
           onClick={() => { dispatch(unlinkService(service)); }}
         >
-          {linkLabels[service].unlink}
+          {unlinkLabel}
         </StyledButton>
       );
     }
     return (
       <StyledButton
-        iconBefore={<ServiceIcon aria-label={t('SocialAuthButton.LogoARIA', { serviceauth: service })} />}
+        iconBefore={<ServiceIcon aria-label={ariaLabel} />}
         href={authUrls[service]}
       >
-        {linkLabels[service].connect}
+        {connectLabel}
       </StyledButton>
     );
   }
   return (
     <StyledButton
-      iconBefore={<ServiceIcon aria-label={t('SocialAuthButton.LogoARIA', { serviceauth: service })} />}
+      iconBefore={<ServiceIcon aria-label={ariaLabel} />}
       href={authUrls[service]}
     >
-      {labels[service]}
+      {loginLabel}
     </StyledButton>
   );
 }

client/modules/User/pages/AccountView.jsx

@@ -72,14 +72,15 @@ class AccountView extends React.Component {
 
         {showError &&
           <Overlay
-            title="Error Linking Account"
-            ariaLabel="Error Lnking Account"
+            title={this.props.t('ErrorModal.LinkTitle')}
+            ariaLabel={this.props.t('ErrorModal.LinkTitle')}
             closeOverlay={() => {
               browserHistory.push(this.props.location.pathname);
             }}
           >
             <ErrorModal
               type="oauthError"
+              service={errorType}
             />
           </Overlay>
         }

translations/locales/en-US/translations.json

@@ -67,9 +67,10 @@
     "ResetPassword": "Reset your password"
   },
   "SocialAuthButton": {
-    "Github": "Login with Github",
-    "LogoARIA": "{{serviceauth}} logo",
-    "Google": "Login with Google"
+    "Connect": "Connect {{serviceauth}} Account",
+    "Unlink": "Unlink {{serviceauth}} Account",
+    "Login": "Login with {{serviceauth}}",
+    "LogoARIA": "{{serviceauth}} logo"
   },
   "About": {
     "Title": "About",
@@ -381,7 +382,9 @@
     "SignUp": "Sign Up",
     "MessageLoggedOut": "It looks like you've been logged out. Please ",
     "LogIn": "log in",
-    "SavedDifferentWindow": "The project you have attempted to save has been saved from another window.\n        Please refresh the page to see the latest version."
+    "SavedDifferentWindow": "The project you have attempted to save has been saved from another window.\n        Please refresh the page to see the latest version.",
+    "LinkTitle": "Error Linking Account",
+    "LinkMessage": "There was a problem linking your {{serviceauth}} account to your p5.js Web Editor account. Your {{serviceauth}} account has already been linked to another p5.js Web Editor account."
   },
   "ShareModal": {
     "Embed": "Embed",

translations/locales/es-419/translations.json

@@ -67,9 +67,10 @@
     "ResetPassword": "Regenera tu contraseña"
   },
   "SocialAuthButton": {
-    "Github": "Ingresa con Github",
-    "LogoARIA": "Logo de {{serviceauth}}",
-    "Google": "Ingresa con Google"
+    "Connect": "Conecta Cuenta {{serviceauth}}",
+    "Unlink": "Desvincular Cuenta {{serviceauth}}",
+    "Login": "Ingresa con {{serviceauth}}",
+    "LogoARIA": "Logo de {{serviceauth}}"
   },
   "About": {
     "Title": "Acerca de",
@@ -381,7 +382,9 @@
     "SignUp": "Registráte",
     "MessageLoggedOut": "Parece que has salido de tu cuenta. Por favor ",
     "LogIn": "ingresa",
-    "SavedDifferentWindow": " El proyecto que has intentado guardar ha sido guardado desde otra ventana.\n  Por favor refresca la página para ver la versión más actual."
+    "SavedDifferentWindow": " El proyecto que has intentado guardar ha sido guardado desde otra ventana.\n  Por favor refresca la página para ver la versión más actual.",
+    "LinkTitle": "Error Vinculando Cuenta",
+    "LinkMessage": "Hubo un problema vinculando tu cuenta de {{serviceauth}} con tu cuenta del Editor Web p5.js. Tu cuenta de {{serviceauth}} había sido vinculada previamente con otra cuenta del Editor Web p5.js."
   },
   "ShareModal": {
     "Embed": "Incrustar",