Skip to content

Commit

Permalink
Merge pull request #2 from internetarchive/new-account-settings-design
Browse files Browse the repository at this point in the history
User settings - Implement new settings page design
  • Loading branch information
nsharma123 committed Jun 29, 2023
2 parents 2b43a0a + 25e10d6 commit efc83e4
Show file tree
Hide file tree
Showing 26 changed files with 3,903 additions and 1,367 deletions.
20 changes: 0 additions & 20 deletions demo/app-root.ts

This file was deleted.

Binary file added demo/default-preview.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demo/google-login-placeholder.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
53 changes: 50 additions & 3 deletions demo/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,67 @@
<html lang="en-GB">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
html {
font-size: 10px; /* This is to match petabox's base font size */
}

body {
background: #fafafa;
background: #fff;
margin-top: 38px;
}

ia-account-settings {
display: block;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
</style>
</head>
<body>
<app-root></app-root>
<div id="demo">
</div>
<script type="module">
import { html, render } from 'lit';
import '../dist/index.js';
import mailingLists from '../dist/src/assets/mailing-lists.js'

const userData = {
identifier: '@neerajksharma453_gmail_com',
screenname: 'neeraj-archive',
email: 'neerajksharma453@gmail.com',
password: '',
isAdmin: false,
};

const selectedMailingLists = [ 'ml_best_of', 'ml_donors' ];
const linkedProviders = [ 'google' ];

render(
html`
<ia-account-settings
.userData="${userData}"
.mailingLists="${mailingLists}"
.selectedMailingLists=${selectedMailingLists}
.linkedProviders=${linkedProviders}
.profilePicture=${'../demo/default-preview.jpg'}
.loanHistoryFlag=${'public'}
.csrfToken=${'sfsdflksjfkfeteldkfjlf37583585n534535ui5n353h5'}
.updatedFields=${{
"screenname": "123Your screen name has been updated successfully.",
"mailing_lists": "Mailing lists has been updated!"
}}
><div slot="ia-google-login" class="third-party-login-cta">
<img src="google-login-placeholder.jpg" alt="" width="200px" >
<div>
<div id="g_id_signin"></div>
</div>
</div>
</ia-account-settings>`,

<script type="module" src="../dist/demo/app-root.js">
document.querySelector('#demo')
)
</script>
</body>
</html>
33 changes: 33 additions & 0 deletions demo/mailing-lists.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
/* eslint-disable */

const ML_BEST_OF = 'ml_best_of';
const ML_EVENTS = 'ml_events';
const ML_DONORS = 'ml_donors';

export default {
ML_BEST_OF: {
key: ML_BEST_OF,
name: 'Best of the Archive',
interest_id: 'e7594f8604',
selected_by_default: true,
public: true,
short_desc:
'Useful resources, unique stories, and fun finds from our collections',
},
ML_EVENTS: {
key: ML_EVENTS,
name: 'Event Notices',
interest_id: '98cc7bf635',
selected_by_default: false,
public: true,
short_desc: 'Invitations to and news about our events',
},
ML_DONORS: {
key: ML_DONORS,
name: 'Donor Communications',
interest_id: 'ff44b81002',
selected_by_default: false,
public: true,
short_desc: 'Information about how your donations are being used.',
},
};
2 changes: 1 addition & 1 deletion index.ts
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export { YourWebComponent } from './src/your-webcomponent';
export { IAAccountSettings } from './src/ia-account-settings';
56 changes: 29 additions & 27 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
{
"name": "@internetarchive/your-webcomponent",
"description": "The Internet Archive Typescript WebComponent template. It is based on the @open-wc template.",
"name": "@internetarchive/iaux-account-settings",
"description": "IA user account setting Web-Component. It is based on the @open-wc template.",
"repository": {
"type": "git",
"url": "git+https://github.com/internetarchive/iaux-your-webcomponent.git"
"url": "git+https://github.com/internetarchive/iaux-account-settings.git"
},
"license": "AGPL-3.0-only",
"author": "Internet Archive",
"version": "0.0.0",
"version": "0.0.1-alpha66",
"main": "dist/index.js",
"module": "dist/index.js",
"scripts": {
Expand All @@ -25,32 +25,37 @@
"ghpages:generate": "gh-pages -t -d ghpages -m \"Build for $(git log --pretty=format:\"%h %an %ai %s\" -n1) [skip ci]\""
},
"types": "dist/index.d.ts",
"dependencies": {
"@internetarchive/ia-activity-indicator": "^0.0.5",
"@internetarchive/ia-pic-uploader": "0.1.4",
"lit": "^2.7.4"
},
"devDependencies": {
"@open-wc/eslint-config": "^9.0.0",
"@open-wc/testing": "^3.1.6",
"@typescript-eslint/eslint-plugin": "^5.30.0",
"@typescript-eslint/parser": "^5.30.0",
"@web/dev-server": "^0.1.32",
"@web/test-runner": "^0.15.0",
"concurrently": "^7.2.2",
"eslint": "^8.18.0",
"eslint-config-prettier": "^8.5.0",
"@open-wc/eslint-config": "^10.0.0",
"@open-wc/testing": "^3.1.8",
"@typescript-eslint/eslint-plugin": "^5.59.6",
"@typescript-eslint/parser": "^5.59.6",
"@web/dev-server": "^0.2.1",
"@web/test-runner": "^0.16.1",
"concurrently": "^8.0.1",
"eslint": "^8.40.0",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-html": "^7.1.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-lit": "^1.7.2",
"eslint-plugin-lit-a11y": "^2.3.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-lit": "^1.8.3",
"eslint-plugin-lit-a11y": "^2.4.1",
"eslint-plugin-no-only-tests": "^3.1.0",
"eslint-plugin-wc": "^1.3.2",
"eslint-plugin-wc": "^1.5.0",
"gh-pages": "^5.0.0",
"husky": "^8.0.0",
"husky": "^8.0.3",
"madge": "^6.0.0",
"prettier": "^2.7.1",
"rimraf": "^4.0.0",
"sinon": "^15.0.0",
"prettier": "^2.8.8",
"rimraf": "^5.0.0",
"sinon": "^15.0.4",
"ts-lit-plugin": "^1.2.1",
"tslib": "^2.4.0",
"typescript": "^4.7.4",
"vite": "^4.0.0"
"tslib": "^2.5.0",
"typescript": "^5.0.4",
"vite": "^4.3.6"
},
"publishConfig": {
"access": "public"
Expand Down Expand Up @@ -95,8 +100,5 @@
"prettier --write",
"git add"
]
},
"dependencies": {
"lit": "^2.6.0"
}
}
19 changes: 19 additions & 0 deletions src/assets/eye-crossed.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { svg } from 'lit';

