Skip to content

Commit

Permalink
Merge pull request #147 from Cavdy/ft-user-should-be-able-to-upload-p…
Browse files Browse the repository at this point in the history 
…rofile-picture-165957638

#165957638 User should be able to upload profile picture
  • Loading branch information
@Cavdy
Cavdy committed May 15, 2019
2 parents 7d2e364 + f151617 commit f503f18
Show file tree
Hide file tree
Showing 5 changed files with 133 additions and 48 deletions.
45 changes: 44 additions & 1 deletion frontend-app/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -334,7 +334,8 @@ body,

.header .user-nav-user-photo {
height: 2.5rem;
border-radius: 50%;
width: 2.5rem;
border-radius: 100%;
margin-right: .5rem;
}

Expand Down Expand Up @@ -1229,6 +1230,48 @@ body,
color: var(--color-blue-2);
}

/*
==========================
Animate Form Field
==========================
*/
.form-case {
display: flex;
flex-direction: column;
}

.input-form-form {
transition: transform .8s ease-in-out, opacity .4s ease-in-out, visibility .4s ease-in-out, height .4s ease-in-out;
}
.animate-form {
transform: scale(-1);
opacity: 0;
visibility: hidden;
height: 0;
}

.avatar {
transform: scale(1);
transition: all 1s ease-in-out;
}
.animate-avatar {
visibility: hidden;
transform: scale(-1);
opacity: .7;
height: 0;
}

.display-avatar {
width: 10rem;
height: 10rem;
}

#avatar {
width: 100%;
border: 1px solid var(--color-blue-2);
padding: .5rem 0 .5rem .5rem;
}

