Skip to content
This repository has been archived by the owner on Jul 6, 2020. It is now read-only.

Modify the user profile to the current theme of EvalAI #162

Merged
merged 9 commits into from
Jul 19, 2019
Merged

Modify the user profile to the current theme of EvalAI #162

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
dcf4467
Modify the user profile to the current theme of EvalAI
Sanji515 Jul 4, 2019
8bc3879
resolved conflicts and added styles for input type password
Sanji515 Jul 19, 2019
8ed1c16
Merge branch 'master' into profile-page
Sanji515 Jul 19, 2019
08d8c7c
Merge branch 'master' into profile-page
lunayach Jul 19, 2019
0dbb682
Merge branch 'master' into profile-page
Sanji515 Jul 19, 2019
9c09da6
simplified the code in modal and input ts file and added missing div …
Sanji515 Jul 19, 2019
ce3948b
Merge branch 'profile-page' of https://github.com/Sanji515/EvalAI-ngx…
Sanji515 Jul 19, 2019
070ad4b
change the field from newPassword2 and simplify the conditions
Sanji515 Jul 19, 2019
c194d7f
resolved flake8 errors
Sanji515 Jul 19, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
163 changes: 93 additions & 70 deletions src/app/components/profile/profile.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,77 +1,100 @@
<app-header-static></app-header-static>

<div class="container-top profile-container">
<div class="card">
<div class="item">
<img class="profile-photo" src="assets/images/profile.png" />
</div>
<div class="item">
<div class="dark">
{{user.username}}
<div class="mid-container">
<div class="container-top profile-container">
<div class="align-center">
<img class="profile-photo" src="assets/images/profile.png" />
</div>
<div>
{{user.email}}
</div>
</div>
<div class="item">
<div>
First Name
<div class="item">
<div class="content fw-regular">
{{user.username}}
</div>
<div class="fs-15">
{{user.email}}
</div>
</div>
<div class="dark">
{{user.first_name}}
<div class="user-details">
<div class="item">
<span class="text-light-black fw-semibold fs-12">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Profile page design can be improved.

First Name<br>
</span>
<div class="content fw-regular">
{{user.first_name}}
</div>
</div>
<div class="item">
<span class="text-light-black fw-semibold fs-12">
Last Name<br>
</span>
<div class="content fw-regular">
{{user.last_name}}
</div>
</div>
<div class="item">
<span class="text-light-black fw-semibold fs-12">
Affiliated to<br>
</span>
<div class="content fw-regular">
{{user.affiliation}}
</div>
</div>
</div>
</div>
<div class="item">
<div>
Last Name
</div>
<div class="dark">
{{user.last_name}}
</div>
</div>
<div class="item">
<div>
Affiliated to
</div>
<div class="dark">
{{user.affiliation}}
</div>
</div>
<div class="item">
<div class="red">Profile Completed</div>
<div class="dark">{{pcomp}}</div>
</div>
<div class="item">
<span class="btn btn-filter selected" (click) = "isTokenModalVisible = true;">Get your Auth Token</span>
</div>
<hr>
<div class="item">
<span (click)="updatePassword()" class="btn btn-filter selected">Change Password</span>
<span (click)="updateUserDetails()" class="btn btn-filter red">Update Profile</span>
</div>
</div>

<div class="modal-container" [class.hidden]="!isTokenModalVisible">
<div class="modal-card">
<div class="title">
API Authentication Token
</div>
<div class="form row">
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
<app-input [label]="'token'" [placeholder]="'Auth Token'" [type]="'password'" [theme]="'dark'" [value]="token" [readonly]="true" #formtoken></app-input>
</div>
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 btn btn-filter selected copy" (click)="copyToken()">
<i class="fas fa-copy"></i>
</div>
</div>
<div class="buttons">
<span class="btn btn-filter" (click)="isTokenModalVisible = false;">Cancel</span>
<span class="btn btn-filter" (click)="downloadToken()">Download JSON</span>
<span class="btn btn-filter selected" (click)="tokenModalButtonToggle()">{{tokenModalButton}}</span>
</div>
</div>
</div>
</div>
<div class="item">
<div class="highlight">
<span class="fw-regular fs-14">Profile Completed</span>
<br> <span class="text-med-black">{{pcomp}}</span>
<div>
</div>
<br>
<br>
<div class="item">
<button class="btn btn-waves-effect waves-dark grad-btn grad-btn-dark
fs-16" (click)="isTokenModalVisible= true;">Get your Auth Token</button>
</div>
<div class="item change-password">
<a (click)="updatePassword()" class="dark-link pointer">
<strong class="fw-semibold fs-15 change-password-text">Change Password</strong>
</a>
<button (click)="updateUserDetails()" class="btn btn-waves-effect
waves-dark grad-btn grad-btn-dark fs-16">Update Profile</button>
</div>
RishabhJain2018 marked this conversation as resolved.
Show resolved Hide resolved