export default svg`
<svg
height="16"
viewBox="0 0 22 16"
width="22"
xmlns="http://www.w3.org/2000/svg"
>
<g fill="none" fill-rule="evenodd">
<g stroke="#333" stroke-width="1.5" transform="translate(1 2)">
<path
d="m0 6c4.44444444-4 7.77777778-6 10-6 2.2222222 0 5.5555556 2 10 6-4.4444444 4-7.7777778 6-10 6-2.22222222 0-5.55555556-2-10-6z" stroke-linejoin="round"/>
<circle cx="10" cy="6" r="5"/>
</g>
<circle cx="11" cy="8" fill="#333" r="2"/>
<path d="m4.5 1.5 13.5 13.5" stroke="#333" stroke-linecap="round" stroke-width="2"/>
</g>
</svg>`;
20 changes: 20 additions & 0 deletions src/assets/eye-open.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { svg } from 'lit';

export default svg`
<svg
height="16"
viewBox="0 0 22 16"
width="22"
xmlns="http://www.w3.org/2000/svg"
>
<g fill="none" fill-rule="evenodd">
<g stroke="#333" stroke-width="1.5" transform="translate(1 2)">
<path
d="m0 6c4.44444444-4 7.77777778-6 10-6 2.2222222 0 5.5555556 2 10 6-4.4444444 4-7.7777778 6-10 6-2.22222222 0-5.55555556-2-10-6z"
stroke-linejoin="round"
/>
<circle cx="10" cy="6" r="5"/>
</g>
<circle cx="11" cy="8" fill="#333" r="2"/>
</g>
</svg>`;
33 changes: 33 additions & 0 deletions src/assets/mailing-lists.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
/* eslint-disable */

const ML_BEST_OF = 'ml_best_of';
const ML_EVENTS = 'ml_events';
const ML_DONORS = 'ml_donors';

export default {
ML_BEST_OF: {
key: ML_BEST_OF,
name: 'Best of the Archive',
interest_id: 'e7594f8604',
selected_by_default: true,
public: true,
short_desc:
'Useful resources, unique stories, and fun finds from our collections',
},
ML_EVENTS: {
key: ML_EVENTS,
name: 'Event Notices',
interest_id: '98cc7bf635',
selected_by_default: false,
public: true,
short_desc: 'Invitations to and news about our events',
},
ML_DONORS: {
key: ML_DONORS,
name: 'Donor Communications',
interest_id: 'ff44b81002',
selected_by_default: false,
public: true,
short_desc: 'Information about how your donations are being used.',
},
};

0 comments on commit efc83e4

Please sign in to comment.