mirror of
https://github.com/rjNemo/devbook_ts
synced 2026-06-12 13:36:43 +00:00
edit profile
This commit is contained in:
parent
06d3c9df33
commit
9e95ca7f88
7 changed files with 143 additions and 18 deletions
|
|
@ -26,6 +26,11 @@ describe('App Router', () => {
|
|||
cy.get('section');
|
||||
});
|
||||
|
||||
it('contains Edit Profile page', () => {
|
||||
cy.visit(ROUTES.EDIT_PROFILE);
|
||||
cy.get('section');
|
||||
});
|
||||
|
||||
it('contains Dashboard page', () => {
|
||||
cy.visit(ROUTES.DASHBOARD);
|
||||
cy.get('section');
|
||||
|
|
|
|||
|
|
@ -7,4 +7,5 @@ export const SIGN_UP: string = '/signup';
|
|||
export const SIGN_IN: string = '/signin';
|
||||
export const DEVELOPERS: string = '/developers';
|
||||
export const PROFILE: string = '/profile';
|
||||
export const EDIT_PROFILE: string = '/edit-profile';
|
||||
export const DASHBOARD: string = '/dashboard';
|
||||
|
|
|
|||
|
|
@ -4,8 +4,6 @@ import {
|
|||
faUserCircle,
|
||||
faGraduationCap,
|
||||
faUserSlash,
|
||||
faCross,
|
||||
faTimes,
|
||||
} from '@fortawesome/free-solid-svg-icons';
|
||||
import {faBlackTie} from '@fortawesome/free-brands-svg-icons';
|
||||
import Header from '../components/Header';
|
||||
|
|
@ -42,7 +40,7 @@ const Dashboard: FC<DevFull> = () => {
|
|||
</thead>
|
||||
<tbody>
|
||||
{dev.experiences.map((exp: Experience, i: number) => (
|
||||
<tr>
|
||||
<tr key={i}>
|
||||
<td>{exp.company}</td>
|
||||
<td className="hide-sm">{exp.position}</td>
|
||||
<td className="hide-sm">{getTimePeriod(exp.from, exp.to)}</td>
|
||||
|
|
@ -66,7 +64,7 @@ const Dashboard: FC<DevFull> = () => {
|
|||
</thead>
|
||||
<tbody>
|
||||
{dev.educations.map((edu: Education, i: number) => (
|
||||
<tr>
|
||||
<tr key={i}>
|
||||
<td>{edu.school}</td>
|
||||
<td className="hide-sm">{edu.field}</td>
|
||||
<td className="hide-sm">{getTimePeriod(edu.from, edu.to)}</td>
|
||||
|
|
|
|||
119
src/pages/EditProfile.tsx
Normal file
119
src/pages/EditProfile.tsx
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
import React from 'react';
|
||||
import Header from '../components/Header';
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
||||
import {
|
||||
faTwitter,
|
||||
faFacebook,
|
||||
faYoutube,
|
||||
faLinkedin,
|
||||
faInstagram,
|
||||
} from '@fortawesome/free-brands-svg-icons';
|
||||
|
||||
const EditProfile = () => {
|
||||
return (
|
||||
<section className="container">
|
||||
<Header
|
||||
title="Create your profile"
|
||||
lead="Let's get some information to make your profile stand out"
|
||||
/>
|
||||
<small>* marks required fields</small>
|
||||
|
||||
<form className="form">
|
||||
<div className="form-group">
|
||||
<select name="status" required>
|
||||
<option value="0">* Select Professional Status</option>
|
||||
<option value="Developer">Developer</option>
|
||||
<option value="Junior Developer">Junior Developer</option>
|
||||
<option value="Senior Developer">Senior Developer</option>
|
||||
<option value="Manager">Manager</option>
|
||||
<option value="Student or Learning">Student or Learning</option>
|
||||
<option value="Instructor">Instructor or Teacher</option>
|
||||
<option value="Intern">Intern</option>
|
||||
<option value="Other">Other</option>
|
||||
</select>
|
||||
<small className="form-text">
|
||||
Give us an idea of where you are at in your career
|
||||
</small>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<input type="text" placeholder="Company" name="company" />
|
||||
<small className="form-text">
|
||||
Could be your own company or one you work for
|
||||
</small>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<input type="text" placeholder="Website" name="website" />
|
||||
<small className="form-text">
|
||||
Could be your own or a company website
|
||||
</small>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<input type="text" placeholder="Location" name="location" />
|
||||
<small className="form-text">
|
||||
City & state suggested (eg. Boston, MA)
|
||||
</small>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<input type="text" placeholder="* Skills" name="skills" required />
|
||||
<small className="form-text">
|
||||
Please use comma separated values (eg. HTML,CSS,JavaScript,PHP)
|
||||
</small>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Github Username"
|
||||
name="githubusername"
|
||||
/>
|
||||
<small className="form-text">
|
||||
If you want your latest repos and a Github link, include your
|
||||
username
|
||||
</small>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<textarea placeholder="A short bio of yourself" name="bio"></textarea>
|
||||
<small className="form-text">Tell us a little about yourself</small>
|
||||
</div>
|
||||
|
||||
<div className="my-2">
|
||||
<button type="button" className="btn btn-light">
|
||||
Add Social Network Links
|
||||
</button>
|
||||
<span>Optional</span>
|
||||
</div>
|
||||
|
||||
<div className="form-group social-input">
|
||||
<FontAwesomeIcon icon={faFacebook} size="2x" />
|
||||
<input type="text" placeholder="Facebook URL" name="facebook" />
|
||||
</div>
|
||||
|
||||
<div className="form-group social-input">
|
||||
<FontAwesomeIcon icon={faInstagram} size="2x" />
|
||||
<input type="text" placeholder="Instagram URL" name="instagram" />
|
||||
</div>
|
||||
|
||||
<div className="form-group social-input">
|
||||
<FontAwesomeIcon icon={faLinkedin} size="2x" />
|
||||
<input type="text" placeholder="Linkedin URL" name="linkedin" />
|
||||
</div>
|
||||
|
||||
<div className="form-group social-input">
|
||||
<FontAwesomeIcon icon={faTwitter} size="2x" />
|
||||
<input type="text" placeholder="Twitter URL" name="twitter" />
|
||||
</div>
|
||||
|
||||
<div className="form-group social-input">
|
||||
<FontAwesomeIcon icon={faYoutube} size="2x" />
|
||||
<input type="text" placeholder="YouTube URL" name="youtube" />
|
||||
</div>
|
||||
|
||||
<input type="submit" className="btn btn-primary my-1" value="Submit" />
|
||||
<a className="btn btn-light my-1" href="dashboard.html">
|
||||
Go Back
|
||||
</a>
|
||||
</form>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditProfile;
|
||||
|
|
@ -5,6 +5,7 @@ import SignUp from '../pages/SignUp';
|
|||
import SignIn from '../pages/SignIn';
|
||||
import Developers from '../pages/Developers';
|
||||
import Profile from '../pages/Profile';
|
||||
import EditProfile from '../pages/EditProfile';
|
||||
import Dashboard from '../pages/Dashboard';
|
||||
import * as ROUTES from '../constants/routes';
|
||||
|
||||
|
|
@ -15,6 +16,7 @@ const Router: FC = () => (
|
|||
<Route exact path={ROUTES.SIGN_IN} component={SignIn} />
|
||||
<Route exact path={ROUTES.DEVELOPERS} component={Developers} />
|
||||
<Route exact path={ROUTES.PROFILE} component={Profile} />
|
||||
<Route exact path={ROUTES.EDIT_PROFILE} component={EditProfile} />
|
||||
<Route exact path={ROUTES.DASHBOARD} component={Dashboard} />
|
||||
</Switch>
|
||||
);
|
||||
|
|
|
|||
14
src/static/css/style.min.css
vendored
14
src/static/css/style.min.css
vendored
|
|
@ -316,23 +316,23 @@
|
|||
.form .social-input {
|
||||
display: flex;
|
||||
}
|
||||
.form .social-input i {
|
||||
.form .social-input svg {
|
||||
padding: 0.5rem;
|
||||
width: 4rem;
|
||||
width: 3rem;
|
||||
}
|
||||
.form .social-input i.fa-twitter {
|
||||
.form .social-input svg.fa-twitter {
|
||||
color: #38a1f3;
|
||||
}
|
||||
.form .social-input i.fa-facebook {
|
||||
.form .social-input svg.fa-facebook {
|
||||
color: #3b5998;
|
||||
}
|
||||
.form .social-input i.fa-instagram {
|
||||
.form .social-input svg.fa-instagram {
|
||||
color: #3f729b;
|
||||
}
|
||||
.form .social-input i.fa-youtube {
|
||||
.form .social-input svg.fa-youtube {
|
||||
color: #c4302b;
|
||||
}
|
||||
.form .social-input i.fa-linkedin {
|
||||
.form .social-input svg.fa-linkedin {
|
||||
color: #0077b5;
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
|
|
|
|||
|
|
@ -7,10 +7,10 @@
|
|||
margin-top: 0.3rem;
|
||||
color: #888;
|
||||
}
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="password"],
|
||||
input[type="date"],
|
||||
input[type='text'],
|
||||
input[type='email'],
|
||||
input[type='password'],
|
||||
input[type='date'],
|
||||
select,
|
||||
textarea {
|
||||
display: block;
|
||||
|
|
@ -21,16 +21,16 @@
|
|||
border-radius: 0.3rem;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
input[type='submit'] {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.social-input {
|
||||
display: flex;
|
||||
|
||||
i {
|
||||
svg {
|
||||
padding: 0.5rem;
|
||||
width: 4rem;
|
||||
width: 3rem;
|
||||
|
||||
&.fa-twitter {
|
||||
color: #38a1f3;
|
||||
|
|
|
|||
Loading…
Reference in a new issue