mirror of
https://github.com/wassname/talk.git
synced 2026-08-15 12:55:10 +08:00
[next] Admin Configure (#2076)
* feat: Add RadioButton and CheckBox * feat: configure facebook and google auth * feat: configure sso, localAuth and displayName + some tests * test: add integration tests for configure auth * test: more integration tests * feat: add oidc support * test: add oidc integration test * feat: generate sso key initially * fix: import fetchQuery from correct package * fix: admin url * fix: set timezone to utc when testing * refactor: improve route config * fix: remove obsolete line * fix: clientMutationId increment * fix: oidc only create when enabled * fix: copy * test: update snapshots * feat: fixed graphql logging extension * Update src/locales/en-US/admin.ftl Co-Authored-By: cvle <vinh@wikiwi.io> * Apply suggestions from code review Co-Authored-By: cvle <vinh@wikiwi.io> * test: update snapshots * fix: change Local Auth to Email Authentication * fix: copy updates
This commit is contained in:
Kiwi
@@ -0,0 +1,85 @@
|
||||
.root {
|
||||
}
|
||||
|
||||
.input {
|
||||
cursor: pointer;
|
||||
position: absolute; /* take it out of document flow */
|
||||
opacity: 0; /* hide it */
|
||||
}
|
||||
|
||||
.label {
|
||||
composes: bodyCopy from "talk-ui/shared/typography.css";
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.labelSpan {
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
|
||||
.labelLight {
|
||||
color: var(--palette-text-light);
|
||||
}
|
||||
|
||||
/* Box. */
|
||||
.input + .label:before {
|
||||
content: "";
|
||||
margin-right: 10px;
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: var(--palette-common-white);
|
||||
border: 1px solid var(--palette-text-primary);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Box focus */
|
||||
.label.focus:before {
|
||||
outline-width: 3px;
|
||||
outline-color: Highlight;
|
||||
outline-color: -webkit-focus-ring-color;
|
||||
outline-style: auto;
|
||||
}
|
||||
|
||||
/* Box checked */
|
||||
.input:checked + .label:before {
|
||||
background: var(--palette-primary-main);
|
||||
border: 1px solid var(--palette-primary-main);
|
||||
}
|
||||
|
||||
/* Disabled state label. */
|
||||
.input:disabled + .label {
|
||||
cursor: auto;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* Disabled box. */
|
||||
.input:disabled + .label:before {
|
||||
box-shadow: none;
|
||||
border: 1px solid var(--palette-grey-main);
|
||||
background: var(--palette-grey-lightest);
|
||||
}
|
||||
|
||||
/* Checkmark. Could be replaced with an image */
|
||||
.input:checked + .label:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
top: 10px;
|
||||
color: var(--palette-text-light);
|
||||
background: currentColor;
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
box-shadow: 2px 0 0 currentColor, 4px 0 0 currentColor,
|
||||
4px -2px 0 currentColor, 4px -4px 0 currentColor, 4px -6px 0 currentColor,
|
||||
4px -8px 0 currentColor;
|
||||
transform: rotate(45deg);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.input:checked:disabled + .label:after {
|
||||
color: var(--palette-text-primary);
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
---
|
||||
name: CheckBox
|
||||
menu: UI Kit
|
||||
---
|
||||
|
||||
import { Playground, PropsTable } from 'docz'
|
||||
import CheckBox from './CheckBox.tsx'
|
||||
import HorizontalGutter from '../HorizontalGutter'
|
||||
|
||||
# CheckBox
|
||||
|
||||
## Basic Use
|
||||
<Playground>
|
||||
<HorizontalGutter>
|
||||
<CheckBox value="true">Yes I agree</CheckBox>
|
||||
<CheckBox value="false" disabled>No I don't agree</CheckBox>
|
||||
<CheckBox value="undefined" disabled checked>I don't know</CheckBox>
|
||||
</HorizontalGutter>
|
||||
</Playground>
|
||||
@@ -0,0 +1,17 @@
|
||||
import React from "react";
|
||||
import TestRenderer from "react-test-renderer";
|
||||
|
||||
import { PropTypesOf } from "talk-ui/types";
|
||||
|
||||
import CheckBox from "./CheckBox";
|
||||
|
||||
it("renders correctly", () => {
|
||||
const props: PropTypesOf<typeof CheckBox> = {
|
||||
className: "custom",
|
||||
id: "checkboxID",
|
||||
checked: true,
|
||||
children: "Yes I agree",
|
||||
};
|
||||
const renderer = TestRenderer.create(<CheckBox {...props} />);
|
||||
expect(renderer.toJSON()).toMatchSnapshot();
|
||||
});
|
||||
@@ -0,0 +1,89 @@
|
||||
import cn from "classnames";
|
||||
import React, { ChangeEvent, Component, EventHandler, FocusEvent } from "react";
|
||||
import uuid from "uuid/v4";
|
||||
|
||||
import { withKeyboardFocus, withStyles } from "talk-ui/hocs";
|
||||
|
||||
import styles from "./CheckBox.css";
|
||||
export interface CheckBoxProps {
|
||||
id?: string;
|
||||
/**
|
||||
* checked or not.
|
||||
*/
|
||||
checked?: boolean;
|
||||
/**
|
||||
* Convenient prop to override the root styling.
|
||||
*/
|
||||
className?: string;
|
||||
/**
|
||||
* Override or extend the styles applied to the component.
|
||||
*/
|
||||
classes: typeof styles;
|
||||
/**
|
||||
* Mark as readonly
|
||||
*/
|
||||
readOnly?: boolean;
|
||||
/**
|
||||
* Name
|
||||
*/
|
||||
name?: string;
|
||||
/**
|
||||
* onChange
|
||||
*/
|
||||
onChange?: EventHandler<ChangeEvent<HTMLInputElement>>;
|
||||
|
||||
disabled?: boolean;
|
||||
children: React.ReactNode;
|
||||
/**
|
||||
* Display a light text.
|
||||
*/
|
||||
light?: boolean;
|
||||
|
||||
// These handlers are passed down by the `withKeyboardFocus` HOC.
|
||||
onFocus: EventHandler<FocusEvent<HTMLElement>>;
|
||||
onBlur: EventHandler<FocusEvent<HTMLElement>>;
|
||||
keyboardFocus: boolean;
|
||||
}
|
||||
|
||||
class CheckBox extends Component<CheckBoxProps> {
|
||||
public state = {
|
||||
randomID: uuid(),
|
||||
};
|
||||
public render() {
|
||||
const {
|
||||
className,
|
||||
classes,
|
||||
id,
|
||||
light,
|
||||
children,
|
||||
keyboardFocus,
|
||||
...rest
|
||||
} = this.props;
|
||||
|
||||
const rootClassName = cn(classes.root, className);
|
||||
const finalID = this.props.id || this.state.randomID;
|
||||
|
||||
return (
|
||||
<div className={rootClassName}>
|
||||
<input
|
||||
className={classes.input}
|
||||
type="checkbox"
|
||||
id={finalID}
|
||||
{...rest}
|
||||
/>
|
||||
<label
|
||||
className={cn(classes.label, {
|
||||
[classes.labelLight]: light,
|
||||
[classes.focus]: keyboardFocus,
|
||||
})}
|
||||
htmlFor={finalID}
|
||||
>
|
||||
<span className={classes.labelSpan}>{children}</span>
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const enhanced = withStyles(styles)(withKeyboardFocus(CheckBox));
|
||||
export default enhanced;
|
||||
@@ -0,0 +1,26 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders correctly 1`] = `
|
||||
<div
|
||||
className="CheckBox-root custom"
|
||||
>
|
||||
<input
|
||||
checked={true}
|
||||
className="CheckBox-input"
|
||||
id="checkboxID"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
<label
|
||||
className="CheckBox-label"
|
||||
htmlFor="checkboxID"
|
||||
>
|
||||
<span
|
||||
className="CheckBox-labelSpan"
|
||||
>
|
||||
Yes I agree
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
`;
|
||||
@@ -0,0 +1,2 @@
|
||||
export * from "./CheckBox";
|
||||
export { default } from "./CheckBox";
|
||||
Reference in New Issue
Block a user