oxmc/myDrive
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

started login page changes

Browse Source
This commit is contained in:
subnub
2024-07-17 23:02:51 -04:00
parent 8c6c916444
commit 1e2dc81091
7 changed files with 205 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/api/user.ts
+17
View File
@@ -1,6 +1,23 @@
import axios from "../axiosInterceptor";
// GET
export const getUserToken = async () => {
const response = await axios.post("/user-service/get-token");
response.data;
};
export const getUserAPI = async () => {
const response = await axios.get("/user-service/user");
return response.data;
};
// POST
export const loginAPI = async (email: string, password: string) => {
const response = await axios.post("/user-service/login", {
email,
password,
});
response.data;
};
src/components/LoginPage/LoginPage.jsx
+150 -224
View File
@@ -1,236 +1,162 @@
import SpinnerLogin from "../SpinnerLogin";
import React from "react";
import React, { useEffect, useState } from "react";
import env from "../../enviroment/envFrontEnd";
import { getUserAPI } from "../../api/user";
import { useLocation, useNavigate } from "react-router-dom";
import { setUser } from "../../reducers/user";
import { useAppDispatch } from "../../hooks/store";
const LoginPage = (props) => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [verifyPassword, setVerifyPassword] = useState("");
const [attemptingLogin, setAttemptingLogin] = useState(false);
const dispatch = useAppDispatch();
const location = useLocation();
const navigate = useNavigate();
const attemptLoginWithToken = async () => {
setAttemptingLogin(true);
console.log("login with token");
try {
const userResponse = await getUserAPI();
console.log("user response", userResponse);
if (userResponse.emailVerified) {
// TODO: Fix this
}
const redirectPath = location.state?.from?.pathname || "/home";
console.log("redirect path", redirectPath);
dispatch(setUser(userResponse));
navigate(redirectPath);
setAttemptingLogin(false);
window.localStorage.setItem("hasPreviouslyLoggedIn", "true");
} catch (e) {
console.log("Login Error", e);
setAttemptingLogin(false);
}
};
const onSubmit = () => {};
useEffect(() => {
attemptLoginWithToken();
}, []);
if (attemptingLogin) {
return (
<div>
<div className="box-layout">
<div>
<SpinnerLogin />
</div>
</div>
</div>
);
}
return (
<div>
{!props.loginFailed ? (
<div>
<div className="box-layout">
<div>
<SpinnerLogin />
<div className="sign__back">
<div className="login__block">
<div className="login__inner">
<div className="login__logo">
<img src="/images/icon.png" alt="logo" />
</div>
{/* <!-- Login form block --> */}
<div
className="login__form"
style={
props.loginFailed && props.loginFailedCode === 404
? { display: "none" }
: { display: "block" }
}
>
<h2>
{props.state.loginMode
? "Login to your account"
: "Create an account"}
</h2>
<form onSubmit={props.login}>
<div className="group__input">
<input
type="text"
placeholder="Email address"
onChange={(e) => setEmail(e.target.value)}
value={email}
/>
</div>
{!props.state.resetPasswordMode ? (
<div className="group__input forgot__pass">
<input
type="password"
placeholder="Password"
onChange={(e) => setPassword(e.target.value)}
value={password}
/>
{props.state.loginMode ? (
<a onClick={props.switchResetPasswordMode}>Forgot?</a>
) : undefined}
</div>
) : undefined}
{props.state.loginMode ? undefined : (
<div className="group__input">
<input
type="password"
placeholder="Verify Password"
onChange={(e) => setVerifyPassword(e.target.value)}
value={verifyPassword}
/>
</div>
)}
<div className="group__submit">
<input
type="submit"
value={
props.state.resetPasswordMode
? "Reset"
: props.state.loginMode
? "Login"
: "Create"
}
/>
</div>
{!props.state.resetPasswordMode ? (
<div className="create__account">
{props.state.loginMode ? (
<p>
Don't have an account?{" "}
<a onClick={props.switchLoginMode}>Create account</a>
</p>
) : (
<p>
Back to <a onClick={props.switchLoginMode}>Login</a>
</p>
)}
</div>
) : (
<div className="create__account">
<p>
Back to{" "}
<a onClick={props.switchResetPasswordMode}>Login</a>
</p>
</div>
)}
{props.loginFailed && (
<div className="login__image__wrapper">
<img className="login__image" src="/images/error-red.png" />
<p className="login__title">{props.loginFailed}</p>
</div>
)}
</form>
</div>
</div>
</div>
) : (
<div className="sign__back">
{props.loginFailed && props.loginFailedCode === 404 ? (
<div className="sign__block">
<div className="sign__inner">
<div className="confirm__email">
<h2>Confirm your email address</h2>
<p>
We've sent a confirmation email to{" "}
<span>
{env.emailAddress
? env.emailAddress.length !== 0
? env.emailAddress
: props.state.email
: props.state.email}
</span>
.
</p>
<p>Refresh this page after confirming email.</p>
<form action="">
{/* <div className="group__input">
<input type="text" placeholder="Enter one-time PIN"/>
</div>
<div className="group__submit">
<input type="submit" value="Continue"/>
</div> */}
<div className="resend__email">
<p
style={
props.state.verifyEmailResent
? { display: "block" }
: { display: "none" }
}
>
<span>
<img src="/assets/checkbox.svg" alt="checkbox" />
</span>{" "}
We’ve resent the email. You can resend again in{" "}
<span className="full__timer">
0:
<span className="seconds__span">
{props.state.verifyEmailResentTimer}
</span>
</span>
</p>
<a className="resend__button" onClick={props.resendEmail}>
Resend confirmation email
</a>
<a className="resend__button" onClick={props.logout}>
Logout
</a>
</div>
</form>
</div>
</div>
</div>
) : (
<div className="login__block">
<div className="login__inner">
<div className="login__logo">
<img src="/images/icon.png" alt="logo" />
</div>
{/* <!-- Login form block --> */}
<div
className="login__form"
style={
props.loginFailed && props.loginFailedCode === 404
? { display: "none" }
: { display: "block" }
}
>
<h2>
{props.state.loginMode
? "Login to your account"
: "Create an account"}
</h2>
<form onSubmit={props.login}>
<div className="group__input">
<input
type="text"
placeholder="Email address"
onChange={props.emailOnChange}
value={props.state.email}
/>
</div>
{!props.state.resetPasswordMode ? (
<div className="group__input forgot__pass">
<input
type="password"
placeholder="Password"
onChange={props.passwordOnChange}
value={props.state.password}
/>
{props.state.loginMode ? (
<a onClick={props.switchResetPasswordMode}>Forgot?</a>
) : undefined}
</div>
) : undefined}
{props.state.loginMode ? undefined : (
<div className="group__input">
<input
type="password"
placeholder="Verify Password"
onChange={props.verifyPasswordOnChange}
value={props.state.verifyPassword}
/>
</div>
)}
<div className="group__submit">
<input
type="submit"
value={
props.state.resetPasswordMode
? "Reset"
: props.state.loginMode
? "Login"
: "Create"
}
/>
</div>
{!props.state.resetPasswordMode ? (
<div className="create__account">
{props.state.loginMode ? (
<p>
Don't have an account?{" "}
<a onClick={props.switchLoginMode}>
Create account
</a>
</p>
) : (
<p>
Back to <a onClick={props.switchLoginMode}>Login</a>
</p>
)}
</div>
) : (
<div className="create__account">
<p>
Back to{" "}
<a onClick={props.switchResetPasswordMode}>Login</a>
</p>
</div>
)}
{props.loginFailed ? (
props.loginFailedCode === 404 ? (
<div>
<div className="login__image__wrapper">
<img
className="login__image"
src="/images/error-red.png"
/>
<p className="login__title">Email Not Verified</p>
</div>
<div className="login-resend-email__wrapper">
<p
className="login-resend-email"
onClick={props.resendEmail}
>
Resend Email Verification
</p>
<p
className="login-resend-email"
onClick={props.logout}
>
Logout
</p>
</div>
</div>
) : (
<div className="login__image__wrapper">
<img
className="login__image"
src="/images/error-red.png"
/>
<p className="login__title">{props.loginFailed}</p>
</div>
)
) : undefined}
</form>
</div>
{/* <!-- Forgot password block --> */}
<div className="forgotpass__form" style={{ display: "none" }}>
<h2>Forgot your password?</h2>
<p>
Type in your email address and we’ll send you instructions
to reset your password.
</p>
<form action="">
<div className="group__input">
<input type="text" placeholder="Email address" />
</div>
<div className="group__submit">
<input type="submit" value="Submit" />
</div>
</form>
</div>
<div className="checkemail__pass" style={{ display: "none" }}>
<h2>Check your email</h2>
<p>
If the email address matches any in our database, we’ll send
you an email with instructions on how to reset your password
</p>
</div>
</div>
</div>
)}
{/* <!-- Bottom copyright --> */}
{/* <div className="bottom__float">
<p>Copyright © 2020 myDrive. All Rights Reserved.</p>
</div> */}
</div>
)}
</div>
</div>
);
};
src/components/LoginPage/index.jsx
+1 -1
View File
@@ -225,7 +225,7 @@ class LoginPageContainer extends React.Component {
...this.state,
email: "",
}));
this.loginWithToken();
// this.loginWithToken();
};
render() {
src/reducers/user.ts
+27
View File
@@ -0,0 +1,27 @@
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { UserType } from "../types/user";
interface UserStateType {
user?: null | UserType;
loggedIn: boolean;
}
const initialState: UserStateType = {
user: null,
loggedIn: false,
};
const userSlice = createSlice({
name: "selected",
initialState,
reducers: {
setUser: (state, action: PayloadAction<UserType>) => {
state.user = action.payload;
state.loggedIn = true;
},
},
});
export const { setUser } = userSlice.actions;
export default userSlice.reducer;
src/routers/PrivateRoute.jsx
+3 -1
View File
@@ -1,9 +1,11 @@
import React from "react";
import { connect, useSelector } from "react-redux";
import { Route, Navigate, useLocation } from "react-router-dom";
import { useAppSelector } from "../hooks/store";
const PrivateRoute = ({ children }) => {
const isAuthenticated = useSelector((state) => !!state.auth.id);
const isAuthenticated = useAppSelector((state) => state.user.loggedIn);
console.log("isAuthenticated", isAuthenticated);
const location = useLocation();
if (!isAuthenticated) {
return <Navigate to="/" state={{ from: location }} />;
src/store/configureStore.ts
+2
View File
@@ -20,6 +20,7 @@ import uploadStorageSwitcherReducer from "../reducers/uploadStorageSwitcher";
import mobileContextMenuReducer from "../reducers/mobileContextMenu";
import selectedReducer from "../reducers/selected";
import leftSectionReducer from "../reducers/leftSection";
import userReducer from "../reducers/user";
//const composeEnchancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
@@ -34,6 +35,7 @@ const store = configureStore({
leftSection: leftSectionReducer,
// selectedItem: selectedItemReducer,
uploads: uploadsReducer,
user: userReducer,
// storage: storageReducer,
// quickFiles: quickFilesReducer,
// popupFile: popupFilesReducer,
src/types/user.ts
+5
View File
@@ -0,0 +1,5 @@
export interface UserType {
name: string;
email: string;
emailVerified?: boolean;
}