Can change user email address

This commit is contained in:
Pierre HUBERT 2021-07-13 17:10:27 +02:00
parent 322969daa7
commit 378808528e
4 changed files with 81 additions and 1 deletions

View File

@ -61,4 +61,14 @@ export class ComunicUsersHelper {
user_id: id, user_id: id,
}); });
} }
/**
* Change the email address of a user
*/
static async ChangeEmail(id: number, newEmail: string): Promise<void> {
await serverRequest("users/change_email_address", {
user_id: id,
new_mail: newEmail,
});
}
} }

View File

@ -1,21 +1,24 @@
import { import {
Avatar, Avatar,
Button,
Grid, Grid,
Table, Table,
TableBody, TableBody,
TableCell, TableCell,
TableRow, TableRow,
} from "@material-ui/core"; } from "@material-ui/core";
import EmailIcon from "@material-ui/icons/Email";
import React from "react"; import React from "react";
import { import {
ComunicUser, ComunicUser,
ComunicUsersHelper, ComunicUsersHelper,
} from "../../helpers/ComunicUsersHelper"; } from "../../helpers/ComunicUsersHelper";
import { validateEmail } from "../../utils/StringsUtils";
import { AsyncWidget } from "../widgets/AsyncWidget"; import { AsyncWidget } from "../widgets/AsyncWidget";
import { CustomCard } from "../widgets/CustomCard"; import { CustomCard } from "../widgets/CustomCard";
import { input, matAlert } from "../widgets/DialogsProvider";
import { PageTitle } from "../widgets/PageTitle"; import { PageTitle } from "../widgets/PageTitle";
import { TimestampWidget } from "../widgets/TimestampWidget"; import { TimestampWidget } from "../widgets/TimestampWidget";
interface UserProperty { interface UserProperty {
name: string; name: string;
value?: string | number; value?: string | number;
@ -37,6 +40,7 @@ export class ComunicUserRoute extends React.Component<
this.load = this.load.bind(this); this.load = this.load.bind(this);
this.build = this.build.bind(this); this.build = this.build.bind(this);
this.changeEmailAddress = this.changeEmailAddress.bind(this);
} }
get user(): ComunicUser { get user(): ComunicUser {
@ -101,6 +105,42 @@ export class ComunicUserRoute extends React.Component<
]; ];
} }
get userID(): number {
return this.props.userID;
}
get fullName(): string {
return this.user.first_name + " " + this.user.last_name;
}
async changeEmailAddress() {
try {
const newEmail = await input({
title: "Change user email address",
label: "New email address",
message:
"Please input the new email address for " +
this.fullName +
":",
type: "email",
minLength: 5,
validateInput: validateEmail,
});
if (!newEmail || newEmail.length === 0) return;
await ComunicUsersHelper.ChangeEmail(this.userID, newEmail);
this.setState((s) => {
s.user.email = newEmail;
return s;
});
} catch (e) {
console.error(e);
matAlert("Failed to update user email address!");
}
}
build() { build() {
const properties = this.userProperties.map((p) => { const properties = this.userProperties.map((p) => {
return ( return (
@ -158,6 +198,21 @@ export class ComunicUserRoute extends React.Component<
</Grid> </Grid>
</CustomCard> </CustomCard>
</Grid> </Grid>
<Grid item xs={6}>
<CustomCard title="Actions">
<div style={{ padding: "10px" }}>
<Button
variant="outlined"
color="default"
startIcon={<EmailIcon />}
style={{ width: "100%" }}
onClick={this.changeEmailAddress}
>
Change email address
</Button>
</div>
</CustomCard>
</Grid>
</Grid> </Grid>
</> </>
); );

View File

@ -28,6 +28,7 @@ export interface TextInputOptions {
maxLength?: number; maxLength?: number;
label: string; label: string;
type?: string; type?: string;
validateInput?: (value: string) => boolean;
} }
interface AppDiagProvState { interface AppDiagProvState {
@ -175,6 +176,9 @@ export class ApplicationDialogsProvider extends React.Component<
if (options.maxLength && value.length > options.maxLength) return false; if (options.maxLength && value.length > options.maxLength) return false;
if (options.validateInput && !options.validateInput(value))
return false;
return true; return true;
} }

11
src/utils/StringsUtils.ts Normal file
View File

@ -0,0 +1,11 @@
/**
* String utilities
*
* @author Pierre Hubert
*/
export function validateEmail(email: string) {
const re =
/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}