@movalib/movalib-commons 1.0.97 → 1.0.99
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/AccountValidation.d.ts +9 -0
- package/dist/src/AccountValidation.js +129 -0
- package/dist/src/MovaDialog.js +2 -2
- package/dist/src/helpers/Types.d.ts +4 -0
- package/dist/src/services/UserService.d.ts +1 -0
- package/dist/src/services/UserService.js +7 -0
- package/package.json +1 -1
- package/src/AccountValidation.tsx +237 -0
- package/src/MovaDialog.tsx +3 -3
- package/src/helpers/Types.ts +5 -0
- package/src/services/UserService.ts +8 -0
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { FunctionComponent } from 'react';
|
|
2
|
+
import { MovaAppType } from './helpers/Enums';
|
|
3
|
+
interface AccountValidationProps {
|
|
4
|
+
movaAppType: MovaAppType;
|
|
5
|
+
onSuccess: () => void;
|
|
6
|
+
onError: () => void;
|
|
7
|
+
}
|
|
8
|
+
declare const AccountValidation: FunctionComponent<AccountValidationProps>;
|
|
9
|
+
export default AccountValidation;
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
18
|
+
var react_1 = require("react");
|
|
19
|
+
var react_router_dom_1 = require("react-router-dom");
|
|
20
|
+
var UserService_1 = __importDefault(require("./services/UserService"));
|
|
21
|
+
var material_1 = require("@mui/material");
|
|
22
|
+
var Logger_1 = __importDefault(require("./helpers/Logger"));
|
|
23
|
+
var InputAdornment_1 = __importDefault(require("@mui/material/InputAdornment"));
|
|
24
|
+
var Visibility_1 = __importDefault(require("@mui/icons-material/Visibility"));
|
|
25
|
+
var VisibilityOff_1 = __importDefault(require("@mui/icons-material/VisibilityOff"));
|
|
26
|
+
var lab_1 = require("@mui/lab");
|
|
27
|
+
var Enums_1 = require("./helpers/Enums");
|
|
28
|
+
var Tools_1 = require("./helpers/Tools");
|
|
29
|
+
var MovaDialog_1 = __importDefault(require("./MovaDialog"));
|
|
30
|
+
var initialFormState = {
|
|
31
|
+
password: { value: '', isValid: true },
|
|
32
|
+
confirmation: { value: '', isValid: true },
|
|
33
|
+
};
|
|
34
|
+
var AccountValidation = function (_a) {
|
|
35
|
+
var movaAppType = _a.movaAppType, onSuccess = _a.onSuccess, onError = _a.onError;
|
|
36
|
+
var _b = (0, react_1.useState)(true), loading = _b[0], setLoading = _b[1];
|
|
37
|
+
var _c = (0, react_1.useState)(initialFormState), passwordForm = _c[0], setPasswordForm = _c[1];
|
|
38
|
+
var location = (0, react_router_dom_1.useLocation)();
|
|
39
|
+
var history = (0, react_router_dom_1.useHistory)();
|
|
40
|
+
var theme = (0, material_1.useTheme)();
|
|
41
|
+
var _d = (0, react_1.useState)(false), emptyPwd = _d[0], setEmptyPwd = _d[1];
|
|
42
|
+
var _e = (0, react_1.useState)(false), showPassword = _e[0], setShowPassword = _e[1];
|
|
43
|
+
var isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('sm'));
|
|
44
|
+
(0, react_1.useEffect)(function () {
|
|
45
|
+
var params = new URLSearchParams(location.search);
|
|
46
|
+
var token = params.get('token');
|
|
47
|
+
// Si cette variable est transmise, ecla signifie que le compte a été créé sans mot de passe
|
|
48
|
+
var localEmptyPwd = Boolean(params.get('emptyPwd'));
|
|
49
|
+
setEmptyPwd(localEmptyPwd);
|
|
50
|
+
if (token) {
|
|
51
|
+
if (!localEmptyPwd) {
|
|
52
|
+
var req = {
|
|
53
|
+
token: token
|
|
54
|
+
};
|
|
55
|
+
activateAccount(req);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}, [location]);
|
|
59
|
+
var activateAccount = function (req) {
|
|
60
|
+
if (req) {
|
|
61
|
+
Logger_1.default.info(req);
|
|
62
|
+
UserService_1.default.validateAccount(req)
|
|
63
|
+
.then(function (response) {
|
|
64
|
+
// Affichage notification utilisateur
|
|
65
|
+
Logger_1.default.info(response);
|
|
66
|
+
if (onSuccess) {
|
|
67
|
+
onSuccess();
|
|
68
|
+
}
|
|
69
|
+
}).catch(function (error) {
|
|
70
|
+
Logger_1.default.error(error);
|
|
71
|
+
if (onError) {
|
|
72
|
+
onError();
|
|
73
|
+
}
|
|
74
|
+
});
|
|
75
|
+
}
|
|
76
|
+
};
|
|
77
|
+
var handleInputChange = function (e) {
|
|
78
|
+
var _a;
|
|
79
|
+
if (e) {
|
|
80
|
+
var fieldName = e.target.name;
|
|
81
|
+
var fieldValue = e.target.value;
|
|
82
|
+
var newField = (_a = {}, _a[fieldName] = { value: fieldValue, isValid: true }, _a);
|
|
83
|
+
setPasswordForm(__assign(__assign({}, passwordForm), newField));
|
|
84
|
+
}
|
|
85
|
+
};
|
|
86
|
+
var validateForm = function () {
|
|
87
|
+
var newForm = __assign({}, passwordForm);
|
|
88
|
+
// Validator pour les champs obligatoires
|
|
89
|
+
newForm.password = (0, Tools_1.validateField)(passwordForm.password, function (value) { return !!value; }, 'Champ obligatoire');
|
|
90
|
+
newForm.confirmation = (0, Tools_1.validateField)(passwordForm.confirmation, function (value) { return !!value; }, 'Champ obligatoire');
|
|
91
|
+
// Validator pour le mot de passe
|
|
92
|
+
newForm.password = (0, Tools_1.validateField)(passwordForm.password, function (value) { return value.length >= 10 && /[a-z]/.test(value) && /[A-Z]/.test(value); }, 'Votre mot de passe doit faire au moins 10 caractères de long, contenir au moins une majuscule et une minuscule');
|
|
93
|
+
// Second validator pour le mot de passe (confirmation)
|
|
94
|
+
newForm.confirmation = (0, Tools_1.validateField)(passwordForm.confirmation, function (value) { return value === passwordForm.password.value; }, "Les mots de passe doivent être identiques");
|
|
95
|
+
setPasswordForm(newForm);
|
|
96
|
+
return newForm.password.isValid && newForm.confirmation.isValid;
|
|
97
|
+
};
|
|
98
|
+
var handleValidateAccount = function () {
|
|
99
|
+
if (validateForm()) {
|
|
100
|
+
// Demande d'activation du compte avec le token temporaire reçu par email et le mot de passe définit
|
|
101
|
+
var params = new URLSearchParams(location.search);
|
|
102
|
+
var req = {
|
|
103
|
+
token: params.get('token'),
|
|
104
|
+
password: passwordForm.password.value
|
|
105
|
+
};
|
|
106
|
+
activateAccount(req);
|
|
107
|
+
}
|
|
108
|
+
};
|
|
109
|
+
var getTitleStyle = function () {
|
|
110
|
+
return {
|
|
111
|
+
color: (0, material_1.darken)(theme.palette.secondary.main, 0.4),
|
|
112
|
+
fontFamily: 'Dancing Script, cursive',
|
|
113
|
+
fontSize: 40
|
|
114
|
+
};
|
|
115
|
+
};
|
|
116
|
+
return ((0, jsx_runtime_1.jsxs)("div", { children: [emptyPwd &&
|
|
117
|
+
(0, jsx_runtime_1.jsx)(MovaDialog_1.default, __assign({ leafImageColor: 'pink', title: movaAppType === Enums_1.MovaAppType.GARAGE ? "Bienvenu sur Movalib PRO !" : "Bienvenue sur Movalib !", titleStyle: getTitleStyle(), fullScreen: isMobile, open: emptyPwd, closable: false, onClose: function () {
|
|
118
|
+
throw new Error('Function not implemented.');
|
|
119
|
+
}, actions: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, __assign({ type: "submit", onClick: handleValidateAccount, fullWidth: true, variant: "contained", sx: { mt: 4, mb: 0 } }, { children: (0, jsx_runtime_1.jsx)("span", { children: "Valider mon compte" }) })) }, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ container: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 12 }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ sx: { mt: 2, mb: 2 } }, { children: movaAppType === Enums_1.MovaAppType.GARAGE ?
|
|
120
|
+
"Pour commencer, définis ton mot de passe et active ton compte 😉"
|
|
121
|
+
:
|
|
122
|
+
"Pour commencer, définissez votre mot de passe et activez votre compte 😉" })) })), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 12 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", required: true, fullWidth: true, name: "password", label: "Mot de passe", type: showPassword ? 'text' : 'password', id: "password", autoComplete: "current-password", onChange: function (e) { return handleInputChange(e); }, value: passwordForm.password.value, error: !passwordForm.password.isValid, helperText: Boolean(passwordForm.password.error) ? passwordForm.password.error : "10 caractères minimum, 1 majuscule, 1 minuscule", InputProps: {
|
|
123
|
+
endAdornment: ((0, jsx_runtime_1.jsx)(InputAdornment_1.default, __assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, __assign({ edge: "end", onClick: function (e) { return setShowPassword(function (prev) { return !prev; }); } }, { children: showPassword ? (0, jsx_runtime_1.jsx)(VisibilityOff_1.default, {}) : (0, jsx_runtime_1.jsx)(Visibility_1.default, {}) })) }))),
|
|
124
|
+
} }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 12 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", required: true, fullWidth: true, name: "confirmation", label: "Confirmation", type: showPassword ? 'text' : 'password', id: "confirmation", onChange: function (e) { return handleInputChange(e); }, value: passwordForm.confirmation.value, error: !passwordForm.confirmation.isValid, helperText: Boolean(passwordForm.confirmation.error) ? passwordForm.confirmation.error : "", InputProps: {
|
|
125
|
+
endAdornment: ((0, jsx_runtime_1.jsx)(InputAdornment_1.default, __assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, __assign({ edge: "end", onClick: function (e) { return setShowPassword(function (prev) { return !prev; }); } }, { children: showPassword ? (0, jsx_runtime_1.jsx)(VisibilityOff_1.default, {}) : (0, jsx_runtime_1.jsx)(Visibility_1.default, {}) })) }))),
|
|
126
|
+
} }) }))] })) })), loading &&
|
|
127
|
+
(0, jsx_runtime_1.jsx)(material_1.Box, __assign({ display: "flex", justifyContent: "center", alignItems: "center", minHeight: "100vh" }, { children: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, {}) }))] }));
|
|
128
|
+
};
|
|
129
|
+
exports.default = AccountValidation;
|
package/dist/src/MovaDialog.js
CHANGED
|
@@ -22,7 +22,7 @@ var leaf_green_large_png_1 = __importDefault(require("./assets/images/leaf_green
|
|
|
22
22
|
var leaf_yellow_large_png_1 = __importDefault(require("./assets/images/leaf_yellow_large.png"));
|
|
23
23
|
var leaf_pink_large_png_1 = __importDefault(require("./assets/images/leaf_pink_large.png"));
|
|
24
24
|
var MovaDialog = function (_a) {
|
|
25
|
-
var fullScreen = _a.fullScreen, open = _a.open, onClose = _a.onClose, _b = _a.closable, closable = _b === void 0 ?
|
|
25
|
+
var fullScreen = _a.fullScreen, open = _a.open, onClose = _a.onClose, _b = _a.closable, closable = _b === void 0 ? true : _b, children = _a.children, title = _a.title, titleStyle = _a.titleStyle, message = _a.message, leafImageColor = _a.leafImageColor, transition = _a.transition, actions = _a.actions, sx = _a.sx;
|
|
26
26
|
var getTransition = function () {
|
|
27
27
|
switch (transition) {
|
|
28
28
|
case "fade":
|
|
@@ -60,6 +60,6 @@ var MovaDialog = function (_a) {
|
|
|
60
60
|
zIndex: 0,
|
|
61
61
|
left: 0,
|
|
62
62
|
opacity: '0.2'
|
|
63
|
-
}, alt: 'Feuille Movalib' }), (0, jsx_runtime_1.jsx)(material_1.DialogTitle, __assign({ id: "garage-dialog-title", sx: { textAlign: 'center', p: 0, pt: 1, mt: 0, mb: 0, zIndex: 10 } }, { children: (0, jsx_runtime_1.jsx)(material_1.AppBar, __assign({ sx: { position: 'relative' }, color: "transparent", elevation: 0 }, { children: (0, jsx_runtime_1.jsxs)(material_1.Toolbar, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, __assign({ edge: "start", color: "inherit", onClick: handleOnBack, "aria-label": "close" }, { children: (0, jsx_runtime_1.jsx)(ArrowBackIosNewRounded_1.default, {}) })), title && (0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ sx: { textAlign: 'center', fontSize: 20, flexGrow: 1, pl: '20px', pr: '40px' }, style: titleStyle }, { children: title }))] }) })) })), (0, jsx_runtime_1.jsxs)(material_1.DialogContent, __assign({ sx: { zIndex: 20 } }, { children: [children, message && (0, jsx_runtime_1.jsx)(material_1.Alert, __assign({ severity: "error", sx: { mb: 2 } }, { children: message }))] })), (0, jsx_runtime_1.jsx)(material_1.DialogActions, __assign({ sx: { justifyContent: 'center' } }, { children: actions }))] })));
|
|
63
|
+
}, alt: 'Feuille Movalib' }), (0, jsx_runtime_1.jsx)(material_1.DialogTitle, __assign({ id: "garage-dialog-title", sx: { textAlign: 'center', p: 0, pt: 1, mt: 0, mb: 0, zIndex: 10 } }, { children: (0, jsx_runtime_1.jsx)(material_1.AppBar, __assign({ sx: { position: 'relative' }, color: "transparent", elevation: 0 }, { children: (0, jsx_runtime_1.jsxs)(material_1.Toolbar, { children: [closable && (0, jsx_runtime_1.jsx)(material_1.IconButton, __assign({ edge: "start", color: "inherit", onClick: handleOnBack, "aria-label": "close" }, { children: (0, jsx_runtime_1.jsx)(ArrowBackIosNewRounded_1.default, {}) })), title && (0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ sx: { textAlign: 'center', fontSize: 20, flexGrow: 1, pl: '20px', pr: '40px' }, style: titleStyle }, { children: title }))] }) })) })), (0, jsx_runtime_1.jsxs)(material_1.DialogContent, __assign({ sx: { zIndex: 20 } }, { children: [children, message && (0, jsx_runtime_1.jsx)(material_1.Alert, __assign({ severity: "error", sx: { mb: 2 } }, { children: message }))] })), (0, jsx_runtime_1.jsx)(material_1.DialogActions, __assign({ sx: { justifyContent: 'center' } }, { children: actions }))] })));
|
|
64
64
|
};
|
|
65
65
|
exports.default = MovaDialog;
|
|
@@ -45,6 +45,13 @@ var Logger_1 = __importDefault(require("../helpers/Logger"));
|
|
|
45
45
|
var UserService = /** @class */ (function () {
|
|
46
46
|
function UserService() {
|
|
47
47
|
}
|
|
48
|
+
UserService.validateAccount = function (req) {
|
|
49
|
+
return (0, ApiHelper_1.request)({
|
|
50
|
+
url: "".concat(ApiHelper_1.API_BASE_URL, "/user/validate-account"),
|
|
51
|
+
method: Enums_1.APIMethod.POST,
|
|
52
|
+
body: JSON.stringify(req)
|
|
53
|
+
});
|
|
54
|
+
};
|
|
48
55
|
/**
|
|
49
56
|
* @param email
|
|
50
57
|
* @param password
|
package/package.json
CHANGED
|
@@ -0,0 +1,237 @@
|
|
|
1
|
+
import { CSSProperties, FunctionComponent, useEffect, useState } from 'react';
|
|
2
|
+
import { useHistory, useLocation } from 'react-router-dom';
|
|
3
|
+
import UserService from './services/UserService';
|
|
4
|
+
import { Box, CircularProgress, Grid, IconButton, TextField, Typography, darken, useMediaQuery, useTheme } from '@mui/material';
|
|
5
|
+
import Logger from './helpers/Logger';
|
|
6
|
+
import InputAdornment from '@mui/material/InputAdornment';
|
|
7
|
+
import Visibility from '@mui/icons-material/Visibility';
|
|
8
|
+
import VisibilityOff from '@mui/icons-material/VisibilityOff';
|
|
9
|
+
import { LoadingButton } from '@mui/lab';
|
|
10
|
+
import { MovaAppType } from './helpers/Enums';
|
|
11
|
+
import { MovaFormField, MovaPasswordForm } from './helpers/Types';
|
|
12
|
+
import { validateField } from './helpers/Tools';
|
|
13
|
+
import MovaDialog from './MovaDialog';
|
|
14
|
+
|
|
15
|
+
const initialFormState = {
|
|
16
|
+
password: { value: '', isValid: true },
|
|
17
|
+
confirmation: { value: '', isValid: true },
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
interface AccountValidationProps {
|
|
21
|
+
movaAppType: MovaAppType,
|
|
22
|
+
onSuccess: () => void,
|
|
23
|
+
onError: () => void,
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
const AccountValidation: FunctionComponent<AccountValidationProps> = ({ movaAppType, onSuccess, onError }) => {
|
|
27
|
+
|
|
28
|
+
const [loading, setLoading] = useState(true);
|
|
29
|
+
const [passwordForm, setPasswordForm] = useState<MovaPasswordForm>(initialFormState);
|
|
30
|
+
const location = useLocation();
|
|
31
|
+
const history = useHistory();
|
|
32
|
+
const theme = useTheme();
|
|
33
|
+
const [emptyPwd, setEmptyPwd] = useState<boolean>(false);
|
|
34
|
+
const [showPassword, setShowPassword] = useState(false);
|
|
35
|
+
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
|
|
36
|
+
|
|
37
|
+
useEffect(() => {
|
|
38
|
+
|
|
39
|
+
const params = new URLSearchParams(location.search);
|
|
40
|
+
const token = params.get('token');
|
|
41
|
+
|
|
42
|
+
// Si cette variable est transmise, ecla signifie que le compte a été créé sans mot de passe
|
|
43
|
+
let localEmptyPwd = Boolean(params.get('emptyPwd'));
|
|
44
|
+
setEmptyPwd(localEmptyPwd);
|
|
45
|
+
|
|
46
|
+
if (token) {
|
|
47
|
+
|
|
48
|
+
if(!localEmptyPwd){
|
|
49
|
+
|
|
50
|
+
let req = {
|
|
51
|
+
token: token
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
activateAccount(req);
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
}, [location]);
|
|
59
|
+
|
|
60
|
+
const activateAccount = (req: any) => {
|
|
61
|
+
if(req){
|
|
62
|
+
|
|
63
|
+
Logger.info(req);
|
|
64
|
+
|
|
65
|
+
UserService.validateAccount(req)
|
|
66
|
+
.then(response => {
|
|
67
|
+
|
|
68
|
+
// Affichage notification utilisateur
|
|
69
|
+
Logger.info(response);
|
|
70
|
+
if(onSuccess){
|
|
71
|
+
onSuccess();
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
}).catch(error => {
|
|
75
|
+
Logger.error(error);
|
|
76
|
+
if(onError){
|
|
77
|
+
onError();
|
|
78
|
+
}
|
|
79
|
+
});
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | null): void => {
|
|
84
|
+
if(e){
|
|
85
|
+
const fieldName: string = e.target.name;
|
|
86
|
+
const fieldValue: string = e.target.value;
|
|
87
|
+
const newField: MovaFormField = { [fieldName]: { value: fieldValue, isValid: true } };
|
|
88
|
+
|
|
89
|
+
setPasswordForm({ ...passwordForm, ...newField});
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
const validateForm = () => {
|
|
94
|
+
let newForm: MovaPasswordForm = { ...passwordForm };
|
|
95
|
+
|
|
96
|
+
// Validator pour les champs obligatoires
|
|
97
|
+
newForm.password = validateField(passwordForm.password, value => !!value, 'Champ obligatoire');
|
|
98
|
+
newForm.confirmation = validateField(passwordForm.confirmation, value => !!value, 'Champ obligatoire');
|
|
99
|
+
|
|
100
|
+
// Validator pour le mot de passe
|
|
101
|
+
newForm.password = validateField(passwordForm.password,
|
|
102
|
+
value => value.length >= 10 && /[a-z]/.test(value) && /[A-Z]/.test(value),
|
|
103
|
+
'Votre mot de passe doit faire au moins 10 caractères de long, contenir au moins une majuscule et une minuscule');
|
|
104
|
+
|
|
105
|
+
// Second validator pour le mot de passe (confirmation)
|
|
106
|
+
newForm.confirmation = validateField(passwordForm.confirmation, value => value === passwordForm.password.value,
|
|
107
|
+
"Les mots de passe doivent être identiques");
|
|
108
|
+
|
|
109
|
+
setPasswordForm(newForm);
|
|
110
|
+
|
|
111
|
+
return newForm.password.isValid && newForm.confirmation.isValid;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
const handleValidateAccount = () => {
|
|
116
|
+
if(validateForm()){
|
|
117
|
+
// Demande d'activation du compte avec le token temporaire reçu par email et le mot de passe définit
|
|
118
|
+
const params = new URLSearchParams(location.search);
|
|
119
|
+
|
|
120
|
+
let req = {
|
|
121
|
+
token: params.get('token'),
|
|
122
|
+
password: passwordForm.password.value
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
activateAccount(req);
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
const getTitleStyle = ():CSSProperties => {
|
|
130
|
+
return {
|
|
131
|
+
color:darken(theme.palette.secondary.main, 0.4),
|
|
132
|
+
fontFamily: 'Dancing Script, cursive',
|
|
133
|
+
fontSize: 40
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
return (
|
|
138
|
+
<div>
|
|
139
|
+
{emptyPwd &&
|
|
140
|
+
<MovaDialog
|
|
141
|
+
leafImageColor='pink'
|
|
142
|
+
title={movaAppType === MovaAppType.GARAGE ? "Bienvenu sur Movalib PRO !" : "Bienvenue sur Movalib !" }
|
|
143
|
+
titleStyle={getTitleStyle()}
|
|
144
|
+
fullScreen={isMobile}
|
|
145
|
+
open={emptyPwd}
|
|
146
|
+
closable={false}
|
|
147
|
+
onClose={function (): void {
|
|
148
|
+
throw new Error('Function not implemented.');
|
|
149
|
+
}}
|
|
150
|
+
actions={
|
|
151
|
+
<LoadingButton
|
|
152
|
+
type="submit"
|
|
153
|
+
onClick={handleValidateAccount}
|
|
154
|
+
fullWidth
|
|
155
|
+
variant="contained"
|
|
156
|
+
sx={{ mt: 4, mb: 0 }}>
|
|
157
|
+
<span>Valider mon compte</span>
|
|
158
|
+
</LoadingButton>
|
|
159
|
+
}>
|
|
160
|
+
<Grid container>
|
|
161
|
+
<Grid item xs={12}>
|
|
162
|
+
<Typography sx={{ mt: 2, mb: 2 }}>
|
|
163
|
+
{movaAppType === MovaAppType.GARAGE ?
|
|
164
|
+
"Pour commencer, définis ton mot de passe et active ton compte 😉"
|
|
165
|
+
:
|
|
166
|
+
"Pour commencer, définissez votre mot de passe et activez votre compte 😉"
|
|
167
|
+
}
|
|
168
|
+
</Typography>
|
|
169
|
+
</Grid>
|
|
170
|
+
<Grid item xs={12}>
|
|
171
|
+
<TextField
|
|
172
|
+
margin="normal"
|
|
173
|
+
required
|
|
174
|
+
fullWidth
|
|
175
|
+
name="password"
|
|
176
|
+
label="Mot de passe"
|
|
177
|
+
type={showPassword ? 'text' : 'password'}
|
|
178
|
+
id="password"
|
|
179
|
+
autoComplete="current-password"
|
|
180
|
+
onChange={e => handleInputChange(e)}
|
|
181
|
+
value={passwordForm.password.value}
|
|
182
|
+
error={!passwordForm.password.isValid}
|
|
183
|
+
helperText={Boolean(passwordForm.password.error) ? passwordForm.password.error : "10 caractères minimum, 1 majuscule, 1 minuscule"}
|
|
184
|
+
InputProps={{
|
|
185
|
+
endAdornment: (
|
|
186
|
+
<InputAdornment position="end">
|
|
187
|
+
<IconButton
|
|
188
|
+
edge="end"
|
|
189
|
+
onClick={(e) => setShowPassword((prev) => !prev)}
|
|
190
|
+
>
|
|
191
|
+
{showPassword ? <VisibilityOff /> : <Visibility />}
|
|
192
|
+
</IconButton>
|
|
193
|
+
</InputAdornment>
|
|
194
|
+
),
|
|
195
|
+
}}
|
|
196
|
+
/>
|
|
197
|
+
</Grid>
|
|
198
|
+
<Grid item xs={12}>
|
|
199
|
+
<TextField
|
|
200
|
+
margin="normal"
|
|
201
|
+
required
|
|
202
|
+
fullWidth
|
|
203
|
+
name="confirmation"
|
|
204
|
+
label="Confirmation"
|
|
205
|
+
type={showPassword ? 'text' : 'password'}
|
|
206
|
+
id="confirmation"
|
|
207
|
+
onChange={e => handleInputChange(e)}
|
|
208
|
+
value={passwordForm.confirmation.value}
|
|
209
|
+
error={!passwordForm.confirmation.isValid}
|
|
210
|
+
helperText={Boolean(passwordForm.confirmation.error) ? passwordForm.confirmation.error : ""}
|
|
211
|
+
InputProps={{
|
|
212
|
+
endAdornment: (
|
|
213
|
+
<InputAdornment position="end">
|
|
214
|
+
<IconButton
|
|
215
|
+
edge="end"
|
|
216
|
+
onClick={(e) => setShowPassword((prev) => !prev)}
|
|
217
|
+
>
|
|
218
|
+
{showPassword ? <VisibilityOff /> : <Visibility />}
|
|
219
|
+
</IconButton>
|
|
220
|
+
</InputAdornment>
|
|
221
|
+
),
|
|
222
|
+
}}
|
|
223
|
+
/>
|
|
224
|
+
</Grid>
|
|
225
|
+
</Grid>
|
|
226
|
+
</MovaDialog>}
|
|
227
|
+
|
|
228
|
+
{loading &&
|
|
229
|
+
<Box display="flex" justifyContent="center" alignItems="center" minHeight="100vh">
|
|
230
|
+
<CircularProgress />
|
|
231
|
+
</Box>
|
|
232
|
+
}
|
|
233
|
+
</div>
|
|
234
|
+
);
|
|
235
|
+
};
|
|
236
|
+
|
|
237
|
+
export default AccountValidation;
|
package/src/MovaDialog.tsx
CHANGED
|
@@ -22,7 +22,7 @@ interface MovaDialogProps {
|
|
|
22
22
|
sx?: SxProps<Theme>;
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
const MovaDialog: FC<MovaDialogProps> = ({fullScreen, open, onClose, closable =
|
|
25
|
+
const MovaDialog: FC<MovaDialogProps> = ({fullScreen, open, onClose, closable = true, children, title, titleStyle,
|
|
26
26
|
message, leafImageColor, transition, actions, sx}) => {
|
|
27
27
|
|
|
28
28
|
const getTransition = () => {
|
|
@@ -89,14 +89,14 @@ const MovaDialog: FC<MovaDialogProps> = ({fullScreen, open, onClose, closable =
|
|
|
89
89
|
<DialogTitle id="garage-dialog-title" sx={{ textAlign:'center', p: 0, pt: 1, mt: 0, mb: 0, zIndex: 10 }} >
|
|
90
90
|
<AppBar sx={{ position: 'relative' }} color="transparent" elevation={0}>
|
|
91
91
|
<Toolbar>
|
|
92
|
-
<IconButton
|
|
92
|
+
{closable && <IconButton
|
|
93
93
|
edge="start"
|
|
94
94
|
color="inherit"
|
|
95
95
|
onClick={handleOnBack}
|
|
96
96
|
aria-label="close"
|
|
97
97
|
>
|
|
98
98
|
<BackIcon />
|
|
99
|
-
</IconButton>
|
|
99
|
+
</IconButton>}
|
|
100
100
|
{title && <Typography sx={{ textAlign:'center', fontSize: 20, flexGrow: 1, pl: '20px', pr: '40px' }} style={titleStyle}>
|
|
101
101
|
{title}
|
|
102
102
|
</Typography>}
|
package/src/helpers/Types.ts
CHANGED
|
@@ -5,6 +5,14 @@ import User from "../models/User";
|
|
|
5
5
|
|
|
6
6
|
export default class UserService {
|
|
7
7
|
|
|
8
|
+
static validateAccount(req: any): Promise<APIResponse<string>> {
|
|
9
|
+
return request({
|
|
10
|
+
url: `${API_BASE_URL}/user/validate-account`,
|
|
11
|
+
method: APIMethod.POST,
|
|
12
|
+
body: JSON.stringify(req)
|
|
13
|
+
});
|
|
14
|
+
}
|
|
15
|
+
|
|
8
16
|
/**
|
|
9
17
|
* @param email
|
|
10
18
|
* @param password
|