Did you ever want to customize your registration or login page on Drupal 7, but did not know how? Customizing these pages by adding new text or changing theme is not a difficult task.
\nTo help you out with that, I have compiled some simple steps to customize your registration or login page. All that you need to do is to add the following code :
\n array(\n 'template' => 'user_login',\n 'render element' => 'form',\n 'path' => drupal_get_path('module', 'yourmodule') . '/templates'\n ),\n 'user_pass' => array(\n 'template' => 'user_pass',\n 'render element' => 'form',\n 'path' => drupal_get_path('theme', 'yourmodule') . '/templates'\n ),\n 'user_register' => array(\n 'template' => 'user_register',\n 'render element' => 'form',\n 'path' => drupal_get_path('theme', 'yourmodule') . '/templates'\n ),\n );\n return $theme;\n}-->Now that you have implemented hook theme in module file, the next step is to implement three pre-process functions. These functions are used if module needs to override or you want to add something in theme pre-processing.
\nIn the third step, you need to create following template files for login/register/forgot password.
\nNow paste the following code into user_login.tpl.php. Also, don’t forget to modify user_register.tpl.php and user_pass.tpl.php template files accordingly.
\n<!--\n\n \n-->Now your login page will contain new intro text This is my awesome login form. Customization of registration page in Drupal 7 is not difficult and if you follow above mentioned tips, you can design an amazing registration / login / forgot password page according to your audience.
\n","frontmatter":{"date":"August 11, 2015","updated_date":null,"description":null,"title":"Customize User Login, Register and Forgot Password Page in Drupal 7","tags":["Drupal"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/26f698c9942b635d0137bd4039e85ba7/7d145/drupal-custom-login-register-password-pages1.png","srcSet":"/static/26f698c9942b635d0137bd4039e85ba7/69585/drupal-custom-login-register-password-pages1.png 200w,\n/static/26f698c9942b635d0137bd4039e85ba7/497c6/drupal-custom-login-register-password-pages1.png 400w,\n/static/26f698c9942b635d0137bd4039e85ba7/7d145/drupal-custom-login-register-password-pages1.png 610w","sizes":"(max-width: 610px) 100vw, 610px"}}},"author":{"id":"Versha Gupta","github":"vershagupta","avatar":null}}}},{"node":{"excerpt":"QQ is the most popular ID provider for Chinese people since the 90s, it is always the first choice for websites who want to provide social…","fields":{"slug":"/engineering/best-practice-reviewing-qq-app/"},"html":"QQ is the most popular ID provider for Chinese people since the 90s, it is always the first choice for websites who want to provide social login functionality for their Chinese users. But similar to other ID providers from China, the app you created needs to be reviewed before actually launching it. Reading Chinese and using Google translate for each line is not that much of fun, and in this tutorial we will go through step by step to figure out how to submit a QQ app for review. Do note: You can always download a Google translate extension for your browser to translate each page to English, it would probably be the easiest way for you, but here I decide to keep it Chinese, Let's go.
\nAnd click the 4th tab (in orange box)
\nAfter being redirected to QQ connect login page, it asks you to fill in your credentials, since I do not have one, I will register for one and feel free to skip this step if you have already got one.
\nClick \"register a new account\", like shown:
\nIt will link you to this page, it is written in English, sweet! I am pretty sure you can register an account by yourself. After filling in the information, it will send a confirmation email to your email box. After your email is verified go back to the login page, and use the QQ number you just got to log in with.
\nClick the big green button on the right side of your screen to create an app, and here we will create a website type app.
\nAfter choosing the type, you need to fill in some basic information for your website, in case if you do not use Google translate to translate the page, I did a little translations for you, there you go.
\nPlease note, when you fill in your website address, it will ask you to verify your website, so you need to copy and paste the javascript code under your website page, and then click the button beside to verify it.
\n
\nThen, it is time to submit by clicking that big green button in the middle.
Confirm it by clicking the right button again.
\nFirst things first, we need a sprite image that consists four icons – or more, it’s up to you. Luckily, I have one in my digital pocket. We’re just going to use a normal PNG file at first and change it later. Make sure it has a transparent background. Now, let’s make their placeholder. The icons you see above is using a grid of 32px by 32px and it’s lining up vertically. I made it like that so it’s easier to find anything, you’ll see why later. Now we need to style them. Explanation Looks simple right? But the one thing that’s very important here is the background-size, which makes our sprite responsive. When you put 100% as the value, it will stretch the image depending on what width and height you have. So, be very careful when putting a value on both X and Y axis, because this will distort the image. To stop it from distorting, you should only put a value on one axis and put the other on ‘auto’ so the image scales proportionally. If you look at the image I provided, there’s only one icon on X-axis. That means we can just say 100% on X and auto on Y. So, we get background-size: 100% auto. Cool, right? No crazy percentage. Your icon should look like this: It’s time to map those icons properly. Facebook is not a problem because it’s first on the list. But for defaults sake, let’s add a code for it. The positioning of 0 0 will map it to the top left of the element. For the background-color, you can get almost all of the official social icon colors in hex here. How about the rest? Well, there’s a simple formula for that. Since we’re making this responsive, we need to use percentage. We need to get the height of the image via percentage. Remember what I said earlier about x and y and scaling proportionally? Since the icons are lined up vertically, we need to get the Y-axis, which is the height. The easy way to do that is to just use 100% and never touch x axis again. Now, we have to get the position of the icons. Let’s start by counting the icons starting with 0 (zero). 0 = Facebook 1 = Google 2 = LinkedIn 3 = Twitter Facebook isn’t really a problem because we already know where it is. So, let’s exclude it from the count. That gives us 3 icons. We can now use those numbers to get the icon position. imageHeight = 100% -imageHeight / iconCount * iconPosition If you use stylus you can just do this: Then call it. By now your icon should look like this. You can get this information by adding -vvv and you can use the command Every time when a new memory needs to be allocated. It will scan the slab class to find the most suitable class to store the chunk. From memcached’s wiki: Overview: Memcached 1.4.11. Fixes race conditions and crashes introduced in 1.4.10. Adds the ability to rebalance and reassign slab memory. Long running instances of memcached memory may run into an issue where all available memory has been assigned to a specific slab class (say items of roughly size 100 bytes). Later the application starts storing more of its data into a different slab class (items around 200 bytes). Memcached could not use the 100 byte chunks to satisfy the 200 byte requests, and thus you would be able to store very few 200 byte items. 1.4.11 introduces the ability to reassign slab pages. This is a beta feature and the commands may change for the next few releases, so please keep this in mind. When the commands are finalized they will be noted in the release notes While slab reassign is a manual feature, there is also the start of an automatic memory reassignment algorithm. From the source code in slabs.c we can see, memcached uses two threads to monitor the slabs class, one is to do maintenance and another one is to do the re-balance the class. Memcached defines a global variable struct slab\\rebalance slab_rebal,_ which is used to store the start, end information of slab. s_clsid is the source slab id and d_clsid is the destination slab id. The detailed blog in Chinese memcached源码分析—–slab automove和slab rebalance could be helpful. Memcached implements its own memory pool, which is used to avoid system memory allocation and memory fragmentation. That will make your memory efficient and easy to manage. Here is a demo implementation of memory pool. Basically it is a large pre-allocated chunk of memory. HTML 5 is the latest and greatest web technology, although it has some issues in some browsers which don’t have native support for the new HTML5 elements. If you want to support some of the older browsers which may still be in use such as IE8 and lower then you are going to have some trouble using HTML5. The problem with IE8 and lower versioned IE browsers is that they were created many years ago while HTML5 is new technology and HTML5 tags were newly invented so legacy browsers do not support them. Microsoft will not release any updates for these browsers because they have released new versions of the IE browser. As old IE browsers do not know about these tags then it can’t style them so you will find that in IE8 or lower your websites will be rendered without many styles. If you want HTML5s new tags to be supported in IE then you need to add some javascript to create the elements: Example: This is not a very good way, you would need to remember all the tags that you have set and include them on every page of your website. If you add any new tags then you need to add these tags on every page of the website as well. Thankfully Remy Sharp provided a solution for this, Remy Sharp has created a Javascript file which he hosts with google code that will handle this for you. add the following at the top of your pages and it will include this code file on your website if the end user is using an IE browser lower than version 9. IE also does not support some of the most useful new HTML5 methods that are supported by modern browsers:Window.postMessage() Window.postMessage allows for sending data messages between two windows/frames across domains. Normally, scripts on different pages are allowed to access each other if and only if the pages that executed them are at the same locations with the same protocol (usually both http) and matching host names. The HTML5 postMessage function provides a great way to communicate securely and with high performance and reliability even cross-domain. Unfortunately, the HTML5 postMessage function does not work in IE Let’s take a look at how Window.postMessage works: The below signature is used for postMessage: otherWindow.postMessage(message, targetOrigin); otherWindow\nA reference to another window; such a reference may be obtained, for example, using the contentWindow property of an iframe element, the object returned by window.open message\nThis parameter is required for a message to be sent to the other window. The message is serialized using the structured clone algorithm. This means you can pass a broad variety of data objects safely to the destination window without having to serialize them yourself. targetOrigin\nWhen the message is dispatched, the current location of the target document is checked. If it does not match the specified URI, then the message will not be dispatched. This parameter can be useful if you want to be sure of the location of the target document before dispatching the message and you can also specify a literal string “*” (indicating no preference) or as a URI but always provide a specific targetOrigin, not *, if you know where the other window’s document should be located. If you do not set a specific location and use “*” then a malicious site can change the location of the window without your knowledge, and therefore it can intercept the data sent using the postMessage method. Example for postMessage Sender The first part of the process is setting up a “source”. With the source, we will open a new window (or IFrame), send the new window message (in the our example, we’ll do so every 6 seconds, and create an event listener for any response we receive from the destination window. I have used window.addEventListener which doesn’t work with Internet Explorer so use window.attachEvent Receiver In the destination window we should validate the message origin and if it is not valid then we will not send the message to the sender, otherwise we send a response back to the sender: sessionStorage sessionStorage stores data for one session only, this is used in a single transaction it stores the data only for one session and as you close the window the session would be lost and the data is deleted when the browser is closed. HTML5 sessionStorage object are shared in different tabs in the same browser session if you change a sessionStorage attribute’s value in one tab, that change should be reflected within another tab but in IE8 this system will not work properly it does not share sessionStorage objects between frames on a page. This issue has since been fixed in IE11. Example: localStorage The localStorage object stores the data like a persistent cookie, with no expiration date. The data will not be deleted when the browser is closed, and will be available when a user returns to the browser. IE also supports localStorage from IE8 but it does not support localStorage in IE7 and previous versions. localStorage Vs Cookies Example Google has prepared a roadmap to restrict third-party cookies in Chrome. Since 04 January 2024, Chrome has rolled out third-party cookie restrictions for 1% of stable clients and 20% of Canary, Dev, and Beta clients. What does it mean for user authentication? On one hand, Google believes third-party cookies are widely used for cross-site tracking, greatly affecting user privacy. Hence, Google wants to phase out (or restrict) supporting third-party cookies in Chrome by early Q2 2025 (subject to regulatory processes). On the other hand, Google introduced Privacy Sandbox to support the use cases (other than cross-site tracking and advertising) previously implemented using third-party cookies. In this article, we’ll discuss: Third-party cookie restrictions affect user authentication in three ways, as follows. If your website or app uses an external Identity Provider (IdP) — like LoginRadius, the IdP sets a third-party cookie when the user authenticates on your app. If you have multiple apps across domains within your organization and authentication is handled using an IdP (internal or external) with web SSO, you already use third-party cookies to facilitate seamless access for each user using a single set of credentials. If you have implemented web SSO with one primary domain and multiple sub-domains of the primary domain, third-party cookie restrictions may not apply. For now, Google doesn’t consider the cookies set by sub-domains as third-party cookies, although this stance may change in the future. For example, you have apps at Federated SSO is similar to, albeit different from, web SSO. It can handle multiple IdPs and applications—aka., Service Providers (SPs)—spanning multiple organizations. It can also implement authentication scenarios that are usually implemented through web SSO. Usually, authentication is handled on a separate pop-up or page when the user wants to authenticate rather than on the application or website a user visits. For example, you already use federated SSO if you facilitate authentication for a set of apps through multiple social identity providers as well as traditional usernames and passwords. Note: It is also possible to store tokens locally, not within cookies. In this case, third-party cookie restrictions won’t affect token-based authentication. However, the restrictions still affect authentication where tokens are stored within third-party cookies (a common and secure method). Google has been developing alternative features and capabilities for Chrome to replace third-party cookies as part of its Privacy Sandbox for Web initiative. Specific to authentication, Google recommends the following: CHIPS are a restricted way of setting third-party cookies on a top-level site without making them accessible on other top-level sites. Thus, they limit cross-site tracking and enable specific cross-site functionalities, such as maps, chat, and payment embeds. For example, a user visits If the user visits You should specifically opt for partitioned cookies (CHIPS), which are set with partitioned and secure cookie attributes. If you’re using an external identity provider for your application, CHIPS is a good option to supplant third-party cookie restrictions. However, CHIPS may not be ideal if you have a web SSO or federated SSO implementation. It creates separate partitioned cookies for each application with a separate domain, which can increase complexity and create compatibility issues. With Storage Access API, you can access the local storage in a third-party context through iframes, similar to when users visit it as a top-level site in a first-party context. That is, it gives access to unpartitioned cookies and storage. Storage Access API requires explicit user approval to grant access, similar to locations, camera, and microphone permissions. If the user denies access, unpartitioned cookies and storage won’t be accessible in a third-party context. It is most suitable when loading cross-site resources and interactions, such as: Verifying user sessions when allowing interactions on an embedded social post or providing personalization for an embedded video.\nEmbedded documents requiring user verification status to be accessible. As it requires explicit user approval, it is advisable to use Storage Access API when you can’t implement an identity use case with the other options. With Related Website Sets, you can declare a Chrome automatically recognizes related website sets declared, accepted, and maintained in this open-source GitHub repository: Related Website Sets It provides access through Storage Access API directly without prompting for user approval, but only after the user interacts with the relevant iframe. It is important to declare a limited number of domains in related website sets that are meaningful and used for specific purposes. Google may block or suspend any exploitative use of this feature. The top-level site can also request approval for specific cross-site resources and scripts to Storage Access API using If you’re using an external identity provider for your web application, you can declare the domain of the identity provider in the related set to ensure limited third-party cookies and storage access to the identity provider, thus ensuring seamless user authentication. Related Website Sets can also work to supplement third-party cookie restrictions in web SSO and federated SSO if the number of web applications (or domains) is limited. FedCM API enables federated SSO without third-party cookies. With FedCM API, a user follows these steps for authentication: You can access a user demo of FedCM here: FedCM. For more information about implementing federated SSO with FedCM API, go through the FedCM developer guide. Firstly, we’re committed to solving our customers' user identity pain points — and preparing for the third-party cookies phase-out is no different. We’ll implement the most relevant and widely useful solutions to facilitate a smooth transition for our customers. Please subscribe to our blog for more information. We’ll update you on how we help with the third-party cookie phase-out. The proposed changes to phase out third-party cookies and suggested alternatives are evolving as Google has been actively collaborating and discussing changes with the border community. Moreover, browsers like Firefox, Safari, and Edge may approach restricting third-party cookies differently than Google does. From LoginRadius, we’ll keep you updated on what we’re doing as a leading Customer Identity and Access Management (CIAM) vendor to prepare for the third-party cookie phase-out. Top-level site: It is the primary site a user has visited. First-party cookie: A cookie set by the top-level site. Third-party cookie: A cookie set by a domain other than the top-level site. For example, let’s assume that a user has visited
\n</pre>\n <div class="frame"></div>\n<pre>
\n.icon {\n width: 32px;\n height: 32px;\n background: #eee;\n float: left;\n background-image: url("[ put your image here ]");\n background-size: 100% auto;\n /*extra fluff*/\n margin: 10px;\n border-radius: 5px;\n}
\n .icon.facebook {\n background-position: 0 0;\n background-color: #3b5998;\n }The raw CSS way
\n
\niconCount = 3
\niconPosition = [1, 2 or 3]
\nWe need to go downwards on the sprite. That means it’s negative.
\n-100% / 3 / 1 = 33.33% is Google’s position
\n-100% / 3 / 2 = 66.66% is LinkedIn’s position
\n-100% / 3 / 3 = 99.99% is Twitter’s position
\nThat gives us this code
\n.icon.twitter {\n background-position: 0 -33.33%;\n background-color: #55acee;\n}\n.icon.linkedin {\n background-position: 0 -66.66%;\n background-color: #007bb6\n}\n.icon.google {\n background-position: 0 -99.99%;\n background-color: #F90101;\n}The Stylus way
\n
\nCreate the mixin
\ngetPos(imageHeight, iconCount, iconPosition)\n imageHeight / iconCount * iconPosition
\n.icon.twitter\n background-position 0 getPos(-100%, 3, 1)\n background-color #55acee\n \n.icon.linkedin\n background-position 0 getPos(-100%, 3, 2)\n background-color #007bb6\n \n.icon.google\n background-position 0 getPos(-100%, 3, 3)\n background-color #F90101
\nstats slabs under telnet connection ip portRebalance and reassign slab memory:
\nSlab Reassignment
\nSlab Automove
\n
\nstruct slab_rebalance {\n void *slab_start;\n void *slab_end;\n void *slab_pos;\n int s_clsid;\n int d_clsid;\n int busy_items;\n uint8_t done;\n};Memory Pool
\n
\n","frontmatter":{"date":"July 07, 2015","updated_date":null,"description":null,"title":"Memcached Memory Management","tags":["Memory Management"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/de7966e19463e0047c10eea9388c12c4/7d145/memcached-memory-management.png","srcSet":"/static/de7966e19463e0047c10eea9388c12c4/69585/memcached-memory-management.png 200w,\n/static/de7966e19463e0047c10eea9388c12c4/497c6/memcached-memory-management.png 400w,\n/static/de7966e19463e0047c10eea9388c12c4/7d145/memcached-memory-management.png 610w","sizes":"(max-width: 610px) 100vw, 610px"}}},"author":{"id":"Mark Duan","github":null,"avatar":null}}}},{"node":{"excerpt":"HTML 5 is the latest and greatest web technology, although it has some issues in some browsers which don’t have native support for the new…","fields":{"slug":"/engineering/html5-limitation-in-internet-explorer/"},"html":" mem_avail) {\n return NULL;\n }\n /* mem_current pointer _must_ be aligned!!! */\n if (size % CHUNK_ALIGN_BYTES) {\n size += CHUNK_ALIGN_BYTES - (size % CHUNK_ALIGN_BYTES);\n }\n mem_current = ((char*)mem_current) + size;\n if (size How to use HTML5 in IE
\n
\n <script>\n document.createElement('header');\n document.createElement('article');\n document.createElement('aside');\n document.createElement('footer');\n </script>
\n<!--[if lt IE 9]>\n<script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>\n<![endif]-->Syntax
\n
\n//create popup window\nvar domain = 'https://www.example.com';\nvar myPopup = window.open(domain + '/postmessage.html','myWindow');\n//periodical message sender\nsetInterval(function(){\n var message = 'Hello! The time is: ' + (new Date().getTime());\n myPopup.postMessage(message,domain); //send the message and target URI\n},6000);\n \n//listen to back\n \nwindow.addEventListener('message',function(event) {\n if(event.origin !== 'http://scriptandstyle.com') return;\n console.log('received response: ',event.data);\n},false);
\nwindow.addEventListener('message',function(event) {\n if(event.origin !== 'https://lrblogs.wpengine.com) return;\n event.source.postMessage('message received: ',event.origin);\n},false);
\n//save a value\nsessionStorage.setItem("website", "https://www.example.com");\n//retrieve item\nvar website= sessionStorage.getItem("website");\n//remove the key\nsessionStorage.removeItem(“website”);\n
\n
\n","frontmatter":{"date":"June 30, 2015","updated_date":null,"description":null,"title":"HTML5 Limitation in Internet Explorer","tags":["Java","Maven","Eclipse"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/56b8ac1b7f3b7dfdc03ce43aa1e62eaa/7d145/radio-check-buttons-css.png","srcSet":"/static/56b8ac1b7f3b7dfdc03ce43aa1e62eaa/69585/radio-check-buttons-css.png 200w,\n/static/56b8ac1b7f3b7dfdc03ce43aa1e62eaa/497c6/radio-check-buttons-css.png 400w,\n/static/56b8ac1b7f3b7dfdc03ce43aa1e62eaa/7d145/radio-check-buttons-css.png 610w","sizes":"(max-width: 610px) 100vw, 610px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}}]},"markdownRemark":{"excerpt":"Google has prepared a roadmap to restrict third-party cookies in Chrome. Since 04 January 2024, Chrome has rolled out third-party cookie…","fields":{"slug":"/engineering/identity-impact-of-google-chrome-thirdparty-cookie-restrictions/"},"html":"//save a value\nlocalStorage.setItem("Domain", "https://www.example.com");\n//retrieve item\nvar website= localStorage.getItem("website");\n//remove the key\nlocalStorage.removeItem(“website”);\n
\nHow is User Authentication Affected?
\nExternal Identity Providers
\nWeb SSO
\nexample.com, travel.example.com, stay.example.com, and web SSO is handled by auth.example.com. In this case, third-party cookie restrictions don’t apply.Federated SSO
\n\n
\nChrome’s Alternatives for Third-Party Cookies
\n\n
\nCookies Having Independent Partitioned State (CHIPS)
\na.com with a map embed from map-example.com, which can set a partitioned cookie that is only accessible on a.com. b.com with a map embed from map-example.com, it cannot access the partitioned cookie set on a.com. It has to create a separate partitioned cookie specific to b.com, thus blocking cross-site tracking yet allowing limited cross-site functionality.Storage Access API
\nRelated Website Sets
\nprimary website and associatedSites for limited purposes to grant third-party cookie access and local storage for a limited number of sites.resuestStorageAccessFor() API.Federated Credential Management (FedCM) API
\n\n
\nHow is LoginRadius Preparing for the Third-party Cookie Phase-out?
\nIn Conclusion
\nGlossary
\na.com, which might use an embed from loginradius.com to facilitate authentication. If loginradius.com sets a cookie when the user visits a.com, it is called a third-party cookie as the user hasn’t directly visited loginradius.com.References
\n\n","frontmatter":{"date":"July 08, 2024","updated_date":null,"description":"Google Chrome has planned to phase out third-party cookies, which will affect different website functionalities depending on third-party cookies. This blog focuses on how this phase-out affects identity and user authentication and discusses alternatives for overcoming challenges.","title":"How Chrome’s Third-Party Cookie Restrictions Affect User Authentication?","tags":["Identity","Cookies","Chrome"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/eb7396060c0adc430dbed2d04b63d431/ee604/third-party-cookies-phaseout-chrome.png","srcSet":"/static/eb7396060c0adc430dbed2d04b63d431/69585/third-party-cookies-phaseout-chrome.png 200w,\n/static/eb7396060c0adc430dbed2d04b63d431/497c6/third-party-cookies-phaseout-chrome.png 400w,\n/static/eb7396060c0adc430dbed2d04b63d431/ee604/third-party-cookies-phaseout-chrome.png 800w,\n/static/eb7396060c0adc430dbed2d04b63d431/f3583/third-party-cookies-phaseout-chrome.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Raghunath Reddy","github":"raghunath-r-a","avatar":null}}}},"pageContext":{"limit":6,"skip":282,"currentPage":48,"type":"//engineering//","numPages":52,"pinned":"17fa0d7b-34c8-51c4-b047-df5e2bbaeedb"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}