Implementing User-name Update Functionality
The Badgeyay Ember JS frontend has many features like Login and Sign up features and Login with OAuth and the most important, the badge generation feature is also up and running. Now the next important thing from User perspective is that there should be a settings panel where user can see its account details like username, Email & password and he should be able to change them if he want to.
I have implemented the setting panel in Badgeyay where user can see his account details. In this blog, I will be discussing how I implemented Update Username functionality in my Pull Request so that the User can change his username at any point of time.
Let’s get started and understand it step by step.
Step 1:
Generate User account component with help of ember cli.
$ ember g component user-component/user-account
Step 2:
Make changes in Handlebar of User Account. We will be using semantic UI form for making the changes in Handlebars.
// user-account.hbs <h2 class="ui dividing header">Account</h2> <form class="ui form" {{action 'updateUserName' on="submit"}}>class="ui field"> Usernameclass="ui fields">class="ten wide field"> {{input type="text" id="profileName" name=profileName value=user.username}}</div> </div>class="ui field"> Emailclass="ui fields">class="ten wide disabled field"> {{input type="email" name=email value=user.email}}</div> </div> <button type="submit" class="ui basic orange button" tabindex="0" >Save Changes</button> </form>
We have used action on submitting the Form for changing and updating the username in Database and Firebase.
Step 3:
We will now define the action in user component JS file. We will also add the validations in Form so that empty form cannot be submitted to the server.
import Component from '@ember/component'; export default Component.extend({ init() { this._super(...arguments); }, actions: { updateUserName() { let profileName = this.get('profileName'); this.get('sendUserName')(profileName); } }, didRender() { this.$('.ui.form') .form({ inline : true, delay : false, fields : { username: { identifier : 'profileName', rules : [ { type : 'empty', prompt : 'Please enter a valid username' } ] } } }); }});
Step 4:
We will now configure the controller to customize the action that we have defined above.
……. export default Controller.extend({ routing : service('-routing'), notify : service('notify'), uid : '', actions : { …………... updateUserName(profileName) { const _this = this; const user = this.get('store').peekAll('user'); user.forEach(user_ => { _this.set('uid', user_.get('id')); }); _this.get('user').save(); _this.get('notify').success('Username Successfully Updated!'); } } });
Step 5:
We have configured the frontend for sending the details to backend. Now, we have to edit the endpoint so that if username is change in params, It should change the username and send the response with the updated username.
api/controllers/registerUser.py …………... if 'username' in data.keys(): user.username = data['username'] update_firebase_username(user.id, user.username) user.save_to_db()
Now, I am done with doing all the changes in backend API and Frontend.
Step 6:
Now run the Frontend & Backend to see the implemented changes.
User Account Panel
Now, we are done with implementation of Update Username Functionality.
Resources:
Implementing Pagination for listing Badges
Badgeyay project is divided into two parts i.e front-end with Ember JS and back-end with REST-API programmed in Python.
Badgeyay comes with many features for customising the process of generation of Badges. Badgeyay also keeps record of all the badges generated by user and also gives option to directly download the previously generated badges.
All the badges appear on single page which creates problem when a user has generated lot of badges and all the badges listed on single page.To resolve this issue and make Badgeyay more user friendly I have implemented pagination in listing badges so that if there are more number of badges, user can see the badges listed in multiple pages in my Pull Request.
To implement this, I have used actions and made the changes accordingly.
Let’s get started and understand it step by step.
Step 1:
We will use semantic icons in handlebars for changing pages.
Step 2:
I will add action for changing page to next and previous page.
// components/user-component/my-badges.js import Component from '@ember/component'; import Ember from 'ember'; const { inject } = Ember; export default Component.extend({ queryParams : ['page'], page : 1, notify : inject.service('notify'), actions : { nextPage() { // Action for Next Page let filter = {}; if (this.page > 1) { filter.page = this.page + 1; this.get('store').query('my-badges', filter) .then(records => { if (records.length > 0) { this.set('my-badges', records); this.set('page', this.page + 1); } else { this.notify.error('No More Badges found'); } }) .catch(err => { this.get('notify').error('Please try again!'); }); } else { this.notify.error('No More Badges Found'); } }, prevPage() { // Action for Previous Page let filter = {}; if (this.page - 1 > 0) { filter.page = this.page - 1; this.get('store').query('my-badges', filter) .then(records => { this.set('my-badges', records); this.set('page', this.page - 1); }) .catch(err => { this.get('notify').error('Please try again!'); }); } else { this.notify.error('No More Badges Found'); } } } });
Step 3:
Now, We have to make the query for all badges generated by a user on opening the my-badges route in Frontend.
import Route from '@ember/routing/route'; import Ember from 'ember'; const { set } = Ember; export default Route.extend({ beforeModel(transition) { this._super(...arguments); }, model(params) { let filter = {}; this.set('params', params); filter.state = 'all'; filter.page = params.page; return this.get('store').query('my-badges', filter); } });
I have implemented the pagination feature for listing all badges by the user.
Step 4:
Now run the server to see the implemented changes by following command.
My Badges Route with Pagination Feature:
Now we are done with implementing the pagination feature for listing all badges by the user.
Resources:
Customizing Ember CLI Notify for Badgeyay
Badgeyay project is divided into two parts i.e front-end with Ember JS and back-end with REST-API programmed in Python.
Badgeyay comes with many features for customising the process of generation of Badges. It gives freedom to user to choose Input Badge data which is to be printed on the individual badges, choosing the badge size, applying custom background to the badges and then optional features of font customization helps to generate cool badges.You have to just click on create badges and the generated badge with download link appear at bottom of form. But a problem arises with the generated badges link that after logout/login or generation of new badges just after creating badges one time, the link of the previously created badges is still there which is a bit confusing, as user might think the previous link to be the new link and press on that in order to download and find the old badges downloaded.
To resolve this issue, I have used the power of Ember notify library and customized it to show the generated badges link and disappear after a specified time in my Pull Request and after that user can always see his previously generated badges in My Badges route.
Let’s get started and understand it.
- Customizing Notify library and making the changes in the send Badge data function to show the generated badge link just after the completion of badge generation process.
import Controller from '@ember/controller'; import { inject as service } from '@ember/service'; export default Controller.extend({ .... routing : service('-routing'), notify : service('notify'), // importing Notify service ..... sendBadge(badgeData) { const _this = this; let badgeRecord = _this.get('store').createRecord('badge', badgeData); badgeRecord.save() .then(record => { _this.set('badgeGenerated', true); _this.set('genBadge', record); var notify = _this.get('notify'); var link = record.download_link; // Assigning download link to a variable var message = notify.success( // Configuring the message of notify service { html: // Adding the html in notify message 'Badge generated successfully.' + '<p>Visit this<b>' + '<a href=' + link + '> Link </a></b> to download badge.</p>', closeAfter: 10000 }); // Specifying the time of closing the message }) .catch(err => { _this.get('notify').error('Unable to generate badge'); }); },
I have implemented the customized notify function to show the badge generation link for a specific time.
- Now run the server to see the implemented changes by following command.
$ ember serve
- Ember Notify service showing the generated Badges link:
Now, I am done with the implementation of customised notify function to show the badge generation link for a specific time of 10 seconds.
Resources:
Implementing User Input guide and using Semantic-UI Tables
Badgeyay project is divided into two parts i.e front-end with Ember JS and back-end with REST-API programmed in Python.
Badgeyay comes with many features for customising the process of generation of Badges. It gives freedom to user to choose Input Badge data which is to be printed on the individual badges, choosing the badge size, applying custom background to the badges and then optional features of font customization helps to generate cool badges. If a helper is not there for the directions to use these features then these features may be difficult to use for a user.
To resolve this issue and make Badgeyay more user friendly I have implemented a User Guide to help user to go through the User Manual before generating Badges in my Pull Request.
To implement user guide, I have used Semantic UI tables to give examples for CSV format and used other components for Manual format.
Let’s get started and understand it step by step.
Step 1:
Create User Guide component with Ember CLI.
$ ember g component user-component/user-guide
Step 2:
Now, We will use Semantic UI while editing Handlebars.
Step 3:
Link it with Create Badges as a tooltip in the first accordian of create badges route.
<a class="ui icon orange button guide" href="{{href-to 'user-guide'}}" data-tooltip="User Input Guide" data-position="right center"><i class="info icon"></i></a>
I have implemented the user guide for the user to go through the User Manual before generating Badges.
Step 4::
Now run the server to see the implemented changes by following command.
$ ember serve
User Guide Component
Tooltip present in the create badges form.
Now, we are done implementing a User Guide to help user to go through the User Manual before generating Badges.
Resources:
Badges Search Functionality In Admin
Badgeyay is a badge generator service developed by FOSSASIA community for generating badges for conferences and events. Project is separated into frontend that is designed in EmberJS and backend that is created in Flask. Now The Badges tab in admin shows the total badges that are in the system. Along with different meta attributes like Badge creator name, date and other data. The main problem is that it doesn’t provide a way to search the badges from the admin panel. In this blog post i am going to explain about integrating badge search functionality in admin.
Procedure
- Integrating form element for searching
<form class=“ui form” {{action ‘findBadges’ on=“submit”}}>
class=“field”>
class=“ui action input”>
{{input type=“text” autocomplete=‘off’ value=user placeholder=“Search Badges…”}}
</div>
</form>
- Main difficulty is to send the data to route components as we can’t pass the props, like we pass in components. The workaround is to send the query as route parameter.
findBadges() {
var userTerm = this.get(‘user’);
this.transitionToRoute(‘admin.badges.list’, userTerm);
}
- Extracting the query parameter and making request to backend
if (params.badge_status === ‘all’) {
filter.state = ‘all’;
} else if (params.badge_status === ‘created’) {
filter.state = ‘created’;
} else if (params.badge_status === ‘deleted’) {
filter.state = ‘deleted’;
} else {
filter.filter = params.badge_status;
}
- Creating query in controller to fetch the data for the same.
if ‘filter’ in args.keys():
badges = base_query.filter(User.username.contains(args[‘filter’]))
badges = badges.paginate(page, app.config[‘POSTS_PER_PAGE’], False)
schema = AdminBadgeSchema(many=True)
return jsonify(schema.dump(badges.items).data)
Resources
Implement Table Sorting In Badgeyay
In this blog post I am going to explain about implementation of inplace table sorting in badgeyay. This is not about just adding the sortable class as described in the semantic docs, but the data inside the table has different characteristics and needs to be sorted in a different manner. Not like the traditional way of comparing strings as it will not be suitable for dates. For creating a custom comparison function for sorting, either we can implement a custom comparator using JQuery or we can use the data values for comparison. The latter option is more preferable as it can be extended to different columns in the table.
Procedure
- Adding the sortable class in the table, which needs to be sorted.
<table class=“ui sortable table”> . . .
</table>
- We need to enable a javascript function when DOM completely gets loaded.
<script type=“text/javascript”>
$(‘table’).tablesort();
</script>
- After this we need to create a template helper to return us the time stamp from the UTC formatted DateTime string. The value that will be returned by the helper will be used as the data value for the column entries.
import { helper } from ‘@ember/component/helper’;
export function extractTimeStamp(date) {
return Math.floor((new Date(date)).getTime() / 100);
}
export default helper(extractTimeStamp);
- The value that will be returned by the helper will be used as data value for comparison by table sorter.
<td data-sort-value={{extract-time-stamp user.created_at}}>{{sanitizeDate user.created_at}}</td>
- Now we need that certain columns do not sort, as there is no need. Such columns are photoURL, actions etc. These columns should be ignored by the sorter for sorting, so we will add a class to avoid sorting of these columns.
<th class=“no-sort”>User Photo</th> Resources
Forgot Password Service in Badgeyay
Badgeyay is an open source badge generator service for generating badges developed by FOSSASIA community for technical events and conferences. The project is divided into two components mainly frontend and backend. After creating the user registration functionality in application, if the user forgets the credentials for the login, then there must be a way to recreate the credentials using a secure channel. This is only valid for the users signed up through email login as for the case of OAuth they must have access to their ID on respective social platform. The main challenges in resetting password for the user is to provide a secure channel. So the problem can be breakdown into following issues:
- Creating a token for reset action
- Sending that token via mail to user
- Verifying that token on the server and giving access
- Changing the credentials of the user
Procedure
- Generating token for the request to change credentials for the user. The token will be an expiry token and will be expired in the mentioned duration. So the token is valid for only a limited period of time and will prevent fraudulent requests.
def pwd_reset_token():
data = request.get_json()[‘data’][‘attributes’]
if ’email’ not in data.keys():
print(‘Email not found’)
email = data[’email’]
user = User.getUser(email=email)
if not user:
return ErrorResponse(UserNotFound().message, 422, {‘Content-Type’: ‘application/json’}).respond()
expire = datetime.datetime.utcnow() + datetime.timedelta(seconds=900)
token = jwt.encode({
‘id’: user.id,
‘exp’: expire
}, app.config.get(‘SECRET_KEY’))
resetObj = ResetPasswordToken(user.id, token.decode(‘UTF-8’))
resetObj.save_to_db()
return jsonify(TokenSchema().dump(resetObj).data)Model for ResetPasswordToken
class ResetPasswordToken(db.Model):
__tablename__ = ‘Reset Password Token’
id = db.Column(db.String, primary_key=True)
token = db.Column(db.String, nullable=False)
def __init__(self, uid, token):
self.id = uid
self.token = token
def save_to_db(self):
try:
db.session.add(self)
db.session.commit()
except Exception as e:
db.session.rollback()
db.session.flush()
print(e)
- Sending the password reset link via mail to the user. The link will contain the token (expiry token) that will be used to validate the request. For the case we will be using Firebase Cloud functions as an HTTP Trigger.
exports.sendResetMail = functions.https.onRequest((req, res) => {
let token = req.query[‘token’];
let email = req.query[’email’];
res.setHeader(‘Content-Type’, ‘application/json’);
sendResetMail(token, email)
.then(() => {
console.log(‘Reset mail sent to’, email);
res.json({ data: { attributes: { status: 200 }, id: token, type: ‘reset-mails’ } });
return 0;
})
.catch(err => {
console.error(err);
res.json({ data: { attributes: { status: 500 }, id: token, type: ‘reset-mails’ } });
return -1;
});
});
function sendResetMail(token, email) {
const mailOptions = {
from: `${APP_NAME}<noreply@firebase.com>`,
to: email,
};
mailOptions.subject = `Password reset link`;
mailOptions.html = ‘<p>Hey ‘ + email + ‘! Here is your password reset <a href=\” + PASSWORD_RESET_LINK
+ token + ‘\’>Link</a><p>’;
return mailTransport.sendMail(mailOptions);
}
- Verifying the token on the server side to validate the user request
def validate_reset_token():
args = request.args
if ‘token’ in args.keys():
token = args.get(‘token’)
resp = {‘id’: token}
try:
jwt.decode(token, app.config[‘SECRET_KEY’])
resp[‘valid’] = True
return jsonify(ValidTokenSchema().dump(resp).data)
except Exception as e:
resp[‘valid’] = False
print(e)
return jsonify(ValidTokenSchema().dump(resp).data)
- After user has access to change the credentials, then user can send a POST request to backend through a form shown in UI to change its password.
def changePwd():
try:
data = request.get_json()[‘data’][‘attributes’]
except Exception as e:
print(e)
return ErrorResponse(PayloadNotFound().message, 422, {‘Content-Type’: ‘application/json’}).respond()
token = data[‘token’]
try:
decoded_res = jwt.decode(token, app.config[‘SECRET_KEY’])
except Exception as e:
print(e)
return ErrorResponse(SignatureExpired().message, 422, {‘Content-Type’: ‘application/json’}).respond()
user = User.getUser(user_id=decoded_res[‘id’])
if ‘pwd’ not in data.keys():
return ErrorResponse(PasswordNotFound().message, 422, {‘Content-Type’: ‘application/json’}).respond()
pwd = data[‘pwd’]
oldPwd = user.password
user.password = generate_password_hash(pwd)
user.save_to_db()
resp = {‘id’: token}
if update_firebase_password(user.id, pwd):
resp[‘status’] = ‘Changed’
return jsonify(ResetPasswordOperation().dump(resp).data)
else:
print(‘Firebase not uploaded’)
user.password = oldPwd
user.save_to_db()
resp[‘status’] = ‘Not Changed’
return jsonify(ResetPasswordOperation().dump(resp).data)
- After this the password of the user will be changed and allowed to login through new credentials.
Link to PRs:
- PR for forgot password reset form – #1
- PR for implementing forgot password on firebase side – #2
- PR for password reset mail functionality – #3
Resources
Metadata Updation in Badgeyay
Badgeyay is a simple badge generator service to develop badges for technical events and conferences developed by FOSSASIA. Badgeyay is a SPA (Single Page Application) developed in ember, whose backend is in Flask. Now when user logins, he can see an option for user profile, in which all the metadata of its profile can be seen (extracted from Firebase). Now user should be able to change its metadata like profile image and username etc. So we will look how the profile image is being changed and updated in badgeyay.
Procedure
- Create function in frontend to listen for onclick events and initiate a file upload dialog box for selecting an image. We will use document property to initiate a dummy click event, else there will be a button with the text to upload a file and that won’t look consistent as we only need an image and nothing else on the UI.
“{{user.photoURL}}”>
“display: none;” id=“profileImageSelector” type=“file” onchange={{action “profileImageSelected”}}>
“profile-change” onclick={{action “updateProfileImage”}}>Change
</div>
- Function to upload file and initiate a dummy click event
updateProfileImage() {
// Initate a dummy click event
document.getElementById(‘profileImageSelector’).click();
},
profileImageSelected(event) {
const reader = new FileReader();
const { target } = event;
const { files } = target;
const [file] = files;
const _this = this;
reader.onload = () => {
_this.get(‘sendProfileImage’)(reader.result, file.type.split(‘/’)[1]);
};
reader.readAsDataURL(file);
}
- Profile update function in the main controller to call the API endpoint to upload the data to backend. This will send the payload to backend which will later upload the image to cloud storage and save in the link in the database.
updateProfileImage(profileImageData, extension) {
const _this = this;
const user = this.get(‘store’).peekAll(‘user’);
user.forEach(user_ => {
_this.set(‘uid’, user_.get(‘id’));
});
let profileImage = _this.get(‘store’).createRecord(‘profile-image’, {
image : profileImageData,
uid : _this.uid,
extension : ‘.’ + extension
});
profileImage.save()
.then(record => {
user.forEach(user_ => {
user_.set(‘photoURL’, record.photoURL);
});
})
.catch(err => {
let userErrors = profileImage.get(‘errors.user’);
if (userErrors !== undefined) {
_this.set(‘userError’, userErrors);
}
});
}
- Route to update profile image from backend
@router.route(‘/profileImage’, methods=[‘POST’])
def update_profile_image():
try:
data = request.get_json()[‘data’][‘attributes’]
except Exception:
return ErrorResponse(PayloadNotFound().message, 422, {‘Content-Type’: ‘application/json’}).respond()
if not data[‘image’]:
return ErrorResponse(ImageNotFound().message, 422, {‘Content-Type’: ‘application/json’}).respond()
if not data[‘extension’]:
return ErrorResponse(ExtensionNotFound().message, 422, {‘Content-Type’: ‘application/json’}).respond()
uid = data[‘uid’]
image = data[‘image’]
extension = data[‘extension’]
try:
imageName = saveToImage(imageFile=image, extension=extension)
except Exception:
return ErrorResponse(ImageNotFound().message, 422, {‘Content-Type’: ‘application/json’}).respond()
fetch_user, imageLink = update_database(uid, imageName)
return jsonify(UpdateUserSchema().dump(fetch_user).data)
This will first create a temp file with the data URI and them upload that file to cloud storage and generate the link and then update the user in the database.
def update_database(uid, imageName):
fetch_user = User.getUser(user_id=uid)
if fetch_user is None:
return ErrorResponse(UserNotFound(uid).message, 422, {‘Content-Type’: ‘application/json’}).respond()
imagePath = os.path.join(app.config.get(‘BASE_DIR’), ‘static’, ‘uploads’, ‘image’) + ‘/’ + imageName
imageLink = fileUploader(imagePath, ‘profile/images/’ + imageName)
fetch_user.photoURL = imageLink
fetch_user.save_to_db()
try:
os.unlink(imagePath)
except Exception:
print(‘Unable to delete the temporary file’)
return fetch_user, imageLink
Link to PR – Link
Topics Involved
- Google Cloud Admin Storage SDK
- Ember data
Resources
Uploading Badges To Google Cloud Badgeyay
Badgeyay is an open source project developed by FOSSASIA community. This project mainly aims for generating badges for technical conferences and events.The project is divided into two parts mainly. Backend is developed in flask and frontend is developed in emberjs. The problem is after the badge generation, the flask server is storing and serving those files. In practise this is not a good convention to do so. This should be handled by secondary hosting server program like gunicorn or nginx. Better approach would be to consume the firebase storage and admin sdk for storing the badges on google cloud. This will also offload storage needs from the flask server and also give a public link over the network to access.
Procedure
- Get the file path of the temporary badge generated on the flask server. Currently badges are saved in the directory of the image file uploaded and final badge generated is written in all-badges.pdf`
badgePath = os.getcwd() + ‘/static/temporary/’ + badgeFolder
badgePath + ‘/all-badges.pdf’
- Create the blob path for the storage. Blob can be understood as the final reference to the location where the contents are saved onto the server. This can be a nested directory structure or simply a filename in root directory.
‘badges/’ + badge_created.id + ‘.pdf’
In our case it is the id of the badge that is generated in the badges directory.
- Function for uploading the file generated in temporary storage to google cloud storage.
def fileUploader(file_path, blob_path):
bucket = storage.bucket()
fileUploaderBlob = bucket.blob(blob_path)
try:
with open(file_path, ‘rb’) as file_:
fileUploaderBlob.upload_from_file(file_)
except Exception as e:
print(e)
fileUploaderBlob.make_public()
return fileUploaderBlob.public_url
It creates a bucket using the firebase admin SDK and then open the file from the file path. After opening the file from the path it writes the data to the cloud storage. After the data is written, the blob is made public and the public access link to the blob is fetched, which then later returned and saved in the local database.
Topics Involved
- Firebase admin sdk for storage
- Google cloud storage sdk
Resources
- Firebase admin sdk documentation – Link
- Google Cloud Storage SDK Python – Link
- Blob Management – Link
Ember Controller for Badge Generation In Badgeyay
Badgeyay is an open source project developed by FOSSASIA Community. This project aims towards giving a platform for badge generation using several customizations options. Current structure of project is in two parts to maintain modularity, which are namely backend, developed in flask, and frontend, developed in ember.
After refactoring the frontend and backend API we need to create a controller for the badge generation in frontend. Controller will help the components to send and receive data from them and prepare the logic for sending request to API so that badges can be generated and can receive the result as response from the server. Particularly we need to create the controller for badge generation route, create-badges.
As there are many customizations option presented to user, we need to chain the requests so that they sync with each other and the logic should not break for the badge generation.
Procedure
- Creating the controller from the ember-cli
ember g controller create-badge
- After the component generation, we need to create actions that can be passed to components. Let’s build action to submit form and then chain the different actions together for the badge generation.
submitForm() {
const _this = this;
const user = _this.get(‘store’).peekAll(‘user’);
let uid;
user.forEach(user_ => {
uid = user_.get(‘id’);
});
if (uid !== undefined && uid !== ”) {
_this.set(‘uid’, uid);
}
let badgeData = {
uid : _this.uid,
badge_size : ‘A3’
};
if (_this.csvEnable) {
badgeData.csv = _this.csvFile;
}
if (_this.defFontColor !== ” && _this.defFontColor !== undefined) {
badgeData.font_color = ‘#’ + _this.defFontColor;
}
if (_this.defFontSize !== ” && _this.defFontSize !== undefined) {
badgeData.font_size = _this.defFontSize.toString();
}
if (_this.defFont !== ” && _this.defFont !== undefined) {
badgeData.font_type = _this.defFont;
}
_this.send(‘sendManualData’, badgeData);
},
- As we can see in the above code snippet that _this.send(action_name, arguments) is calling another action sendManualData. This action then sends a network request to the backend if the Manual data is selected as input source otherwise will go with the CSV upload. If no option is chosen then it will show an error on the user screen, notifying him to select one input source.
sendManualData(badgeData) {
const _this = this;
if (_this.manualEnable) {
let textEntry = _this.get(‘store’).createRecord(‘text-data’, {
uid : _this.uid,
manual_data : _this.get(‘textData’),
time : new Date()
});
textEntry.save().then(record => {
_this.set(‘csvFile’, record.filename);
badgeData.csv = _this.csvFile;
_this.send(‘sendDefaultImg’, badgeData);
_this.get(‘notify’).success(‘Text saved Successfully’);
}).catch(err => {
let userErrors = textEntry.get(‘errors.user’);
if (userErrors !== undefined) {
_this.set(‘userError’, userErrors);
}
});
} else if (_this.csvEnable) {
if (_this.csvFile !== undefined && _this.csvFile !== ”) {
badgeData.csv = _this.csvFile;
_this.send(‘sendDefaultImg’, badgeData);
}
} else {
// No Input Source specified Error
}
},
The above code will choose the manual data if the manual data boolean flag is set else not, and then does a network request and wait for the promise to be resolved. As soon as the promise is resolved it calls another action to for the default image.
- After selecting the input source, now the background for the badge has to be selected. It will look for the boolean flags of the defaultImage, backgroundColorImage, customImage and will make the network request accordingly.
sendDefaultImg(badgeData) {
const _this = this;
if (_this.defImage) {
let imageRecord = _this.get(‘store’).createRecord(‘def-image-upload’, {
uid : _this.uid,
defaultImage : _this.defImageName
});
imageRecord.save()
.then(record => {
_this.set(‘custImgFile’, record.filename);
badgeData.image = _this.custImgFile;
_this.send(‘sendBadge’, badgeData);
})
.catch(error => {
let userErrors = imageRecord.get(‘errors.user’);
if (userErrors !== undefined) {
_this.set(‘userError’, userErrors);
}
});
} else if (_this.custImage) {
if (_this.custImgFile !== undefined && _this.custImgFile !== ”) {
badgeData.image = _this.custImgFile;
_this.send(‘sendBadge’, badgeData);
}
} else if (_this.colorImage && _this.defColor !== undefined && _this.defColor !== ”) {
console.log(_this.defColor);
let imageRecord = _this.get(‘store’).createRecord(‘bg-color’, {
uid : _this.uid,
bg_color : _this.defColor
});
imageRecord.save()
.then(record => {
badgeData.image = record.filename;
_this.send(‘sendBadge’, badgeData);
})
.catch(error => {
let userErrors = imageRecord.get(‘errors.user’);
if (userErrors !== undefined) {
_this.set(‘userError’, userErrors);
}
});
} else {
// Inflate error for No Image source.
}
},
After the promise resolvement, the final action is called to send badge data payload to backend api for badge generation.
- After the complete preparation of the payload, now it’s time to send the payload to the backend api for the badge generation and after the promise resolvement showing the respective downloadable link in the frontend.
sendBadge(badgeData) {
const _this = this;
let badgeRecord = _this.get(‘store’).createRecord(‘badge’, badgeData);
badgeRecord.save()
.then(record => {
_this.set(‘badgeGenerated’, true);
_this.set(‘genBadge’, record.id);
_this.get(‘notify’).success(‘Badge generated Successfully’);
})
.catch(err => {
console.error(err.message);
});
},
Now after the promise resolvement the local variable badgGenerated is set to true so that the success message can be shown in the frontend for successful badge generation along with the link.
Link to respective PR – Link
Topics Involved
- Chaining of actions and requests
- Manipulating DOM on the conditional statements
- Component bindings
- Ember data
- Promise resolvement
Resources
You must be logged in to post a comment.