diff --git a/__tests__/app/components/EditPassword.test.tsx b/__tests__/app/components/EditPassword.test.tsx index 08c8734a..f9f9b8af 100644 --- a/__tests__/app/components/EditPassword.test.tsx +++ b/__tests__/app/components/EditPassword.test.tsx @@ -1,5 +1,5 @@ import { EditPassword } from 'app/components/UserProfileModal/EditPassword'; -import { InputName, InputState } from 'app/types/UserProfileModal'; +import { InputName } from 'app/types/UserProfileModal'; import { mount } from 'enzyme'; import * as React from 'react'; @@ -12,11 +12,7 @@ describe('EditPassword Component', () => { onInputChange={(inputName: InputName, value: string) => { return; }} - inputEnabler={(inputState: InputState, value: boolean) => { - return; - }} editPasswordRef={React.createRef()} - listDisabled={{}} oldPassword={'oldPassword'} password={'password'} repeatPassword={'repeatPassword'} diff --git a/__tests__/app/components/__snapshots__/EditPassword.test.tsx.snap b/__tests__/app/components/__snapshots__/EditPassword.test.tsx.snap index 5d67493d..9b1346c9 100644 --- a/__tests__/app/components/__snapshots__/EditPassword.test.tsx.snap +++ b/__tests__/app/components/__snapshots__/EditPassword.test.tsx.snap @@ -17,43 +17,28 @@ exports[`EditPassword Component Should render 1`] = `
+
- +
- - -
- -
- Password should have minimum 5 characters. + Password should have minimum 5 characters. +
@@ -67,39 +52,29 @@ exports[`EditPassword Component Should render 1`] = `
+
- +
- - + Password should have minimum 5 characters. +
-
@@ -112,39 +87,29 @@ exports[`EditPassword Component Should render 1`] = `
+
- +
- - + Passwords should match. +
-
@@ -156,7 +121,6 @@ exports[`EditPassword Component Should render 1`] = ` > - + User Credentials
+
- +
- - - - -
- -
- Password should have minimum 5 characters. + Password should have minimum 5 characters. +
@@ -377,73 +228,30 @@ exports[`EditPassword Component Should render 1`] = `
+
- +
- - - - + Password should have minimum 5 characters. +
-
@@ -456,73 +264,30 @@ exports[`EditPassword Component Should render 1`] = `
+
- +
- - - - + Passwords should match. +
-
@@ -534,12 +299,6 @@ exports[`EditPassword Component Should render 1`] = ` > + viewBox="0 0 512 512" + xmlns="http://www.w3.org/2000/svg" + > + + + + + diff --git a/src/app/components/Authentication/Register.tsx b/src/app/components/Authentication/Register.tsx index 8797ceb5..890c01a2 100644 --- a/src/app/components/Authentication/Register.tsx +++ b/src/app/components/Authentication/Register.tsx @@ -192,7 +192,9 @@ export class Register extends React.Component - + {isStudent ? ( diff --git a/src/app/components/SideBar.tsx b/src/app/components/SideBar.tsx index b1716a4c..10bb20a6 100644 --- a/src/app/components/SideBar.tsx +++ b/src/app/components/SideBar.tsx @@ -18,6 +18,7 @@ import * as SideBarInterfaces from 'app/types/SideBar'; import classnames from 'classnames'; import * as React from 'react'; import { Button, ButtonGroup } from 'react-bootstrap'; +import { Routes } from 'app/routes'; export class Sidebar extends React.Component { public render() { @@ -119,9 +120,8 @@ export class Sidebar extends React.Component { ) : null} + User Credentials
-
- - - -
- onInputChange(InputName.oldPassword, e.target.value)} - required - disabled={listDisabled.isPasswordDisabled} - /> -
- Password should have minimum 5 characters. + +
+ onInputChange(InputName.oldPassword, e.target.value)} + required + /> +
+ Password should have minimum 5 characters. +
@@ -70,65 +56,56 @@ export class EditPassword extends React.Component
-
- - - + +
+ onInputChange(InputName.password, e.target.value)} + required + /> +
+ Password should have minimum 5 characters. +
- onInputChange(InputName.password, e.target.value)} - required - disabled={listDisabled.isPasswordDisabled} - /> - {listDisabled.isPasswordDisabled ? ( -
Passwords should match.
- ) : null}
-
- - - + +
+ onInputChange(InputName.repeatPassword, e.target.value)} + required + /> +
+ Passwords should match. +
- onInputChange(InputName.repeatPassword, e.target.value)} - required - disabled={listDisabled.isPasswordDisabled} - /> - {listDisabled.isPasswordDisabled ? ( -
Passwords should match.
- ) : null}
diff --git a/src/app/components/UserProfileModal/EditProfile.tsx b/src/app/components/UserProfileModal/EditProfile.tsx old mode 100644 new mode 100755 index c91e65a2..e80b480d --- a/src/app/components/UserProfileModal/EditProfile.tsx +++ b/src/app/components/UserProfileModal/EditProfile.tsx @@ -1,211 +1,171 @@ -import { faFlag, faPen, faUser, faUserTie } from '@fortawesome/free-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import * as styles1 from 'app/styles/Authentication.module.css'; import * as styles from 'app/styles/UserProfileModal.module.css'; +import 'app/styles/Flags.css'; import { Avatar } from 'app/types/Authentication/Register'; -import { InputName, InputState } from 'app/types/UserProfileModal'; +import { InputName } from 'app/types/UserProfileModal'; import * as EditProfileInterfaces from 'app/types/UserProfileModal/EditProfile'; import classnames from 'classnames'; import * as React from 'react'; -import { Row } from 'react-bootstrap'; // tslint:disable-next-line:import-name import ReactFlagsSelect from 'react-flags-select'; import 'react-flags-select/css/react-flags-select.css'; export class EditProfile extends React.Component { public render() { - const { handleEditProfile, onInputChange, inputEnabler } = this.props; + const { handleEditProfile, onInputChange } = this.props; const { editProfileRef, reactFlagRef } = this.props; const { - username, - listDisabled, - fullName, - country, + username: currentUsername, + fullName: currentFullName, + country: currentCountry, userDetails, avatar: currentAvatar, } = this.props; const avatars = Object.keys(Avatar); return ( -
- -
-
Basic Information
- -
-
-
-
- - - -
+
+
+
+
User Details
+
+ +
+
+
+ +
onInputChange(InputName.username, e.target.value)} pattern="[a-zA-Z0-9]+" required - disabled={listDisabled.isUserNameDisabled} /> -
- { - inputEnabler( - InputState.isUserNameDisabled, - !listDisabled.isUserNameDisabled, - ); - }} - > - - +
+ Username must have minimum 5 characters.
-
Username must have minimum 5 characters.
-
-
-
-
- - - -
+
+ +
+
+
+ +
onInputChange(InputName.fullName, e.target.value)} + value={currentFullName} + onChange={(e) => { + onInputChange(InputName.fullName, e.target.value); + }} required - disabled={listDisabled.isFullNameDisabled} /> -
- { - inputEnabler( - InputState.isFullNameDisabled, - !listDisabled.isFullNameDisabled, - ); - }} - > - - +
+ Name must have minimum 5 characters.
-
Name must have minimum 5 characters.
-
-
-
-
- - - -
+
+ +
+
+
+ +
onInputChange(InputName.country, countryCode) } ref={reactFlagRef} - disabled={listDisabled.isFlagSelectDisabled} /> -
- { - inputEnabler( - InputState.isFlagSelectDisabled, - !listDisabled.isFlagSelectDisabled, - ); - }} - > - - -
-
Please select a country.
+
+
+ Please select a country.
-
-
-
-
Edit your spirit animal
-
-
- {avatars.map((avatar: string) => ( -
{ - onInputChange(InputName.avatar, avatar); - }} - title={avatar} - > - { - // @ts-ignore - - } -
- ))} -
-
+
+ +
+
+
+ +
+
+ {avatars.map((avatar: string) => ( +
{ + onInputChange(InputName.avatar, avatar); + }} + title={avatar} + > + { + // @ts-ignore + + } +
+ ))} +
-
-
+
+ +
+
+
+ {userDetails.errorMessage != '' ? ( +
+ {userDetails.errorMessage} +
+ ) : null}
- -
- +
+ +
); } diff --git a/src/app/components/UserProfileModal/index.tsx b/src/app/components/UserProfileModal/index.tsx old mode 100644 new mode 100755 index 20c229dc..ff304a9f --- a/src/app/components/UserProfileModal/index.tsx +++ b/src/app/components/UserProfileModal/index.tsx @@ -4,8 +4,9 @@ import * as styles from 'app/styles/UserProfileModal.module.css'; import * as UserProfileInterfaces from 'app/types/UserProfileModal'; import classnames from 'classnames'; import * as React from 'react'; -import { Col, Grid, Row } from 'react-bootstrap'; -// tslint:disable-next-line:import-name +import { Grid, Row } from 'react-bootstrap'; +import { Redirect } from 'react-router-dom'; +// tslint:disable-next-line import ReactFlagsSelect from 'react-flags-select'; export class UserProfileModal extends React.Component< @@ -23,12 +24,7 @@ export class UserProfileModal extends React.Component< avatar: userDetails.country, country: userDetails.country, fullName: userDetails.fullName, - listDisabled: { - isFlagSelectDisabled: true, - isFullNameDisabled: true, - isPasswordDisabled: true, - isUserNameDisabled: true, - }, + isPasswordPage: true, oldPassword: '', password: '', repeatPassword: '', @@ -37,22 +33,6 @@ export class UserProfileModal extends React.Component< this.props.getUserDetails(); } - public componentWillReceiveProps(nextProps: UserProfileInterfaces.Props) { - const { country, username, fullName, avatar } = this.state; - const { userDetails } = nextProps; - this.setState({ - avatar: userDetails.avatar !== avatar ? userDetails.avatar : avatar, - country: userDetails.country !== country ? userDetails.country : country, - fullName: userDetails.fullName !== fullName ? userDetails.fullName : fullName, - username: userDetails.username !== country ? username : userDetails.username, - }); - if (this.reactFlagRef.current) { - this.reactFlagRef.current.updateSelected( - userDetails.country !== country ? userDetails.country : country, - ); - } - } - public render() { const { fullName, @@ -61,75 +41,84 @@ export class UserProfileModal extends React.Component< oldPassword, password, repeatPassword, - listDisabled, avatar, } = this.state; const { userDetails } = this.props; return ( - - USER DETAILS - -
- + + {this.state.isPasswordPage ? ( + ) : ( + )} + + + { + this.setState((prevState) => ({ + isPasswordPage: !prevState.isPasswordPage, + })); + }} + > + {this.state.isPasswordPage ? 'Want to change Credentials?' : 'Want to change Info?'} + + + {this.state.isPasswordPage ? ( + + {this.props.userDetails.errorMessage === 'Unauthorised' ? ( + + ) : ( +

{''}

+ )} -
+ ) : null} ); } private handleEditProfile = (event: React.FormEvent) => { const { editUserProfile } = this.props; - const { country, fullName, username, listDisabled, avatar } = this.state; + const { country, fullName, username, avatar } = this.state; const form = this.editProfileRef.current; event.preventDefault(); if (form) { if (form.checkValidity()) { editUserProfile({ - ...(!listDisabled.isFlagSelectDisabled && { country }), - ...(!listDisabled.isFullNameDisabled && { fullName }), - ...(!listDisabled.isUserNameDisabled && { username }), avatar, - }); - - this.setState({ - listDisabled: { - ...listDisabled, - // isEmailDisabled: true, - isFlagSelectDisabled: true, - isFullNameDisabled: true, - isUserNameDisabled: true, - }, + country, + fullName, + username, }); } form.classList.add('was-validated'); @@ -138,26 +127,18 @@ export class UserProfileModal extends React.Component< private handleEditPassword = (event: React.FormEvent) => { const { editUserPassword } = this.props; - const { oldPassword, repeatPassword, password, listDisabled } = this.state; + const { oldPassword, repeatPassword, password } = this.state; const form = this.editPasswordRef.current; event.preventDefault(); if (form) { if (form.checkValidity()) { - if (!listDisabled.isPasswordDisabled && password === repeatPassword) { + if (password === repeatPassword) { editUserPassword({ - ...(!listDisabled.isPasswordDisabled && { - oldPassword, - password, - }), + oldPassword, + password, }); } - this.setState({ - listDisabled: { - ...listDisabled, - isPasswordDisabled: true, - }, - }); } form.classList.add('was-validated'); } @@ -171,10 +152,6 @@ export class UserProfileModal extends React.Component< this.setState(this.updateInputState(inputName, value)); }; - private inputEnabler = (inputState: UserProfileInterfaces.InputState, value: boolean) => { - this.setState(this.updateListDisabledState(inputState, value)); - }; - private updateInputState = ( key: keyof UserProfileInterfaces.State, value: T, @@ -182,15 +159,4 @@ export class UserProfileModal extends React.Component< ...prevState, [key]: value, }); - - private updateListDisabledState = ( - key: keyof UserProfileInterfaces.ListDisabled, - value: T, - ) => (prevState: UserProfileInterfaces.State): UserProfileInterfaces.State => ({ - ...prevState, - listDisabled: { - ...prevState.listDisabled, - [key]: value, - }, - }); } diff --git a/src/app/index.tsx b/src/app/index.tsx index 570220fd..0a83d041 100644 --- a/src/app/index.tsx +++ b/src/app/index.tsx @@ -1,6 +1,8 @@ import Login from 'app/containers/Authentication/Login'; import Register from 'app/containers/Authentication/Register'; import Dashboard from 'app/containers/Dashboard'; +import Leaderboard from 'app/containers/Leaderboard'; +import UserProfileModal from 'app/containers/UserProfileModal'; import { Routes } from 'app/routes'; // @ts-ignore import { initializeRendererAssets } from 'codecharacter-renderer'; @@ -19,6 +21,8 @@ export const App = hot(module)(() => ( + + diff --git a/src/app/reducers/Dashboard.ts b/src/app/reducers/Dashboard.ts index a8fc0e12..32e6eb75 100644 --- a/src/app/reducers/Dashboard.ts +++ b/src/app/reducers/Dashboard.ts @@ -9,7 +9,6 @@ export enum SidePanelTab { MATCH = 'MATCH', NOTIFICATION = 'NOTIFICATION', NONE = 'NONE', - USER_EDIT = 'USER_EDIT', } const dashboardStoreIntialState: DashboardInterfaces.DashboardStoreState = { diff --git a/src/app/routes.ts b/src/app/routes.ts index 74ea5eb9..8ed19b53 100644 --- a/src/app/routes.ts +++ b/src/app/routes.ts @@ -2,4 +2,6 @@ export enum Routes { ROOT = '/', LOGIN = '/login', REGISTER = '/register', + LEADERBOARD = '/leaderboard', + USER_PROFILE_MODEL = '/profile', } diff --git a/src/app/styles/Authentication.module.css b/src/app/styles/Authentication.module.css old mode 100644 new mode 100755 index 471b94bb..0514c41e --- a/src/app/styles/Authentication.module.css +++ b/src/app/styles/Authentication.module.css @@ -163,20 +163,18 @@ margin-bottom: 10px; font-family: 'Poppins', sans-serif; } -.pragyan-login{ +.pragyan-login { font-family: 'Poppins'; font-size: 12px; margin-top: 0; } -.create-one-button{ +.create-one-button { color: #4630eb; cursor: pointer; text-decoration: none; } - - .login-input { height: 50px; border: 1px solid black; diff --git a/src/app/styles/CodeStatus.module.css b/src/app/styles/CodeStatus.module.css old mode 100644 new mode 100755 diff --git a/src/app/styles/CommitLog.module.css b/src/app/styles/CommitLog.module.css old mode 100644 new mode 100755 diff --git a/src/app/styles/CommitMessageBox.module.css b/src/app/styles/CommitMessageBox.module.css old mode 100644 new mode 100755 diff --git a/src/app/styles/Dashboard.css b/src/app/styles/Dashboard.css old mode 100644 new mode 100755 diff --git a/src/app/styles/Docs.module.css b/src/app/styles/Docs.module.css old mode 100644 new mode 100755 diff --git a/src/app/styles/EditorSettings.module.css b/src/app/styles/EditorSettings.module.css old mode 100644 new mode 100755 diff --git a/src/app/styles/Flags.css b/src/app/styles/Flags.css new file mode 100644 index 00000000..1a7bd71b --- /dev/null +++ b/src/app/styles/Flags.css @@ -0,0 +1,35 @@ +.flag-select { + display: flex !important; + align-items: center !important; + width: 100% !important; + border: 1px solid black !important; + text-align: left !important; +} + +.flag-options { + margin-top: 100px !important; +} + +.flag-select img { + width: 1.5em; + position: relative; + top: 0 !important; +} + +.flag-select .arrow-down { + padding: 0px !important; + position: absolute; + right: 10px; +} + +.flag-select .flag-option.has-label { + padding-left: 30% !important; +} + +.flag-select .flag-options { + width: 90% !important; +} + +.flag-select .filterBox input { + padding-left: 5px !important; +} diff --git a/src/app/styles/Leaderboard.module.css b/src/app/styles/Leaderboard.module.css old mode 100644 new mode 100755 diff --git a/src/app/styles/MatchView.module.css b/src/app/styles/MatchView.module.css old mode 100644 new mode 100755 diff --git a/src/app/styles/Notification.module.css b/src/app/styles/Notification.module.css old mode 100644 new mode 100755 diff --git a/src/app/styles/Pagination.css b/src/app/styles/Pagination.css old mode 100644 new mode 100755 diff --git a/src/app/styles/Register.css b/src/app/styles/Register.css old mode 100644 new mode 100755 index 5341b76b..298695b1 --- a/src/app/styles/Register.css +++ b/src/app/styles/Register.css @@ -5,18 +5,6 @@ border: 1px solid #ced4da; } -.flag-select img { - width: 1.5em; - position: relative; - top: 0 !important; -} - -.flag-select .arrow-down { - padding: 0px !important; - position: absolute; - right: 10px; -} - img { vertical-align: top !important; } @@ -34,7 +22,7 @@ input[type='checkbox'] { visibility: hidden; } -label { +.flaglabel { cursor: pointer; text-indent: -9999px; width: 35px; @@ -45,7 +33,7 @@ label { position: relative; } -label:after { +.flaglabel:after { content: ''; position: absolute; top: 1px; @@ -57,15 +45,26 @@ label:after { transition: 0.3s; } -input:checked + label { +input:checked + .flaglabel { background: #bada55; } -input:checked + label:after { +input:checked + .flaglabel:after { left: calc(100% - 1px); transform: translateX(-110%); } -label:active:after { +.flaglabel:active:after { width: 20px; } + +.input-group { + display: block !important; +} + +.labeltext { + color: rgba(0, 0, 32, 0.8); + font-size: 14px; + font-family: 'Montserrat', sans-serif; + font-weight: 600; +} diff --git a/src/app/styles/RunOptions.module.css b/src/app/styles/RunOptions.module.css old mode 100644 new mode 100755 diff --git a/src/app/styles/SidePanel.module.css b/src/app/styles/SidePanel.module.css old mode 100644 new mode 100755 diff --git a/src/app/styles/Sidebar.module.css b/src/app/styles/Sidebar.module.css old mode 100644 new mode 100755 diff --git a/src/app/styles/SubmitBar.module.css b/src/app/styles/SubmitBar.module.css old mode 100644 new mode 100755 diff --git a/src/app/styles/UserProfileModal.module.css b/src/app/styles/UserProfileModal.module.css old mode 100644 new mode 100755 index b4b13e61..0505d851 --- a/src/app/styles/UserProfileModal.module.css +++ b/src/app/styles/UserProfileModal.module.css @@ -118,13 +118,24 @@ .form { padding: 10px 25px; + width: 100%; + margin-left: 5%; +} + +.form1 { + padding: 10px 25px; + width: 85%; + margin-left: 12%; } .formHeading { padding: 0px 10px; - font-size: 20px; - border-bottom: 2px solid #ebebeb; - margin: 0 0 10px 0px; + font-size: 30px; + font-family: 'Poppins', sans-serif; + text-align: center; + margin-bottom: 5%; + margin-left: -1px; + width: 100%; } .avatar-select-container { @@ -187,3 +198,54 @@ .userEdit-wrap::-webkit-scrollbar-thumb { background-color: #ddd; } + +.editProfileElement { + overflow-x: hidden; + padding-left: 10px; + padding-right: 10px; + margin-left: 30%; + margin-top: 2%; +} + +.editPasswordElement { + overflow-x: hidden; + padding-left: 10px; + padding-right: 10px; + margin-left: 33%; + margin-top: 5%; +} + +.UsernameError { + width: 100%; + font-size: 85%; + color: #dc3545; + margin: 0px; + margin-bottom: 10px; +} + +.passwordInput { + display: flex; + flex-direction: column; +} + +.inputGroup { + display: flex; + flex-direction: column; +} + +.loginButton { + background-color: rgb(70, 48, 235); + border-color: rgb(70, 48, 235); + margin-bottom: 10px; + width: 100%; +} + +.loginPageLink { + cursor: pointer; + margin-left: 38%; +} + +.passwordPageLink { + cursor: pointer; + margin-left: 37%; +} diff --git a/src/app/styles/Welcome.module.css b/src/app/styles/Welcome.module.css old mode 100644 new mode 100755 diff --git a/src/app/types/UserProfileModal/EditPassword.ts b/src/app/types/UserProfileModal/EditPassword.ts index bbf73517..9cde6c5f 100644 --- a/src/app/types/UserProfileModal/EditPassword.ts +++ b/src/app/types/UserProfileModal/EditPassword.ts @@ -1,12 +1,10 @@ import * as UserInterfaces from 'app/types/User'; -import { InputName, InputState, ListDisabled } from 'app/types/UserProfileModal'; +import { InputName } from 'app/types/UserProfileModal'; import * as React from 'react'; export interface ElementOwnProps { handleEditPassword: (event: React.FormEvent) => void; onInputChange: (inputName: InputName, value: string) => void; - inputEnabler: (inputState: InputState, value: boolean) => void; editPasswordRef: React.Ref; - listDisabled: ListDisabled; userDetails: UserInterfaces.UserStoreState; oldPassword: string; password: string; diff --git a/src/app/types/UserProfileModal/EditProfile.ts b/src/app/types/UserProfileModal/EditProfile.ts index 76cea0ae..9401b752 100644 --- a/src/app/types/UserProfileModal/EditProfile.ts +++ b/src/app/types/UserProfileModal/EditProfile.ts @@ -1,5 +1,5 @@ import * as UserInterfaces from 'app/types/User'; -import { InputName, InputState, ListDisabled } from 'app/types/UserProfileModal'; +import { InputName } from 'app/types/UserProfileModal'; import * as React from 'react'; // tslint:disable-next-line:import-name import ReactFlagsSelect from 'react-flags-select'; @@ -7,11 +7,9 @@ import ReactFlagsSelect from 'react-flags-select'; export interface ElementOwnProps { handleEditProfile: (event: React.FormEvent) => void; onInputChange: (inputName: InputName, value: string) => void; - inputEnabler: (inputState: InputState, value: boolean) => void; editProfileRef: React.Ref; reactFlagRef: React.Ref; username: string; - listDisabled: ListDisabled; fullName: string; userDetails: UserInterfaces.UserStoreState; country: string; diff --git a/src/app/types/UserProfileModal/index.ts b/src/app/types/UserProfileModal/index.ts index 6571eb95..8bef86c9 100644 --- a/src/app/types/UserProfileModal/index.ts +++ b/src/app/types/UserProfileModal/index.ts @@ -5,13 +5,6 @@ export interface StateProps { userDetails: UserInterfaces.UserStoreState; } -export interface ListDisabled { - isUserNameDisabled?: boolean; - isFullNameDisabled?: boolean; - isFlagSelectDisabled?: boolean; - isPasswordDisabled?: boolean; -} - export interface State { avatar: string; username: string; @@ -20,7 +13,7 @@ export interface State { repeatPassword: string; country: string; fullName: string; - listDisabled: ListDisabled; + isPasswordPage: boolean; } export enum InputName { @@ -31,7 +24,6 @@ export enum InputName { repeatPassword = 'repeatPassword', country = 'country', fullName = 'fullName', - listDisabled = 'listDisabled', } export enum InputState { diff --git a/src/assets/index.html b/src/assets/index.html index f594f67f..d8607b27 100644 --- a/src/assets/index.html +++ b/src/assets/index.html @@ -4,6 +4,7 @@ + Code Character