Refactor talk-plugin-auth part 1

2026-08-13 12:40:11 +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;