@oasisomniverse/nextjs 1.0.0

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@oasisomniverse/nextjs",
+  "version": "1.0.0",
+  "description": "OASIS Omniverse Next.js UI components",
+  "keywords": ["oasis", "omniverse", "nextjs", "next", "react", "components"],
+  "author": "NextGenSoftware",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/NextGenSoftwareUK/OASIS-NextJS-UI-Component-Library.git"
+  },
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./components/*": "./src/components/*.tsx"
+  },
+  "files": ["src"],
+  "peerDependencies": {
+    "next": ">=14.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "@oasisomniverse/web4-api": ">=2.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {}
+}

package/src/components/ForgetPassword.tsx

@@ -0,0 +1,127 @@
+'use client';
+import React from 'react';
+
+import { toast } from "react-toastify";
+
+import { Modal } from 'react-bootstrap';
+import Loader from 'react-loader-spinner';
+import { Formik } from "formik";
+import * as Yup from "yup";
+import oasisApi from "oasis-api";
+
+
+export default class ForgetPassword extends React.Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            email: '',
+            loading: false,
+            user: null
+        }
+    }
+
+    initialValues = {
+        email: ''
+    }
+    validationSchema = Yup.object().shape({
+        email: Yup.string()
+            .email('Email is invalid')
+            .required("Email is required")
+    })
+
+    handleForgetPassword = () => {
+        let data = {
+            email: this.state.email
+        }
+        this.setState({ loading: true })
+
+        const auth = new oasisApi.Auth();
+        auth.forgotPassword(data)
+            .then(response => {
+                this.setState({ loading: false })
+                
+                if (response?.data?.result.isError) {
+                    toast.error(response.data.result.message);
+                    return
+                }
+
+                toast.success(response?.data?.result.message);
+                this.props.hide();
+            })
+            .catch(error => {
+                toast.error(error.data.result.message);
+                this.setState({ loading: false })
+            })
+    }
+    
+    render() {
+        const { loading } = this.state;
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Formik
+                    initialValues={this.initialValues}
+                    validationSchema={this.validationSchema}
+                    onSubmit={(values, { setSubmitting, resetForm }) => {
+                        setTimeout(() => {
+                            this.setState({
+                                email: values.email
+                            });
+                            this.handleForgetPassword();
+
+                            setSubmitting(true);
+                            // resetForm();
+                            setSubmitting(false);
+                        }, 400);
+                    } }
+                >
+                    {({ values, errors, touched, isSubmitting, handleChange, handleBlur, handleSubmit }) => (
+
+                        <Modal centered className="custom-modal" show={show} onHide={hide}>
+                            <Modal.Body>
+                                <span className="form-cross-icon" onClick={hide}>
+                                    <i className="fa fa-times"></i>
+                                </span>
+
+                                <form className="custom-form" onSubmit={handleSubmit}>
+                                    <div className="form-header">
+                                        <h2>Forget Password?</h2>
+                                    </div>
+
+                                    <div className="form-inputs">
+                                        <div className={this.handleFormFieldClass(errors.email, touched.email)}>
+                                            <label>EMAIL</label>
+                                            <input
+                                                type="email"
+                                                name="email"
+                                                value={values.email}
+                                                onChange={handleChange}
+                                                onBlur={handleBlur}
+                                                disabled={loading}
+                                                placeholder="name@example.com" />
+                                            <span className="text-danger">{errors.email && touched.email && errors.email}</span>
+                                        </div>
+
+                                        <button type="submit" className="submit-button" disabled={isSubmitting}>
+                                            {loading ? 'Sending Link' : 'Submit '} {loading ? <Loader type="Oval" height={15} width={15} color="#fff" /> : null}
+                                        </button>
+                                    </div>
+                                </form>
+                            </Modal.Body>
+                        </Modal>
+                    )}
+                </Formik>
+            </>
+        )
+    }
+
+    handleFormFieldClass(error, touched) {
+        let classes = "single-form-field ";
+        classes += (error && touched) ? "has-error" : "";
+
+        return classes;
+    }
+}

package/src/components/Login.tsx

@@ -0,0 +1,223 @@
+'use client';
+import React from "react";
+
+import ShowIcon from "../assets/images/visible-icon.svg";
+import HideIcon from "../assets/images/hidden-icon.svg";
+
+import ForgetPassword from "./ForgetPassword";
+
+import { Modal } from "react-bootstrap";
+import Loader from "react-loader-spinner";
+import { Formik } from "formik";
+import * as Yup from "yup";
+import axios from "axios";
+import { toast } from 'react-toastify';
+import API_BASE_URL from "../config/api";
+
+export default class Login extends React.Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            form: {
+                username: '',
+                password: '',
+            },
+            showPassword: false,
+            showForgetPasswordPopup: false,
+            loading: false
+        }
+    }
+
+    componentDidMount = () => {
+        console.log("component is mounted")
+    }
+
+    initialValues = {
+        username: '',
+        password: ''
+    }
+    validationSchema = Yup.object().shape({
+        username: Yup.string()
+            .required("Username is required"),
+        password: Yup.string()
+            .required("No password provided.")
+            .min(8, "Password is too short - should be 8 characters minimum.")
+    })
+
+    handleLogin = () => {
+        this.setState({ loading: true })
+        
+        let data = {
+            "providerType": "provider",
+            "setGlobally": true,
+            "autoFailOverMode": "default",
+            "autoReplicationMode": "default",
+            "autoLoadBalanceMode": "default",
+            "autoFailOverProviders": "default",
+            "autoReplicationProviders": "default",
+            "autoLoadBalanceProviders": "default",
+            "waitForAutoReplicationResult": true,
+            "showDetailedSettings": true,
+            ...this.state.form
+        }
+
+        axios({
+            method: 'post',
+            url: `${API_BASE_URL}/avatar/authenticate/`,
+            data: data, // you are sending body instead
+            headers: {
+                'Content-Type': 'application/json'
+            }, 
+        })
+        .then((response) => {
+            this.setState({loading: false})
+
+            if (response.data.result?.isError) { 
+                toast.error(response.data.result.message);
+                return; 
+            }
+
+            const data = response.data.result.result;
+            localStorage.clear();
+
+            toast.success(response.data.result.message);
+            this.setState({user: response.data.result})
+
+            this.props.setUserStateData(data);
+            this.props.hide();
+        })
+        .catch((err) => {
+            toast.error('err');
+            this.setState({loading: false})
+            return { error: true, data: err };
+        });
+    }
+
+    showForgetPasswordPopup = (hideLogin) => {
+        this.setState({
+            showForgetPasswordPopup: true
+        });
+        hideLogin();
+    };
+
+    hideForgetPasswordPopup = () => {
+        this.setState({
+            showForgetPasswordPopup: false
+        });
+    };
+
+    render() {
+        const { showPassword, loading } = this.state;
+        const { show, hide, change } = this.props;
+
+        return (
+            <>
+
+                <Formik
+                    initialValues={this.initialValues}
+                    validationSchema={this.validationSchema}
+                    onSubmit={(values, { setSubmitting, resetForm }) => {
+                        setTimeout(() => {
+                            console.log(values);
+                            let form = values;
+                            this.setState({form});
+                            this.handleLogin();
+
+                            setSubmitting(true);
+                            // resetForm();
+                            setSubmitting(false);
+                        }, 400);
+                    } }
+                >
+                    {({ values, errors, touched, isSubmitting, handleChange, handleBlur, handleSubmit }) => (
+
+                        <Modal centered className="custom-modal" show={show} onHide={hide}>
+                            <Modal.Body>
+                                <span className="form-cross-icon" onClick={hide}>
+                                    <i className="fa fa-times"></i>
+                                </span>
+
+                                <form className="custom-form" onSubmit={handleSubmit}>
+                                    <div className="form-header">
+                                        <h2>Beam In</h2>
+
+                                        <p>
+                                            Don't have an account? 
+                                            <span className="text-link" onClick={change}> Sign Up!</span>
+                                        </p>
+                                    </div>
+
+                                    <div className="form-inputs">
+                                        <div className={this.handleFormFieldClass(errors.username, touched.username)}>
+                                            <label>USERNAME</label>
+                                            <input
+                                                type="email"
+                                                name="username"
+                                                value={values.username}
+                                                onChange={handleChange}
+                                                onBlur={handleBlur}
+                                                disabled={loading}
+                                                placeholder="name@example.com" />
+                                            <span className="text-danger">{errors.username && touched.username && errors.username}</span>
+                                        </div>
+
+                                        <div className={this.handleFormFieldClass(errors.password, touched.password)}>
+                                            <label>PASSWORD</label>
+                                            <div className="have-icon">
+                                                <input
+                                                    type={`${showPassword ? "text" : "password"}`}
+                                                    name="password"
+                                                    value={values.password}
+                                                    onChange={handleChange}
+                                                    onBlur={handleBlur}
+                                                    disabled={loading}
+                                                    placeholder="password" />
+                                                <img
+                                                    className="field-icon"
+                                                    onClick={() => this.setState({ showPassword: !showPassword })}
+                                                    src={showPassword ? ShowIcon : HideIcon}
+                                                    alt="icon" />
+                                            </div>
+                                            <span className="text-danger">{errors.password && touched.password && errors.password}</span>
+                                        </div>
+
+                                        <div className="forgot-password">
+                                            <label className="text-link" onClick={() => this.showForgetPasswordPopup(hide)}>Forgot Password?</label>
+                                        </div>
+
+                                        <div className="remember-me">
+                                            <label>
+                                                <input type="checkbox" name="remember-login" id="remember-login" />
+                                                Remember me
+                                            </label>
+                                        </div>
+
+                                        <button type="submit" className="submit-button" disabled={isSubmitting}>
+                                            {loading ? 'Beaming in ' : 'Submit '} {loading ? <Loader type="Oval" height={15} width={15} color="#fff" /> : null}
+                                        </button>
+                                    </div>
+                                </form>
+                            </Modal.Body>
+                        </Modal>
+                    )}
+                </Formik>
+
+                <ForgetPassword
+                    className="custom-form"
+                    show={this.state.showForgetPasswordPopup}
+                    hide={this.hideForgetPasswordPopup}
+                    change={this.showForgetPasswordPopup}
+                />
+            </>
+        )
+    }
+
+    handleFormFieldClass(error, touched) {
+        let classes = "single-form-field ";
+        classes += (error && touched) ? "has-error" : "";
+
+        return classes;
+    }
+}

package/src/components/ResetPassword.tsx

@@ -0,0 +1,177 @@
+'use client';
+import React from 'react';
+
+import { toast } from "react-toastify";
+
+import { Modal } from 'react-bootstrap';
+import Loader from 'react-loader-spinner';
+import { Formik } from "formik";
+import * as Yup from "yup";
+import axios from 'axios';
+import API_BASE_URL from "../config/api";
+
+// import { Link, withRouter } from "react-router-dom";
+import { withRouter } from "react-router-dom";
+
+class ResetPassword extends React.Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            show: false,
+            form: {
+                token: '',
+                password: '',
+                confirmPassword: ''
+            },
+            showPassword: false,
+            loading: false
+        }
+    }
+
+    validationSchema = Yup.object().shape({
+        token: Yup.string()
+            .required("Token is required"),
+        password: Yup.string()
+            .required("Password is required.")
+            .min(8, "Password is too short - should be 8 characters minimum."),    
+        confirmPassword: Yup.string()
+            .required("Confirm Password is required.")
+            .min(8, "Password is too short - should be 8 characters minimum.")    
+    })
+
+    componentDidMount() {
+        this.setState({
+            show: true
+        })
+    }
+
+    hidePopup = () => {
+        this.setState({
+            show: false
+        })
+    }
+
+    handleResetPassword = () => {
+        if (this.state.form.password === this.state.form.confirmPassword) {
+            let data = {
+                token: this.state.form.token, // use token from form state
+                NewPassword: this.state.form.password,
+                ConfirmNewPassword: this.state.form.confirmPassword
+            }
+            this.setState({ loading: true })
+    
+            axios.post(`${API_BASE_URL}/Avatar/reset-password`, data)
+                .then(response => {
+                    this.setState({loading: false});
+
+                    if(response.data.result?.isError) {
+                        toast.error(response.data.result.message);
+                        return;
+                    }
+
+                    this.props.history.push('/');
+    
+                    toast.success(response?.data?.result.message);
+                })
+                .catch(error => {
+                    this.setState({
+                        loading: false,
+                    });
+                });
+        } else {
+            toast.error("Password and Confirm password should be same.")
+        }
+    }
+    
+    
+    render() {
+        const searchParams = new URLSearchParams(this.props.location.search);
+        const token = searchParams.get('token');
+
+        const initialValues = {
+            token: token || '',
+            password: '',
+            confirmPassword: ''
+        };
+
+        return (
+            <>
+                <Formik
+                    initialValues={initialValues}
+                    validationSchema={this.validationSchema}
+                    onSubmit={(values, { setSubmitting, resetForm }) => {
+                        setTimeout(() => {
+                            let form = values;
+                            this.setState({form});
+                            this.handleResetPassword();
+
+                            setSubmitting(true);
+                            // resetForm();
+                            setSubmitting(false);
+                        }, 400);
+                    } }
+                >
+                    {({ values, errors, touched, isSubmitting, handleChange, handleBlur, handleSubmit }) => (
+
+                        <Modal centered className="custom-modal" show={this.state.show} onHide={() => this.hidePopup()}>
+                            <Modal.Body>
+                                <span className="form-cross-icon" onClick={() => this.hidePopup()}>
+                                    <i className="fa fa-times"></i>
+                                </span>
+
+                                <form className="custom-form" onSubmit={handleSubmit}>
+                                    <div className="form-header">
+                                        <h2>Reset Password</h2>
+                                    </div>
+
+                                    <div className="form-inputs">
+                                        <div className={this.handleFormFieldClass(errors.password, touched.password)}>
+                                            <label>Password</label>
+                                            <input
+                                                type="password"
+                                                name="password"
+                                                value={values.password}
+                                                onChange={handleChange}
+                                                onBlur={handleBlur}
+                                                disabled={this.state.loading}
+                                                placeholder="Password" />
+                                            <span className="text-danger">{errors.password && touched.password && errors.password}</span>
+                                        </div>
+
+                                        <div className={this.handleFormFieldClass(errors.confirmPassword, touched.confirmPassword)}>
+                                            <label>Confirm Password</label>
+                                            <input
+                                                type="password"
+                                                name="confirmPassword"
+                                                value={values.confirmPassword}
+                                                onChange={handleChange}
+                                                onBlur={handleBlur}
+                                                disabled={this.state.loading}
+                                                placeholder="Confirm Password" />
+                                            <span className="text-danger">{errors.confirmPassword && touched.confirmPassword && errors.confirmPassword}</span>
+                                        </div>
+
+                                        <button type="submit" className="submit-button" disabled={isSubmitting}>
+                                            Reset {this.state.loading ? <Loader type="Oval" height={15} width={15} color="#fff" /> : null}
+                                        </button>
+                                    </div>
+                                </form>
+                            </Modal.Body>
+                        </Modal>
+                    )}
+                </Formik>
+            </>
+        )
+    }
+
+    handleFormFieldClass(error, touched) {
+        let classes = "single-form-field ";
+        classes += (error && touched) ? "has-error" : "";
+
+        return classes;
+    }
+}
+
+export default withRouter(ResetPassword);