This lesson will guide you through creating the Account Admin HTML template. When the user logs into the web app, they are redirected to this file. The API backend using Firebase Functions won't be covered here.
The Account Admin Feature
The Account admin feature is where the user will land once logged into the webapp. The following functions are available:
1. View Current Default Login Information
Here the user can see the current default social login account being used for login MyProfiles.An Avatar and the email that receives email from MyProfiles is viewable as read-only.
2. Attach More Social Accounts to the MyProfiles Account.
Here will display a list of Social Accounts to attach or detach to the MyProfiles Account.Attached Social Accounts allow for faster login. Any attached account can get set to be the default account that will receive email form MyProfiles.The Avatar is private to the MyProfiles account and doesn't appear in the public search engine. It is recommended that the login and the Social Profiles Search account are different accounts. This can help to protect your MyProfiles account since it'll make it more difficult for potential hackers to guess your login information.The list will show the attach or detach status of that social account. The top 5 social networks for US citizens are in the list for users to choose to attach or detach.
If there are 2 or more attached social accounts the user can set anyone to the default. The email of the default social account will receive MyProfiles emails.
3. DELETE MyProfiles Account
Here the user can go through the process of deleting their MyProfiles.A deletion will delete all account information, and the emails will no longer receive MyProfiles email. The version of the Profile Search Card information at deletion will be the data that is archived. This means the data can still be found but it cannot be edited. If the links on the card produces errors, then the card data will delete. This is done because it will mean the card data no longer goes to an active social network profile. If the link goes to an active account, then it will remain accessible. This allows visitors to find any old accounts they have but never deleted at the social network.
Account Admin Layout
The Account Admin is mostly read only. There are two panels reading left to right; left and right.
The left panel contains the Account data, Avatar, Account name, Account email and a DELETE button.
The DELETE button will pop up a Delete process form.
The right panel contains Social Networks. The user can attach or detach a social network as well as set one for default. This is for logging into the account only. The default account will contain the email where MyProfiles emails will be sent.
The right panel contains Social Networks. The user can attach or detach a social network as well as set one for default. This is for logging into the account only. The default account will contain the email where MyProfiles emails will be sent.
Code View
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<body>
<h1>Account Admin Test Page</h1>
<div id="content">
</div>
<div class="w3-grid"
style="grid-template-columns:auto auto auto auto;column-gap:8px;row-gap:12px">
<div class="w3-container w3-center w3-theme">
<!-- The Grid -->
<div class="w3-row-padding">
<!-- Left Column -->
<div class="w3-third">
<div class="w3-white w3-text-grey w3-card-4">
<div class="w3-display-container">
<img src="https://placehold.co/400x200" style="width:100%" alt="Avatar" />
</div>
<div class="w3-container">
<h2>Jane Doe</h2>
<p><i class="fa fa-envelope fa-fw w3-margin-right w3-large w3-text-teal"></i>ex@mail.com</p>
<hr>
<button class="w3-button w3-red w3-block w3-margin-bottom">DELETE</button>
</div>
</div>
<!-- End Left Column -->
</div>
<!-- Right Column -->
<!-- Right Column -->
<div class="w3-twothird">
<div class="w3-container w3-light-grey w3-text-blue w3-card-4 w3-responsive">
<form action="" class=" w3-section w3-margin">
<table class="w3-table-all w3-centered">
<tr class="w3-theme-d1">
<th>Social Account</th>
<th>Is Attached?</th>
<th>Make Default?</th>
</tr>
<tr>
<td class="w3-left-align"><i class="w3-xxlarge fa fa-user fa-fw"></i>Google</td>
<td>
<input id="googleisattached" class="w3-check" type="checkbox" checked="checked">
<label for="googleisattached">Is Attached</label>
</td>
<td>
<input class="w3-radio" type="radio" id="googleisdefault" name="fav_language" value="Is Default" checked>
<label for="googleisdefault">Is Default</label>
</td>
</tr>
<tr>
<td class="w3-left-align"><i class="w3-xxlarge fa fa-user fa-fw"></i>Microsoft</td>
<td>
<input id="microsoftisattached" class="w3-check" type="checkbox">
<label for="microsoftisattached">Is Attached</label>
</td>
<td>
<input class="w3-radio" type="radio" id="microsoftisdefault" name="fav_language" value="Is Default">
<label for="microsoftisdefault">Is Default</label>
</td>
</tr>
<tr>
<td class="w3-left-align"><i class="w3-xxlarge fa fa-user fa-fw"></i>Facebook</td>
<td>
<input id="facebookisattached" class="w3-check" type="checkbox">
<label for="facebookisattached">Is Attached</label>
</td>
<td>
<input class="w3-radio" type="radio" id="facebookisdefault" name="fav_language" value="Is Default">
<label for="facebookisdefault">Is Default</label>
</td>
</tr>
<tr>
<td class="w3-left-align"><i class="w3-xxlarge fa fa-user fa-fw"></i>Instagram</td>
<td>
<input id="instagramisattached" class="w3-check" type="checkbox">
<label for="instagramisattached">Is Attached</label>
</td>
<td>
<input class="w3-radio" type="radio" id="instagramisdefault" name="fav_language" value="Is Default">
<label for="instagramisdefault">Is Default</label>
</td>
</tr>
<tr>
<td class="w3-left-align"><i class="w3-xxlarge fa fa-user fa-fw"></i>TikTok</td>
<td>
<input id="tiktokisattached" class="w3-check" type="checkbox">
<label for="tiktokisattached">Is Attached</label>
</td>
<td>
<input class="w3-radio" type="radio" id="tiktokisdefault" name="fav_language" value="Is Default">
<label for="tiktokisdefault">Is Default</label>
</td>
</tr>
</table>
<button class="w3-button w3-block w3-section w3-blue w3-ripple w3-padding">Save</button>
</form>
</div>
<!-- End Right Column -->
</div
<!-- End Grid -->
</div>
</div>
</div>
Test the file @ https://aicodeprojects.w3spaces.com/account.html
No comments:
Post a Comment