Convert all pages to Typescript
Convert all files in `client/src/pages` to Typescript
Gitlab: #30
Change-Id: I9b5ec5b042487d732bb7d46b584f797049eb068c
diff --git a/client/src/pages/LoginDialog.tsx b/client/src/pages/LoginDialog.tsx
new file mode 100644
index 0000000..e98cc79
--- /dev/null
+++ b/client/src/pages/LoginDialog.tsx
@@ -0,0 +1,203 @@
+import Button from '@mui/material/Button';
+import Checkbox from '@mui/material/Checkbox';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Link from '@mui/material/Link';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import { ChangeEvent, Component, MouseEvent } from 'react';
+
+import authManager from '../AuthManager';
+
+function Copyright() {
+ return (
+ <Typography variant="body2" color="textSecondary" align="center">
+ {'Copyright © 2016-'}
+ {new Date().getFullYear()}
+ {' Savoir-faire Linux Inc.'}
+ <Link color="inherit" href="https://jami.net/">
+ Jami.net
+ </Link>{' '}
+ {'.'}
+ </Typography>
+ );
+}
+
+type SignInPageProps = {
+ open: boolean;
+};
+type SignInPageState = {
+ username?: string;
+ password?: string;
+ submitted?: boolean;
+ loading?: boolean;
+ redirect?: boolean;
+ error?: boolean;
+ open?: boolean;
+ errorMessage?: string;
+};
+
+class SignInPage extends Component<SignInPageProps, SignInPageState> {
+ constructor(props: SignInPageProps) {
+ console.log('SignInPage ' + props.open);
+ super(props);
+ this.state = {
+ submitted: false,
+ loading: false,
+ };
+ this.handleSubmit = this.handleSubmit.bind(this);
+ this.localLogin = this.localLogin.bind(this);
+ }
+
+ handleusername(text: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
+ this.setState({ username: text.target.value });
+ }
+
+ handlePassword(text: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
+ this.setState({ password: text.target.value });
+ }
+
+ localLogin() {
+ this.setState({
+ submitted: true,
+ loading: true,
+ });
+ authManager.authenticate('admin', 'admin');
+ /*fetch('/api/localLogin?username=none&password=none', {
+ header: { "Content-Type": "application/json" },
+ method: "POST",
+ credentials: 'same-origin'
+ //body: JSON.stringify({ obj })
+ })
+ .then((res) => {
+ if (res.status === '200') {
+ this.setState({
+ redirect: true
+ });
+ } else if (res.status === '401') {
+ this.setState({
+ loading: false,
+ error: true,
+ open: true,
+ errorMessage: "Wrong credentials! Your are not allowed to connect"
+ })
+ }
+ //this.setState({ session: res });
+ }).catch((e) => {
+ this.setState({
+ loading: false,
+ error: true,
+ open: true,
+ errorMessage: e.toString()
+ })
+ })*/
+ }
+
+ handleSubmit(event: MouseEvent<HTMLButtonElement>) {
+ event.preventDefault();
+ const obj = {
+ username: this.state.username,
+ password: this.state.password,
+ };
+
+ this.setState({
+ submitted: true,
+ loading: true,
+ });
+
+ fetch('/api/login?username=' + obj.username + '&password=' + obj.password, {
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ method: 'POST',
+ credentials: 'same-origin',
+ //body: JSON.stringify({ obj })
+ })
+ .then((res) => {
+ if (res.status === 200) {
+ this.setState({
+ redirect: true,
+ });
+ } else if (res.status === 401) {
+ this.setState({
+ loading: false,
+ error: true,
+ open: true,
+ errorMessage: 'Wrong credentials! Your are not allowed to connect',
+ });
+ }
+ //this.setState({ session: res });
+ })
+ .catch((e) => {
+ this.setState({
+ loading: false,
+ error: true,
+ open: true,
+ errorMessage: e.toString(),
+ });
+ });
+ }
+
+ render() {
+ console.log('SignInPage render ' + this.props.open);
+ return (
+ <Dialog open={this.props.open}>
+ <DialogTitle>Se connecter</DialogTitle>
+ <DialogContent>
+ <Button
+ type="submit"
+ fullWidth
+ variant="contained"
+ color="primary"
+ className="" /*{classes.submit}*/
+ onClick={() => {
+ this.localLogin();
+ }}
+ >
+ Compte local
+ </Button>
+ <TextField
+ variant="outlined"
+ margin="normal"
+ required
+ fullWidth
+ id="username"
+ label="LDAP Savoir-faire Linux"
+ name="username"
+ autoComplete="email"
+ autoFocus
+ onChange={(text) => {
+ this.handleusername(text);
+ }}
+ />
+ <TextField
+ variant="outlined"
+ margin="normal"
+ required
+ fullWidth
+ name="password"
+ label="Mot de passe"
+ type="password"
+ id="password"
+ autoComplete="current-password"
+ onChange={(text) => {
+ this.handlePassword(text);
+ }}
+ />
+ <FormControlLabel control={<Checkbox value="remember" color="primary" />} label="Se rapeller de moi" />
+ </DialogContent>
+
+ <DialogActions>
+ <Button type="submit" size="medium" onClick={this.handleSubmit}>
+ Se connecter
+ </Button>
+ </DialogActions>
+ </Dialog>
+ );
+ }
+}
+
+export default SignInPage;