/*
=======================
Responsiveness
Expand Down
5 changes: 5 additions & 0 deletions frontend-app/js/dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ const api = 'https://bankaapp-api.herokuapp.com/api/v1';
const token = sessionStorage.getItem('token');
const email = sessionStorage.getItem('email');
const login = localStorage.getItem('login');
const avatar = sessionStorage.getItem('avatar');
const accountSelect = document.querySelector('.accounts-select');
const submit = document.querySelector('#submit');
const accountName = document.querySelector('#username');
Expand All @@ -18,6 +19,7 @@ const accountsElement = document.querySelector('.accounts');
const dashboard = document.querySelector('.dashboard-wrapper');
const welcomeUser = document.querySelector('.welcome-user');
const errMsg = document.querySelector('.errMsg');
const pImage = document.querySelector('.user-nav-user-photo');

lastLogin.innerHTML = login;

Expand Down Expand Up @@ -85,9 +87,12 @@ const getAccountsApi = (url) => {
.then((data1) => {
if (data1.status === 404) {
loader.style.display = 'none';
console.log(avatar);
pImage.src = `https://bankaapp-api.herokuapp.com/${avatar}`;
errMsg.innerHTML = 'you don\'t have an account, create <a href="./createaccount.html">one</a>';
errMsg.parentElement.style.display = 'flex';
} else {
pImage.src = `https://bankaapp-api.herokuapp.com/${avatar}`;
loader.style.display = 'none';
errMsg.parentElement.style.display = 'none';
// set the dahsboard hidden
Expand Down
1 change: 1 addition & 0 deletions frontend-app/js/signin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,7 @@ const postApi = (url, data) => {
sessionStorage.setItem('email', data1.data.email);
sessionStorage.setItem('id', data1.data.id);
sessionStorage.setItem('login', login);
sessionStorage.setItem('avatar', data1.data.avatar);
getUserApi(`${api}/users/${data1.data.id}`);
}
});
Expand Down
54 changes: 37 additions & 17 deletions frontend-app/js/signup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,17 @@ const password = document.querySelector('#password');
const errorFname = document.querySelector('.errorfname');
const errorLname = document.querySelector('.errorlname');
const errorEmail = document.querySelector('.erroremail');
const avatar = document.querySelector('.avatar');
const avatarImage = document.querySelector('#avatar');
const inputForm = document.querySelector('.input-form-form');
const errorPassword = document.querySelector('.errorpassword');
const submit = document.querySelector('#submit');
const next = document.querySelector('#next');
const loader = document.querySelector('#loader');
let fnamePassed, lnamePassed, emailPassed, passwordPassed;
const togglePassword = document.querySelector('.toggle-password-button');
const see = document.querySelector('#see');
const unsee = document.querySelector('#unsee');
const date = new Date();
const login = `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`;

const fnameChecker = () => {
if (!fnameAndLnameRegex.test(firstName.value)
Expand All @@ -33,7 +35,7 @@ const fnameChecker = () => {
};

firstName.addEventListener('keyup', fnameChecker);
submit.addEventListener('click', fnameChecker);
next.addEventListener('click', fnameChecker);

const lnameChecker = () => {
if (!fnameAndLnameRegex.test(lastName.value)
Expand All @@ -48,7 +50,7 @@ const lnameChecker = () => {
};

lastName.addEventListener('keyup', lnameChecker);
submit.addEventListener('click', lnameChecker);
next.addEventListener('click', lnameChecker);

const emailChecker = () => {
if (!emailRegex.test(email.value)
Expand All @@ -62,7 +64,7 @@ const emailChecker = () => {
}
};
email.addEventListener('keyup', emailChecker);
submit.addEventListener('click', emailChecker);
next.addEventListener('click', emailChecker);

const passwordChecker = () => {
if (!passwordRegex.test(password.value)
Expand All @@ -77,7 +79,7 @@ const passwordChecker = () => {
}
};
password.addEventListener('keyup', passwordChecker);
submit.addEventListener('click', passwordChecker);
next.addEventListener('click', passwordChecker);

// POST FETCH API REQUEST
const postApi = (url, data) => {
Expand All @@ -86,12 +88,9 @@ const postApi = (url, data) => {
mode: 'cors',
cache: 'no-cache',
credentials: 'same-origin',
headers: {
'Content-Type': 'application/json',
},
redirect: 'follow',
referrer: 'no-referrer',
body: JSON.stringify(data),
body: data,
})
.then(response => response.json())
.then((data1) => {
Expand All @@ -115,19 +114,28 @@ const postApi = (url, data) => {
});
};

avatarImage.addEventListener('change', () => {
const oFReader = new FileReader();
oFReader.readAsDataURL(avatarImage.files[0]);
oFReader.onload = (oFREvent) => {
document.querySelector('.display-avatar').src = oFREvent.target.result;
};
});

submit.addEventListener('click', (e) => {
e.preventDefault();

if (fnamePassed === true
&& lnamePassed === true
&& emailPassed === true
&& passwordPassed === true) {
loader.style.display = 'flex';
const signupData = {
firstName: firstName.value,
lastName: lastName.value,
email: email.value,
password: password.value,
};
const signupData = new FormData();
signupData.append('firstName', firstName.value);
signupData.append('lastName', lastName.value);
signupData.append('email', email.value);
signupData.append('password', password.value);
signupData.append('avatar', avatarImage.files[0]);
postApi(`${api}/auth/signup`, signupData);
}
});
Expand All @@ -144,4 +152,16 @@ togglePassword.addEventListener('click', (e) => {
see.style.display = 'none';
unsee.style.display = 'block';
}
});
});

next.addEventListener('click', (e) => {
e.preventDefault();

if (fnamePassed === true
&& lnamePassed === true
&& emailPassed === true
&& passwordPassed === true) {
inputForm.classList.add('animate-form');
avatar.classList.remove('animate-avatar');
}
});
76 changes: 46 additions & 30 deletions frontend-app/register.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,39 +33,55 @@ <h1 class="showcase-title">
</h1>
</div>
<div class="showcase-body-right">
<form action="" class="form">
<div class="form-group">
<label for="firstname" class="form-label">First Name</label>
<input type="text" placeholder="First Name" id="firstname" class="form-input">
<p class="errorfname"></p>
</div>
<div class="form-group">
<label for="lastname" class="form-label">Last Name</label>
<input type="text" placeholder="Last Name" id="lastname" class="form-input">
<p class="errorlname"></p>
</div>
<div class="form-group">
<label for="email" class="form-label">Email</label>
<input type="text" placeholder="Email Address" id="email" class="form-input">
<p class="erroremail"></p>
</div>
<div class="form-group">
<label for="password" class="form-label">Password</label>
<div class="fom-input">
<input type="password" placeholder="Password" id="password" class="form-input">
<button class="toggle-password-button">
<svg class="toggle-password-icon" id="see">
<use xlink:href="./svg/sprite.svg#icon-eye"></use>
</svg>
<svg class="toggle-password-icon" id="unsee">
<use xlink:href="./svg/sprite.svg#icon-eye-blocked"></use>
</svg>
</button>
<form action="" class="form form-case">
<div class="input-form-form">
<div class="form-group">
<label for="firstname" class="form-label">First Name</label>
<input type="text" placeholder="First Name" id="firstname" class="form-input">
<p class="errorfname"></p>
</div>
<div class="form-group">
<label for="lastname" class="form-label">Last Name</label>
<input type="text" placeholder="Last Name" id="lastname" class="form-input">
<p class="errorlname"></p>
</div>
<p class="errorpassword"></p>
<div class="form-group">
<label for="email" class="form-label">Email</label>
<input type="text" placeholder="Email Address" id="email" class="form-input">
<p class="erroremail"></p>
</div>
<div class="form-group">
<label for="password" class="form-label">Password</label>
<div class="fom-input">
<input type="password" placeholder="Password" id="password" class="form-input">
<button class="toggle-password-button">
<svg class="toggle-password-icon" id="see">
<use xlink:href="./svg/sprite.svg#icon-eye"></use>
</svg>
<svg class="toggle-password-icon" id="unsee">
<use xlink:href="./svg/sprite.svg#icon-eye-blocked"></use>
</svg>
</button>
</div>
<p class="errorpassword"></p>
</div>

<input type="submit" id="next" class="btn btn-block btn-primary" value="Next">
</div>

<input type="submit" id="submit" class="btn btn-block btn-primary" value="Register">
<div class="avatar animate-avatar">
<div class="avatar-upload">
<label for="avatar" class="form-label">Profile Picture</label>
<br />
<input type="file" name="avatar" id="avatar" accept="image/*">
<br /> <br />
<p>We accept only .png and .jpg format and shouldn't be more than 5mb</p>
</div>
<br />
<img src="" class="display-avatar" alt="">
<br />
<input type="submit" id="submit" class="btn btn-block btn-primary" value="Register">
</div>
</form>
</div>
</main>
Expand Down

0 comments on commit f503f18

Please sign in to comment.