RFC 190: Forem Creator Signup Page (#13875)
* chore: add my name to the chaore so that I can search after cleanup * feat: update the forem creator signup template and copy over some stuff from the email_resgistration * feat: update the fields * feat: make sure that it saves * feat: add an eye svg to the password input * feat: update eye and eye-off svg * feat: update the placeholder for the password field * reveak and hide the password when clicking on the icon * eye visiblibility functionality * feat: display the username * feat: show the username row when we click edit * feat: update the interaction design * chore: remove extra line * chore: remove unneeded function * feat: never show the username hint when the user field is not hidden * feat: ensure that the username works * chore: update the existing specs * feat: move to packs * refactor: manage the visibility with a avariable and not with the password type * optimize the way we use password visibility * chore: validate the username field * chore: update the statement * feat: add a background * feat: accessibility changes * feat: set a max length on the username * feat: some more accessibility changes * feat: validate the length of the password * chore: add some margin to the error box * feat: by_email shows the error states and we should cater for the Forem Creator * feat: tackle any errors * WIP/test: first pass of some integration specs * feat: update the Cypress tests * Update app/views/shared/authentication/_forem_creator_signup.html.erb Co-authored-by: Suzanne Aitchison <suzanne@forem.com> * Update app/views/shared/authentication/_forem_creator_signup.html.erb Co-authored-by: Michael Kohl <me@citizen428.net> * chore: temporarily disable the background on large screens * chore: remove title * prevent default * feat; update the style of the button * feat: update the tests to use accessibility tags * feat: update icons * chore: oops * little forntend updates * Update app/views/shared/authentication/_forem_creator_signup.html.erb Co-authored-by: Suzanne Aitchison <suzanne@forem.com> * Update cypress/integration/creatorOnboardingFlows/creatorSignup.spec.js Co-authored-by: Nick Taylor <nick@iamdeveloper.com> * fea: change the aria label and pressed * feat: change to just John * feat: update cypress tests * test if this is causing the test to fail * feat: add some margin * feat: mostly for Cypress - required is true or false based on whether the field is needed * refactor: use the password label and skip last test * Update app/views/shared/authentication/_forem_creator_signup.html.erb Co-authored-by: Suzanne Aitchison <suzanne@forem.com> * Update app/views/shared/authentication/_forem_creator_signup.html.erb Co-authored-by: Suzanne Aitchison <suzanne@forem.com> * fix: do not toggle the label (accessibility) * fix: add a comma Co-authored-by: Suzanne Aitchison <suzanne@forem.com> Co-authored-by: Michael Kohl <me@citizen428.net> Co-authored-by: Paweł Ludwiczak <ludwiczakpawel@gmail.com> Co-authored-by: Nick Taylor <nick@iamdeveloper.com>
This commit is contained in:
Ridhwana
GitHub
parent
3b81172c56
commit
5827be4ecc
19 changed files with 358 additions and 58 deletions
3
app/assets/images/eye-off.svg
Normal file
3
app/assets/images/eye-off.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.882 19.297A10.95 10.95 0 0 1 12 21c-5.392 0-9.878-3.88-10.82-9a10.982 10.982 0 0 1 3.34-6.066L1.393 2.808l1.415-1.415 19.799 19.8-1.415 1.414-3.31-3.31zM5.935 7.35A8.965 8.965 0 0 0 3.223 12a9.006 9.006 0 0 0 13.2 5.838l-2.027-2.028A4.5 4.5 0 0 1 8.19 9.604L5.935 7.35zm6.979 6.978-3.242-3.242a2.5 2.5 0 0 0 3.24 3.241l.002.001zm7.893 2.264-1.431-1.43a8.936 8.936 0 0 0 1.4-3.162A9.006 9.006 0 0 0 9.553 5.338L7.974 3.76A10.99 10.99 0 0 1 12 3c5.392 0 9.878 3.88 10.819 9a10.949 10.949 0 0 1-2.012 4.592zm-9.084-9.084a4.5 4.5 0 0 1 4.769 4.77l-4.77-4.77z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 666 B |
3
app/assets/images/eye.svg
Normal file
3
app/assets/images/eye.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 3c5.392 0 9.878 3.88 10.819 9-.94 5.12-5.427 9-10.82 9-5.391 0-9.877-3.88-10.818-9C2.12 6.88 6.608 3 12 3zm0 16a9.005 9.005 0 0 0 8.777-7 9.005 9.005 0 0 0-17.554 0A9.005 9.005 0 0 0 12 19zm0-2.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 385 B |
3
app/assets/images/pencil.svg
Normal file
3
app/assets/images/pencil.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16">
|
||||
<path d="m15.728 9.686-1.414-1.414L5 17.586V19h1.414l9.314-9.314zm1.414-1.414 1.414-1.414-1.414-1.414-1.414 1.414 1.414 1.414zM7.242 21H3v-4.243L16.435 3.322a1 1 0 0 1 1.414 0l2.829 2.829a1 1 0 0 1 0 1.414L7.243 21z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 314 B |
|
|
@ -1,7 +1,7 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.66667 16.4444H8.11111V22H3.66667V16.4444ZM15.8889 16.4444H20.3333V22H15.8889V16.4444Z" fill="#FFDC5D"/>
|
||||
<path d="M20.3333 17.9556C20.3333 17.9556 18.6667 19.0667 15.8889 18.5111V15.7333H20.3333V17.9556ZM3.66667 17.9556C3.66667 17.9556 5.33333 19.0667 8.11111 18.5111V15.7333H3.66667V17.9556Z" fill="#F9CA55"/>
|
||||
<path d="M4.21278 12.3356H8.65722V16.78H4.21278V12.3356ZM15.3367 12.0578H19.7811V16.5022H15.3367V12.0578Z" fill="#EF9645"/>
|
||||
<path d="M2.20722 8.575C2.20722 8.575 2.20889 7.89444 2.88889 7.89611C3.57 7.89833 3.56778 8.57889 3.56778 8.57889L3.55722 11.7367C3.66556 11.6867 3.77889 11.6417 3.89778 11.6028L3.91167 7.22C3.91167 7.22 3.91389 6.53944 4.59334 6.54167C5.27334 6.54333 5.27167 7.22444 5.27167 7.22444L5.26 11.3467C5.37056 11.3367 5.48445 11.3289 5.59889 11.3233L5.61445 6.54444C5.61445 6.54444 5.61611 5.86389 6.29667 5.86667C6.97723 5.86889 6.97445 6.54944 6.97445 6.54944L6.95889 11.3272C7.07556 11.3339 7.18778 11.3456 7.3 11.3561L7.31389 6.89C7.31389 6.89 7.31611 6.20944 7.99556 6.21222C8.67556 6.21389 8.67278 6.89389 8.67278 6.89389L8.65945 11.6167L8.65778 11.995V12.3344C6.61667 12.3294 5.25056 14.0244 5.24445 15.7256C5.24445 16.0656 5.58445 16.0678 5.58445 16.0678C5.59 14.0244 6.955 12.6706 8.99667 12.6767L9.99723 10.35C9.99723 10.35 10.2167 9.70611 10.8617 9.92667C11.505 10.1444 11.2867 10.7894 11.2867 10.7894L10.7906 12.5144C10.5939 13.2 10.41 13.89 10.3133 14.5944C10.0367 16.5856 8.32389 18.1167 6.25834 18.1111C4.00556 18.1017 2.18334 16.2694 2.19056 14.0167C2.19111 13.8978 2.19834 13.7844 2.20945 13.6778L2.19167 13.6756L2.20722 8.575V8.575ZM21.7872 8.575C21.7872 8.575 21.7856 7.89444 21.1056 7.89611C20.4244 7.89833 20.4261 8.57889 20.4261 8.57889L20.4367 11.7367C20.3289 11.6867 20.215 11.6417 20.0967 11.6028L20.0828 7.22C20.0828 7.22 20.0806 6.53944 19.4011 6.54167C18.7206 6.54333 18.7222 7.22444 18.7222 7.22444L18.7344 11.3467C18.6244 11.3367 18.5106 11.3289 18.3956 11.3233L18.3806 6.54444C18.3806 6.54444 18.3783 5.86389 17.6978 5.86667C17.0172 5.86889 17.02 6.54944 17.02 6.54944L17.0356 11.3272C16.9189 11.3339 16.8067 11.3456 16.6944 11.3561L16.6806 6.89C16.6806 6.89 16.6778 6.20944 15.9983 6.21222C15.3183 6.21389 15.3211 6.89389 15.3211 6.89389L15.3344 11.6167L15.3361 11.995V12.3344C17.3772 12.3294 18.7433 14.0244 18.75 15.7256C18.75 16.0656 18.41 16.0678 18.41 16.0678C18.4039 14.0244 17.0389 12.6706 14.9978 12.6767L13.9972 10.35C13.9972 10.35 13.7783 9.70611 13.1328 9.92667C12.49 10.1444 12.7078 10.7894 12.7078 10.7894L13.2039 12.5144C13.4006 13.2 13.5844 13.89 13.6811 14.5944C13.9578 16.5856 15.67 18.1167 17.7361 18.1111C19.9889 18.1017 21.8117 16.2694 21.8039 14.0167C21.8033 13.8978 21.7961 13.7844 21.785 13.6778L21.8028 13.6756L21.7872 8.575V8.575Z" fill="#FFDC5D"/>
|
||||
<path d="M15.0783 5.58778C14.96 5.58778 14.84 5.55 14.7394 5.47222C14.4961 5.28444 14.4517 4.93556 14.6394 4.69278L16.2944 2.55111C16.4806 2.30889 16.8306 2.26222 17.0733 2.45111C17.3167 2.63889 17.3611 2.98778 17.1733 3.23056L15.5183 5.37222C15.4094 5.51389 15.245 5.58778 15.0783 5.58778V5.58778ZM8.95611 5.58778C8.79 5.58778 8.62556 5.51333 8.51611 5.37167L6.86111 3.23056C6.67389 2.98778 6.71889 2.63889 6.96167 2.45111C7.20444 2.26389 7.55278 2.30833 7.74111 2.55111L9.39611 4.69278C9.58333 4.93556 9.53889 5.28444 9.29611 5.47222C9.19445 5.55056 9.075 5.58778 8.95611 5.58778V5.58778ZM12 5.33333C11.6933 5.33333 11.4444 5.08444 11.4444 4.77778V2.55556C11.4444 2.24889 11.6933 2 12 2C12.3072 2 12.5556 2.24889 12.5556 2.55556V4.77778C12.5556 5.08444 12.3072 5.33333 12 5.33333Z" fill="#5DADEC"/>
|
||||
<path d="M3.667 16.444H8.11V22H3.667v-5.556zm12.222 0h4.444V22H15.89v-5.556z" fill="#FFDC5D"/>
|
||||
<path d="M20.333 17.956s-1.666 1.11-4.444.555v-2.778h4.444v2.223zm-16.666 0s1.666 1.11 4.444.555v-2.778H3.667v2.223z" fill="#F9CA55"/>
|
||||
<path d="M4.213 12.336h4.444v4.444H4.213v-4.444zm11.124-.278h4.444v4.444h-4.444v-4.444z" fill="#EF9645"/>
|
||||
<path d="M2.207 8.575s.002-.68.682-.679c.681.002.679.683.679.683l-.01 3.158c.108-.05.22-.095.34-.134l.014-4.383s.002-.68.681-.678c.68.001.679.682.679.682l-.012 4.123c.11-.01.224-.018.339-.024l.015-4.779s.002-.68.683-.677c.68.002.677.682.677.682l-.015 4.778c.117.007.229.019.341.03l.014-4.467s.002-.68.682-.678c.68.002.677.682.677.682l-.014 4.723-.001.378v.34c-2.041-.006-3.407 1.69-3.414 3.39 0 .34.34.343.34.343.006-2.044 1.371-3.397 3.413-3.391l1-2.327s.22-.644.865-.423c.643.217.425.862.425.862l-.496 1.725c-.197.686-.381 1.376-.478 2.08a4.085 4.085 0 0 1-4.055 3.517 4.084 4.084 0 0 1-4.067-4.094c0-.12.007-.233.018-.34l-.017-.001.015-5.101zm19.58 0s-.001-.68-.681-.679c-.682.002-.68.683-.68.683l.01 3.158a3.142 3.142 0 0 0-.34-.134l-.013-4.383s-.002-.68-.682-.678c-.68.001-.679.682-.679.682l.012 4.123a8.12 8.12 0 0 0-.338-.024l-.015-4.779s-.003-.68-.683-.677c-.68.002-.678.682-.678.682l.016 4.778c-.117.007-.23.019-.342.03l-.013-4.467s-.003-.68-.683-.678c-.68.002-.677.682-.677.682l.013 4.723.002.378v.34c2.041-.006 3.407 1.69 3.414 3.39 0 .34-.34.343-.34.343-.006-2.044-1.371-3.397-3.412-3.391l-1-2.327s-.22-.644-.865-.423c-.643.217-.425.862-.425.862l.496 1.725c.197.686.38 1.376.477 2.08a4.085 4.085 0 0 0 4.055 3.517 4.084 4.084 0 0 0 4.068-4.094c0-.12-.008-.233-.019-.34l.018-.001-.016-5.101z" fill="#FFDC5D"/>
|
||||
<path d="M15.078 5.588a.553.553 0 0 1-.439-.895l1.655-2.142a.554.554 0 1 1 .88.68l-1.656 2.141a.553.553 0 0 1-.44.216zm-6.122 0a.555.555 0 0 1-.44-.216L6.861 3.23a.556.556 0 0 1 .88-.68l1.655 2.142a.556.556 0 0 1-.44.895zM12 5.333a.556.556 0 0 1-.556-.555V2.556a.556.556 0 0 1 1.112 0v2.222a.555.555 0 0 1-.556.555z" fill="#5DADEC"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 2.1 KiB |
|
|
@ -1,17 +1,17 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0)">
|
||||
<path d="M22 12C22 17.5228 17.5228 22 12 22C6.47778 22 2 17.5228 2 12C2 6.47778 6.47778 2 12 2C17.5228 2 22 6.47778 22 12Z" fill="#FFCB4C"/>
|
||||
<path d="M8.76444 12.2311C9.57661 12.2311 10.235 11.3093 10.235 10.1722C10.235 9.03513 9.57661 8.11333 8.76444 8.11333C7.95227 8.11333 7.29388 9.03513 7.29388 10.1722C7.29388 11.3093 7.95227 12.2311 8.76444 12.2311Z" fill="#65471B"/>
|
||||
<path d="M15.8233 13.7644C17.9349 13.7644 19.6467 12.0527 19.6467 9.94111C19.6467 7.82954 17.9349 6.11778 15.8233 6.11778C13.7118 6.11778 12 7.82954 12 9.94111C12 12.0527 13.7118 13.7644 15.8233 13.7644Z" fill="#F4F7F9"/>
|
||||
<path d="M10.2361 7.52556C10.0572 7.52556 9.88056 7.44444 9.765 7.29056C9.21445 6.55667 8.63833 6.16333 8.05222 6.12167C7.28 6.06889 6.65056 6.64778 6.53333 6.765C6.30333 6.995 5.93111 6.995 5.70167 6.765C5.47167 6.535 5.47167 6.16278 5.70167 5.93333C5.95556 5.67944 6.88444 4.85778 8.13556 4.94833C9.07722 5.015 9.94167 5.56556 10.7061 6.58444C10.9011 6.84444 10.8483 7.21333 10.5889 7.40778C10.4822 7.48722 10.3583 7.52556 10.2361 7.52556Z" fill="#65471B"/>
|
||||
<path d="M20.2356 22C19.9106 22 19.6472 21.7367 19.6472 21.4117V10.2356C19.6472 9.91056 19.9106 9.64722 20.2356 9.64722C20.5606 9.64722 20.8239 9.91056 20.8239 10.2356V21.4122C20.8233 21.7367 20.5606 22 20.2356 22Z" fill="#292F33"/>
|
||||
<path d="M20.2356 9.05889C20.2056 9.05889 20.1772 9.06556 20.1478 9.06778C19.7411 7.05222 17.9572 5.52944 15.8233 5.52944C13.3906 5.52944 11.4117 7.50833 11.4117 9.94111C11.4117 12.3739 13.3906 14.3528 15.8233 14.3528C17.75 14.3528 19.3878 13.1094 19.9878 11.3844C20.0678 11.4017 20.15 11.4117 20.235 11.4117C20.885 11.4117 21.4117 10.885 21.4117 10.235C21.4117 9.58556 20.885 9.05889 20.2356 9.05889V9.05889ZM15.8233 13.1767C14.0394 13.1767 12.5883 11.7256 12.5883 9.94111C12.5883 8.15667 14.04 6.70556 15.8233 6.70556C17.6072 6.70556 19.0589 8.15667 19.0589 9.94111C19.0589 11.7256 17.6072 13.1767 15.8233 13.1767Z" fill="#67757F"/>
|
||||
<path d="M13.7639 17.8822C13.6756 17.8822 13.5856 17.8622 13.5011 17.82C12.4906 17.3144 11.5083 17.3144 10.4978 17.82C10.2067 17.965 9.85333 17.8478 9.70833 17.5567C9.56278 17.2661 9.68055 16.9128 9.97167 16.7672C11.3167 16.095 12.6811 16.095 14.0272 16.7672C14.3178 16.9128 14.4356 17.2661 14.2906 17.5567C14.1878 17.7633 13.98 17.8822 13.7639 17.8822V17.8822Z" fill="#65471B"/>
|
||||
<path d="M17.5828 7.22833C17.0761 6.89889 16.4728 6.70611 15.8233 6.70611C14.0367 6.70611 12.5878 8.15444 12.5878 9.94167C12.5878 10.5911 12.7811 11.1944 13.11 11.7011L17.5828 7.22833ZM14.4428 12.8639C14.8622 13.0622 15.3289 13.1767 15.8233 13.1767C17.61 13.1767 19.0589 11.7283 19.0589 9.94111C19.0589 9.44667 18.9444 8.97944 18.7461 8.56056L14.4428 12.8639Z" fill="#BDDDF4"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect width="20" height="20" fill="white" transform="translate(2 2)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g clip-path="url(#a)">
|
||||
<path d="M22 12c0 5.523-4.477 10-10 10-5.522 0-10-4.477-10-10C2 6.478 6.478 2 12 2c5.523 0 10 4.478 10 10z" fill="#FFCB4C"/>
|
||||
<path d="M8.764 12.231c.813 0 1.471-.922 1.471-2.059s-.658-2.059-1.47-2.059c-.813 0-1.471.922-1.471 2.06 0 1.136.658 2.058 1.47 2.058z" fill="#65471B"/>
|
||||
<path d="M15.823 13.764a3.823 3.823 0 1 0 0-7.646 3.823 3.823 0 0 0 0 7.646z" fill="#F4F7F9"/>
|
||||
<path d="M10.236 7.526a.588.588 0 0 1-.471-.235c-.55-.734-1.127-1.128-1.713-1.17-.772-.052-1.401.527-1.519.644a.587.587 0 1 1-.831-.832c.254-.254 1.182-1.075 2.434-.985.941.067 1.806.618 2.57 1.636a.588.588 0 0 1-.47.942z" fill="#65471B"/>
|
||||
<path d="M20.236 22a.588.588 0 0 1-.589-.588V10.236a.588.588 0 1 1 1.177 0v11.176a.588.588 0 0 1-.588.588z" fill="#292F33"/>
|
||||
<path d="M20.236 9.059c-.03 0-.059.007-.088.009a4.42 4.42 0 0 0-4.325-3.539 4.416 4.416 0 0 0-4.411 4.412 4.416 4.416 0 0 0 4.411 4.412 4.416 4.416 0 0 0 4.165-2.969 1.177 1.177 0 1 0 .248-2.326zm-4.413 4.118a3.239 3.239 0 0 1-3.235-3.236 3.239 3.239 0 0 1 3.235-3.235A3.24 3.24 0 0 1 19.06 9.94a3.24 3.24 0 0 1-3.236 3.236z" fill="#67757F"/>
|
||||
<path d="M13.764 17.882a.587.587 0 0 1-.263-.062c-1.01-.506-1.993-.506-3.003 0a.588.588 0 1 1-.526-1.053c1.345-.672 2.71-.672 4.055 0a.589.589 0 0 1-.263 1.115z" fill="#65471B"/>
|
||||
<path d="M17.583 7.228a3.236 3.236 0 0 0-4.473 4.473l4.473-4.473zm-3.14 5.636c.42.198.886.313 1.38.313A3.236 3.236 0 0 0 19.06 9.94c0-.494-.115-.962-.313-1.38l-4.303 4.303z" fill="#BDDDF4"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="a">
|
||||
<path fill="#fff" transform="translate(2 2)" d="M0 0h20v20H0z"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 1.8 KiB |
|
|
@ -1,8 +1,6 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 20.8989C17.216 20.8989 21.4444 16.6705 21.4444 11.4544C21.4444 6.23842 17.216 2.01 12 2.01C6.78398 2.01 2.55556 6.23842 2.55556 11.4544C2.55556 16.6705 6.78398 20.8989 12 20.8989Z" fill="#FFCB4C"/>
|
||||
<path d="M10.0689 13.6867C9.98832 13.6222 9.92555 13.5344 9.89555 13.4289C9.8211 13.1733 9.96777 12.9189 10.2233 12.8617C12.7389 12.2944 14.4328 13.6189 14.5044 13.6756C14.7178 13.8456 14.7594 14.145 14.6005 14.345C14.4417 14.5439 14.1405 14.5678 13.9278 14.3989C13.8667 14.3522 12.5261 13.3306 10.4933 13.7889C10.3411 13.8228 10.1855 13.78 10.0689 13.6867V13.6867Z" fill="#65471B"/>
|
||||
<path d="M9.28833 9.68333C9.94033 9.68333 10.4689 9.02271 10.4689 8.20778C10.4689 7.39285 9.94033 6.73222 9.28833 6.73222C8.63633 6.73222 8.10777 7.39285 8.10777 8.20778C8.10777 9.02271 8.63633 9.68333 9.28833 9.68333Z" fill="#65471B"/>
|
||||
<path d="M15.5417 10.2733C16.1937 10.2733 16.7222 9.6127 16.7222 8.79778C16.7222 7.98285 16.1937 7.32222 15.5417 7.32222C14.8897 7.32222 14.3611 7.98285 14.3611 8.79778C14.3611 9.6127 14.8897 10.2733 15.5417 10.2733Z" fill="#65471B"/>
|
||||
<path d="M11.5978 21.5272C11.5978 21.5272 12.3006 21.2989 12.3917 20.7761C12.4878 20.2361 12.045 20.1278 12.045 20.1278C12.045 20.1278 12.6233 20.0122 12.6961 19.3633C12.7644 18.7517 12.2178 18.6061 12.2178 18.6061C12.2178 18.6061 12.7567 18.3839 12.7822 17.7511C12.8033 17.2183 12.2294 16.9578 12.2294 16.9578C12.2294 16.9578 15.0283 16.2794 15.3161 16.2128C15.6028 16.1461 16.0494 15.8711 15.91 15.2717C15.7717 14.6717 15.2411 14.6506 14.9672 14.7144C14.6928 14.7783 11.2206 15.5844 10.0228 15.8633L9.22333 16.0489C8.92333 16.1194 8.78722 15.9878 8.99889 15.7644C9.28111 15.4667 9.46166 15.1372 9.52444 14.5906C9.59055 14.0156 9.39555 13.3056 9.28389 13.03C9.07611 12.5183 8.72555 12.1139 8.32055 11.975C7.68889 11.7583 7.24 12.1533 7.46389 12.8422C7.79944 13.8722 7.57944 14.7172 7.00111 15.2272C5.64055 16.4256 5.00778 17.28 5.42889 19.1011C5.88889 21.0872 7.86055 22.3656 9.84666 21.9056L11.5978 21.5272Z" fill="#F19020"/>
|
||||
<path d="M7.16444 5.52833C7.07333 5.47944 6.99611 5.40389 6.94722 5.30667C6.82722 5.06889 6.925 4.79167 7.16555 4.68889C9.53555 3.67167 11.4428 4.665 11.5228 4.70778C11.7633 4.83611 11.8606 5.12278 11.74 5.34889C11.62 5.57389 11.3289 5.65222 11.0883 5.52555C11.02 5.49055 9.515 4.73 7.60055 5.55167C7.45777 5.61222 7.29666 5.59889 7.16444 5.52833V5.52833ZM13.9061 7.61167C13.8194 7.55722 13.7472 7.47667 13.705 7.37611C13.6011 7.13055 13.7178 6.86111 13.965 6.77389C16.3989 5.92055 18.2344 7.04055 18.3111 7.08889C18.5417 7.23333 18.6194 7.52611 18.4844 7.74333C18.35 7.96 18.0533 8.01833 17.8228 7.87555C17.7561 7.83555 16.3078 6.975 14.3411 7.665C14.1933 7.71555 14.0339 7.69055 13.9061 7.61167V7.61167Z" fill="#65471B"/>
|
||||
<path d="M12 20.899a9.444 9.444 0 0 0 9.444-9.445 9.444 9.444 0 0 0-18.888 0A9.444 9.444 0 0 0 12 20.9z" fill="#FFCB4C"/>
|
||||
<path d="M10.069 13.687a.508.508 0 0 1-.173-.258.444.444 0 0 1 .327-.567c2.516-.568 4.21.757 4.281.814.214.17.255.469.097.669-.16.199-.46.223-.673.054-.061-.047-1.402-1.068-3.435-.61a.506.506 0 0 1-.424-.102zM9.288 9.683c.652 0 1.18-.66 1.18-1.475 0-.815-.528-1.476-1.18-1.476-.652 0-1.18.66-1.18 1.476 0 .815.528 1.475 1.18 1.475zM15.542 10.273c.652 0 1.18-.66 1.18-1.475 0-.815-.528-1.476-1.18-1.476-.652 0-1.18.66-1.18 1.476 0 .815.528 1.475 1.18 1.475z" fill="#65471B"/>
|
||||
<path d="M11.598 21.527s.703-.228.794-.75c.096-.54-.347-.65-.347-.65s.578-.115.651-.764c.068-.611-.478-.757-.478-.757s.539-.222.564-.855c.021-.533-.553-.793-.553-.793s2.8-.679 3.087-.745c.287-.067.733-.342.594-.941-.138-.6-.669-.621-.943-.558-.274.064-3.746.87-4.944 1.15l-.8.185c-.3.07-.436-.061-.224-.285.282-.297.463-.627.525-1.173.067-.575-.128-1.285-.24-1.561-.208-.512-.558-.916-.963-1.055-.632-.217-1.081.178-.857.867.335 1.03.115 1.875-.463 2.385-1.36 1.199-1.993 2.053-1.572 3.874.46 1.986 2.432 3.265 4.418 2.805l1.75-.379z" fill="#F19020"/>
|
||||
<path d="M7.164 5.528a.514.514 0 0 1-.217-.221.444.444 0 0 1 .219-.618c2.37-1.017 4.277-.024 4.357.019.24.128.338.415.217.64-.12.226-.411.304-.652.178-.068-.035-1.573-.796-3.487.026a.508.508 0 0 1-.437-.024zm6.742 2.084a.513.513 0 0 1-.201-.236.445.445 0 0 1 .26-.602c2.434-.853 4.27.267 4.346.315.23.144.308.437.173.654-.134.217-.43.275-.661.133-.067-.04-1.515-.901-3.482-.211a.514.514 0 0 1-.435-.053z" fill="#65471B"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 1.7 KiB |
|
|
@ -1,4 +1,4 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M21.42 12.0467C21.42 12.3261 21.3533 12.5883 21.2417 12.8267C20.4967 15.23 17.0089 15.0544 12.0478 15.1717C11.2183 15.1911 11.6928 16.1706 11.9839 18.3206C12.1733 19.7189 11.2717 21.8661 9.75611 21.8661C7.25722 21.8661 9.66111 19.895 7.45167 15.0206C6.27111 12.4161 3.63222 13.875 3.63222 11.2589V5.30444C3.63222 4.28611 3.73222 3.30722 5.16444 3.14611C6.55278 2.98944 6.24056 2 8.24333 2H18.2678C19.2889 2 20.1194 2.83111 20.1194 3.85222C20.1194 4.27556 19.9711 4.66111 19.7317 4.97333C20.2983 5.29056 20.6872 5.88944 20.6872 6.58389C20.6872 7.00611 20.5394 7.39167 20.3006 7.70333C20.8689 8.02 21.2589 8.61944 21.2589 9.315C21.2589 9.82 21.0544 10.2778 20.725 10.6128C21.1456 10.9522 21.42 11.4656 21.42 12.0467V12.0467Z" fill="#FFDB5E"/>
|
||||
<path d="M14.7889 10.195H19.5689C20.2189 10.195 20.8289 10.5428 21.1611 11.1022C21.2978 11.3328 21.2217 11.6311 20.9906 11.7683C20.76 11.9056 20.4617 11.8283 20.3244 11.5978C20.1672 11.3317 19.8767 11.1672 19.5683 11.1672H14.6739C14.1889 11.1672 13.7944 11.5617 13.7944 12.0467C13.7944 12.5317 14.1889 12.9261 14.6739 12.9261H17.9444C18.2128 12.9261 18.4306 13.1439 18.4306 13.4122C18.4306 13.6806 18.2128 13.8983 17.9444 13.8983H14.6733C13.6522 13.8983 12.8217 13.0678 12.8217 12.0467C12.8217 11.4772 13.0856 10.9733 13.4911 10.6333C13.1494 10.2972 12.9367 9.83055 12.9367 9.315C12.9367 8.74389 13.2022 8.23833 13.61 7.89889C13.2706 7.56333 13.06 7.09833 13.06 6.58389C13.06 5.96167 13.3706 5.41278 13.8428 5.07667C13.5517 4.74944 13.3694 4.32333 13.3694 3.85222C13.3694 2.83111 14.2 2.00056 15.2211 2.00056H18.2678C18.9178 2.00056 19.5283 2.34778 19.8606 2.90722C19.9978 3.13778 19.9217 3.43611 19.6911 3.57333C19.46 3.70944 19.1617 3.63444 19.025 3.40389C18.8667 3.13778 18.5761 2.97278 18.2678 2.97278H15.2211C14.7361 2.97278 14.3417 3.36722 14.3417 3.85222C14.3417 4.33722 14.7361 4.73167 15.2211 4.73167H18.8356C19.4856 4.73167 20.0967 5.07944 20.4283 5.63889C20.5656 5.87 20.4894 6.16833 20.2589 6.305C20.0261 6.44444 19.7289 6.36611 19.5928 6.13555C19.4322 5.865 19.1489 5.70389 18.8356 5.70389H14.9117C14.4267 5.70389 14.0322 6.09889 14.0322 6.58389C14.0322 7.06889 14.4267 7.46333 14.9117 7.46333H19.4067C20.0567 7.46333 20.6672 7.81055 20.9994 8.37C21.1367 8.60055 21.0606 8.89889 20.83 9.03611C20.5983 9.17278 20.3006 9.09722 20.1639 8.86667C20.0033 8.59667 19.72 8.43555 19.4067 8.43555H14.7889C14.3039 8.43555 13.9094 8.83 13.9094 9.315C13.9094 9.8 14.3033 10.195 14.7889 10.195V10.195Z" fill="#EE9547"/>
|
||||
<path d="M21.42 12.047c0 .28-.067.541-.178.78-.745 2.403-4.233 2.227-9.194 2.345-.83.02-.355.999-.064 3.149.19 1.398-.712 3.545-2.228 3.545-2.499 0-.095-1.971-2.304-6.845-1.18-2.605-3.82-1.146-3.82-3.762V5.304c0-1.018.1-1.997 1.532-2.158C6.553 2.99 6.241 2 8.244 2h10.024c1.02 0 1.851.831 1.851 1.852 0 .424-.148.81-.387 1.121.566.318.955.916.955 1.61 0 .423-.148.809-.386 1.12.568.317.958.916.958 1.612 0 .505-.205.963-.534 1.298.42.34.695.853.695 1.434z" fill="#FFDB5E"/>
|
||||
<path d="M14.789 10.195h4.78c.65 0 1.26.348 1.592.907a.486.486 0 0 1-.837.496.882.882 0 0 0-.756-.43h-4.894a.88.88 0 0 0 0 1.758h3.27a.486.486 0 0 1 0 .972h-3.27a1.854 1.854 0 0 1-1.852-1.851c0-.57.264-1.074.67-1.414a1.845 1.845 0 0 1-.555-1.318c0-.571.265-1.077.673-1.416a1.843 1.843 0 0 1 .233-2.822 1.837 1.837 0 0 1-.474-1.225c0-1.02.831-1.851 1.852-1.851h3.047c.65 0 1.26.347 1.593.906a.486.486 0 0 1-.836.497.886.886 0 0 0-.757-.431H15.22a.88.88 0 0 0 0 1.759h3.615c.65 0 1.26.347 1.592.907a.486.486 0 1 1-.835.497.873.873 0 0 0-.757-.432h-3.924a.88.88 0 0 0 0 1.76h4.495c.65 0 1.26.347 1.592.906a.486.486 0 0 1-.835.497.874.874 0 0 0-.757-.431h-4.618a.88.88 0 0 0 0 1.759z" fill="#EE9547"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 1.3 KiB |
|
|
@ -1,4 +1,4 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M21.42 11.9533C21.42 11.6739 21.3533 11.4117 21.2417 11.1733C20.4967 8.77 17.0089 8.94555 12.0478 8.82833C11.2183 8.80889 11.6928 7.82944 11.9839 5.67944C12.1733 4.28111 11.2717 2.13389 9.75611 2.13389C7.25722 2.13389 9.66111 4.105 7.45167 8.97944C6.27111 11.5839 3.63222 10.125 3.63222 12.7411V18.6961C3.63222 19.7144 3.73222 20.6933 5.16444 20.8544C6.55278 21.0106 6.24055 22 8.24333 22H18.2678C19.2889 22 20.1194 21.1689 20.1194 20.1478C20.1194 19.7244 19.9711 19.3389 19.7317 19.0267C20.2983 18.7094 20.6872 18.1106 20.6872 17.4161C20.6872 16.9939 20.5394 16.6083 20.3006 16.2967C20.8689 15.98 21.2589 15.3806 21.2589 14.685C21.2589 14.18 21.0544 13.7222 20.725 13.3872C21.1456 13.0478 21.42 12.5344 21.42 11.9533V11.9533Z" fill="#FFDB5E"/>
|
||||
<path d="M14.7889 13.805H19.5689C20.2189 13.805 20.8289 13.4572 21.1611 12.8978C21.2978 12.6672 21.2217 12.3689 20.9906 12.2317C20.76 12.0944 20.4617 12.1717 20.3244 12.4022C20.1672 12.6683 19.8767 12.8328 19.5683 12.8328H14.6739C14.1889 12.8328 13.7944 12.4383 13.7944 11.9533C13.7944 11.4683 14.1889 11.0739 14.6739 11.0739H17.9444C18.2128 11.0739 18.4306 10.8561 18.4306 10.5878C18.4306 10.3194 18.2128 10.1017 17.9444 10.1017H14.6733C13.6522 10.1017 12.8217 10.9322 12.8217 11.9533C12.8217 12.5228 13.0856 13.0267 13.4911 13.3667C13.1494 13.7028 12.9367 14.1694 12.9367 14.685C12.9367 15.2561 13.2022 15.7617 13.61 16.1011C13.2706 16.4367 13.06 16.9017 13.06 17.4161C13.06 18.0383 13.3706 18.5872 13.8428 18.9233C13.5517 19.2506 13.3694 19.6767 13.3694 20.1478C13.3694 21.1689 14.2 21.9994 15.2211 21.9994H18.2678C18.9178 21.9994 19.5283 21.6522 19.8606 21.0928C19.9978 20.8622 19.9217 20.5639 19.6911 20.4267C19.46 20.2906 19.1617 20.3656 19.025 20.5961C18.8667 20.8622 18.5761 21.0272 18.2678 21.0272H15.2211C14.7361 21.0272 14.3417 20.6328 14.3417 20.1478C14.3417 19.6628 14.7361 19.2683 15.2211 19.2683H18.8356C19.4856 19.2683 20.0967 18.9206 20.4283 18.3611C20.5656 18.13 20.4894 17.8317 20.2589 17.695C20.0261 17.5556 19.7289 17.6339 19.5928 17.8644C19.4322 18.135 19.1489 18.2961 18.8356 18.2961H14.9117C14.4267 18.2961 14.0322 17.9011 14.0322 17.4161C14.0322 16.9311 14.4267 16.5367 14.9117 16.5367H19.4067C20.0567 16.5367 20.6672 16.1894 20.9994 15.63C21.1367 15.3994 21.0606 15.1011 20.83 14.9639C20.5983 14.8272 20.3006 14.9028 20.1639 15.1333C20.0033 15.4033 19.72 15.5644 19.4067 15.5644H14.7889C14.3039 15.5644 13.9094 15.17 13.9094 14.685C13.9094 14.2 14.3033 13.805 14.7889 13.805V13.805Z" fill="#EE9547"/>
|
||||
<path d="M21.42 11.953c0-.28-.067-.541-.178-.78-.745-2.403-4.233-2.227-9.194-2.345-.83-.02-.355-.999-.064-3.149.19-1.398-.712-3.545-2.228-3.545-2.499 0-.095 1.971-2.304 6.845-1.18 2.605-3.82 1.146-3.82 3.762v5.955c0 1.018.1 1.997 1.532 2.158C6.553 21.011 6.241 22 8.244 22h10.024a1.854 1.854 0 0 0 1.851-1.852c0-.424-.148-.81-.387-1.121.566-.318.955-.916.955-1.61 0-.423-.148-.809-.386-1.12.568-.317.958-.916.958-1.612 0-.505-.205-.963-.534-1.298.42-.34.695-.853.695-1.434z" fill="#FFDB5E"/>
|
||||
<path d="M14.789 13.805h4.78c.65 0 1.26-.348 1.592-.907a.486.486 0 0 0-.837-.496.882.882 0 0 1-.756.43h-4.894a.88.88 0 0 1 0-1.758h3.27a.486.486 0 0 0 0-.972h-3.27c-1.022 0-1.852.83-1.852 1.851 0 .57.264 1.074.67 1.414a1.844 1.844 0 0 0-.555 1.318c0 .571.265 1.077.673 1.416a1.844 1.844 0 0 0 .233 2.822 1.837 1.837 0 0 0-.474 1.225c0 1.02.831 1.851 1.852 1.851h3.047c.65 0 1.26-.347 1.593-.906a.486.486 0 0 0-.836-.497.886.886 0 0 1-.757.431H15.22a.88.88 0 0 1 0-1.759h3.615a1.86 1.86 0 0 0 1.592-.907.486.486 0 1 0-.835-.497.873.873 0 0 1-.757.432h-3.924a.88.88 0 0 1 0-1.76h4.495c.65 0 1.26-.347 1.592-.906a.486.486 0 0 0-.835-.497.874.874 0 0 1-.757.431h-4.618a.88.88 0 0 1 0-1.759z" fill="#EE9547"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 1.3 KiB |
|
|
@ -17,10 +17,10 @@
|
|||
padding: 1em 1em 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.forem-background {
|
||||
@media (max-width: $breakpoint-m) {
|
||||
display: none;
|
||||
}
|
||||
.forem-background {
|
||||
@media (max-width: $breakpoint-l) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -70,6 +70,9 @@ class RegistrationsController < Devise::RegistrationsController
|
|||
resource.registered_at = Time.current
|
||||
resource.build_setting(editor_version: "v2")
|
||||
resource.remote_profile_image_url = Users::ProfileImageGenerator.call if resource.remote_profile_image_url.blank?
|
||||
if FeatureFlag.enabled?(:creator_onboarding)
|
||||
resource.password_confirmation = resource.password
|
||||
end
|
||||
check_allowed_email(resource) if resource.email.present?
|
||||
resource.save if resource.email.present?
|
||||
end
|
||||
|
|
|
|||
104
app/javascript/packs/foremCreatorSignup.js
Normal file
104
app/javascript/packs/foremCreatorSignup.js
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
function setDefaultUsername(event) {
|
||||
if (
|
||||
document
|
||||
.getElementsByClassName('js-creator-signup-username-row')[0]
|
||||
.classList.contains('hidden')
|
||||
) {
|
||||
const name = event.target.value;
|
||||
// It's the first user and so we can assume that this username is not taken.
|
||||
const usernameHint = createUsernameHint(name);
|
||||
setUsernameHint(usernameHint);
|
||||
setUsernameField(usernameHint);
|
||||
showHintRow();
|
||||
}
|
||||
}
|
||||
|
||||
function createUsernameHint(name) {
|
||||
return name
|
||||
.toLowerCase()
|
||||
.replace(/[^a-zA-Z0-9]/g, '_')
|
||||
.substr(0, 30);
|
||||
}
|
||||
|
||||
function showHintRow() {
|
||||
const hintRow = document.getElementsByClassName(
|
||||
'js-creator-signup-username-hint-row',
|
||||
)[0];
|
||||
hintRow.classList.remove('hidden');
|
||||
}
|
||||
|
||||
function setUsernameHint(usernameHint) {
|
||||
const usernameHintDisplay = document.getElementsByClassName(
|
||||
'js-creator-signup-username-hint',
|
||||
)[0];
|
||||
usernameHintDisplay.innerHTML = usernameHint;
|
||||
}
|
||||
|
||||
function setUsernameField(usernameHint) {
|
||||
const usernameField = document.getElementsByClassName(
|
||||
'js-creator-signup-username',
|
||||
)[0];
|
||||
usernameField.value = usernameHint;
|
||||
}
|
||||
|
||||
function showUsernameField() {
|
||||
const usernameRow = document.getElementsByClassName(
|
||||
'js-creator-signup-username-row',
|
||||
)[0];
|
||||
usernameRow.classList.remove('hidden');
|
||||
focusUsernameInput(usernameRow);
|
||||
hideHintRow();
|
||||
}
|
||||
|
||||
function focusUsernameInput(usernameRow) {
|
||||
// A timer with a count of 0 will run when the thread becomes idle
|
||||
window.setTimeout(() => {
|
||||
usernameRow.getElementsByTagName('input')[0].focus();
|
||||
}, 0);
|
||||
}
|
||||
|
||||
function hideHintRow() {
|
||||
const hintRow = document.getElementsByClassName(
|
||||
'js-creator-signup-username-hint-row',
|
||||
)[0];
|
||||
hintRow.classList.add('hidden');
|
||||
}
|
||||
|
||||
function togglePasswordMask(event) {
|
||||
event.preventDefault();
|
||||
visible = !visible;
|
||||
toggleAriaPressed(visible);
|
||||
togglePasswordType(visible);
|
||||
toggleEyeIcons(visible);
|
||||
}
|
||||
|
||||
function toggleAriaPressed(visible) {
|
||||
visibility.setAttribute('aria-pressed', visible);
|
||||
}
|
||||
|
||||
function togglePasswordType(visible) {
|
||||
const passwordType = visible ? 'text' : 'password';
|
||||
passwordField.type = passwordType;
|
||||
}
|
||||
|
||||
function toggleEyeIcons(visible) {
|
||||
eyeOffIcon.classList.toggle('hidden', !visible);
|
||||
eyeIcon.classList.toggle('hidden', visible);
|
||||
}
|
||||
|
||||
let visible = false;
|
||||
const eyeIcon = document.getElementsByClassName('js-eye')[0];
|
||||
const eyeOffIcon = document.getElementsByClassName('js-eye-off')[0];
|
||||
const passwordField = document.getElementsByClassName('js-password')[0];
|
||||
const visibility = document.getElementsByClassName(
|
||||
'js-creator-password-visibility',
|
||||
)[0];
|
||||
visibility.addEventListener('click', togglePasswordMask);
|
||||
|
||||
const name = document.getElementsByClassName('js-creator-signup-name')[0];
|
||||
name.addEventListener('input', setDefaultUsername);
|
||||
|
||||
const editUsername = document.getElementsByClassName(
|
||||
'js-creator-edit-username',
|
||||
)[0];
|
||||
editUsername.addEventListener('click', showUsernameField);
|
||||
|
|
@ -59,7 +59,7 @@ class Tweet < ApplicationRecord
|
|||
status = if status.retweeted_status.present?
|
||||
TwitterClient::Client.status(status.retweeted_status.id.to_s)
|
||||
else
|
||||
status # rubocop:disable Style/RedundantSelfAssignmentBranch
|
||||
status
|
||||
end
|
||||
|
||||
params = { twitter_id_code: status.id.to_s }
|
||||
|
|
|
|||
|
|
@ -1 +1,5 @@
|
|||
<% if forem_creator_flow_enabled? && waiting_on_first_user? %>
|
||||
<%= render "shared/authentication/forem_creator_signup" %>
|
||||
<% else %>
|
||||
<%= render "shared/authentication/email_registration_form" %>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<% elsif forem_creator_flow_enabled? %>
|
||||
<%= render "shared/authentication/forem_creator_signup" %>
|
||||
<% elsif waiting_on_first_user? %>
|
||||
<%# TODO: Delete this view once forem creator onboarding is shipped %>
|
||||
<%# TODO: [@ridhwana]: Delete this view once forem creator onboarding is shipped %>
|
||||
<%= render "shared/authentication/initial_account_wizard" %>
|
||||
<% else %>
|
||||
<%= render "devise/shared/authorization_error" %>
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@
|
|||
<%= f.hidden_field :commentable_type, value: json_data["comment"]["commentable"]["class"]["name"] %>
|
||||
|
||||
<%= f.hidden_field :parent_id, value: json_data["comment"]["id"] %>
|
||||
<%= f.text_area :body_markdown, id: "comment-textarea-for-#{json_data['comment']['id']}", class: "crayons-textfield mb-2 resize-y", placeholder: "Reply...", 'aria-label': "Reply to a comment...", onfocus: "handleFocus(event)" %>
|
||||
<%= f.text_area :body_markdown, id: "comment-textarea-for-#{json_data['comment']['id']}", class: "crayons-textfield mb-2 resize-y", placeholder: "Reply...", "aria-label": "Reply to a comment...", onfocus: "handleFocus(event)" %>
|
||||
<div class="actions">
|
||||
<button type="submit" class="crayons-btn comment-action-button" onclick="validateField(event)">Submit</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,9 @@
|
|||
<%= flash[:notice] %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<%= form_for(@user, as: :user, data: { testid: "registration-form" }, url: registration_path(:user)) do |f| %>
|
||||
|
||||
<% if defined?(resource) && resource&.errors&.any? %>
|
||||
<div class="crayons-card crayons-card--secondary crayons-notice crayons-notice--danger" role="alert" data-testid="signup-errors">
|
||||
<div class="crayons-card__header">
|
||||
|
|
@ -20,15 +22,10 @@
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<% elsif forem_creator_flow_enabled? %>
|
||||
<%# TODO: Extract this into its own form %>
|
||||
<div class="align-center">
|
||||
<p class="pb-4 fw-bold">Almost there!</p>
|
||||
<p class="registration__description">Let's create an admin account for your community.</p>
|
||||
</div>
|
||||
<% else %>
|
||||
<p class="pb-4 fw-bold">Create your account</p>
|
||||
<% end %>
|
||||
|
||||
<% if Settings::Authentication.display_email_domain_allow_list_publicly &&
|
||||
Settings::Authentication.allowed_registration_email_domains.any? %>
|
||||
<div class="crayons-notice crayons-notice--info" aria-live="polite">
|
||||
|
|
@ -46,6 +43,7 @@
|
|||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div class="crayons-field mt-3">
|
||||
<%= f.label :profile_image, class: "crayons-field__label" %>
|
||||
<%= f.file_field :profile_image, accept: "image/*", class: "crayons-card crayons-card--secondary p-3 flex items-center flex-1 w-100" %>
|
||||
|
|
@ -108,15 +106,8 @@
|
|||
</div>
|
||||
<% end %>
|
||||
|
||||
<% if forem_creator_flow_enabled? %>
|
||||
<%# TODO: Extract this into its own form %>
|
||||
<div class="flex flex-col pt-3">
|
||||
<%= f.submit "Create admin account", class: "crayons-btn" %>
|
||||
</div>
|
||||
<% else %>
|
||||
<div class="actions pt-3">
|
||||
<%= f.submit "Sign up", class: "crayons-btn" %>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="actions pt-3">
|
||||
<%= f.submit "Sign up", class: "crayons-btn" %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,97 @@
|
|||
<div class="mx-auto mt-8 mb-10 p-4 fs-2xl lh-base align-center" style="width:96%;max-width:1300px;">
|
||||
<%= render "shared/authentication/email_registration_form" %>
|
||||
</div>
|
||||
<%= javascript_packs_with_chunks_tag "foremCreatorSignup", defer: true %>
|
||||
<main id="main-content">
|
||||
<div class="mx-auto mt-8 mb-10 p-4 fs-2xl lh-base align-center" style="width:96%;max-width:1300px;">
|
||||
<div id="sign-in-password-form" class="mt-8 mb-6 crayons-card p-7 align-left mx-auto" style="max-width:580px;">
|
||||
<% if flash[:notice] %>
|
||||
<div class="crayons-notice crayons-notice--danger mb-6" role="alert">
|
||||
<%= flash[:notice] %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% any_errors = local_assigns[:resource]&.errors&.any? %>
|
||||
|
||||
<%= form_for(@user, as: :user, data: { testid: "creator-signup-form" }, url: registration_path(:user)) do |f| %>
|
||||
<% if any_errors %>
|
||||
<div class="crayons-card crayons-card--secondary crayons-notice crayons-notice--danger my-8" role="alert" data-testid="signup-errors">
|
||||
<div class="crayons-card__header">
|
||||
<h3 class="crayons-card__headline">
|
||||
Whoops, we found <%= pluralize(resource.errors.size, "problem") %>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="crayons-card__body">
|
||||
<ul>
|
||||
<% resource.errors.full_messages.each do |message| %>
|
||||
<li><%= message %></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div class="align-center">
|
||||
<p class="pb-4 fs-3xl fw-bold lh-tight">Let's start your Forem journey!</p>
|
||||
<p class="color-base-70 fs-xl lh-tight">Create your admin account first.</p>
|
||||
<p class="color-base-70 fs-xl lh-tight">Then we'll walk you through your Forem setup.</p>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field mt-6">
|
||||
<%= f.label :name, "Name", for: "name", class: "crayons-field__label" %>
|
||||
<%= f.text_field :name, id: "name", placeholder: "John Doe", class: "crayons-textfield js-creator-signup-name", required: true %>
|
||||
|
||||
<div class="js-creator-signup-username-hint-row hidden">
|
||||
<div class="fs-xs color-base-60 flex">
|
||||
<span>Your username will be </span>
|
||||
<button aria-label="Edit username" class="cursor-pointer border-none bg-transparent p-0 js-creator-edit-username flex color-base-90 " role="button">
|
||||
<span class="js-creator-signup-username-hint"></span>
|
||||
<%= inline_svg_tag("pencil.svg", class: "cursor-pointer crayons-icon opacity-75 ml-1", aria_hidden: true, title: "Edit username") %>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field mt-6 <%= "hidden" unless any_errors %> js-creator-signup-username-row">
|
||||
<%= f.label :username, "Username", for: "username", class: "crayons-field__label" %>
|
||||
<%= f.text_field :username, pattern: "[A-Za-z0-9_]+", maxlength: "30", title: "A username can only contain letters, numbers and underscores. The maximum username length can be 30 characters.", id: "username", class: "js-creator-signup-username crayons-textfield",
|
||||
aria: { describedby: "username-helper-text" } %>
|
||||
<p id="username-helper-text" class="fs-xs color-base-60 mt-1">It can only contain letters, numbers and underscores. The maximum username length can be 30 characters.</p>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field mt-6">
|
||||
<%= f.label :email, "Email", for: "email", class: "crayons-field__label" %>
|
||||
<%= f.email_field :email, placeholder: "john@example.com", autocomplete: "email", id: "email", class: "crayons-textfield", required: true %>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field mt-6">
|
||||
<%= f.label :password, "Password", class: "crayons-field__label" %>
|
||||
<div class="relative">
|
||||
<%= f.password_field :password, minlength: "8", class: "crayons-textfield js-password", placeholder: "••••••••", required: true, aria: { describedby: "password-helper-text" } %>
|
||||
<button class="crayons-btn crayons-btn--ghost crayons-btn--s js-creator-password-visibility h-100 absolute z-elevate right-0" aria-label="Show password" aria-pressed="false">
|
||||
<%= inline_svg_tag("eye.svg", class: "crayons-icon js-eye", data: { testid: "mask-icon" }, aria_hidden: true, title: "Show password") %>
|
||||
<%= inline_svg_tag("eye-off.svg", class: "crayons-icon hidden js-eye-off", data: { testid: "unmask-icon" }, aria_hidden: true, title: "Hide password") %>
|
||||
</button>
|
||||
</div>
|
||||
<p id="password-helper-text" class="fs-xs color-base-60 mt-1">Minimum 8 characters</p>
|
||||
</div>
|
||||
|
||||
<% needs_owner_secret_field = ENV["FOREM_OWNER_SECRET"].present? && Settings::General.waiting_on_first_user %>
|
||||
<% if needs_owner_secret_field %>
|
||||
<% if params[:owner_secret].present? %>
|
||||
<%= f.hidden_field :owner_secret, value: params[:owner_secret] %>
|
||||
<% else %>
|
||||
<div class="crayons-field mt-6">
|
||||
<%= f.label :owner_secret, "New Forem Secret", class: "crayons-field__label" %>
|
||||
<%= f.password_field :owner_secret, class: "crayons-textfield", required: needs_owner_secret_field, placeholder: "As provided by your Forem host" %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<div class="flex flex-col pt-6">
|
||||
<%= f.submit "Create my account", class: "crayons-btn" %>
|
||||
</div>
|
||||
|
||||
<%= inline_svg_tag("forem-background.svg", aria_hidden: true, class: "forem-background absolute bottom-0 right-0") %>
|
||||
<% end %>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,97 @@
|
|||
describe('Creator Signup Page', () => {
|
||||
beforeEach(() => {
|
||||
cy.testSetup();
|
||||
cy.visit('/enter?state=new-user');
|
||||
});
|
||||
|
||||
it('should display a welcome message', () => {
|
||||
cy.findByText("Let's start your Forem journey!").should('be.visible');
|
||||
});
|
||||
|
||||
it('should display instructions', () => {
|
||||
cy.findByText('Create your admin account first.').should('be.visible');
|
||||
cy.findByText("Then we'll walk you through your Forem setup.").should(
|
||||
'be.visible',
|
||||
);
|
||||
});
|
||||
|
||||
it('should display a validated username hint that correlates to the name entered', () => {
|
||||
cy.findByTestId('creator-signup-form').as('creatorSignupForm');
|
||||
cy.get('@creatorSignupForm')
|
||||
.findByText(/^Name$/)
|
||||
.type('1 Forem creator name! Also test a maximum length string');
|
||||
|
||||
// restricts the string to 20 characters, lowercased,
|
||||
// replaces spaces and special_characters with an underscore
|
||||
cy.contains('1_forem_creator_name__also_tes');
|
||||
});
|
||||
|
||||
it('should show and focus on the username field when clicking on the edit icon', () => {
|
||||
cy.findByTestId('creator-signup-form').as('creatorSignupForm');
|
||||
cy.get('@creatorSignupForm')
|
||||
.findByText(/^Name$/)
|
||||
.type('Forem creator name');
|
||||
|
||||
cy.findByRole('button', { name: 'Edit username' }).click();
|
||||
cy.get('@creatorSignupForm')
|
||||
.findByText(/^Username/)
|
||||
.should('exist');
|
||||
|
||||
cy.findByLabelText('Username').should('have.value', 'forem_creator_name');
|
||||
});
|
||||
|
||||
it('should contain an email label and field', () => {
|
||||
cy.findByTestId('creator-signup-form').as('creatorSignupForm');
|
||||
cy.get('@creatorSignupForm')
|
||||
.findByText(/^Email/)
|
||||
.should('be.visible');
|
||||
});
|
||||
|
||||
it('should contain an password', () => {
|
||||
cy.findByTestId('creator-signup-form').as('creatorSignupForm');
|
||||
cy.get('@creatorSignupForm')
|
||||
.findByText(/^Password/)
|
||||
.should('be.visible');
|
||||
});
|
||||
|
||||
it('should toggle the password when the eye icon is clicked', () => {
|
||||
cy.findByTestId('creator-signup-form').as('creatorSignupForm');
|
||||
cy.get('@creatorSignupForm')
|
||||
.findByText(/^Password$/)
|
||||
.type('abc123456');
|
||||
|
||||
cy.findByLabelText('Password').should('have.attr', 'type', 'password');
|
||||
cy.findByTestId('mask-icon').should('be.visible');
|
||||
cy.findByTestId('unmask-icon').should('not.be.visible');
|
||||
|
||||
cy.findByRole('button', { name: 'Show password' }).click();
|
||||
cy.findByRole('button', { name: 'Show password' }).should(
|
||||
'have.attr',
|
||||
'aria-pressed',
|
||||
'true',
|
||||
);
|
||||
cy.findByLabelText('Password').should('have.attr', 'type', 'text');
|
||||
cy.findByTestId('unmask-icon').should('be.visible');
|
||||
cy.findByTestId('mask-icon').should('not.be.visible');
|
||||
});
|
||||
|
||||
it.skip("should allow sign the user in when 'Create my account' is clicked", () => {
|
||||
cy.findByTestId('creator-signup-form').as('creatorSignupForm');
|
||||
cy.get('@creatorSignupForm').findByText(/^Name/).type('Forem Creator');
|
||||
|
||||
cy.get('@creatorSignupForm')
|
||||
.findByText(/^Email/)
|
||||
.type('forem_creator@gmail.com');
|
||||
|
||||
cy.get('@creatorSignupForm')
|
||||
.findByText(/^Password/)
|
||||
.type('abc123456');
|
||||
|
||||
cy.get('@creatorSignupForm')
|
||||
.findByRole('button', { name: 'Create my account' })
|
||||
.click();
|
||||
|
||||
const { baseUrl } = Cypress.config();
|
||||
cy.url().should('equal', `${baseUrl}onboarding?referrer=${baseUrl}`);
|
||||
});
|
||||
});
|
||||
|
|
@ -140,8 +140,8 @@ RSpec.describe "Registrations", type: :request do
|
|||
|
||||
it "renders the creator onboarding form" do
|
||||
get root_path
|
||||
expect(response.body).to include("Let's create an admin account for your community.")
|
||||
expect(response.body).to include("Create admin account")
|
||||
expect(response.body).to include("Let's start your Forem journey!")
|
||||
expect(response.body).to include("Create your admin account first")
|
||||
end
|
||||
end
|
||||
end
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue