cloudmr-ux 4.1.1 → 4.1.3
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.
|
@@ -1,3 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
type RegisterProps = {
|
|
2
2
|
onBackToSignin: () => void;
|
|
3
|
-
|
|
3
|
+
/**
|
|
4
|
+
* When true, do not render Container/Paper wrapper.
|
|
5
|
+
* Useful for embedded usage (e.g., inside a Popover) to avoid double-card outlines.
|
|
6
|
+
*/
|
|
7
|
+
hidePaper?: boolean;
|
|
8
|
+
};
|
|
9
|
+
export default function Register({ onBackToSignin, hidePaper, }: RegisterProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export {};
|
|
@@ -26,20 +26,20 @@ import { useEffect, useState } from "react";
|
|
|
26
26
|
import { validatePassword, isPasswordValid as checkPasswordValid, } from "../../utils/passwordValidation";
|
|
27
27
|
import PasswordRequirements from "../../components/PasswordRequirements";
|
|
28
28
|
export default function Register(_a) {
|
|
29
|
-
var onBackToSignin = _a.onBackToSignin;
|
|
29
|
+
var onBackToSignin = _a.onBackToSignin, _b = _a.hidePaper, hidePaper = _b === void 0 ? false : _b;
|
|
30
30
|
var dispatch = useAppDispatch();
|
|
31
|
-
var
|
|
32
|
-
var
|
|
33
|
-
var
|
|
34
|
-
var
|
|
35
|
-
var
|
|
36
|
-
var
|
|
31
|
+
var _c = useAppSelector(function (state) { return state.authenticate; }), loading = _c.loading, error = _c.error, registerSuccess = _c.registerSuccess;
|
|
32
|
+
var _d = useState(false), showSuccess = _d[0], setShowSuccess = _d[1];
|
|
33
|
+
var _e = useState(""), password = _e[0], setPassword = _e[1];
|
|
34
|
+
var _f = useState(""), confirmPassword = _f[0], setConfirmPassword = _f[1];
|
|
35
|
+
var _g = useState(false), showPasswordValidation = _g[0], setShowPasswordValidation = _g[1];
|
|
36
|
+
var _h = useState({
|
|
37
37
|
minLength: false,
|
|
38
38
|
hasNumber: false,
|
|
39
39
|
hasSpecial: false,
|
|
40
40
|
hasUppercase: false,
|
|
41
41
|
hasLowercase: false
|
|
42
|
-
}), passwordValidation =
|
|
42
|
+
}), passwordValidation = _h[0], setPasswordValidation = _h[1];
|
|
43
43
|
useEffect(function () {
|
|
44
44
|
if (registerSuccess) {
|
|
45
45
|
setShowSuccess(true);
|
|
@@ -117,10 +117,14 @@ export default function Register(_a) {
|
|
|
117
117
|
};
|
|
118
118
|
dispatch(registerUser(registerData));
|
|
119
119
|
};
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
120
|
+
var body = (_jsxs(Box, __assign({ component: "form", onSubmit: handleSubmit, noValidate: true }, { children: [_jsx(Typography, __assign({ variant: "h6", gutterBottom: true, sx: { mb: 2 } }, { children: "Create Account" })), error && (_jsx(Alert, __assign({ severity: "error", sx: { mb: 2 }, onClose: function () { return dispatch(clearError()); } }, { children: error }))), showSuccess && (_jsx(Alert, __assign({ severity: "success", sx: { mb: 2 } }, { children: "Registration successful! Please wait for admin approval before signing in." }))), _jsxs(Grid, __assign({ container: true, spacing: 2 }, { children: [_jsx(Grid, __assign({ item: true, xs: 12, sm: 6 }, { children: _jsx(TextField, { margin: "normal", required: true, fullWidth: true, id: "firstname", label: "First Name", name: "firstname", size: "small", autoFocus: true }) })), _jsx(Grid, __assign({ item: true, xs: 12, sm: 6 }, { children: _jsx(TextField, { margin: "normal", required: true, fullWidth: true, id: "lastname", label: "Last Name", name: "lastname", size: "small" }) }))] })), _jsx(TextField, { margin: "normal", required: true, fullWidth: true, id: "username", label: "Username", name: "username", size: "small" }), _jsx(TextField, { margin: "normal", required: true, fullWidth: true, id: "email", label: "Email Address", name: "email", type: "email", size: "small", autoComplete: "email" }), _jsx(TextField, { margin: "normal", required: true, fullWidth: true, name: "password", label: "Password", type: "password", id: "password", size: "small", autoComplete: "new-password", value: password, onChange: handlePasswordChange }), _jsx(PasswordRequirements, { validation: passwordValidation, show: showPasswordValidation }), _jsx(TextField, { margin: "normal", required: true, fullWidth: true, name: "confirmPassword", label: "Confirm Password", type: "password", id: "confirmPassword", size: "small", autoComplete: "new-password", value: confirmPassword, onChange: handleConfirmPasswordChange, error: confirmPassword.length > 0 && !passwordsMatch, helperText: confirmPassword.length > 0 && !passwordsMatch ? "Passwords do not match" : "" }), _jsx(Button, __assign({ type: "submit", fullWidth: true, variant: "contained", sx: { mt: 3, mb: 2 }, disabled: loading || !isFormValid() }, { children: loading ? "Registering..." : "Register" })), _jsx(Grid, __assign({ container: true, justifyContent: "flex-end" }, { children: _jsx(Grid, __assign({ item: true }, { children: _jsx(Link, __assign({ href: "#", onClick: function (e) {
|
|
121
|
+
e.preventDefault();
|
|
122
|
+
onBackToSignin();
|
|
123
|
+
}, variant: "body2" }, { children: "Already have an account? Sign in" })) })) }))] })));
|
|
124
|
+
// Embedded mode: no container/paper outline (popover provides the frame)
|
|
125
|
+
if (hidePaper) {
|
|
126
|
+
return _jsx(Box, __assign({ sx: { p: 0 } }, { children: body }));
|
|
127
|
+
}
|
|
128
|
+
// Default mode: same as before
|
|
129
|
+
return (_jsx(Container, __assign({ maxWidth: "md", sx: { mt: 4, mb: 4 } }, { children: _jsx(Paper, __assign({ sx: { p: 3 } }, { children: body })) })));
|
|
126
130
|
}
|
|
@@ -58,7 +58,7 @@ export default function Signin(_a) {
|
|
|
58
58
|
};
|
|
59
59
|
dispatch(getLoggedInToken(credentials));
|
|
60
60
|
};
|
|
61
|
-
var content = (_jsxs("div", __assign({ id: "welcome" }, { children: [_jsx("div", __assign({ id: "welcome-logo" }, { children: _jsxs("div", __assign({ style: {
|
|
61
|
+
var content = (_jsxs("div", __assign({ id: "welcome", className: variant === "embed" ? "welcome-embed" : "" }, { children: [_jsx("div", __assign({ id: "welcome-logo" }, { children: _jsxs("div", __assign({ style: {
|
|
62
62
|
margin: "auto",
|
|
63
63
|
width: "100%",
|
|
64
64
|
display: "flex",
|
|
@@ -80,7 +80,7 @@ export default function Signin(_a) {
|
|
|
80
80
|
}, variant: "body2" }, { children: "Forgot Password?" })) })), _jsx(Grid, __assign({ item: true }, { children: _jsx(Link, __assign({ href: "#", onClick: function (e) {
|
|
81
81
|
e.preventDefault();
|
|
82
82
|
setShowRegister(true);
|
|
83
|
-
}, variant: "body2" }, { children: "Sign Up" })) }))] }))] })) })) }))) : showForgotPassword ? (_jsx(ForgotPassword, { onBackToSignin: function () { return setShowForgotPassword(false); } })) : (_jsx(Register, { onBackToSignin: function () { return setShowRegister(false); } })) }))] })));
|
|
83
|
+
}, variant: "body2" }, { children: "Sign Up" })) }))] }))] })) })) }))) : showForgotPassword ? (_jsx(ForgotPassword, { onBackToSignin: function () { return setShowForgotPassword(false); } })) : (_jsx(Register, { onBackToSignin: function () { return setShowRegister(false); }, hidePaper: variant === "embed" })) }))] })));
|
|
84
84
|
return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: variant === "embed" ? (
|
|
85
85
|
// Popover/card mode: no "page layout" wrapper
|
|
86
86
|
content) : (
|
|
@@ -48,14 +48,14 @@ body {
|
|
|
48
48
|
text-transform: uppercase;
|
|
49
49
|
}
|
|
50
50
|
|
|
51
|
-
#welcome{
|
|
51
|
+
#welcome {
|
|
52
52
|
display: grid;
|
|
53
53
|
grid-template-columns: 25% 50% 25%;
|
|
54
54
|
grid-template-rows: fit-content(30%) 0pt 1fr;
|
|
55
55
|
row-gap: 5px;
|
|
56
56
|
}
|
|
57
57
|
|
|
58
|
-
#welcome-logo{
|
|
58
|
+
#welcome-logo {
|
|
59
59
|
grid-row: 1;
|
|
60
60
|
grid-column: 2;
|
|
61
61
|
width: 90%;
|
|
@@ -66,19 +66,20 @@ body {
|
|
|
66
66
|
color: #555;
|
|
67
67
|
}
|
|
68
68
|
|
|
69
|
-
#welcome-login{
|
|
69
|
+
#welcome-login {
|
|
70
70
|
grid-row: 3;
|
|
71
71
|
grid-column: 2 / span 1;
|
|
72
72
|
display: flex;
|
|
73
73
|
justify-content: center;
|
|
74
74
|
}
|
|
75
75
|
|
|
76
|
-
#welcome-icon{
|
|
77
|
-
position:absolute;
|
|
78
|
-
top
|
|
76
|
+
#welcome-icon {
|
|
77
|
+
position: absolute;
|
|
78
|
+
top: -50pt;
|
|
79
|
+
/*it pushes away div element from top 30pt down Remember with
|
|
79
80
|
browser window*/
|
|
80
|
-
left:0;
|
|
81
|
-
right:0;
|
|
81
|
+
left: 0;
|
|
82
|
+
right: 0;
|
|
82
83
|
/*last three property excatly similar to top property it just pushes away
|
|
83
84
|
from specified direction*/
|
|
84
85
|
display: flex;
|
|
@@ -91,3 +92,21 @@ body {
|
|
|
91
92
|
/* Reserve space so content can't be covered by a fixed footer */
|
|
92
93
|
padding-bottom: 96px;
|
|
93
94
|
}
|
|
95
|
+
|
|
96
|
+
/* ---------- Embedded mode (Popover/Card) overrides ---------- */
|
|
97
|
+
#welcome.welcome-embed {
|
|
98
|
+
display: block;
|
|
99
|
+
grid-template-columns: none;
|
|
100
|
+
grid-template-rows: none;
|
|
101
|
+
row-gap: 0;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
#welcome.welcome-embed #welcome-logo {
|
|
105
|
+
display: none;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
#welcome.welcome-embed #welcome-login {
|
|
109
|
+
display: block;
|
|
110
|
+
justify-content: initial;
|
|
111
|
+
width: 100%;
|
|
112
|
+
}
|