init

react/features/calendar-sync/components/MicrosoftSignInButton.web.tsx

@@ -0,0 +1,52 @@
+import React, { Component } from 'react';
+import { WithTranslation } from 'react-i18next';
+
+import { translate } from '../../base/i18n/functions';
+
+/**
+ * The type of the React {@code Component} props of
+ * {@link MicrosoftSignInButton}.
+ */
+interface IProps extends WithTranslation {
+
+    /**
+     * The callback to invoke when {@code MicrosoftSignInButton} is clicked.
+     */
+    onClick: (e?: React.MouseEvent) => void;
+
+    /**
+     * The text to display within {@code MicrosoftSignInButton}.
+     */
+    text: string;
+}
+
+/**
+ * A React Component showing a button to sign in with Microsoft.
+ *
+ * @augments Component
+ */
+class MicrosoftSignInButton extends Component<IProps> {
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    override render() {
+        return (
+            <div
+                className = 'microsoft-sign-in'
+                onClick = { this.props.onClick }>
+                <img
+                    alt = { this.props.t('welcomepage.logo.microsoftLogo') }
+                    className = 'microsoft-logo'
+                    src = 'images/microsoftLogo.svg' />
+                <div className = 'microsoft-cta'>
+                    { this.props.text }
+                </div>
+            </div>
+        );
+    }
+}
+
+export default translate(MicrosoftSignInButton);