<div class="modal-container" [class.hidden]="!isTokenModalVisible">
<div class="modal-card">
<div class="title">
API Authentication Token
</div>
<div class="form row">
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
<app-input [label]="'token'" [placeholder]="'Auth Token'"
[type]="'password'" [theme]="'dark'" [value]="token" [readonly]="true"
#formtoken></app-input>
</div>
<button class="col-lg-1 col-md-1 col-sm-1 col-xs-1 btn ev-btn-dark
btn-waves-effect waves-dark grad-btn code-btn"
(click)="copyToken()">
<i class="fa fa-clipboard" aria-hidden="true" alt="Copy to clipboard."></i>
</button>
</div>
<ul class="inline-list">
<li>
<a (click)="isTokenModalVisible= false;" class="dark-link pointer">
<strong class="fw-semibold fs-15">Cancel</strong>
</a>
</li>
<li>
<a (click)="downloadToken()" class="dark-link pointer">
<strong class="fw-semibold fs-15">Download JSON</strong>
</a>
</li>
<li>
<span class="btn btn-waves-effect waves-dark grad-btn grad-btn-dark
fs-14" (click)="tokenModalButtonToggle()">{{tokenModalButton}}</span>
</li>
</ul>
</div>
</div>
</div>
</div>

<app-footer></app-footer>
<app-footer></app-footer>
114 changes: 72 additions & 42 deletions src/app/components/profile/profile.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,82 @@
@import './variables.scss';
@import './mixins.scss';

.profile-container {
.card {
background: $gray-lighter;
padding-bottom:30px;
width:50%;
margin:0 auto;
}
font-size:$fs-16;
font-weight: $fw-light;
color:$gray-dark;
margin:30px;
.mid-container {
background-color: #fafafa;
.profile-container {
.card {
background: $gray-lighter;
padding-bottom:30px;
width:50%;
margin:0 auto;
}
font-size:$fs-16;
font-weight: $fw-light;
color:$gray-dark;
margin:30px;

.dark {
color:$gray-darker;
}
.red {
color: $red-light;
}
.item {
margin:20px;
text-align:center;
}
.profile-photo {
height:100px;
border-radius:50%;
@include box-shadow(0px, 0px, 5px, 0px, $overlay-light);
}
.modal-container {
&.hidden {
display:none;
.dark {
color:$gray-darker;
}
.highlight {
color: $yellow;
}
.item {
margin-bottom: 13px;
text-align: center;
}
.item button {
padding-top: 10px;
padding-bottom: 10px;
}
.profile-photo {
height:80px;
border-radius:50%;
@include box-shadow(0px, 0px, 5px, 0px, $overlay-light);
}
.user-details {
margin-top: 14px;
margin-bottom: 14px;
}
.change-password {
margin-top: 60px;
margin-bottom: 14px;
.change-password-text {
margin-right: 20px;
margin-bottom: 12px;
}
}
.modal-container {
&.hidden {
display:none;
}
}
.copy {
background: none !important;
border: none !important;
color: $red-light !important;
font-size: $fs-24 !important;
i {
margin-left:-20px;
}
&:hover {
box-shadow:none !important;
color: $red-medium;
}
}

}
.copy {
background: none !important;
border: none !important;
color: $red-light !important;
font-size: $fs-24 !important;
i {
margin-left:-20px;
}
&:hover {
box-shadow:none !important;
color: $red-medium;
}
}
}

.modal-container{
.modal-card {
.title {
margin-bottom: 20px;
}
.code-btn {
margin-top: 15px;
}
}
}

@include screen-medium {
Expand Down
7 changes: 7 additions & 0 deletions src/app/components/profile/profile.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,20 +151,23 @@ export class ProfileComponent implements OnInit {
{
isRequired: true,
label: 'first_name',
name: 'update_first_name',
placeholder: 'First Name',
type: 'text',
value: this.user['first_name']
},
{
isRequired: true,
label: 'last_name',
name: 'update_last_name',
placeholder: 'Last Name',
type: 'text',
value: this.user['last_name']
},
{
isRequired: true,
label: 'affiliation',
name: 'update_affiliation',
placeholder: 'Affiliated To',
type: 'text',
value: this.user['affiliation']
Expand Down Expand Up @@ -224,24 +227,28 @@ export class ProfileComponent implements OnInit {
const PARAMS = {
title: 'Change Password',
content: '',
isButtonDisabled: true,
confirm: 'Submit',
deny: 'Cancel',
form: [
{
isRequired: true,
label: 'old_password',
name: 'old_password',
placeholder: 'Old Password*',
type: 'password'
},
{
isRequired: true,
label: 'new_password1',
name: 'new_password1',
placeholder: 'New Pasword*',
type: 'password'
},
{
isRequired: true,
label: 'new_password2',
name: 'new_password2',
placeholder: 'New Password (Again)*',
type: 'password'
}
Expand Down
3 changes: 2 additions & 1 deletion src/app/components/utility/input/input.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@
font-size: .9em;
}

input[type=text] {
input[type=text]
input[text=password] {
background-color: transparent;
border: none;
border-bottom: 1px solid #9e9e9e;
Expand Down
Loading