Refactor talk-plugin-auth part 1

2026-08-19 12:40:16 +08:00 · 2018-02-09 20:12:02 +01:00
parent 1774f98519
commit f4fc8915e3
36 changed files with 413 additions and 955 deletions
@@ -0,0 +1,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './styles.css';
+import {
+  Dialog,
+  Alert,
+  TextField,
+  Button,
+} from 'plugin-api/beta/client/components/ui';
+import { FakeComment } from './FakeComment';
+import t from 'coral-framework/services/i18n';
+
+const SetUsernameDialog = ({
+  open,
+  handleClose,
+  formData,
+  handleSubmitUsername,
+  handleChange,
+  ...props
+}) => (
+  <Dialog
+    className={styles.dialogusername}
+    id="createUsernameDialog"
+    open={open}
+  >
+    <span className={styles.close} onClick={handleClose}>
+      ×
+    </span>
+    <div>
+      <div className={styles.header}>
+        <h1>{t('createdisplay.write_your_username')}</h1>
+      </div>
+      <div>
+        <p className={styles.yourusername}>
+          {t('createdisplay.your_username')}
+        </p>
+        <FakeComment
+          className={styles.fakeComment}
+          username={formData.username}
+          created_at={new Date().toISOString()}
+          body={t('createdisplay.fake_comment_body')}
+        />
+        <p className={styles.ifyoudont}>
+          {t('createdisplay.if_you_dont_change_your_name')}
+        </p>
+        {props.auth.error && <Alert>{props.auth.error}</Alert>}
+        <form id="saveUsername" onSubmit={handleSubmitUsername}>
+          {props.errors.username && (
+            <span className={styles.hint}>
+              {' '}
+              {t('createdisplay.special_characters')}{' '}
+            </span>
+          )}
+          <div className={styles.saveusername}>
+            <TextField
+              id="username"
+              style={{ fontSize: 16 }}
+              type="string"
+              label={t('createdisplay.username')}
+              value={formData.username}
+              onChange={handleChange}
+            />
+            <Button id="save" type="submit" className={styles.saveButton}>
+              {t('createdisplay.save')}
+            </Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </Dialog>
+);
+
+SetUsernameDialog.propTypes = {
+  open: PropTypes.bool,
+  handleClose: PropTypes.func,
+  formData: PropTypes.object,
+  handleSubmitUsername: PropTypes.func,
+  handleChange: PropTypes.func,
+  auth: PropTypes.object,
+  errors: PropTypes.object,
+};
+
+export default SetUsernameDialog;
@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from 'plugin-api/beta/client/components/ui';
+import t from 'coral-framework/services/i18n';
+
+const SignInButton = ({ currentUser, showSignInDialog }) => (
+  <div className="talk-stream-auth-sign-in-button">
+    {!currentUser ? (
+      <Button id="coralSignInButton" onClick={showSignInDialog} full>
+        {t('sign_in.sign_in_to_comment')}
+      </Button>
+    ) : null}
+  </div>
+);
+
+SignInButton.propTypes = {
+  currentUser: PropTypes.object,
+  showSignInDialog: PropTypes.func,
+};
+
+export default SignInButton;
@@ -0,0 +1,21 @@
+.userBox {
+  margin: 10px 0 20px;
+  letter-spacing: 0.1px;
+}
+
+.userBoxLoggedIn {
+  font-weight: bold;
+}
+
+.userBox a {
+    color: black;
+    font-weight: bold;
+    cursor: pointer;
+    margin: 0px;
+    margin-left: 4px;
+    padding-bottom: 2px;
+}
+
+.userBox .logout {
+  border-bottom: solid 1px black;
+}
@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './UserBox.css';
+import t from 'coral-framework/services/i18n';
+import cn from 'classnames';
+
+const UserBox = ({ user, logout, onShowProfile }) => (
+  <div>
+    {user ? (
+      <div className={cn(styles.userBox, 'talk-stream-auth-userbox')}>
+        <span className={styles.userBoxLoggedIn}>
+          {t('sign_in.logged_in_as')}
+        </span>
+        <a onClick={onShowProfile}>{user.username}</a>. {t('sign_in.not_you')}
+        <a
+          className={cn(styles.logout, 'talk-stream-userbox-logout')}
+          onClick={() => logout()}
+        >
+          {t('sign_in.logout')}
+        </a>
+      </div>
+    ) : null}
+  </div>
+);
+
+UserBox.propTypes = {
+  user: PropTypes.object,
+  logout: PropTypes.func,
+  onShowProfile: PropTypes.func,
+};
+
+export default UserBox;