Add default OAuths (#259)

app/javascript/components/common/CustomTexts.tsx

@@ -21,6 +21,10 @@ export const MutedText = ({ children }: Props) => (
   <span className="mutedText">{children}</span>
 );
 
+export const CenteredText = ({ children }: Props) => (
+  <p className="centeredText">{children}</p>
+);
+
 export const CenteredMutedText = ({ children }: Props) => (
   <p className="centeredText"><span className="mutedText">{children}</span></p>
 );

app/javascript/components/common/OAuthProviderLink.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import I18n from 'i18n-js';
+
+interface Props {
+  oAuthId: number;
+  oAuthName: string;
+  oAuthLogo?: string;
+  oAuthReason: string;
+  isSignUp?: boolean;
+}
+
+const OAuthProviderLink = ({ oAuthId, oAuthName, oAuthLogo, oAuthReason, isSignUp = false }: Props) => (
+  <button
+    onClick={() => window.location.href = `/o_auths/${oAuthId}/start?reason=${oAuthReason}`}
+    className={`oauthProviderBtn oauthProvider${oAuthName.replace(' ', '')}`}
+  >
+    <img src={oAuthLogo} alt={oAuthName} width={28} height={28} />
+    <span className='oauthProviderText'>
+      {
+        isSignUp ?
+          I18n.t('common.forms.auth.sign_up_with', { o_auth: oAuthName })
+          :
+          I18n.t('common.forms.auth.log_in_with', { o_auth: oAuthName })
+      }
+    </span>
+  </button>
+);
+
+export default OAuthProviderLink;